为什么此代码中的 WebGL 不呈现轮廓矩形？

Question

我是 WebGL 的新手并尝试制作带轮廓的矩形，但同时使用我混合的着色器:)

问题是代码没有给出错误，但是没有渲染带有清除的轮廓矩形，它只是清晰并且没有渲染矩形...

这是顶点着色器...

// VERTEX SHADER
attribute vec2 a_position;
attribute vec2 a_texCoord;
uniform vec2 u_translation;
uniform vec2 u_resolution; 
varying vec2 v_texCoord;
void main() {
    vec2 zeroToOne = (a_position + u_translation) / u_resolution;
    vec2 zeroToTwo = zeroToOne * 2.0;
    vec2 clipSpace = zeroToTwo - 1.0;
    gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
    v_texCoord = a_texCoord;
}

这是片段着色器...

// FRAGMENT SHADER
precision mediump float;
uniform sampler2D u_image;
uniform vec4 u_color;
uniform int u_mode;
varying vec2 v_texCoord;
void main(void) {
    if (u_mode == 1) { gl_FragColor = u_color; }
    if (u_mode == 2) { gl_FragColor = texture2D(u_image, v_texCoord); }
    if (u_mode == 3) { gl_FragColor = u_color + texture2D(u_image, v_texCoord); }
}

哦...这是 HTML 文件...

<!DOCTYPE html>
<html>
  <head>
    <title>POLYGL Test</title>
  </head>
  <body>
    <canvas width="600" height="600"></canvas>
    <script>
      // Get context
      var gl = document.getElementsByTagName("canvas")[0].getContext("webgl");

      // Create buffers for rectangle
      var x = 100, y = 100, w = 50, h = 50;
      var rect = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, rect);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
          x, -y,
          x + w, -y,
          x + w, -(y + h),
          x, -(y + h),
      ]), gl.STATIC_DRAW);
      gl.bindBuffer(gl.ARRAY_BUFFER, null);

      // Create shaders and assign GLSL code for them...
      var vs = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vs, `
        attribute vec2 a_position;
        attribute vec2 a_texCoord;
        uniform vec2 u_translation;
        uniform vec2 u_resolution; 
        varying vec2 v_texCoord;
        void main() {
          vec2 zeroToOne = (a_position + u_translation) / u_resolution;
          vec2 zeroToTwo = zeroToOne * 2.0;
          vec2 clipSpace = zeroToTwo - 1.0;
          gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
          v_texCoord = a_texCoord;
        }`);
       gl.compileShader(vs);

       var fs = gl.createShader(gl.FRAGMENT_SHADER);
       gl.shaderSource(fs, `
        precision mediump float;
        uniform sampler2D u_image;
        uniform vec4 u_color;
        uniform int u_mode;
        varying vec2 v_texCoord;
        void main(void) {
            if (u_mode == 1) { gl_FragColor = u_color; }
            if (u_mode == 2) { gl_FragColor = texture2D(u_image, v_texCoord); }
            if (u_mode == 3) { gl_FragColor = u_color + texture2D(u_image, v_texCoord); }
        }`);
        gl.compileShader(fs);

        // Create program and link all
        var p = gl.createProgram();
        gl.attachShader(p, vs);
        gl.attachShader(p, fs);
        gl.linkProgram(p);
        gl.useProgram(p);
       
        // Delete shaders and program after being used...
        gl.deleteShader(vs);
        gl.deleteShader(fs);
        gl.deleteProgram(p);

        // Clear to black and set viewport
        gl.clearColor(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

        // Set color, resolution, And translation...
        // Set mode to 1 so it only renders with gl_FragColor
        gl.uniform1i(gl.getUniformLocation(p, "u_mode"), 1);
        gl.uniform4f(gl.getUniformLocation(p, "u_color"), Math.random(), Math.random(), Math.random(), 1);
        gl.uniform2f(gl.getUniformLocation(p, "u_resolution"), gl.canvas.width, gl.canvas.height);
        gl.uniform2f(gl.getUniformLocation(p, "u_translation"), 0, 0);

        // Bind rectangle buffer
        // Enable vertex attribute and assign buffer to shaders...
        gl.bindBuffer(gl.ARRAY_BUFFER, rect);
        gl.vertexAttribPointer(gl.getAttribLocation(p, "a_position"), 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(gl.getAttribLocation(p, "a_position"));
       
        // Draw!
        gl.drawArrays(gl.LINE_LOOP, 0, 4);
    </script>
  </body>
</html>

我什至尝试删除删除的程序，但看起来没有帮助... 谁能帮帮我？

Answer 1

已解决，索引不正确导致高度为负，已修复！

<!DOCTYPE html>
<html>
  <head>
    <title>POLYGL Test</title>
  </head>
  <body>
    <canvas width="600" height="600"></canvas>
    <script>
      var gl = document.getElementsByTagName("canvas")[0].getContext("webgl");
      var x = 100, y = 100, w = 50, h = 50;
      var rect = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, rect);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
          x, y,
          x + w, y,
          x + w, y + h,
          x, y + h,
      ]), gl.STATIC_DRAW);
      gl.bindBuffer(gl.ARRAY_BUFFER, null);
        
      var vs = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vs, `
        attribute vec2 a_position;
        attribute vec2 a_texCoord;
        uniform vec2 u_translation;
        uniform vec2 u_resolution; 
        varying vec2 v_texCoord;
        void main() {
          vec2 zeroToOne = (a_position + u_translation) / u_resolution;
          vec2 zeroToTwo = zeroToOne * 2.0;
          vec2 clipSpace = zeroToTwo - 1.0;
          gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
          v_texCoord = a_texCoord;
        }`);
       gl.compileShader(vs);

       var fs = gl.createShader(gl.FRAGMENT_SHADER);
       gl.shaderSource(fs, `
        precision mediump float;
        uniform sampler2D u_image;
        uniform vec4 u_color;
        uniform int u_mode;
        varying vec2 v_texCoord;
        void main(void) {
            if (u_mode == 1) { gl_FragColor = u_color; }
            if (u_mode == 2) { gl_FragColor = texture2D(u_image, v_texCoord); }
            if (u_mode == 3) { gl_FragColor = u_color + texture2D(u_image, v_texCoord); }
        }`);
        gl.compileShader(fs);

        var p = gl.createProgram();
        gl.attachShader(p, vs);
        gl.attachShader(p, fs);
        gl.linkProgram(p);
        gl.useProgram(p);
        gl.deleteShader(vs);
        gl.deleteShader(fs);
        gl.deleteProgram(p);

        gl.clearColor(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

        gl.uniform1i(gl.getUniformLocation(p, "u_mode"), 1);
        gl.uniform4f(gl.getUniformLocation(p, "u_color"), Math.random(), Math.random(), Math.random(), 1);
        gl.uniform2f(gl.getUniformLocation(p, "u_resolution"), gl.canvas.width, gl.canvas.height);
        gl.uniform2f(gl.getUniformLocation(p, "u_translation"), 0, 0);
        
        gl.bindBuffer(gl.ARRAY_BUFFER, rect);
        gl.vertexAttribPointer(gl.getAttribLocation(p, "a_position"), 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(gl.getAttribLocation(p, "a_position"));
        gl.drawArrays(gl.LINE_LOOP, 0, 4);
    </script>
  </body>
</html>

为什么此代码中的 WebGL 不呈现轮廓矩形？

Why WebGL in this code doesn't render a outlined rectangle?

javascript

glsl

webgl