着色器中的矩形/正方形渐变

Question

我的第一个问题已经结束。从那时起，我添加了一些代码并取得了一些进展。但是生成的渐变是圆形的，我目前不知道怎么把它变成正方形。

这是我目前的结果：

目标结果（沿着这些线）：

这是我的片段着色器：

precision highp float;
        varying vec2 vTextureCoord;
        uniform float centerX;
        uniform float centerY;
        uniform vec4 colors[4];
        uniform float steps[4];

        void main() {
          vec3 map = vec3(vTextureCoord, 1);
          vec2 uv = map.xy;

          float dist = distance(vTextureCoord, vec2(centerX, centerY));
          highp vec4 col = colors[0];
          for (int i = 1; i < 4; ++i) {
              col = mix(col, colors[i], smoothstep(steps[i - 1], steps[i], dist));
          }
          float factor = max(abs(uv.x - centerX), abs(uv.y - centerY));
          float c = 1. - max(abs(uv.x - centerX), abs(uv.y - centerY));
          vec4 finalColor = vec4((col.r - factor), (col.g - factor), (col.b - factor), 1.);

          gl_FragColor = finalColor;
        }

传递的参数是：

颜色：[[1, 0, 0], [1, 1, 1], [1, 0, 0], [0, 1, 0]]

步数：[0, 0.29, 0.35, 1]

Answer 1

使用纹理坐标

下面是一个使用 0 - 1 范围内的纹理坐标的示例，它使渐变的中心位于0.5, 0.5。因此，要计算梯度，我们必须将距中心的距离从 0 - 0.5 到 0 - 1 范围内标准化。这是通过除以 0.5 或倒数（如示例）乘以 2 来完成的（因为乘法始终是更好的选择比除法）

简化着色器

此外，您计算每个片段的渐变颜色的方法计算量很大。对于每个渐变（在本例中为 3），您调用 smoothstep，然后调用 mix，但对于每个片段，这些计算的 2 对计算的颜色没有任何影响。

下面的示例通过检查距离是否在特定渐变范围内来减少计算，并且仅当在内部计算分配给gl_FragColor 的颜色然后跳出循环时

如果您希望渐变变暗到边缘，就像您的第一个图像和代码（以及接受的答案）建议的那样，或者您问题中的第二个图像是您想要的结果，我无法锻炼。该示例假设您需要第二张图片。

const shaders = {
vs: `attribute vec2 vert;
varying vec2 uv;
void main() {
    uv = (vert  + 1.0) / 2.0; // normalize texture coords
    gl_Position = vec4(vert, 0.0, 1.0);
}`, 
fs: `precision mediump float;
varying vec2 uv;  
uniform vec3 colors[4];
uniform float steps[4];
void main(){
    vec2 gradXY = abs(uv - 0.5);  // 0.5 is centerX, centerY
    float dist = pow(max(gradXY.x, gradXY.y) * 2.0, 2.0);
    float start = steps[0];
    for (int i = 1; i < 4; i++) {
        float end = steps[i]; 
        if (dist >= start && dist <= end) {
            gl_FragColor = vec4(mix(colors[i - 1], colors[i], (dist-start) / (end-start)), 1);
            break;
        }
        start = end;
    }
}`,};
const F32A = a => new Float32Array(a), UI16A = a => new Uint16Array(a);
const GLBuffer = (data, type = gl.ARRAY_BUFFER, use = gl.STATIC_DRAW, buf) => (gl.bindBuffer(type, buf = gl.createBuffer()), gl.bufferData(type, data, use), buf);
const GLLocs = (shr, type, ...names) => names.reduce((o,name) => (o[name] = (gl[`get${type}Location`])(shr, name), o), {});
const GLShader = (prg, source, type = gl.FRAGMENT_SHADER, shr) => {
    gl.shaderSource(shr = gl.createShader(type), source);
    gl.compileShader(shr);
    gl.attachShader(prg, shr);
}
var W;    
const gl = canvas.getContext("webgl");
requestAnimationFrame(render);
addEventListener("resize", render);
const prog = gl.createProgram();
GLShader(prog, shaders.vs, gl.VERTEX_SHADER);
GLShader(prog, shaders.fs);
gl.linkProgram(prog);
gl.useProgram(prog);
const locs = GLLocs(prog, "Uniform", "colors", "steps");
const vert = GLLocs(prog, "Attrib", "vert").vert;
GLBuffer(F32A([-1,-1, 1,-1, 1,1, -1,1]));
GLBuffer(UI16A([1,2,3, 0,1,3]), gl.ELEMENT_ARRAY_BUFFER);
gl.enableVertexAttribArray(vert);
gl.vertexAttribPointer(vert, 2, gl.FLOAT, false, 0, 0); 
function render() {
    gl.viewport(0, 0, W = canvas.width = Math.min(innerWidth,innerHeight), canvas.height = W);
    gl.uniform3fv(locs.colors, F32A([1,1,1,  1,0,0,  1,1,1,  0,0,0]));
    gl.uniform1fv(locs.steps, F32A([0, 1/3, 2/3, 1]));
    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
}

body {
       margin: 0px;
    }
    canvas {
       position: absolute;
       top: 0px;
       left: 0px;
       background: black;
    }

<canvas id="canvas"></canvas>

问题含糊不清

您的问题中存在一些歧义，以下将予以解决

示例行中的pow 函数...

float dist = pow(max(gradXY.x, gradXY.y) * 2.0, 2.0);

... 是您在计算 col 时使用的 smoothstep(steps[i - 1], steps[i], dist) 的近似值（假设 dist 范围为 0 - 0.5）。如果你想要完整的 Hermite 曲线，你可以将这条线替换为 ...

float distL = max(gradXY.x, gradXY.y) * 2.0;
float dist = distL * distL * (3.0 - 2.0 * distL);

.. 如果您想像问题第一张图片中那样使边缘变暗，请在计算碎片颜色时使用以下行。注意假设颜色是vec4 而不是vec3 如果您使用示例代码，请制作适当的模组。

FragColor = mix(colors[i - 1], colors[i], (dist-start) / (end-start)) - vec4(vec3(distL * 0.5),0);

或者如果不使用 Hermite 曲线

FragColor = mix(colors[i - 1], colors[i], (dist-start) / (end-start)) - vec4(vec3(dist * 0.5),0);

Answer 2

可以通过计算两个轴的最大距离来实现方形渐变：

float dist = distance(vTextureCoord, vec2(centerX, centerY));

vec2 distV = vTextureCoord - vec2(centerX, centerY);
float dist = max(abs(distV.x), abs(distV.y));

---

完整示例：

(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;
varying vec2 ndcPos;

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

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

varying vec2 ndcPos;  // normaliced device coordinates in range [-1.0, 1.0]
uniform float u_time;
uniform vec2 u_resolution;

#define FILL

void main()
{
    vec4 colors[4];
    colors[0] = vec4(1.0, 0.0, 0.0, 1.0);
    colors[1] = vec4(0.0, 1.0, 0.0, 1.0);
    colors[2] = vec4(0.0, 0.0, 1.0, 1.0);
    colors[3] = vec4(1.0, 1.0, 1.0, 1.0);

    float steps[4];
    steps[0] = 0.2;
    steps[1] = 0.4;
    steps[2] = 0.6;
    steps[3] = 0.8;

    vec2 uv = ndcPos.xy;
    uv.x *= u_resolution.x / u_resolution.y;
    
    vec2 vTextureCoord = uv;
    float centerX = 0.0;
    float centerY = 0.0;

    //float dist = distance(vTextureCoord, vec2(centerX, centerY));
    vec2 distV = vTextureCoord - vec2(centerX, centerY);
    float dist = max(abs(distV.x), abs(distV.y));
    
    highp vec4 col = colors[0];
    for (int i = 1; i < 4; ++i) {
        col = mix(col, colors[i], smoothstep(steps[i - 1], steps[i], dist));
    }
    float factor = max(abs(uv.x - centerX), abs(uv.y - centerY));
    float c = 1. - max(abs(uv.x - centerX), abs(uv.y - centerY));
    vec4 finalColor = vec4((col.r - factor), (col.g - factor), (col.b - factor), 1.);

    gl_FragColor = finalColor;
}
</script>

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