This content originally appeared on DEV Community and was authored by HandsomeTan
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)
depthTest: determine whether starting off depth test or not. its essence is calling gl.enable(gl.DEPTH_TEST).
for instance, if we want that the cylinder isn't covered by the square, we can set the depthTest parameter of the cylinder to false:
const cyMaterial = new THREE.MeshLambertMaterial({
...
depthTest: false
})
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
})
This content originally appeared on DEV Community and was authored by HandsomeTan
HandsomeTan | Sciencx (2025-01-04T03:47:24+00:00) three.js, all parameters about depth test. Retrieved from https://www.scien.cx/2025/01/04/three-js-all-parameters-about-depth-test/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.