3
0

shader从入门到放弃（1） 搭建环境

2026-09-09
2026-09-09
shader入门

shader从入门到放弃(1) 搭建环境

shadertoy

使用这一个shadertoy，在网页也有，可以直接在网页实时编写并且展示效果，还可以保存
https://www.shadertoy.com/

基础环境变量

着色器输入

uniform vec3      iResolution;           // viewport resolution (in pixels)
uniform float     iTime;                 // shader playback time (in seconds)
uniform float     iTimeDelta;            // render time (in seconds)
uniform float     iFrameRate;            // shader frame rate
uniform int       iFrame;                // shader playback frame
uniform float     iChannelTime[4];       // channel playback time (in seconds)
uniform vec3      iChannelResolution[4]; // channel resolution (in pixels)
uniform vec4      iMouse;                // mouse pixel coords. xy: current (if MLB down), zw: click
uniform samplerXX iChannel0..3;          // input channel. XX = 2D/Cube
uniform vec4      iDate;                 // (year, month, day, time in seconds)
uniform float     iSampleRate;           // sound sample rate (i.e., 44100)

上面是这个shadertoy的常用函数

基础入口函数

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

在上面进行编写着色器，是片元着色器，fragementshaer

这个是片元着色器，用于上色的，还有一个对应的着色器叫做顶点着色器，专门处理顶点的，返回的是顶点值。

坐标说明

image-Jyst.png

他是一个 左下角为0,0的一个uv坐标系。

简单的用例

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec3 color = vec3(0.0);
    //归一化坐标 并且转为，中心坐标系
    //转换为对应的UV中心，这个会保留长宽比例
    //vec2 uv = (fragCoord.xy / iResolution.xy - 0.5) * 2.0;
    //这个会以最短的边进行缩放，保证他是一个正方向网格
    vec2 uv = (fragCoord.xy - 0.5 * iResolution.xy) * 2.0 / min(iResolution.x,iResolution.y);
    vec2 nuv = fract(uv * 3.0);
    if(abs(nuv.x) < fwidth(nuv.x)) {
        color = vec3(1.0);
    }
    if(abs(nuv.y) < fwidth(nuv.y)) {
        color = vec3(1.0);
    }
    
    if(abs(uv.x) < fwidth(uv.x)){
        color = vec3(0.5);
    }
    
    fragColor = vec4(color, 1.0);
}

image-LpPB.png

评论