-
-
Notifications
You must be signed in to change notification settings - Fork 35.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
WebGLRenderer: add reverse-z via EXT_clip_control #29445
Conversation
📦 Bundle sizeFull ESM build, minified and gzipped.
🌳 Bundle size after tree-shakingMinimal build including a renderer, camera, empty scene, and dependencies.
|
This comment was marked as resolved.
This comment was marked as resolved.
This would only work with floating point depth buffers though - what about 24-bit depth buffers often used w/ stencil? |
No. See #29445 (comment) for instance, which uses the default canvas framebuffer. You lose near-field precision this way, but that's okay for mobile, where you want to keep this low(er) precision and avoid the blit. WebGPU gives more control here. We could enable a workaround where you set |
What I more mean is w/ 24-bit depth buffers is the precision uniform over [0, 1] - or am I wrong here? |
Precision is not uniform due to how perspective projection works and the useful range of floating point representation. We reverse this range to preserve far-field precision over near-field. In other words, the distribution does not change whether you use 32/24/16 bits for depth, but the possible range you represent in floating point. |
BatchedMesh: add `deleteInstance()` (mrdoob#29449) * BatchedMesh: add `deleteInstance()` * BatchedMesh: prioritize reusing freed instance ids when adding instance Update Three.js r169 Lensflare: Add WebGPU version. (mrdoob#29451) * lensflare example * fix depth * remove forceWebGL * rename * fix typo * follow original code * Update LensflareMesh.js --------- Co-authored-by: aardgoose <[email protected]> Co-authored-by: Michael Herzog <[email protected]> Examples: Update lensflare colors. (mrdoob#29458) WebGLRenderer: add reverse-z via EXT_clip_control (mrdoob#29445) * WebGLRenderer: add reverse-z via EXT_clip_control * WebGLRenderer: move conversion methods to utils Updated builds. Docs: Improve `WebGLRenderer` page. (mrdoob#29459) WebGLProgram: add USE_REVERSEDEPTHBUF define (mrdoob#29461) CylinderGeometry: Don't add degenerate triangles (mrdoob#29460) * CylinderGeometry: Don't add degenerate triangles * Change comparison RenderObject: Introduce `getGeometryCacheKey()` (mrdoob#29465) * RenderObject: Added `getGeometryCacheKey()` * NodeMaterialObserver: Improve skinnedmesh and morph supports * cleanup Update actions/setup-node digest to 0a44ba7 (mrdoob#29466) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Update github/codeql-action digest to 294a9d9 (mrdoob#29467) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Update devDependencies (non-major) (mrdoob#29468) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Updated builds. CurveModifierGPU: WebGPURenderer port. (mrdoob#29453) * curve mod * lint * update screenshot * use correct constant * use filtered texture --------- Co-authored-by: aardgoose <[email protected]> Examples: Clean up. (mrdoob#29473) * Examples: Clean up. * E2E: Update screenshot. SpriteNodeMaterial: Add sizeAttenuation (mrdoob#29394) * SpriteNodeMaterial: Add sizeAttenuation * Regenerate screenshot * revert mat4 mul with vec4(,1)? * revert * using let and toVar fixes the issue? * merge upstream/dev * revert screenshot * does reverting SpriteNode even fix? * revert fix * revert everything fix tsl galaxy? * checkout dev SpriteNodeMaterial.js... * smaller change test * convert scale to var * convert scale to var * simply adding toVar breaks tsl_galaxy? * fix multiple spritematerial with different center position * feedbacks * cleanup * feedbacks * cleanup * cleanup --------- Co-authored-by: sunag <[email protected]> WebGPURenderer: Prevent out of bounds `textureLoad` access in WGSL (mrdoob#29470) Co-authored-by: aardgoose <[email protected]> SkyMesh,WaterMesh: Fix NodeMaterial imports (mrdoob#29477) WebGPURenderer: Reuse LightNode when available (mrdoob#29480) * WebGPURenderer: Reuse LightNode when available * cleanup DecalGeometry: Transform normal with normal matrix (mrdoob#29476) * Transform normal with normal matrix * Transform normal with normal matrix Examples: add reflection mask in `retargeting_readyplayer` (mrdoob#29485) BatchedMesh: Add `getGeometryRangeAt` (mrdoob#29409) * BatchedMesh: Add getGeometryRangeAt Co-authored-by: Luigi Denora <[email protected]> * Fix eslint error Co-authored-by: Luigi Denora <[email protected]> * Doc changed * Add optional target --------- Co-authored-by: Luigi Denora <[email protected]> WebGPURenderer: Introduce hash-based cache key (mrdoob#29479) * introduce numeric cache key * cleanup * cleanup * simplification * revision * rev * rev * cleanup Nodes: Access Remaining Compute Builtins (mrdoob#29469) * init * remove duplicated function Add decal as child of mesh (mrdoob#29486) Update webgl_postprocessing_ssaa.html Update webgpu_postprocessing_ssaa.html ToonOutlinePassNode: Add FX pass for toon outlines. (mrdoob#29483) * ToonOutlineNode: Add FX pass for toon outlines. * ToonOutlinePassNode: Refactor code. * E2E: Update screenshot. * ToonOutlinePassNode: Clean up. * ToonOutlinePassNode: More clean up. * ToonOutlinePassNode: More clean up. Update Addons.js (mrdoob#29493) leftovers after removing `PackedPhongMaterial ` mrdoob#29382 ReferenceNode: Fix null reference using `getNodeType()` (mrdoob#29498) * fix null reference using `getNodeType()` * add `sprite.center` check NodeBuilder: Introduce `addFlowCodeHierarchy()` / `NodeBlock` (mrdoob#29495) * VolumeNodeMaterial: simplify a little * cleanup * NodeBuilder: Introduce `addFlowCodeHierarchy()` Examples: Improve shadow map size in `webgpu_tsl_angular_slicing` (mrdoob#29499) WebGPURenderer: respect the `renderer.shadowMap.enabled` property (mrdoob#29492) * enable/disable shadow * enable shadowmaps * enable more examples * and another one * Update Nodes.js --------- Co-authored-by: aardgoose <[email protected]> Updated builds. GLTFLoader: Remove deprecated code. (mrdoob#29502) TiltLoader: Remove loader. (mrdoob#29471) Update Chinese translation of InstancedMesh. (mrdoob#29506) r169
I think this feature is deserving of a three.js example. Also, (self) shadows do not appear to render correctly in my testing. |
Related issue: #22017 (comment)
Description
Implements a reversed depth buffer with a [0, 1] projection matrix via
EXT_clip_control
, which is a strict improvement over logarithmic depth where supported. A reverse depth buffer exploits the high precision range of [0, ~0.8] and inverts depth to better the distribution at distance. This is not only significantly faster than logarithmic depth (where use ofgl_FragDepth
disables early-z optimizations and MSAA coverage) but more accurate. See the below articles, which visualize this effect.https://tomhultonharrop.com/mathematics/graphics/2023/08/06/reverse-z.html
https://developer.nvidia.com/blog/visualizing-depth-precision
As both a [0, 1] and reversed projection matrix would require drastic changes to sensitive code like frustum planes or raycasting, I've hidden both conversions when setting the
projectionMatrix
uniform inWebGLRenderer
. It's possible this can be moved to a shader chunk, but any inline clip-space math must account for this mode, and we'll need to add a shader define accordingly.The same is true for logarithmic depth, e.g., pmndrs/drei#1737. I've debated adding methods to packing chunks for these.
This example was ported from https://webgpu.github.io/webgpu-samples/?sample=reversedZ and uses a 32 bit depth-buffer.
https://jsfiddle.net/n69rqj8u
three-reverse-depth.mp4