Webgl: Prevent Color Buffer from Being Cleared

const vertexShaderSource = `
attribute vec4 position;
attribute vec2 a_texCoord;
varying vec2 v_texCoord;
void main() {
  gl_Position = position;
  v_texCoord = a_texCoord;
}
`;

const fragmentShaderSourceA = `
precision mediump float;
uniform sampler2D uTexture;
varying vec2 v_texCoord;
void main() {
  gl_FragColor = texture2D(uTexture, v_texCoord);
}
`;

const fragmentShaderSourceB = `
precision mediump float;
uniform sampler2D uTexture;
varying vec2 v_texCoord;
void main() {
  gl_FragColor = texture2D(uTexture, v_texCoord.yx);
}
`;

const fragmentShaderSourceC = `
precision mediump float;
uniform sampler2D uTexture;
uniform sampler2D originalTexture;
varying vec2 v_texCoord;
void main() {
  vec4 color1 = texture2D(uTexture, v_texCoord);
  vec4 color2 = texture2D(originalTexture, v_texCoord);
  gl_FragColor = color1 * color2; //??
}
`;

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => { resolve(img); };
    img.onerror = reject;
    img.crossOrigin = "anonymous"; // only needed because images are on another domain
    img.src = url;
  });
}

async function main() {
  // we need to wait for the images to load otherwise
  // width and height will not be set.
  const [img1, img2] = await Promise.all([
    'https://i.imgur.com/KjUybBD.png',
    'https://i.imgur.com/v38pV.jpg',
  ].map(loadImage));

  /* img1, img2 are img elements I get from other part of the program according to user selections. 
  As per user input more than 2 images can also be received. Demonstrating issue using two */
  const canvas = document.getElementById("canvas"); //the canvas on which I am rendering.
  const gl = canvas.getContext("webgl");
  drawfilter(gl, img1, img1.width, img1.height); // first displaying image one
  drawfilter(gl, img2, img2.width, img2.height); // when second image is received the function is called again

  function drawfilter(gl, img, width, height) {
    gl.clearColor(1, 1, 1, 1);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);

    function createShader(gl, type, shaderSource) {
      const shader = gl.createShader(type);
      gl.shaderSource(shader, shaderSource);
      gl.compileShader(shader);

      const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
      if (!success) {
        console.warn(gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
      }

      return shader;
    }

    //the shaderssources cannot be displayed here
    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); //simple vertex shader
    const fragmentShaderA = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSourceA); //simple fragment shader
    const fragmentShaderB = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSourceB); //simple fragment shader
    /* this shader takes two texture inputs. 1- original image, 
    2- ShadersourceA applied on original image then on output shadersouceB is applied and the result is passed as second texture to this fragment shader */
    const fragmentShaderC = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSourceC);

    function createProgram(gl, vertexShader, fragmentShader) {
      const program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);

      const success = gl.getProgramParameter(program, gl.LINK_STATUS);
      if (!success) {
        console.log(gl.getProgramInfoLog(program));
        gl.deleteProgram(program);
      }
      return program;
    }

    const programA = createProgram(gl, vertexShader, fragmentShaderA);
    const programB = createProgram(gl, vertexShader, fragmentShaderB);
    const programC = createProgram(gl, vertexShader, fragmentShaderC);
    const texFbPair1 = createTextureAndFramebuffer(gl);
    const texFbPair2 = createTextureAndFramebuffer(gl);

    function setAttributes(program) {
      const positionLocation = gl.getAttribLocation(program, 'position');
      const positionBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, -1,
        1, 1, 1, -1, -1, 1,
      ]), gl.STATIC_DRAW);
      gl.enableVertexAttribArray(positionLocation);
      gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
      const texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
      const texCoordBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
        0.0, 1.0,
        0.0, 0.0,
        1.0, 1.0,
        1.0, 0.0,
        1.0, 1.0,
        0.0, 0.0
      ]), gl.STATIC_DRAW);
      gl.enableVertexAttribArray(texCoordLocation);
      gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
    }

    const texture = gl.createTexture();
    texture.image = new Image();
    texture.image.onload = function() {
      handleLoadedTexture(gl, texture);
    };
    texture.image.crossOrigin = '';
    texture.image.src = img.getAttribute('src');

    function handleLoadedTexture(gl, texture, callback) {
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, texture);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);

      setAttributes(programA);
      gl.useProgram(programA);
      gl.bindFramebuffer(gl.FRAMEBUFFER, texFbPair1.fb);
      gl.bindTexture(gl.TEXTURE_2D, texture);
      gl.clearColor(0, 0, 1, 1);
      gl.viewport(0, 0, width, height);
      gl.drawArrays(gl.TRIANGLES, 0, 6);

      setAttributes(programB);
      gl.useProgram(programB);
      gl.bindFramebuffer(gl.FRAMEBUFFER, texFbPair2.fb);
      gl.bindTexture(gl.TEXTURE_2D, texFbPair1.tex);
      gl.clearColor(0, 0, 0, 1);
      gl.viewport(0, 0, width, height);
      gl.drawArrays(gl.TRIANGLES, 0, 6)

      setAttributes(programC);
      gl.useProgram(programC);
      var uTextureLocation = gl.getUniformLocation(programC, "uTexture");
      var originalTextureLocation = gl.getUniformLocation(programC, "originalTexture");
      // set which texture units to render with.
      gl.uniform1i(uTextureLocation, 0); // texture unit 0
      gl.uniform1i(originalTextureLocation, 1); // texture unit 1
      // Set each texture unit to use a particular texture.
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, texFbPair2.tex);
      gl.activeTexture(gl.TEXTURE1);
      gl.bindTexture(gl.TEXTURE_2D, texture);
      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
      gl.clearColor(0, 0, 0, 1);
      gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
      gl.drawArrays(gl.TRIANGLES, 0, 6)
    }

    function createTextureAndFramebuffer(gl) {
      const tex = gl.createTexture();
      gl.bindTexture(gl.TEXTURE_2D, tex);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      const fb = gl.createFramebuffer();
      gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
      return {
        tex: tex,
        fb: fb
      };
    }
  }
}

main();

canvas { border: 1px solid black; }

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

WebGL only colors the furthest side, instead of nearest side

We know that the CVV coordinate system, the non-transformed drawing axes
(CVV == the canonical view volume, the +/-1 cube volume we depict on-screen)
have RIGHT-HANDED coordinates, with origin at the center of the CVV cube, x increasing rightwards, y increasing upwards, and z increasing outwards,
towards your eye. But it is not necessary that the fragments with LARGER, MORE-POSITIVE Z depths in the CVV get drawn as 'nearer' to us, and the fragments with SMALLER, MORE-NEGATIVE Z at the same screen location be overlapped. Why?

WebGL (and OpenGL-ES, and OpenGL) has a historical quirk in an otherwise-sensible method for 3D drawing: it defines 'depth' as a computed value between 0.0 and 1.0, and it is NOT simply the z value in CVV coordinates.

By default, WebGL defines depth as:

• 0.0 for 'least' depth, nearest the screen or camera; (z = +1 in CVV)
• 1.0 for 'most' depth, farthest from the screen or camera; (z = -1 in CVV)

While the GPU computes depth automatically, correct results require vertices that were transformed by a 3D camera-projection matrix to mimic a camera lens. Sometimes, if we didn't define or use the projection matrix, the GPU depth calculation reduces to:

depth = 0.5 + 0.5*(gl_position.z / gl.position.w);

In other words, without this 'camera-projection' matrix, the GPU computes
'depth' backwards -- vertices at z = -1 get depth of 0 when it SHOULD be 1. For more details about how the GPU computes depth, see:
How does WebGL set values in the depth buffer?

Known this, we could easily fix this by either:

1. We could write code that always sets the first ModelMatrix transform
   to change the sign of z, like this: myMatrix.setScale(1,1,-1);
   Then all z values we compute will have reversed sign.
   (That's a little messy when combined with a complicated scene-graph...).
2. We could leave the z values unchanged, and instead tell WebGL to
   apply different rules for its use of the depth-buffer; that is a more snesible solution. Try add these lines of code

gl.enable(gl.DEPTH_TEST); // enabled by default, but let's be SURE.
gl.clearDepth(0.0);       // each time we 'clear' our depth buffer, set all
                          // pixel depths to 0.0  (1.0 is DEFAULT)
gl.depthFunc(gl.GREATER); // gl.LESS is DEFAULT; reverse it!
                          // draw a pixel only if its depth value is GREATER
                          // than the depth buffer's stored value.

Credit to my Professor on computer graphics - John E. Tumblin

Related Topics