• WebGL semi-transparent drawing
  • Github Demo
  • Articles written before

The relevant API

  • Enable blending: gl.enable(gl.blend).
  • Specify the blending functions: gl.blendfunc (gl.src_alpha, gl.one_minus_src_alpha). // It is usually fixed

Transparent and opaque objects coexist

//1. Enable the hidden face elimination function:Gl. The enable (gl. DEPTH_TEST).//2. Draw all opaque objects (a == 1.0)

//3. Lock the write operation of the depth buffer to make it read-only (the depth buffer is used to hide face elimination):
gl.depthMask(false);

//4. Draw all semitransparent objects a < 1.0, note that the objects are sorted by depth, with the smallest a drawn first

//5. Release the depth buffer to make it readable and writable:
gl.depthMask(true)
Copy the code
// First draw the first four opaque mesh
// Create a transparent mesh
if(i < 4) {// Opaque object
    gl.depthMask(true);
    gl.disable(gl.BLEND);
} else { // Transparent object
    gl.depthMask(false);
    gl.enable(gl.BLEND);
    gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
}
drawBufferInfo(gl, vao);
Copy the code

There is another solution to the problem

  • Articles written before