diff --git a/examples/jsm/tsl/display/OITPassNode.js b/examples/jsm/tsl/display/OITPassNode.js index ef9170afee683c..44888c233982ae 100644 --- a/examples/jsm/tsl/display/OITPassNode.js +++ b/examples/jsm/tsl/display/OITPassNode.js @@ -16,7 +16,9 @@ let _rendererState, _sceneState; * incorrectly resolved intersecting geometry are avoided. * * Only transparent materials using `NormalBlending` and no transmission qualify - * for OIT. All other objects are rendered as usual. MSAA is not supported. + * for OIT. All other objects are rendered as usual. + * + * MSAA is only supported with the WebGPU backend. * * MRT configurations assigned via `setMRT()` apply to the default pass only. * OIT-qualified objects contribute to the color output but not to custom @@ -51,7 +53,7 @@ class OITPassNode extends PassNode { */ constructor( scene, camera, options = {} ) { - super( PassNode.COLOR, scene, camera, { ...options, samples: 0 } ); + super( PassNode.COLOR, scene, camera, options ); /** * This flag can be used for type testing. @@ -210,6 +212,25 @@ class OITPassNode extends PassNode { const beautyNode = super.setup( builder ); + // MSAA + + if ( builder.renderer.backend.isWebGPUBackend === true ) { + + // sample counts must match since the depth buffer is shared + + this._oitRenderTarget.samples = this.renderTarget.samples; + + } else { + + // The WebGL backend does not support depth texture sharing with MSAA unless + // WEBGL_multisampled_render_to_texture is supported (which isn't available on most devices) + + this.renderTarget.samples = 0; + + } + + // TSL + const accumNode = texture( this._oitRenderTarget.textures[ 0 ] ); const revealageNode = texture( this._oitRenderTarget.textures[ 1 ] ).r; diff --git a/examples/tags.json b/examples/tags.json index 4eb1abb82f0d2b..fbefb8a6fc22e9 100644 --- a/examples/tags.json +++ b/examples/tags.json @@ -152,6 +152,7 @@ "webgpu_mirror": [ "reflection" ], "webgpu_multiple_rendertargets": [ "mrt" ], "webgpu_multiple_rendertargets_readback": [ "mrt" ], + "webgpu_oit": [ "transparency" ], "webgpu_particles": [ "fire" ], "webgpu_postprocessing_3dlut": [ "color grading" ], "webgpu_postprocessing_afterimage": [ "trails" ], diff --git a/examples/webgl_loader_fbx.html b/examples/webgl_loader_fbx.html index 1f612eca33f573..f1e613f92241a5 100644 --- a/examples/webgl_loader_fbx.html +++ b/examples/webgl_loader_fbx.html @@ -38,7 +38,7 @@ const manager = new THREE.LoadingManager(); - let camera, scene, renderer, stats, object, loader, guiMorphsFolder, guiAnimationsFolder; + let camera, scene, renderer, controls, stats, object, loader, guiMorphsFolder, guiAnimationsFolder; let mixer; const timer = new THREE.Timer(); @@ -116,7 +116,10 @@ renderer.shadowMap.enabled = true; container.appendChild( renderer.domElement ); - const controls = new OrbitControls( camera, renderer.domElement ); + controls = new OrbitControls( camera, renderer.domElement ); + controls.enableZoom = false; + controls.enablePan = false; + controls.enableDamping = true; controls.target.set( 0, 100, 0 ); controls.update(); @@ -261,6 +264,8 @@ if ( mixer ) mixer.update( delta ); + controls.update(); + renderer.render( scene, camera ); stats.update(); diff --git a/src/math/Matrix4.js b/src/math/Matrix4.js index 4528507b70d381..6522a6b57300d2 100644 --- a/src/math/Matrix4.js +++ b/src/math/Matrix4.js @@ -621,8 +621,6 @@ class Matrix4 { /** * Computes and returns the determinant of this matrix. * - * Based on the method outlined [here](http://www.euclideanspace.com/maths/algebra/matrix/functions/inverse/fourD/index.html). - * * @return {number} The determinant. */ determinant() { @@ -938,17 +936,12 @@ class Matrix4 { * Sets this matrix as a rotational transformation around the given axis by * the given angle. * - * This is a somewhat controversial but mathematically sound alternative to - * rotating via Quaternions. See the discussion [here](https://www.gamedev.net/articles/programming/math-and-physics/do-we-really-need-quaternions-r1199). - * * @param {Vector3} axis - The normalized rotation axis. * @param {number} angle - The rotation in radians. * @return {Matrix4} A reference to this matrix. */ makeRotationAxis( axis, angle ) { - // Based on http://www.gamedev.net/reference/articles/article1199.asp - const c = Math.cos( angle ); const s = Math.sin( angle ); const t = 1 - c; diff --git a/src/math/Plane.js b/src/math/Plane.js index 1cfe3ee8861352..f511421714b9f2 100644 --- a/src/math/Plane.js +++ b/src/math/Plane.js @@ -7,7 +7,7 @@ const _normalMatrix = /*@__PURE__*/ new Matrix3(); /** * A two dimensional surface that extends infinitely in 3D space, represented - * in [Hessian normal form](http://mathworld.wolfram.com/HessianNormalForm.html) + * in [Hessian normal form](https://mathworld.wolfram.com/HessianNormalForm.html) * by a unit length normal vector and a constant. */ class Plane { diff --git a/src/math/Triangle.js b/src/math/Triangle.js index 02128369e7370f..ec4c002557fdf6 100644 --- a/src/math/Triangle.js +++ b/src/math/Triangle.js @@ -93,8 +93,6 @@ class Triangle { */ static getBarycoord( point, a, b, c, target ) { - // based on: http://www.blackpawn.com/texts/pointinpoly/default.html - _v0.subVectors( c, a ); _v1.subVectors( b, a ); _v2.subVectors( point, a );