From 5b076005734cba48f51b84f1a4627dc0b32f1482 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 22 Jul 2024 22:48:55 -0400 Subject: [PATCH] WebGPURenderer: Introduce renderer.transparent and renderer.opaque (#1117) * Update three.js * Add src * Update patch and delete src * Update declarations --- src-testing/changes.patch | 95 ++++++++++--------- three.js | 2 +- .../three/src/renderers/common/Renderer.d.ts | 2 + 3 files changed, 52 insertions(+), 47 deletions(-) diff --git a/src-testing/changes.patch b/src-testing/changes.patch index e84b43c63..9e4120594 100644 --- a/src-testing/changes.patch +++ b/src-testing/changes.patch @@ -4911,7 +4911,7 @@ index 0ec34b04..573cae2b 100644 this.vertexProgram = vertexProgram; diff --git a/src-testing/src/renderers/common/Renderer.ts b/src-testing/src/renderers/common/Renderer.ts -index 23b3af4e..04400b5a 100644 +index 09aca52a..08db0e4c 100644 --- a/src-testing/src/renderers/common/Renderer.ts +++ b/src-testing/src/renderers/common/Renderer.ts @@ -15,7 +15,7 @@ import ClippingContext from './ClippingContext.js'; @@ -4957,7 +4957,7 @@ index 23b3af4e..04400b5a 100644 const _scene = /*@__PURE__*/ new Scene(); const _drawingBufferSize = /*@__PURE__*/ new Vector2(); -@@ -44,8 +70,143 @@ const _frustum = /*@__PURE__*/ new Frustum(); +@@ -44,8 +70,146 @@ const _frustum = /*@__PURE__*/ new Frustum(); const _projScreenMatrix = /*@__PURE__*/ new Matrix4(); const _vector3 = /*@__PURE__*/ new Vector3(); @@ -5080,6 +5080,9 @@ index 23b3af4e..04400b5a 100644 + + _compilationPromises: Promise[] | null; + ++ transparent: boolean; ++ opaque: boolean; ++ + shadowMap: { enabled: boolean; type: ShadowMapType | null }; + + xr: { enabled: boolean }; @@ -5102,7 +5105,7 @@ index 23b3af4e..04400b5a 100644 this.isRenderer = true; // -@@ -214,12 +375,12 @@ class Renderer { +@@ -215,12 +379,12 @@ class Renderer { return this.backend.coordinateSystem; } @@ -5117,7 +5120,7 @@ index 23b3af4e..04400b5a 100644 const previousRenderId = nodeFrame.renderId; const previousRenderContext = this._currentRenderContext; -@@ -233,10 +394,10 @@ class Renderer { +@@ -234,10 +398,10 @@ class Renderer { if (targetScene === null) targetScene = scene; const renderTarget = this._renderTarget; @@ -5130,7 +5133,7 @@ index 23b3af4e..04400b5a 100644 this._currentRenderContext = renderContext; this._currentRenderObjectFunction = this.renderObject; -@@ -265,7 +426,7 @@ class Renderer { +@@ -266,7 +430,7 @@ class Renderer { // @@ -5139,7 +5142,7 @@ index 23b3af4e..04400b5a 100644 renderList.begin(); this._projectObject(scene, camera, 0, renderList); -@@ -273,8 +434,8 @@ class Renderer { +@@ -274,8 +438,8 @@ class Renderer { // include lights from target scene if (targetScene !== scene) { targetScene.traverseVisible(function (object) { @@ -5150,7 +5153,7 @@ index 23b3af4e..04400b5a 100644 } }); } -@@ -284,12 +445,12 @@ class Renderer { +@@ -285,12 +449,12 @@ class Renderer { // if (renderTarget !== null) { @@ -5167,7 +5170,7 @@ index 23b3af4e..04400b5a 100644 } else { renderContext.textures = null; renderContext.depthTexture = null; -@@ -297,11 +458,11 @@ class Renderer { +@@ -298,11 +462,11 @@ class Renderer { // @@ -5181,7 +5184,7 @@ index 23b3af4e..04400b5a 100644 // process render lists -@@ -327,7 +488,7 @@ class Renderer { +@@ -330,7 +494,7 @@ class Renderer { await Promise.all(compilationPromises); } @@ -5190,7 +5193,7 @@ index 23b3af4e..04400b5a 100644 if (this._initialized === false) await this.init(); const renderContext = this._renderScene(scene, camera); -@@ -335,7 +496,7 @@ class Renderer { +@@ -338,7 +502,7 @@ class Renderer { await this.backend.resolveTimestampAsync(renderContext, 'render'); } @@ -5199,7 +5202,7 @@ index 23b3af4e..04400b5a 100644 this._mrt = mrt; return this; -@@ -345,15 +506,15 @@ class Renderer { +@@ -348,15 +512,15 @@ class Renderer { return this._mrt; } @@ -5218,7 +5221,7 @@ index 23b3af4e..04400b5a 100644 const renderBundleData = this.backend.get(renderBundle); if (renderBundleData.renderContexts === undefined) renderBundleData.renderContexts = new Set(); -@@ -367,7 +528,7 @@ class Renderer { +@@ -370,7 +534,7 @@ class Renderer { if (renderBundleNeedsUpdate) { if (renderContextData.renderObjects === undefined || object.needsUpdate === true) { @@ -5227,7 +5230,7 @@ index 23b3af4e..04400b5a 100644 renderContextData.renderObjects = []; renderContextData.renderBundles = []; -@@ -390,13 +551,13 @@ class Renderer { +@@ -393,13 +557,13 @@ class Renderer { object.needsUpdate = false; } else { @@ -5243,7 +5246,7 @@ index 23b3af4e..04400b5a 100644 // -@@ -406,17 +567,17 @@ class Renderer { +@@ -409,17 +573,17 @@ class Renderer { ); renderObject.object.normalMatrix.getNormalMatrix(renderObject.object.modelViewMatrix); @@ -5265,7 +5268,7 @@ index 23b3af4e..04400b5a 100644 if (this._initialized === false) { console.warn( 'THREE.Renderer: .render() called before the backend is initialized. Try using .renderAsync() instead.', -@@ -471,12 +632,12 @@ class Renderer { +@@ -474,12 +638,12 @@ class Renderer { return frameBufferTarget; } @@ -5280,7 +5283,7 @@ index 23b3af4e..04400b5a 100644 const previousRenderId = nodeFrame.renderId; const previousRenderContext = this._currentRenderContext; -@@ -505,7 +666,7 @@ class Renderer { +@@ -508,7 +672,7 @@ class Renderer { // @@ -5289,7 +5292,7 @@ index 23b3af4e..04400b5a 100644 this._currentRenderContext = renderContext; this._currentRenderObjectFunction = this._renderObjectFunction || this.renderObject; -@@ -577,7 +738,7 @@ class Renderer { +@@ -580,7 +744,7 @@ class Renderer { _projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse); _frustum.setFromProjectionMatrix(_projScreenMatrix, coordinateSystem); @@ -5298,7 +5301,7 @@ index 23b3af4e..04400b5a 100644 renderList.begin(); this._projectObject(scene, camera, 0, renderList); -@@ -591,14 +752,14 @@ class Renderer { +@@ -594,14 +758,14 @@ class Renderer { // if (renderTarget !== null) { @@ -5319,7 +5322,7 @@ index 23b3af4e..04400b5a 100644 renderContext.renderTarget = renderTarget; renderContext.depth = renderTarget.depthBuffer; renderContext.stencil = renderTarget.stencilBuffer; -@@ -619,11 +780,11 @@ class Renderer { +@@ -622,11 +786,11 @@ class Renderer { // @@ -5333,7 +5336,7 @@ index 23b3af4e..04400b5a 100644 // -@@ -658,8 +819,8 @@ class Renderer { +@@ -663,8 +827,8 @@ class Renderer { const quad = this._quad; @@ -5344,7 +5347,7 @@ index 23b3af4e..04400b5a 100644 quad.material.needsUpdate = true; } -@@ -687,13 +848,13 @@ class Renderer { +@@ -692,13 +856,13 @@ class Renderer { return this._activeMipmapLevel; } @@ -5361,7 +5364,7 @@ index 23b3af4e..04400b5a 100644 return await this.backend.getArrayBufferAsync(attribute); } -@@ -705,11 +866,11 @@ class Renderer { +@@ -710,11 +874,11 @@ class Renderer { return this._pixelRatio; } @@ -5375,7 +5378,7 @@ index 23b3af4e..04400b5a 100644 return target.set(this._width, this._height); } -@@ -719,7 +880,7 @@ class Renderer { +@@ -724,7 +888,7 @@ class Renderer { this.setSize(this._width, this._height, false); } @@ -5384,7 +5387,7 @@ index 23b3af4e..04400b5a 100644 this._width = width; this._height = height; -@@ -733,7 +894,7 @@ class Renderer { +@@ -738,7 +902,7 @@ class Renderer { if (this._initialized) this.backend.updateSize(); } @@ -5393,7 +5396,7 @@ index 23b3af4e..04400b5a 100644 this._width = width; this._height = height; -@@ -750,15 +911,15 @@ class Renderer { +@@ -755,15 +919,15 @@ class Renderer { if (this._initialized) this.backend.updateSize(); } @@ -5412,7 +5415,7 @@ index 23b3af4e..04400b5a 100644 const scissor = this._scissor; target.x = scissor.x; -@@ -769,13 +930,15 @@ class Renderer { +@@ -774,13 +938,15 @@ class Renderer { return target; } @@ -5432,7 +5435,7 @@ index 23b3af4e..04400b5a 100644 } } -@@ -783,34 +946,36 @@ class Renderer { +@@ -788,34 +954,36 @@ class Renderer { return this._scissorTest; } @@ -5477,7 +5480,7 @@ index 23b3af4e..04400b5a 100644 this._clearColor.set(color); this._clearColor.a = alpha; } -@@ -819,7 +984,7 @@ class Renderer { +@@ -824,7 +992,7 @@ class Renderer { return this._clearColor.a; } @@ -5486,7 +5489,7 @@ index 23b3af4e..04400b5a 100644 this._clearColor.a = alpha; } -@@ -827,7 +992,7 @@ class Renderer { +@@ -832,7 +1000,7 @@ class Renderer { return this._clearDepth; } @@ -5495,7 +5498,7 @@ index 23b3af4e..04400b5a 100644 this._clearDepth = depth; } -@@ -835,11 +1000,11 @@ class Renderer { +@@ -840,11 +1008,11 @@ class Renderer { return this._clearStencil; } @@ -5509,7 +5512,7 @@ index 23b3af4e..04400b5a 100644 const renderContext = this._currentRenderContext; return renderContext && this.backend.isOccluded(renderContext, object); -@@ -859,9 +1024,9 @@ class Renderer { +@@ -864,9 +1032,9 @@ class Renderer { let renderTargetData = null; if (renderTarget !== null) { @@ -5521,7 +5524,7 @@ index 23b3af4e..04400b5a 100644 } this.backend.clear(color, depth, stencil, renderTargetData); -@@ -872,8 +1037,8 @@ class Renderer { +@@ -877,8 +1045,8 @@ class Renderer { const quad = this._quad; @@ -5532,7 +5535,7 @@ index 23b3af4e..04400b5a 100644 quad.material.needsUpdate = true; } -@@ -912,7 +1077,7 @@ class Renderer { +@@ -917,7 +1085,7 @@ class Renderer { } get currentColorSpace() { @@ -5541,7 +5544,7 @@ index 23b3af4e..04400b5a 100644 if (renderTarget !== null) { const texture = renderTarget.texture; -@@ -926,20 +1091,20 @@ class Renderer { +@@ -931,20 +1099,20 @@ class Renderer { dispose() { this.info.dispose(); @@ -5571,7 +5574,7 @@ index 23b3af4e..04400b5a 100644 this._renderTarget = renderTarget; this._activeCubeFace = activeCubeFace; this._activeMipmapLevel = activeMipmapLevel; -@@ -949,7 +1114,19 @@ class Renderer { +@@ -954,7 +1122,19 @@ class Renderer { return this._renderTarget; } @@ -5592,7 +5595,7 @@ index 23b3af4e..04400b5a 100644 this._renderObjectFunction = renderObjectFunction; } -@@ -957,10 +1134,10 @@ class Renderer { +@@ -962,10 +1142,10 @@ class Renderer { return this._renderObjectFunction; } @@ -5605,7 +5608,7 @@ index 23b3af4e..04400b5a 100644 const previousRenderId = nodeFrame.renderId; -@@ -975,9 +1152,9 @@ class Renderer { +@@ -980,9 +1160,9 @@ class Renderer { // const backend = this.backend; @@ -5618,7 +5621,7 @@ index 23b3af4e..04400b5a 100644 const computeList = Array.isArray(computeNodes) ? computeNodes : [computeNodes]; -@@ -1024,13 +1201,13 @@ class Renderer { +@@ -1029,13 +1209,13 @@ class Renderer { nodeFrame.renderId = previousRenderId; } @@ -5634,7 +5637,7 @@ index 23b3af4e..04400b5a 100644 if (this._initialized === false) { console.warn( 'THREE.Renderer: .hasFeature() called before the backend is initialized. Try using .hasFeatureAsync() instead.', -@@ -1042,64 +1219,77 @@ class Renderer { +@@ -1047,64 +1227,77 @@ class Renderer { return this.backend.hasFeature(name); } @@ -5733,7 +5736,7 @@ index 23b3af4e..04400b5a 100644 .applyMatrix4(object.matrixWorld) .applyMatrix4(_projScreenMatrix); } -@@ -1109,7 +1299,7 @@ class Renderer { +@@ -1114,7 +1307,7 @@ class Renderer { for (let i = 0, l = groups.length; i < l; i++) { const group = groups[i]; @@ -5742,7 +5745,7 @@ index 23b3af4e..04400b5a 100644 if (groupMaterial && groupMaterial.visible) { renderList.push(object, geometry, groupMaterial, groupOrder, _vector3.z, group); -@@ -1126,7 +1316,7 @@ class Renderer { +@@ -1131,7 +1324,7 @@ class Renderer { const baseRenderList = renderList; // replace render list @@ -5751,7 +5754,7 @@ index 23b3af4e..04400b5a 100644 renderList.begin(); -@@ -1146,13 +1336,13 @@ class Renderer { +@@ -1151,13 +1344,13 @@ class Renderer { } } @@ -5767,7 +5770,7 @@ index 23b3af4e..04400b5a 100644 // process renderable objects for (let i = 0, il = renderList.length; i < il; i++) { -@@ -1163,42 +1353,50 @@ class Renderer { +@@ -1168,42 +1361,50 @@ class Renderer { const { object, geometry, material, group } = renderItem; @@ -5829,7 +5832,7 @@ index 23b3af4e..04400b5a 100644 let overridePositionNode; let overrideFragmentNode; let overrideDepthNode; -@@ -1283,21 +1481,29 @@ class Renderer { +@@ -1288,21 +1489,29 @@ class Renderer { object.onAfterRender(this, scene, camera, geometry, material, group); } @@ -5863,7 +5866,7 @@ index 23b3af4e..04400b5a 100644 // -@@ -1306,10 +1512,10 @@ class Renderer { +@@ -1311,10 +1520,10 @@ class Renderer { // @@ -5878,7 +5881,7 @@ index 23b3af4e..04400b5a 100644 // -@@ -1323,38 +1529,46 @@ class Renderer { +@@ -1328,38 +1537,46 @@ class Renderer { this.backend.draw(renderObject, this.info); if (this._currentRenderBundle !== null) { diff --git a/three.js b/three.js index bdc6485ea..d82e3e60e 160000 --- a/three.js +++ b/three.js @@ -1 +1 @@ -Subproject commit bdc6485ea749164f2059f08c16fd24974cc5203e +Subproject commit d82e3e60eeb86bc30c4b10af37de45353cde256e diff --git a/types/three/src/renderers/common/Renderer.d.ts b/types/three/src/renderers/common/Renderer.d.ts index 012d9491d..d8d7e38bd 100644 --- a/types/three/src/renderers/common/Renderer.d.ts +++ b/types/three/src/renderers/common/Renderer.d.ts @@ -123,6 +123,8 @@ declare class Renderer { _initialized: boolean; _initPromise: Promise | null; _compilationPromises: Promise[] | null; + transparent: boolean; + opaque: boolean; shadowMap: { enabled: boolean; type: ShadowMapType | null;