网站建设详细,电商平台网站模板,深圳市住房和建设局官网站,seo网站推广软件 快排前面发了一些关于 Shader 编程的文章#xff0c;有读者反馈太碎片化了#xff0c;希望这里能整理出来一个系列#xff0c;方便系统的学习一下 Shader 编程。
由于主流的 Shader 编程网站#xff0c;如 ShaderToy, gl-transitions 都是基于 GLSL 开发 Shader #xff0c;加…前面发了一些关于 Shader 编程的文章有读者反馈太碎片化了希望这里能整理出来一个系列方便系统的学习一下 Shader 编程。
由于主流的 Shader 编程网站如 ShaderToy, gl-transitions 都是基于 GLSL 开发 Shader 加上 MSL 和 GLSL 语法上差别不大后面系列文章将以 GLSL 为主来介绍 Shader 编程。
后面 Shader 编程将使用 VSCode ShaderToy 插件作为编程环境步骤如下 下载安装 VSCode https://code.visualstudio.com/download 安装 ShaderToy 插件 新建以 .frag 为后缀名的文件复制粘贴本文的代码 当前代码点击鼠标右键选择 ShaderToy:Show GLSL Preview , 然后就可以愉快地调试特效了。
图片拉伸变形问题 #iChannel0 https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/2ddf8479959f1f3d9f52d0d561d281fe.jpgvoid mainImage(out vec4 fragColor, in vec2 fragCoord)
{vec2 uv fragCoord / iResolution.xy;fragColor texture2D(iChannel0, uv);
}
我们使用上述代码对纹理通道进行采样渲染一张图像可以看到当调整窗口尺寸iResolution的时候图像会因为铺满整个窗口而产生拉伸变形情况。 变形的原因这里其实就很好理解了就是图片宽高比和窗口视口的宽高比不同导致的图像在横轴和纵轴方向产生不同的 resize 强度最终渲染出来的结果会有拉伸或者压缩的感觉。
iChannelResolution 纹理尺寸
vec3 iChannelResolution[4] 表示各个纹理通道的分辨率宽度、高度和深度。通道0对应sampler2D iChannel0通道1对应sampler2D iChannel1以此类推。
这个 ShaderToy 全局变量单独拿出来讲因为纹理尺寸在实际开发中会频繁用到主要用来解决图像的拉伸问题。 有了纹理尺寸我们就可以在窗口中找一块宽高比和图像一样的区域只让图像渲染到这块区域从而避免图像拉伸。 #iChannel0 https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/2ddf8479959f1f3d9f52d0d561d281fe.jpgvoid mainImage(out vec4 fragColor, in vec2 fragCoord)
{vec2 uv fragCoord / iResolution.xy;//纹理尺寸vec2 imgSize iChannelResolution[0].xy;//窗口尺寸vec2 viewPort iResolution.xy;//图像宽高比float imgRatio imgSize.x / imgSize.y;//窗口宽高比float screenRatio viewPort.x / viewPort.y;//resizeTarget 表示窗口中与图像宽高比保持一致的区域大小vec2 resizeTarget viewPort;//窗口中与图像宽高比保持一致的区域的位置vec2 startPos vec2(0.0);//与窗口的一个边对齐使图像渲染在窗口中央if(imgRatio screenRatio) {resizeTarget.x viewPort.x;resizeTarget.y resizeTarget.x / imgRatio;startPos.y (viewPort.y - resizeTarget.y) / 2.0;} else {resizeTarget.y viewPort.y;resizeTarget.x resizeTarget.y * imgRatio;startPos.x (viewPort.x - resizeTarget.x) / 2.0;}//窗口中与图像宽高比保持一致的区域内渲染图像if(fragCoord.x startPos.x fragCoord.x startPos.x resizeTarget.x fragCoord.y startPos.y fragCoord.y startPos.y resizeTarget.y) {uv.x (fragCoord.x - startPos.x) / resizeTarget.x;uv.y (fragCoord.y - startPos.y) / resizeTarget.y;fragColor texture2D(iChannel0, uv);} else {fragColor vec4(0.0);}}
后续安排
后面 OpenGL Metal Shader 编程系列文章大致安排 ShaderToy 内置全局变量 重要的内置函数 基本图形 距离场 噪声函数 基础特效… 转场特效… 高阶特效…
联系交流
技术交流/获取视频教程可以添加我的微信Byte-Flow
