February 19, 2023

Shadertoy 使用总结

Shadertoy 使用总结

Shadertoy.com是一个跨浏览器的在线社区和工具,用于通过WebGL创建和共享着色器,用于在Web 浏览器中学习和教�?D 计算机图形�?/p>

用法

  • 点击新建,进�?a target="_blank" rel="noopener" href="https://www.shadertoy.com/new">https://www.shadertoy.com/new

  • 编写,简单例子如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    void mainImage( out vec4 fragColor, in vec2 fragCoord )
    {
    // input: pixel coordinates
    vec2 p = (-iResolution.xy + 2.0*fragCoord)/iResolution.y;

    // angle of each pixel to the center of the screen
    float a = atan(p.y,p.x);

    // modified distance metric
    float r = pow( pow(p.x*p.x,4.0) + pow(p.y*p.y,4.0), 1.0/8.0 );

    // index texture by (animated inverse) radius and angle
    vec2 uv = vec2( 1.0/r + 0.2*iTime, a );

    // pattern: cosines
    float f = cos(12.0*uv.x)*cos(6.0*uv.y);

    // color fetch: palette
    vec3 col = 0.5 + 0.5*sin( 3.1416*f + vec3(0.0,0.5,1.0) );

    // lighting: darken at the center
    col = col*r;

    // output: pixel color
    fragColor = vec4( col, 1.0 );
    }

细节介绍

总结

Shadertoy 是一个很棒的学习别人shader的网站!�?/p>

关于本文

本文作�?Master Gong Sheng, 许可�?CC BY-NC 4.0.