Skip to content

Commit d5c3089

Browse files
Mugen87Mugen87
committed
WebGPURenderer: Refactor UBO updates.
1 parent dfe538e commit d5c3089

File tree

3 files changed

+225
-97
lines changed

3 files changed

+225
-97
lines changed

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

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import WebGPUUniformsGroup from './WebGPUUniformsGroup.js';
2+
import { FloatUniform, Matrix4Uniform } from './WebGPUUniform.js';
23
import WebGPUSampler from './WebGPUSampler.js';
34
import WebGPUSampledTexture from './WebGPUSampledTexture.js';
4-
import { Matrix4 } from '../../../../build/three.module.js';
55

66
class WebGPUBindings {
77

@@ -97,7 +97,9 @@ class WebGPUBindings {
9797
const array = binding.array;
9898
const bufferGPU = binding.bufferGPU;
9999

100-
const needsBufferWrite = binding.update( object, camera );
100+
binding.onBeforeUpdate( object, camera );
101+
102+
const needsBufferWrite = binding.update();
101103

102104
if ( needsBufferWrite === true ) {
103105

@@ -242,33 +244,36 @@ class WebGPUBindings {
242244

243245
// ubos
244246

247+
const modelViewUniform = new Matrix4Uniform( 'modelMatrix' );
248+
const modelViewMatrixUniform = new Matrix4Uniform( 'modelViewMatrix' );
249+
245250
const modelGroup = new WebGPUUniformsGroup();
246251
modelGroup.setName( 'modelUniforms' );
247-
modelGroup.setUniform( 'modelMatrix', new Matrix4() );
248-
modelGroup.setUniform( 'modelViewMatrix', new Matrix4() );
249-
modelGroup.setUpdateCallback( function ( object/*, camera */ ) {
252+
modelGroup.addUniform( modelViewUniform );
253+
modelGroup.addUniform( modelViewMatrixUniform );
254+
modelGroup.setOnBeforeUpdate( function ( object/*, camera */ ) {
250255

251-
let updated = false;
256+
modelViewUniform.setValue( object.matrixWorld );
257+
modelViewMatrixUniform.setValue( object.modelViewMatrix );
252258

253-
if ( modelGroup.updateMatrix4( object.matrixWorld, 0 ) ) updated = true;
254-
if ( modelGroup.updateMatrix4( object.modelViewMatrix, 16 ) ) updated = true;
259+
} );
255260

256-
return updated;
261+
// opacity
257262

258-
} );
263+
const opacityUniform = new FloatUniform( 'opacity', 1 );
259264

260265
const cameraGroup = this.sharedUniformsGroups.get( 'cameraUniforms' );
261266

262267
const opacityGroup = new WebGPUUniformsGroup();
263268
opacityGroup.setName( 'opacityUniforms' );
264-
opacityGroup.setUniform( 'opacity', 1.0 );
269+
opacityGroup.addUniform( opacityUniform );
265270
opacityGroup.visibility = GPUShaderStage.FRAGMENT;
266-
opacityGroup.setUpdateCallback( function ( object/*, camera */ ) {
271+
opacityGroup.setOnBeforeUpdate( function ( object/*, camera */ ) {
267272

268273
const material = object.material;
269274
const opacity = ( material.transparent === true ) ? material.opacity : 1.0;
270275

271-
return opacityGroup.updateNumber( opacity, 0 );
276+
opacityUniform.setValue( opacity );
272277

273278
} );
274279

@@ -300,18 +305,17 @@ class WebGPUBindings {
300305

301306
// ubos
302307

308+
const modelViewUniform = new Matrix4Uniform( 'modelMatrix' );
309+
const modelViewMatrixUniform = new Matrix4Uniform( 'modelViewMatrix' );
310+
303311
const modelGroup = new WebGPUUniformsGroup();
304312
modelGroup.setName( 'modelUniforms' );
305-
modelGroup.setUniform( 'modelMatrix', new Matrix4() );
306-
modelGroup.setUniform( 'modelViewMatrix', new Matrix4() );
307-
modelGroup.setUpdateCallback( function ( object/*, camera */ ) {
308-
309-
let updated = false;
310-
311-
if ( modelGroup.updateMatrix4( object.matrixWorld, 0 ) ) updated = true;
312-
if ( modelGroup.updateMatrix4( object.modelViewMatrix, 16 ) ) updated = true;
313+
modelGroup.addUniform( modelViewUniform );
314+
modelGroup.addUniform( modelViewMatrixUniform );
315+
modelGroup.setOnBeforeUpdate( function ( object/*, camera */ ) {
313316

314-
return updated;
317+
modelViewUniform.setValue( object.matrixWorld );
318+
modelViewMatrixUniform.setValue( object.modelViewMatrix );
315319

316320
} );
317321

@@ -332,18 +336,17 @@ class WebGPUBindings {
332336

333337
// ubos
334338

339+
const modelViewUniform = new Matrix4Uniform( 'modelMatrix' );
340+
const modelViewMatrixUniform = new Matrix4Uniform( 'modelViewMatrix' );
341+
335342
const modelGroup = new WebGPUUniformsGroup();
336343
modelGroup.setName( 'modelUniforms' );
337-
modelGroup.setUniform( 'modelMatrix', new Matrix4() );
338-
modelGroup.setUniform( 'modelViewMatrix', new Matrix4() );
339-
modelGroup.setUpdateCallback( function ( object/*, camera */ ) {
340-
341-
let updated = false;
342-
343-
if ( modelGroup.updateMatrix4( object.matrixWorld, 0 ) ) updated = true;
344-
if ( modelGroup.updateMatrix4( object.modelViewMatrix, 16 ) ) updated = true;
344+
modelGroup.addUniform( modelViewUniform );
345+
modelGroup.addUniform( modelViewMatrixUniform );
346+
modelGroup.setOnBeforeUpdate( function ( object/*, camera */ ) {
345347

346-
return updated;
348+
modelViewUniform.setValue( object.matrixWorld );
349+
modelViewMatrixUniform.setValue( object.modelViewMatrix );
347350

348351
} );
349352

@@ -360,18 +363,17 @@ class WebGPUBindings {
360363

361364
_setupSharedUniformsGroups() {
362365

366+
const projectionMatrixUniform = new Matrix4Uniform( 'projectionMatrix' );
367+
const viewMatrixUniform = new Matrix4Uniform( 'viewMatrix' );
368+
363369
const cameraGroup = new WebGPUUniformsGroup();
364370
cameraGroup.setName( 'cameraUniforms' );
365-
cameraGroup.setUniform( 'projectionMatrix', new Matrix4() );
366-
cameraGroup.setUniform( 'viewMatrix', new Matrix4() );
367-
cameraGroup.setUpdateCallback( function ( object, camera ) {
368-
369-
let updated = false;
370-
371-
if ( cameraGroup.updateMatrix4( camera.projectionMatrix, 0 ) ) updated = true;
372-
if ( cameraGroup.updateMatrix4( camera.matrixWorldInverse, 16 ) ) updated = true;
371+
cameraGroup.addUniform( projectionMatrixUniform );
372+
cameraGroup.addUniform( viewMatrixUniform );
373+
cameraGroup.setOnBeforeUpdate( function ( object, camera ) {
373374

374-
return updated;
375+
projectionMatrixUniform.setValue( camera.projectionMatrix );
376+
viewMatrixUniform.setValue( camera.matrixWorldInverse );
375377

376378
} );
377379

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

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import { Color, Matrix3, Matrix4, Vector2, Vector3, Vector4 } from '../../../../build/three.module.js';
2+
3+
class WebGPUUniform {
4+
5+
constructor( name, value ) {
6+
7+
this.name = name;
8+
this.value = value;
9+
10+
this.byteLength = 0;
11+
this.itemSize = 0;
12+
this.value = null;
13+
14+
}
15+
16+
setValue( value ) {
17+
18+
this.value = value;
19+
20+
}
21+
22+
}
23+
24+
class FloatUniform extends WebGPUUniform {
25+
26+
constructor( name, value = 0 ) {
27+
28+
super( name, value );
29+
30+
this.byteLength = 4;
31+
this.itemSize = 1;
32+
33+
Object.defineProperty( this, 'isFloatUniform', { value: true } );
34+
35+
}
36+
37+
}
38+
39+
class Vector2Uniform extends WebGPUUniform {
40+
41+
constructor( name, value = new Vector2() ) {
42+
43+
super( name, value );
44+
45+
this.byteLength = 8;
46+
this.itemSize = 2;
47+
48+
Object.defineProperty( this, 'isVector2Uniform', { value: true } );
49+
50+
}
51+
52+
}
53+
54+
class Vector3Uniform extends WebGPUUniform {
55+
56+
constructor( name, value = new Vector3() ) {
57+
58+
super( name, value );
59+
60+
this.byteLength = 12;
61+
this.itemSize = 3;
62+
63+
Object.defineProperty( this, 'isVector3Uniform', { value: true } );
64+
65+
}
66+
67+
}
68+
69+
class Vector4Uniform extends WebGPUUniform {
70+
71+
constructor( name, value = new Vector4() ) {
72+
73+
super( name, value );
74+
75+
this.byteLength = 16;
76+
this.itemSize = 4;
77+
78+
Object.defineProperty( this, 'isVector4Uniform', { value: true } );
79+
80+
}
81+
82+
}
83+
84+
class ColorUniform extends WebGPUUniform {
85+
86+
constructor( name, value = new Color() ) {
87+
88+
super( name, value );
89+
90+
this.byteLength = 12;
91+
this.itemSize = 3;
92+
93+
Object.defineProperty( this, 'isColorUniform', { value: true } );
94+
95+
}
96+
97+
}
98+
99+
class Matrix3Uniform extends WebGPUUniform {
100+
101+
constructor( name, value = new Matrix3() ) {
102+
103+
super( name, value );
104+
105+
this.byteLength = 48; // (3 * 4) * 4 bytes
106+
this.itemSize = 12;
107+
108+
Object.defineProperty( this, 'isMatrix3Uniform', { value: true } );
109+
110+
}
111+
112+
}
113+
114+
class Matrix4Uniform extends WebGPUUniform {
115+
116+
constructor( name, value = new Matrix4() ) {
117+
118+
super( name, value );
119+
120+
this.byteLength = 64;
121+
this.itemSize = 16;
122+
123+
Object.defineProperty( this, 'isMatrix4Uniform', { value: true } );
124+
125+
}
126+
127+
}
128+
129+
export { FloatUniform, Vector2Uniform, Vector3Uniform, Vector4Uniform, ColorUniform, Matrix3Uniform, Matrix4Uniform };

0 commit comments

Comments
 (0)