Skip to content

Commit a18c257

Browse files
sunagsunag
authored
WebGPURenderer: DepthTexture (#25766)
* FogNode: Update from construct API. * webgpu_rtt: update example API * WebGPURenderer: New Cache System * WebGPURenderer: Update cacheKey after needsUpdate. * final revision (1) * RenderObject pipeline based ( 1/2 ) * RenderObject pipeline based ( 2/2 ) * cleanup * fix possible overrideMaterial material with .wireframe and cleanup * Revert "fix possible overrideMaterial material with .wireframe and cleanup" This reverts commit 7dcd85e. * Revert "Revert "fix possible overrideMaterial material with .wireframe and cleanup"" This reverts commit 5370b40. * preserve nodes if pipeline is removed * WebGPURenderObjects: Move get*Node() to WebGPUNodes. * WebGPURenderer: DepthTexture * revision * revision * Move getCubeTexture() to getTexture()
1 parent 58ed2c5 commit a18c257

File tree

10 files changed

+157
-108
lines changed

10 files changed

+157
-108
lines changed

‎examples/jsm/nodes/accessors/CubeTextureNode.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,11 @@ class CubeTextureNode extends TextureNode {
6969

7070
const levelSnippet = levelNode.build( builder, 'float' );
7171

72-
snippet = builder.getCubeTextureLevel( textureProperty, uvSnippet, levelSnippet );
72+
snippet = builder.getTextureLevel( this, textureProperty, uvSnippet, levelSnippet );
7373

7474
} else {
7575

76-
snippet = builder.getCubeTexture( textureProperty, uvSnippet );
76+
snippet = builder.getTexture( this, textureProperty, uvSnippet );
7777

7878
}
7979

‎examples/jsm/nodes/accessors/TextureNode.js‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ class TextureNode extends UniformNode {
99

1010
constructor( value, uvNode = null, levelNode = null ) {
1111

12-
super( value, 'vec4' );
12+
super( value );
1313

1414
this.isTextureNode = true;
1515

@@ -24,6 +24,14 @@ class TextureNode extends UniformNode {
2424

2525
}
2626

27+
getNodeType( /*builder*/ ) {
28+
29+
if ( this.value.isDepthTexture === true ) return 'float';
30+
31+
return 'vec4';
32+
33+
}
34+
2735
getInputType( /*builder*/ ) {
2836

2937
return 'texture';
@@ -81,7 +89,7 @@ class TextureNode extends UniformNode {
8189

8290
}
8391

84-
const textureProperty = super.generate( builder, 'texture' );
92+
const textureProperty = super.generate( builder, 'property' );
8593

8694
if ( output === 'sampler' ) {
8795

@@ -93,32 +101,29 @@ class TextureNode extends UniformNode {
93101

94102
} else {
95103

104+
const nodeType = this.getNodeType( builder );
96105
const nodeData = builder.getDataFromNode( this );
97106

98107
let propertyName = nodeData.propertyName;
99108

100109
if ( propertyName === undefined ) {
101110

102111
const uvSnippet = uvNode.build( builder, 'vec2' );
103-
const nodeVar = builder.getVarFromNode( this, 'vec4' );
112+
const nodeVar = builder.getVarFromNode( this, nodeType );
104113

105114
propertyName = builder.getPropertyName( nodeVar );
106115

107116
let snippet = null;
108117

109-
if ( texture.isVideoTexture === true ) {
110-
111-
snippet = builder.getVideoTexture( textureProperty, uvSnippet );
112-
113-
} else if ( levelNode && levelNode.isNode === true ) {
118+
if ( levelNode && levelNode.isNode === true ) {
114119

115120
const levelSnippet = levelNode.build( builder, 'float' );
116121

117-
snippet = builder.getTextureLevel( textureProperty, uvSnippet, levelSnippet );
122+
snippet = builder.getTextureLevel( texture, textureProperty, uvSnippet, levelSnippet );
118123

119124
} else {
120125

121-
snippet = builder.getTexture( textureProperty, uvSnippet );
126+
snippet = builder.getTexture( texture, textureProperty, uvSnippet );
122127

123128
}
124129

@@ -129,7 +134,7 @@ class TextureNode extends UniformNode {
129134

130135
}
131136

132-
return builder.format( propertyName, 'vec4', output );
137+
return builder.format( propertyName, nodeType, output );
133138

134139
}
135140

‎examples/jsm/nodes/core/NodeBuilder.js‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -210,25 +210,13 @@ class NodeBuilder {
210210

211211
}
212212

213-
getTexture( /* textureProperty, uvSnippet */ ) {
213+
getTexture( /* texture, textureProperty, uvSnippet */ ) {
214214

215215
console.warn( 'Abstract function.' );
216216

217217
}
218218

219-
getTextureLevel( /* textureProperty, uvSnippet, levelSnippet */ ) {
220-
221-
console.warn( 'Abstract function.' );
222-
223-
}
224-
225-
getCubeTexture( /* textureProperty, uvSnippet */ ) {
226-
227-
console.warn( 'Abstract function.' );
228-
229-
}
230-
231-
getCubeTextureLevel( /* textureProperty, uvSnippet, levelSnippet */ ) {
219+
getTextureLevel( /* texture, textureProperty, uvSnippet, levelSnippet */ ) {
232220

233221
console.warn( 'Abstract function.' );
234222

‎examples/jsm/renderers/webgl/nodes/WebGLNodeBuilder.js‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -422,27 +422,21 @@ class WebGLNodeBuilder extends NodeBuilder {
422422

423423
}
424424

425-
getTexture( textureProperty, uvSnippet ) {
425+
getTexture( texture, textureProperty, uvSnippet ) {
426426

427-
return `texture2D( ${textureProperty}, ${uvSnippet} )`;
427+
if ( texture.isTextureCube ) {
428428

429-
}
430-
431-
getTextureBias( textureProperty, uvSnippet, biasSnippet ) {
429+
return `textureCube( ${textureProperty}, ${uvSnippet} )`;
432430

433-
if ( this.material.extensions !== undefined ) this.material.extensions.shaderTextureLOD = true;
434-
435-
return `textureLod( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
436-
437-
}
431+
} else {
438432

439-
getCubeTexture( textureProperty, uvSnippet ) {
433+
return `texture2D( ${textureProperty}, ${uvSnippet} )`;
440434

441-
return `textureCube( ${textureProperty}, ${uvSnippet} )`;
435+
}
442436

443437
}
444438

445-
getCubeTextureBias( textureProperty, uvSnippet, biasSnippet ) {
439+
getTextureBias( texture, textureProperty, uvSnippet, biasSnippet ) {
446440

447441
if ( this.material.extensions !== undefined ) this.material.extensions.shaderTextureLOD = true;
448442

‎examples/jsm/renderers/webgpu/WebGPUBackground.js‎

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ class WebGPUBackground {
2525

2626
}
2727

28-
update( renderList, scene ) {
28+
update( renderList, scene, renderPassDescriptor, renderAttachments ) {
2929

3030
const renderer = this.renderer;
3131
const background = ( scene.isScene === true ) ? scene.backgroundNode || this.properties.get( scene ).backgroundNode || scene.background : null;
@@ -103,7 +103,6 @@ class WebGPUBackground {
103103

104104
// configure render pass descriptor
105105

106-
const renderPassDescriptor = renderer._renderPassDescriptor;
107106
const colorAttachment = renderPassDescriptor.colorAttachments[ 0 ];
108107
const depthStencilAttachment = renderPassDescriptor.depthStencilAttachment;
109108

@@ -124,29 +123,37 @@ class WebGPUBackground {
124123

125124
}
126125

127-
if ( renderer.autoClearDepth === true ) {
126+
if ( renderAttachments.depth ) {
128127

129-
depthStencilAttachment.depthClearValue = renderer._clearDepth;
130-
depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
131-
depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
128+
if ( renderer.autoClearDepth === true ) {
132129

133-
} else {
130+
depthStencilAttachment.depthClearValue = renderer._clearDepth;
131+
depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
132+
depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
134133

135-
depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
136-
depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
134+
} else {
135+
136+
depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
137+
depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
138+
139+
}
137140

138141
}
139142

140-
if ( renderer.autoClearStencil === true ) {
143+
if ( renderAttachments.stencil ) {
141144

142-
depthStencilAttachment.stencilClearValue = renderer._clearStencil;
143-
depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
144-
depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
145+
if ( renderer.autoClearStencil === true ) {
145146

146-
} else {
147+
depthStencilAttachment.stencilClearValue = renderer._clearStencil;
148+
depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
149+
depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
147150

148-
depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
149-
depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
151+
} else {
152+
153+
depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
154+
depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
155+
156+
}
150157

151158
}
152159

@@ -155,11 +162,19 @@ class WebGPUBackground {
155162
colorAttachment.loadOp = GPULoadOp.Load;
156163
colorAttachment.storeOp = GPUStoreOp.Store;
157164

158-
depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
159-
depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
165+
if ( renderAttachments.depth ) {
166+
167+
depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
168+
depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
169+
170+
}
160171

161-
depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
162-
depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
172+
if ( renderAttachments.stencil ) {
173+
174+
depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
175+
depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
176+
177+
}
163178

164179
}
165180

‎examples/jsm/renderers/webgpu/WebGPUBindings.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,10 @@ class WebGPUBindings {
236236

237237
binding.textureGPU = this.textures.getVideoDefaultTexture();
238238

239+
} else if ( binding.texture.isDepthTexture ) {
240+
241+
binding.textureGPU = this.textures.getDepthDefaultTexture();
242+
239243
} else {
240244

241245
binding.textureGPU = this.textures.getDefaultTexture();

‎examples/jsm/renderers/webgpu/WebGPURenderer.js‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { GPUIndexFormat, GPUTextureFormat, GPUStoreOp } from './constants.js';
1+
import { GPUIndexFormat, GPUTextureFormat } from './constants.js';
22
import WebGPUAnimation from './WebGPUAnimation.js';
33
import WebGPURenderObjects from './WebGPURenderObjects.js';
44
import WebGPUAttributes from './WebGPUAttributes.js';
@@ -15,7 +15,7 @@ import WebGPUBackground from './WebGPUBackground.js';
1515
import WebGPUNodes from './nodes/WebGPUNodes.js';
1616
import WebGPUUtils from './WebGPUUtils.js';
1717

18-
import { Frustum, Matrix4, Vector3, Color, NoToneMapping, LinearSRGBColorSpace } from 'three';
18+
import { Frustum, Matrix4, Vector3, Color, LinearSRGBColorSpace, NoToneMapping, DepthFormat } from 'three';
1919

2020
console.info( 'THREE.WebGPURenderer: Modified Matrix4.makePerspective() and Matrix4.makeOrtographic() to work with WebGPU, see https://github.com/mrdoob/three.js/issues/20276.' );
2121

@@ -138,8 +138,6 @@ class WebGPURenderer {
138138

139139
this._animation = new WebGPUAnimation();
140140

141-
this._renderPassDescriptor = null;
142-
143141
this._currentRenderState = null;
144142

145143
this._currentRenderList = null;
@@ -232,17 +230,6 @@ class WebGPURenderer {
232230

233231
//
234232

235-
this._renderPassDescriptor = {
236-
colorAttachments: [ {
237-
view: null
238-
} ],
239-
depthStencilAttachment: {
240-
view: null,
241-
depthStoreOp: GPUStoreOp.Store,
242-
stencilStoreOp: GPUStoreOp.Store
243-
}
244-
};
245-
246233
this._setupColorBuffer();
247234
this._setupDepthBuffer();
248235

@@ -288,8 +275,22 @@ class WebGPURenderer {
288275

289276
// prepare render pass descriptor
290277

291-
const colorAttachment = this._renderPassDescriptor.colorAttachments[ 0 ];
292-
const depthStencilAttachment = this._renderPassDescriptor.depthStencilAttachment;
278+
const renderPassDescriptor = {
279+
colorAttachments: [ {
280+
view: null
281+
} ],
282+
depthStencilAttachment: {
283+
view: null
284+
}
285+
};
286+
287+
const renderAttachments = {
288+
depth: true,
289+
stencil: true
290+
};
291+
292+
const colorAttachment = renderPassDescriptor.colorAttachments[ 0 ];
293+
const depthStencilAttachment = renderPassDescriptor.depthStencilAttachment;
293294

294295
const renderTarget = this._renderTarget;
295296

@@ -304,6 +305,8 @@ class WebGPURenderer {
304305
colorAttachment.view = renderTargetProperties.colorTextureGPU.createView();
305306
depthStencilAttachment.view = renderTargetProperties.depthTextureGPU.createView();
306307

308+
renderAttachments.stencil = renderTarget.depthTexture ? renderTarget.depthTexture.format !== DepthFormat : true;
309+
307310
} else {
308311

309312
if ( this._parameters.antialias === true ) {
@@ -331,13 +334,13 @@ class WebGPURenderer {
331334

332335
//
333336

334-
this._background.update( this._currentRenderList, scene );
337+
this._background.update( this._currentRenderList, scene, renderPassDescriptor, renderAttachments );
335338

336339
// start render pass
337340

338341
const device = this._device;
339342
const cmdEncoder = device.createCommandEncoder( {} );
340-
const passEncoder = cmdEncoder.beginRenderPass( this._renderPassDescriptor );
343+
const passEncoder = cmdEncoder.beginRenderPass( renderPassDescriptor );
341344

342345
// global rasterization settings for all renderable objects
343346

0 commit comments

Comments
 (0)