three.js, all parameters about depth test

introduction to depth test:

Simply put, 'depth test'(except transparent cases): if a object set depthTest to true, then its own depth value is required to compare with another in depth buffer that cooresponds to it in position, and if it is closer from screen(default comparasion method) and its depthWrite is set to true, so the depth value in depth buffer will be replaced with its depth value, so that it is capable to display on screen. If depthTest is set false, drawing order is that the next one covering the previous one.



parameters affected on depth test have: depthTest, depthWrite.

code snippet:

// square(the first rendered one)

const cubeGeometry = new THREE.BoxGeometry(200, 200, 200)

// square material

const cubeMaterial = new THREE.MeshLambertMaterial({

color: 0x00ff00

})

const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)

scene.add(cube)



// cylinder(the next rendered one)

const cyGeometry = new THREE.CylinderGeometry(50, 50, 300, 32)

const cyMaterial = new THREE.MeshLambertMaterial({

color: 0xffff00

})

// cylinder material

const cylinder = new THREE.Mesh(cyGeometry, cyMaterial)

cylinder.rotateX(Math.PI / 2)

scene.add(cylinder)





depthWrite: decide whether the depth buffer can be writable . its essence is calling gl.depthMask( false ).

and similar to the above, we can set depthWrite to false for the cylinder so that it isn't covered by the square:

const cubeMaterial = new THREE.MeshLambertMaterial({

...

depthWrite: false

})