[with solution]: problem with transparent objects

The problem

In the following code...

... seems that this if...

if (!transparentDepthMask) {
    gl.depthMask(false);
}

... has the wrong ! in front of it.

transparentDepthMask == true should mean that it won't update Z-Buffer (it's transparent for Z-Buffer updates)

due to const transparentDepthMask = true;, the code will never enter the if, and this will cause transparent objects to update the Z-Buffer, leading to strange artifacts when 2 transparent objects overlap

Just change this code...

if (!transparentDepthMask) {
    gl.depthMask(false);
}

... to...

if (transparentDepthMask) {
    gl.depthMask(false);
}

(notice the removed !)

And, of course, remember to invoke...

gl.depthMask(true)

... at the end of the if statement: