跟我一起学glsl编程11 - 翘曲线（warpLine）

绘制翘曲线

继续通过多个示例，一步步的获得神奇的效果

• 示例代码一

获得一个从左向右的过渡

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;
    float color = 0.0;

    color += sin(coord.x);

    gl_FragColor = vec4(vec3(color, color, color), 1.0);
}

• 代码效果

• 示例代码二

  更改这行代码
 //color += sin(coord.x);
 color += sin(coord.x * 50.0);
 

• 代码效果 获得相隔50px的线条

• 示例代码三 获得上下波动的线条效果

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;
    float color = 0.0;
    // 增加u_time
    color += sin(coord.x * 50.0 + cos(u_time + coord.y)) * 2.0;
    
    gl_FragColor = vec4(vec3(color, color, color), 1.0);
}

• 代码效果

• 示例代码四 继续修改color这行代码

color += sin(coord.x * 50.0 + cos(u_time + coord.y * 10.0 + sin(coord.x * 50.))) * 2.0;

• 代码效果

• 示例代码五 在上例的基础上，继续修改

color += sin(coord.x * 50.0 + cos(u_time + coord.y * 10.0 + sin(coord.x * 50.0 + u_time * 2.0))) * 2.0;

• 代码效果

• 示例代码六

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;
    float color = 0.0;

    color += sin(coord.x * 50.0 + cos(u_time + coord.y * 10.0 + sin(coord.x * 50.0 + u_time * 2.0))) * 2.0;

    color += cos(coord.x * 50.0 + sin(u_time + coord.y * 10.0 + cos(coord.x * 50.0 + u_time * 2.0))) * 2.0;

    gl_FragColor = vec4(vec3(color, color, color), 1.0);
}

• 代码示例七

  warp line 的线条效果可以看到了

   #ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;
    float color = 0.0;

    color += sin(coord.x * 50.0 + cos(u_time + coord.y * 10.0 + sin(coord.x * 50.0 + u_time * 2.0))) * 2.0;

    color += cos(coord.x * 50.0 + sin(u_time + coord.y * 10.0 + cos(coord.x * 50.0 + u_time * 2.0))) * 2.0;

    gl_FragColor = vec4(vec3(color, color, color), 1.0);
}

• 代码效果

• 示例代码八

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;
    float color = 0.0;
    // 对color 多次计算
    color += sin(coord.x * 50.0 + cos(u_time + coord.y * 10.0 + sin(coord.x * 50.0 + u_time * 2.0))) * 2.0;

    color += cos(coord.x * 20.0 + sin(u_time + coord.y * 10.0 + cos(coord.x * 50.0 + u_time * 2.0))) * 2.0;

    color += sin(coord.x * 30.0 + cos(u_time + coord.y * 10.0 + sin(coord.x * 50.0 + u_time * 2.0))) * 2.0;

    color += cos(coord.x * 10.0 + sin(u_time + coord.y * 10.0 + cos(coord.x * 50.0 + u_time * 2.0))) * 2.0;

    gl_FragColor = vec4(vec3(color, color, color), 1.0);
}

• 代码效果

• 示例代码九

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;
    float color = 0.0;

    color += sin(coord.x * 50.0 + cos(u_time + coord.y * 10.0 + sin(coord.x * 50.0 + u_time * 2.0))) * 2.0;

    color += cos(coord.x * 20.0 + sin(u_time + coord.y * 10.0 + cos(coord.x * 50.0 + u_time * 2.0))) * 2.0;

    color += sin(coord.x * 30.0 + cos(u_time + coord.y * 10.0 + sin(coord.x * 50.0 + u_time * 2.0))) * 2.0;

    color += cos(coord.x * 10.0 + sin(u_time + coord.y * 10.0 + cos(coord.x * 50.0 + u_time * 2.0))) * 2.0;

    // gl_FragColor = vec4(vec3(coord.y, coord.x, color), 1.0);
    gl_FragColor = vec4(vec3(color + coord.y, color + coord.x, color), 1.0);
}

• 代码效果 最终的效果如火焰一般的warpline

《跟我一起学glsl编程》期待你的关注与点赞