第一个 shader 案例

前言

今天，我们将来学习我们的第一个 shader 案例，从最简单的案例开始，一步一步的开启我们的 shader 之旅。

在页面上输出一种颜色

第一步，我们想在页面上输出一种颜色。

1. 首先，我们来编写 shader 的主体函数

void mainImage(out vec4 fragColor,in vec2 fragCoord){

}

我们定义了一个函数：mainImage,接收两个参数：fragColor（输出颜色）和 fragCoord（输入坐标），我们暂时不用管fragCoord,直接向屏幕输出一个颜色：

void mainImage(out vec4 fragColor,in vec2 fragCoord){
    vec3 color=vec3(1.,1.,0.); //定义一个黄色
    fragColor=vec4(color,1.); // 输出颜色设置未我们定义的颜色
}

图片

在页面上输出多种颜色

上面，我们实现了在页面上输出一种颜色，那现在我们来思考下，我们如何在页面上输出多种颜色呢？我们能不能根据页面位置不同输出不同的颜色呢？

在实现该需求之前，我们先来了解下在当前的 Shader 开发环境内，还有个内置的变量iResolution，代表了画面整体的大小，使用它时一般会取它的xy维度。

现在，我们便来使用代码实现，我们的需求:

void mainImage(out vec4 fragColor,in vec2 fragCoord){
    // 定义几种颜色
    vec3 color1=vec3(1.,0.,1.);
    vec3 color2=vec3(1.,1.,0.);
    vec3 color3=vec3(0.,0.,1.);
    vec3 color4=vec3(1.,0.,0.);
    // 在当前的shadertoy环境中，iResolution代表整体画面的大小，使用时，取它的x,y值
    if(fragCoord.x<iResolution.x*.25){ //1/4时，显示颜色1
        fragColor=vec4(color1,1.);
    }else if(fragCoord.x>=iResolution.x*.25&&fragCoord.x<iResolution.x*.5){//1/4~1/2时，显示颜色2
        fragColor=vec4(color2,1.);
    }else if(fragCoord.x>=iResolution.x*.5&&fragCoord.x<iResolution.x*.75){//1/2~3/4时，显示颜色3
        fragColor=vec4(color3,1.);
    }else{
        ////3/4~1时，显示颜色4
        fragColor=vec4(color4,1.);
    }
}

总结

这便是今天我们学习的最简单的 shader 案例了，之后每天我们都会学习一个新的 shader 案例，由浅入深，从简单的效果到后期一些酷炫效果的展示。这样做的目的也是为了让我自己能够系统全面的学习 shader。以上便是今天的全部内容了，如有错误之处，欢迎大家留言指出，谢谢大家了。