ShaderToy的使用方法

原创

已于 2022-07-19 18:59:27 修改 · 1.9k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#shadertoy

于 2022-07-15 23:20:23 首次发布

本文记录了一名初学者在ShaderToy上的学习过程，从理解基本的屏幕坐标、纹理坐标归一化，到尝试绘制圆和实现简单动画，再到探索帧缓存的应用。尽管面临困难，作者依然坚持自我学习，希望通过不断实践逐渐掌握图形编程。

序

这个网站，之前是知道的，这个网站上有很多好看的例子，也是知道的，比如：

Path Tracer Denoise (shadertoy.com)

Ray tracing spheres (shadertoy.com)

但是，我是小白，知道了也理解不了；学了也不一定能学会，学会了也会被同行碾压。

但是，本着自我感动式学习的想法，还是象征性的学一学吧。

参考：

渲染技术 - 知乎 (zhihu.com)

网站界面介绍

大概就是这样

代码是这些：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // 这个uv，不是归一化的形式，需要手动归一化纹理坐标到[0-1]范围
    vec2 uv = fragCoord/iResolution.xy;
    // 根据时间变量iTime与纹理坐标组合作为入参计算像素颜色
    vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
    // 输出颜色到fragColor，只需要给该变量赋值就可以展示在最终渲染效果上
    fragColor = vec4(col,1.0);
}

屏幕坐标系

它的屏幕坐标系，是什么样的？

试试

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    vec3 col = vec3(0,0,0);
    if(uv.x<0.5 && uv.y<0.5)//左下设置为红色
        col = vec3(1.0,0.0,0.0);
    else if(uv.x>0.5 && uv.y<0.5)//右下设置为绿色
        col = vec3(0.0,1.0,0.0);
    else if(uv.x<0.5 &&uv.y>0.5)//左上设置为蓝色
        col = vec3(0.0,0.0,1.0);
    else if(uv.x>0.5 && uv.y>0.5)//右上设置为黄色
        col = vec3(1.0,1.0,0.0);
    fragColor = vec4(col,1.0);
}