如何填充 glsl 片段着色器中曲线下方的区域？

Question

我正在使用以下代码绘制正弦波曲线：

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

const float AMPLITUDE = 0.125;
const float PERIOD = 1.0;
const float VELOCITY = 8.0;

const vec3 COLOR1 = vec3(1.0, 0.5, 0.0);
const vec3 COLOR2 = vec3(1.0, 0.0, 0.0);

#define PI 3.141592653589793
#define TWO_PI 6.283185307179586

void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution;
    
    float phase = u_time * VELOCITY / PI;
    float curve = AMPLITUDE * sin(uv.x * TWO_PI / PERIOD - phase);

    float shape = step(distance(curve + uv.y, 0.5), 1.0 / u_resolution.x);
    
    vec3 color = (1.0 - shape) * COLOR2 + shape * COLOR1;
    gl_FragColor = vec4(color, 1.0);
}

生成这张图片的：

我想用 COLOR1 填充曲线下方的区域，如下图所示：

Answer 1

你只需要测试curve是否大于uv.y - 0.5。为此使用 step：

step(edge, x)

step generates a step function by comparing x to edge.
For element i of the return value, 0.0 is returned if x[i] < edge[i], and 1.0 is returned otherwise.

例如：

~~float shape = step(distance(curve + uv.y, 0.5), 1.0 / u_resolution.x);~~

float shape = step(uv.y - 0.5, curve);

(function loadscene() {    

var canvas, gl, vp_size, prog, bufObj = {};

function initScene() {

    canvas = document.getElementById( "ogl-canvas");
    gl = canvas.getContext( "experimental-webgl" );
    if ( !gl )
      return;

    progDraw = gl.createProgram();
    for (let i = 0; i < 2; ++i) {
        let source = document.getElementById(i==0 ? "draw-shader-vs" : "draw-shader-fs").text;
        let shaderObj = gl.createShader(i==0 ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
        gl.shaderSource(shaderObj, source);
        gl.compileShader(shaderObj);
        let status = gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS);
        if (!status) alert(gl.getShaderInfoLog(shaderObj));
        gl.attachShader(progDraw, shaderObj);
        gl.linkProgram(progDraw);
    }
    status = gl.getProgramParameter(progDraw, gl.LINK_STATUS);
    if ( !status ) alert(gl.getProgramInfoLog(progDraw));
    progDraw.inPos = gl.getAttribLocation(progDraw, "inPos");
    progDraw.u_time = gl.getUniformLocation(progDraw, "u_time");
    progDraw.u_resolution = gl.getUniformLocation(progDraw, "u_resolution");
    gl.useProgram(progDraw);

    var pos = [ -1, -1, 1, -1, 1, 1, -1, 1 ];
    var inx = [ 0, 1, 2, 0, 2, 3 ];
    bufObj.pos = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( pos ), gl.STATIC_DRAW );
    bufObj.inx = gl.createBuffer();
    bufObj.inx.len = inx.length;
    gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );
    gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( inx ), gl.STATIC_DRAW );
    gl.enableVertexAttribArray( progDraw.inPos );
    gl.vertexAttribPointer( progDraw.inPos, 2, gl.FLOAT, false, 0, 0 ); 
    
    gl.enable( gl.DEPTH_TEST );
    gl.clearColor( 0.0, 0.0, 0.0, 1.0 );

    window.onresize = resize;
    resize();
    requestAnimationFrame(render);
}

function resize() {
    //vp_size = [gl.drawingBufferWidth, gl.drawingBufferHeight];
    vp_size = [window.innerWidth, window.innerHeight];
    //vp_size = [256, 256]
    canvas.width = vp_size[0];
    canvas.height = vp_size[1];
}

function render(deltaMS) {

    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
   
    gl.uniform1f(progDraw.u_time, deltaMS/1000.0);
    gl.uniform2f(progDraw.u_resolution, canvas.width, canvas.height);
    gl.drawElements( gl.TRIANGLES, bufObj.inx.len, gl.UNSIGNED_SHORT, 0 );
    
    requestAnimationFrame(render);
}  

initScene();

})();

<script id="draw-shader-vs" type="x-shader/x-vertex">
#version 100
attribute vec2 inPos;

void main()
{
    //ndcPos = inPos;
    gl_Position = vec4( inPos.xy, 0.0, 1.0 );
}
</script>

<script id="draw-shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

const float AMPLITUDE = 0.125;
const float PERIOD = 1.0;
const float VELOCITY = 8.0;

const vec3 COLOR1 = vec3(1.0, 0.5, 0.0);
const vec3 COLOR2 = vec3(1.0, 0.0, 0.0);

#define PI 3.141592653589793
#define TWO_PI 6.283185307179586

void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution;
    
    float phase = u_time * VELOCITY / PI;
    float curve = AMPLITUDE * sin(uv.x * TWO_PI / PERIOD - phase);

    //float shape = step(distance(curve + uv.y, 0.5), 1.0 / u_resolution.x);
    float shape = step(uv.y - 0.5, curve);
    
    vec3 color = mix(COLOR2, COLOR1, shape);
    gl_FragColor = vec4(color, 1.0);
}
</script>

<canvas id="ogl-canvas" style="border: none"></canvas>

如何填充 glsl 片段着色器中曲线下方的区域？

How to fill the area below a curve in a glsl fragment shader?

glsl

webgl

fragment-shader