From 2c912bc486808daea107c2fbe5d141d63570dfc3 Mon Sep 17 00:00:00 2001 From: sunag Date: Mon, 17 Jul 2023 12:08:10 -0300 Subject: [PATCH 1/4] Delete NodeRender.js --- .../jsm/renderers/common/nodes/NodeRender.js | 302 ------------------ 1 file changed, 302 deletions(-) delete mode 100644 examples/jsm/renderers/common/nodes/NodeRender.js diff --git a/examples/jsm/renderers/common/nodes/NodeRender.js b/examples/jsm/renderers/common/nodes/NodeRender.js deleted file mode 100644 index cda2af2d8da79a..00000000000000 --- a/examples/jsm/renderers/common/nodes/NodeRender.js +++ /dev/null @@ -1,302 +0,0 @@ -import WebGPUNodeBuilder from '../../webgpu/backends/webgpu/builder/WGSLNodeBuilder.js'; -import { NoToneMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from 'three'; -import { NodeFrame, cubeTexture, texture, rangeFog, densityFog, reference, toneMapping, positionWorld, modelWorldMatrix, transformDirection, equirectUV, viewportBottomLeft } from '../../../nodes/Nodes.js'; - -class NodeRender { - - constructor( renderer, properties ) { - - this.renderer = renderer; - this.properties = properties; - - this.nodeFrame = new NodeFrame(); - - } - - get( renderObject ) { - - const renderObjectProperties = this.properties.get( renderObject ); - - let nodeBuilder = renderObjectProperties.nodeBuilder; - - if ( nodeBuilder === undefined ) { - - nodeBuilder = new WebGPUNodeBuilder( renderObject.object, this.renderer ); - nodeBuilder.material = renderObject.material; - nodeBuilder.lightsNode = renderObject.lightsNode; - nodeBuilder.environmentNode = this.getEnvironmentNode( renderObject.scene ); - nodeBuilder.fogNode = this.getFogNode( renderObject.scene ); - nodeBuilder.toneMappingNode = this.getToneMappingNode(); - nodeBuilder.build(); - - renderObjectProperties.nodeBuilder = nodeBuilder; - - } - - return nodeBuilder; - - } - - getForCompute( computeNode ) { - - const computeProperties = this.properties.get( computeNode ); - - let nodeBuilder = computeProperties.nodeBuilder; - - if ( nodeBuilder === undefined ) { - - nodeBuilder = new WebGPUNodeBuilder( computeNode, this.renderer ); - nodeBuilder.build(); - - computeProperties.nodeBuilder = nodeBuilder; - - } - - return nodeBuilder; - - } - - remove( renderObject ) { - - const objectProperties = this.properties.get( renderObject ); - - delete objectProperties.nodeBuilder; - - } - - getEnvironmentNode( scene ) { - - return scene.environmentNode || this.properties.get( scene ).environmentNode || null; - - } - - getFogNode( scene ) { - - return scene.fogNode || this.properties.get( scene ).fogNode || null; - - } - - getToneMappingNode() { - - return this.renderer.toneMappingNode || this.properties.get( this.renderer ).toneMappingNode || null; - - } - - getCacheKey( scene, lightsNode ) { - - const environmentNode = this.getEnvironmentNode( scene ); - const fogNode = this.getFogNode( scene ); - const toneMappingNode = this.getToneMappingNode(); - - const cacheKey = []; - - if ( lightsNode ) cacheKey.push( 'lightsNode:' + lightsNode.getCacheKey() ); - if ( environmentNode ) cacheKey.push( 'environmentNode:' + environmentNode.getCacheKey() ); - if ( fogNode ) cacheKey.push( 'fogNode:' + fogNode.getCacheKey() ); - if ( toneMappingNode ) cacheKey.push( 'toneMappingNode:' + toneMappingNode.getCacheKey() ); - - return '{' + cacheKey.join( ',' ) + '}'; - - } - - updateToneMapping() { - - const renderer = this.renderer; - const rendererProperties = this.properties.get( renderer ); - const rendererToneMapping = renderer.toneMapping; - - if ( rendererToneMapping !== NoToneMapping ) { - - if ( rendererProperties.toneMapping !== rendererToneMapping ) { - - rendererProperties.toneMappingNode = toneMapping( rendererToneMapping, reference( 'toneMappingExposure', 'float', renderer ) ); - rendererProperties.toneMapping = rendererToneMapping; - - } - - } else { - - delete rendererProperties.toneMappingNode; - delete rendererProperties.toneMapping; - - } - - } - - updateBackground( scene ) { - - const sceneProperties = this.properties.get( scene ); - const background = scene.background; - - if ( background ) { - - if ( sceneProperties.background !== background ) { - - let backgroundNode = null; - - if ( background.isCubeTexture === true ) { - - backgroundNode = cubeTexture( background, transformDirection( positionWorld, modelWorldMatrix ) ); - - } else if ( background.isTexture === true ) { - - let nodeUV = null; - - if ( background.mapping === EquirectangularReflectionMapping || background.mapping === EquirectangularRefractionMapping ) { - - nodeUV = equirectUV(); - - } else { - - nodeUV = viewportBottomLeft; - - } - - backgroundNode = texture( background, nodeUV ); - - } else if ( background.isColor !== true ) { - - console.error( 'WebGPUNodes: Unsupported background configuration.', background ); - - } - - sceneProperties.backgroundNode = backgroundNode; - sceneProperties.background = background; - - } - - } else if ( sceneProperties.backgroundNode ) { - - delete sceneProperties.backgroundNode; - delete sceneProperties.background; - - } - - } - - updateFog( scene ) { - - const sceneProperties = this.properties.get( scene ); - const fog = scene.fog; - - if ( fog ) { - - if ( sceneProperties.fog !== fog ) { - - let fogNode = null; - - if ( fog.isFogExp2 ) { - - fogNode = densityFog( reference( 'color', 'color', fog ), reference( 'density', 'float', fog ) ); - - } else if ( fog.isFog ) { - - fogNode = rangeFog( reference( 'color', 'color', fog ), reference( 'near', 'float', fog ), reference( 'far', 'float', fog ) ); - - } else { - - console.error( 'WebGPUNodes: Unsupported fog configuration.', fog ); - - } - - sceneProperties.fogNode = fogNode; - sceneProperties.fog = fog; - - } - - } else { - - delete sceneProperties.fogNode; - delete sceneProperties.fog; - - } - - } - - updateEnvironment( scene ) { - - const sceneProperties = this.properties.get( scene ); - const environment = scene.environment; - - if ( environment ) { - - if ( sceneProperties.environment !== environment ) { - - let environmentNode = null; - - if ( environment.isCubeTexture === true ) { - - environmentNode = cubeTexture( environment ); - - } else if ( environment.isTexture === true ) { - - environmentNode = texture( environment ); - - } else { - - console.error( 'WebGPUNodes: Unsupported environment configuration.', environment ); - - } - - sceneProperties.environmentNode = environmentNode; - sceneProperties.environment = environment; - - } - - } else if ( sceneProperties.environmentNode ) { - - delete sceneProperties.environmentNode; - delete sceneProperties.environment; - - } - - } - - getNodeFrame( renderObject ) { - - const nodeFrame = this.nodeFrame; - nodeFrame.scene = renderObject.scene; - nodeFrame.object = renderObject.object; - nodeFrame.camera = renderObject.camera; - nodeFrame.renderer = renderObject.renderer; - nodeFrame.material = renderObject.material; - - return nodeFrame; - - } - - updateBefore( renderObject ) { - - const nodeFrame = this.getNodeFrame( renderObject ); - const nodeBuilder = this.get( renderObject ); - - for ( const node of nodeBuilder.updateBeforeNodes ) { - - nodeFrame.updateBeforeNode( node ); - - } - - } - - update( renderObject ) { - - const nodeFrame = this.getNodeFrame( renderObject ); - const nodeBuilder = this.get( renderObject ); - - for ( const node of nodeBuilder.updateNodes ) { - - nodeFrame.updateNode( node ); - - } - - } - - dispose() { - - this.nodeFrame = new NodeFrame(); - - } - -} - -export default NodeRender; From 48ac212621e91c0e4c014f0a82b923aa54871987 Mon Sep 17 00:00:00 2001 From: sunag Date: Mon, 17 Jul 2023 12:09:01 -0300 Subject: [PATCH 2/4] TextureNode: Add .setUpdateMatrix() --- examples/jsm/nodes/accessors/TextureNode.js | 28 +++++++++++++++++--- examples/jsm/renderers/common/nodes/Nodes.js | 2 +- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/examples/jsm/nodes/accessors/TextureNode.js b/examples/jsm/nodes/accessors/TextureNode.js index 1a49fd7f33926d..d184d6b57087f1 100644 --- a/examples/jsm/nodes/accessors/TextureNode.js +++ b/examples/jsm/nodes/accessors/TextureNode.js @@ -20,7 +20,9 @@ class TextureNode extends UniformNode { this.levelNode = levelNode; this.compareNode = compareNode; - this.updateType = NodeUpdateType.FRAME; + this.updateMatrix = uvNode === null; + + this.setUpdateMatrix( this.updateMatrix ); } @@ -44,17 +46,27 @@ class TextureNode extends UniformNode { } - getDefaultUV() { + getDefaultUV( uvNode ) { const texture = this.value; - return uniform( texture.matrix ).mul( vec3( uv( texture.channel ), 1 ) ); + return uniform( texture.matrix ).mul( vec3( uvNode, 1 ) ); + + } + + setUpdateMatrix( value ) { + + this.updateMatrix = value; + this.updateType = value ? NodeUpdateType.FRAME : NodeUpdateType.NONE; + + return this; } construct( builder ) { const properties = builder.getNodeProperties( this ); + const texture = this.value; // @@ -66,7 +78,15 @@ class TextureNode extends UniformNode { } - uvNode || ( uvNode = this.getDefaultUV() ); + if ( this.updateMatrix ) { + + uvNode = this.getDefaultUV( uvNode || uv( texture.channel ) ); + + } else if ( ! uvNode ) { + + uvNode = uv( texture.channel ); + + } // diff --git a/examples/jsm/renderers/common/nodes/Nodes.js b/examples/jsm/renderers/common/nodes/Nodes.js index ab7d656869777f..3f33c194b281ed 100644 --- a/examples/jsm/renderers/common/nodes/Nodes.js +++ b/examples/jsm/renderers/common/nodes/Nodes.js @@ -165,7 +165,7 @@ class Nodes extends DataMap { } - backgroundNode = texture( background, nodeUV ); + backgroundNode = texture( background, nodeUV ).setUpdateMatrix( true ); } else if ( background.isColor !== true ) { From ca5e00130cbbffa08841c6c822ee262285e6a470 Mon Sep 17 00:00:00 2001 From: sunag Date: Mon, 17 Jul 2023 12:59:25 -0300 Subject: [PATCH 3/4] WebGPUPipeline: Add .getBlending() --- .../renderers/webgpu/utils/WebGPUConstants.js | 12 +- .../webgpu/utils/WebGPUPipelineUtils.js | 185 +++++++----------- 2 files changed, 79 insertions(+), 118 deletions(-) diff --git a/examples/jsm/renderers/webgpu/utils/WebGPUConstants.js b/examples/jsm/renderers/webgpu/utils/WebGPUConstants.js index d8217a70f89869..f1de5d640320ec 100644 --- a/examples/jsm/renderers/webgpu/utils/WebGPUConstants.js +++ b/examples/jsm/renderers/webgpu/utils/WebGPUConstants.js @@ -222,17 +222,17 @@ export const GPUFilterMode = { export const GPUBlendFactor = { Zero: 'zero', One: 'one', - SrcColor: 'src-color', - OneMinusSrcColor: 'one-minus-src-color', + Src: 'src', + OneMinusSrc: 'one-minus-src', SrcAlpha: 'src-alpha', OneMinusSrcAlpha: 'one-minus-src-alpha', - DstColor: 'dst-color', - OneMinusDstColor: 'one-minus-dst-color', + Dst: 'dst', + OneMinusDstColor: 'one-minus-dst', DstAlpha: 'dst-alpha', OneMinusDstAlpha: 'one-minus-dst-alpha', SrcAlphaSaturated: 'src-alpha-saturated', - BlendColor: 'blend-color', - OneMinusBlendColor: 'one-minus-blend-color' + Constant: 'constant', + OneMinusConstant: 'one-minus-constant' }; export const GPUBlendOperation = { diff --git a/examples/jsm/renderers/webgpu/utils/WebGPUPipelineUtils.js b/examples/jsm/renderers/webgpu/utils/WebGPUPipelineUtils.js index b444c0e42a46f4..b6e753e94ff8c8 100644 --- a/examples/jsm/renderers/webgpu/utils/WebGPUPipelineUtils.js +++ b/examples/jsm/renderers/webgpu/utils/WebGPUPipelineUtils.js @@ -45,10 +45,7 @@ class WebGPUPipelineUtils { if ( material.transparent === true && material.blending !== NoBlending ) { - blending = { - alpha: this._getAlphaBlend( material ), - color: this._getColorBlend( material ) - }; + blending = this._getBlending( material ); } @@ -125,92 +122,108 @@ class WebGPUPipelineUtils { } - _getAlphaBlend( material ) { + _getBlending( material ) { + + let color, alpha; const blending = material.blending; - const premultipliedAlpha = material.premultipliedAlpha; - let alphaBlend = undefined; + if ( blending === CustomBlending ) { - switch ( blending ) { + const blendSrcAlpha = material.blendSrcAlpha !== null ? material.blendSrcAlpha : GPUBlendFactor.One; + const blendDstAlpha = material.blendDstAlpha !== null ? material.blendDstAlpha : GPUBlendFactor.Zero; + const blendEquationAlpha = material.blendEquationAlpha !== null ? material.blendEquationAlpha : GPUBlendFactor.Add; - case NormalBlending: + color = { + srcFactor: this._getBlendFactor( material.blendSrc ), + dstFactor: this._getBlendFactor( material.blendDst ), + operation: this._getBlendOperation( material.blendEquation ) + }; - if ( premultipliedAlpha === false ) { + alpha = { + srcFactor: this._getBlendFactor( blendSrcAlpha ), + dstFactor: this._getBlendFactor( blendDstAlpha ), + operation: this._getBlendOperation( blendEquationAlpha ) + }; - alphaBlend = { - srcFactor: GPUBlendFactor.One, - dstFactor: GPUBlendFactor.OneMinusSrcAlpha, - operation: GPUBlendOperation.Add - }; + } else { - } + const premultipliedAlpha = material.premultipliedAlpha; - break; + const setBlend = ( srcRGB, dstRGB, srcAlpha, dstAlpha ) => { - case AdditiveBlending: + color = { + srcFactor: srcRGB, + dstFactor: dstRGB, + operation: GPUBlendOperation.Add + }; - alphaBlend = { - srcFactor: GPUBlendFactor.Zero, - dstFactor: GPUBlendFactor.One, + alpha = { + srcFactor: srcAlpha, + dstFactor: dstAlpha, operation: GPUBlendOperation.Add }; - break; + }; + + if ( premultipliedAlpha ) { - case SubtractiveBlending: + switch ( blending ) { - if ( premultipliedAlpha === true ) { + case NormalBlending: + setBlend( GPUBlendFactor.SrcAlpha, GPUBlendFactor.OneMinusSrcAlpha, GPUBlendFactor.One, GPUBlendFactor.OneMinusSrcAlpha ); + break; - alphaBlend = { - srcFactor: GPUBlendFactor.OneMinusSrcColor, - dstFactor: GPUBlendFactor.OneMinusSrcAlpha, - operation: GPUBlendOperation.Add - }; + case AdditiveBlending: + setBlend( GPUBlendFactor.SrcAlpha, GPUBlendFactor.One, GPUBlendFactor.One, GPUBlendFactor.One ); + break; + + case SubtractiveBlending: + setBlend( GPUBlendFactor.Zero, GPUBlendFactor.OneMinusSrc, GPUBlendFactor.Zero, GPUBlendFactor.One ); + break; + + case MultiplyBlending: + setBlend( GPUBlendFactor.Zero, GPUBlendFactor.Src, GPUBlendFactor.Zero, GPUBlendFactor.SrcAlpha ); + break; } - break; + } else { - case MultiplyBlending: + switch ( blending ) { - if ( premultipliedAlpha === true ) { + case NormalBlending: + setBlend( GPUBlendFactor.SrcAlpha, GPUBlendFactor.OneMinusSrcAlpha, GPUBlendFactor.One, GPUBlendFactor.OneMinusSrcAlpha ); + break; - alphaBlend = { - srcFactor: GPUBlendFactor.Zero, - dstFactor: GPUBlendFactor.SrcAlpha, - operation: GPUBlendOperation.Add - }; + case AdditiveBlending: + setBlend( GPUBlendFactor.SrcAlpha, GPUBlendFactor.One, GPUBlendFactor.SrcAlpha, GPUBlendFactor.One ); + break; - } + case SubtractiveBlending: + setBlend( GPUBlendFactor.Zero, GPUBlendFactor.OneMinusSrc, GPUBlendFactor.Zero, GPUBlendFactor.One ); + break; - break; + case MultiplyBlending: + setBlend( GPUBlendFactor.Zero, GPUBlendFactor.Src, GPUBlendFactor.Zero, GPUBlendFactor.Src ); + break; - case CustomBlending: + } - const blendSrcAlpha = material.blendSrcAlpha; - const blendDstAlpha = material.blendDstAlpha; - const blendEquationAlpha = material.blendEquationAlpha; + } - if ( blendSrcAlpha !== null && blendDstAlpha !== null && blendEquationAlpha !== null ) { + } - alphaBlend = { - srcFactor: this._getBlendFactor( blendSrcAlpha ), - dstFactor: this._getBlendFactor( blendDstAlpha ), - operation: this._getBlendOperation( blendEquationAlpha ) - }; + if ( color !== undefined && alpha !== undefined ) { - } + return { color, alpha }; - break; + } else { - default: - console.error( 'THREE.WebGPURenderer: Blending not supported.', blending ); + console.error( 'THREE.WebGPURenderer: Invalid blending: ', blending ); } - return alphaBlend; - } _getBlendFactor( blend ) { @@ -228,11 +241,11 @@ class WebGPUPipelineUtils { break; case SrcColorFactor: - blendFactor = GPUBlendFactor.SrcColor; + blendFactor = GPUBlendFactor.Src; break; case OneMinusSrcColorFactor: - blendFactor = GPUBlendFactor.OneMinusSrcColor; + blendFactor = GPUBlendFactor.OneMinusSrc; break; case SrcAlphaFactor: @@ -244,7 +257,7 @@ class WebGPUPipelineUtils { break; case DstColorFactor: - blendFactor = GPUBlendFactor.DstColor; + blendFactor = GPUBlendFactor.Dst; break; case OneMinusDstColorFactor: @@ -264,11 +277,11 @@ class WebGPUPipelineUtils { break; case BlendColorFactor: - blendFactor = GPUBlendFactor.BlendColor; + blendFactor = GPUBlendFactor.Constant; break; case OneMinusBlendColorFactor: - blendFactor = GPUBlendFactor.OneMinusBlendColor; + blendFactor = GPUBlendFactor.OneMinusConstant; break; default: @@ -280,58 +293,6 @@ class WebGPUPipelineUtils { } - _getColorBlend( material ) { - - const blending = material.blending; - const premultipliedAlpha = material.premultipliedAlpha; - - const colorBlend = { - srcFactor: null, - dstFactor: null, - operation: null - }; - - switch ( blending ) { - - case NormalBlending: - colorBlend.srcFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha; - colorBlend.dstFactor = GPUBlendFactor.OneMinusSrcAlpha; - colorBlend.operation = GPUBlendOperation.Add; - break; - - case AdditiveBlending: - colorBlend.srcFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha; - colorBlend.dstFactor = GPUBlendFactor.One; - colorBlend.operation = GPUBlendOperation.Add; - break; - - case SubtractiveBlending: - colorBlend.srcFactor = GPUBlendFactor.Zero; - colorBlend.dstFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.Zero : GPUBlendFactor.OneMinusSrcColor; - colorBlend.operation = GPUBlendOperation.Add; - break; - - case MultiplyBlending: - colorBlend.srcFactor = GPUBlendFactor.Zero; - colorBlend.dstFactor = GPUBlendFactor.SrcColor; - colorBlend.operation = GPUBlendOperation.Add; - break; - - case CustomBlending: - colorBlend.srcFactor = this._getBlendFactor( material.blendSrc ); - colorBlend.dstFactor = this._getBlendFactor( material.blendDst ); - colorBlend.operation = this._getBlendOperation( material.blendEquation ); - break; - - default: - console.error( 'THREE.WebGPURenderer: Blending not supported.', blending ); - - } - - return colorBlend; - - } - _getStencilCompare( material ) { let stencilCompare; From 811da043f6f0df72e1becd97b4d6a3138578bc41 Mon Sep 17 00:00:00 2001 From: sunag Date: Mon, 17 Jul 2023 21:37:36 -0300 Subject: [PATCH 4/4] cleanup --- examples/jsm/nodes/accessors/TextureNode.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/jsm/nodes/accessors/TextureNode.js b/examples/jsm/nodes/accessors/TextureNode.js index d184d6b57087f1..0861014dcb6920 100644 --- a/examples/jsm/nodes/accessors/TextureNode.js +++ b/examples/jsm/nodes/accessors/TextureNode.js @@ -46,10 +46,12 @@ class TextureNode extends UniformNode { } - getDefaultUV( uvNode ) { + getDefaultUV( uvNode = null ) { const texture = this.value; + if ( uvNode === null ) uvNode = uv( texture.channel ); + return uniform( texture.matrix ).mul( vec3( uvNode, 1 ) ); } @@ -80,7 +82,7 @@ class TextureNode extends UniformNode { if ( this.updateMatrix ) { - uvNode = this.getDefaultUV( uvNode || uv( texture.channel ) ); + uvNode = this.getDefaultUV( uvNode ); } else if ( ! uvNode ) {