Skip to content

Commit 6a68319

Browse files
sunagsunag
authored
WebGPURenderer: Improve vertex format support and revisions. (#25924)
* EnvironmentNode: Fix flipY after improve positionWorldDirection * WebGPUBackground: Fix clip background * WebGPURenderer: Added update from #25913 * WebGPURenderer: Improve vertex format support. * Example webgpu_backdrop: Fix space * Added webgpu_loader_gltf_compressed example * cleanup
1 parent 9fc2bfb commit 6a68319

File tree

11 files changed

+249
-128
lines changed

11 files changed

+249
-128
lines changed

‎examples/files.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,7 @@
340340
"webgpu_lights_phong",
341341
"webgpu_lights_selective",
342342
"webgpu_loader_gltf",
343+
"webgpu_loader_gltf_compressed",
343344
"webgpu_materials",
344345
"webgpu_materials_video",
345346
"webgpu_particles",

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ class AttributeNode extends Node {
3030

3131
const attribute = builder.geometry.getAttribute( attributeName );
3232

33-
nodeType = builder.getTypeFromLength( attribute.itemSize );
33+
nodeType = builder.getTypeFromAttribute( attribute );
3434

3535
} else {
3636

@@ -66,23 +66,26 @@ class AttributeNode extends Node {
6666

6767
if ( geometryAttribute === true ) {
6868

69-
const nodeAttribute = builder.getAttribute( attributeName, nodeType );
69+
const attribute = builder.geometry.getAttribute( attributeName );
70+
const attributeType = builder.getTypeFromAttribute( attribute );
71+
72+
const nodeAttribute = builder.getAttribute( attributeName, attributeType );
7073

7174
if ( builder.isShaderStage( 'vertex' ) ) {
7275

73-
return nodeAttribute.name;
76+
return builder.format( nodeAttribute.name, attributeType, nodeType );
7477

7578
} else {
7679

7780
const nodeVarying = varying( this );
7881

79-
return nodeVarying.build( builder, nodeAttribute.type );
82+
return nodeVarying.build( builder, nodeType );
8083

8184
}
8285

8386
} else {
8487

85-
console.warn( `Attribute "${ attributeName }" not found.` );
88+
console.warn( `AttributeNode: Attribute "${ attributeName }" not found.` );
8689

8790
return builder.getConst( nodeType );
8891

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

Lines changed: 50 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,28 @@ import NodeKeywords from './NodeKeywords.js';
77
import NodeCache from './NodeCache.js';
88
import { NodeUpdateType, defaultBuildStages, shaderStages } from './constants.js';
99

10-
import { REVISION, NoColorSpace, LinearEncoding, sRGBEncoding, SRGBColorSpace, Color, Vector2, Vector3, Vector4 } from 'three';
10+
import { REVISION, NoColorSpace, LinearEncoding, sRGBEncoding, SRGBColorSpace, Color, Vector2, Vector3, Vector4, Float16BufferAttribute } from 'three';
1111

1212
import { stack } from './StackNode.js';
1313
import { maxMipLevel } from '../utils/MaxMipLevelNode.js';
1414

15-
const typeFromLength = new Map();
16-
typeFromLength.set( 2, 'vec2' );
17-
typeFromLength.set( 3, 'vec3' );
18-
typeFromLength.set( 4, 'vec4' );
19-
typeFromLength.set( 9, 'mat3' );
20-
typeFromLength.set( 16, 'mat4' );
15+
const typeFromLength = new Map( [
16+
[ 2, 'vec2' ],
17+
[ 3, 'vec3' ],
18+
[ 4, 'vec4' ],
19+
[ 9, 'mat3' ],
20+
[ 16, 'mat4' ]
21+
] );
22+
23+
const typeFromArray = new Map( [
24+
[ Int8Array, 'int' ],
25+
[ Int16Array, 'int' ],
26+
[ Int32Array, 'int' ],
27+
[ Uint8Array, 'uint' ],
28+
[ Uint16Array, 'uint' ],
29+
[ Uint32Array, 'uint' ],
30+
[ Float32Array, 'float' ]
31+
] );
2132

2233
const toFloat = ( value ) => {
2334

@@ -412,12 +423,42 @@ class NodeBuilder {
412423
getTypeFromLength( length, componentType = 'float' ) {
413424

414425
if ( length === 1 ) return componentType;
426+
415427
const baseType = typeFromLength.get( length );
416428
const prefix = componentType === 'float' ? '' : componentType[ 0 ];
429+
417430
return prefix + baseType;
418431

419432
}
420433

434+
getTypeFromArray( array ) {
435+
436+
return typeFromArray.get( array.constructor );
437+
438+
}
439+
440+
getTypeFromAttribute( attribute ) {
441+
442+
let dataAttribute = attribute;
443+
444+
if ( attribute.isInterleavedBufferAttribute ) dataAttribute = attribute.data;
445+
446+
const array = dataAttribute.array;
447+
const itemSize = dataAttribute.stride || attribute.itemSize;
448+
const normalized = attribute.normalized;
449+
450+
let arrayType;
451+
452+
if ( ! ( attribute instanceof Float16BufferAttribute ) && normalized !== true ) {
453+
454+
arrayType = this.getTypeFromArray( array );
455+
456+
}
457+
458+
return this.getTypeFromLength( itemSize, arrayType );
459+
460+
}
461+
421462
getTypeLength( type ) {
422463

423464
const vecType = this.getVectorType( type );
@@ -677,7 +718,7 @@ class NodeBuilder {
677718

678719
if ( propertyName !== null ) {
679720

680-
flowData.code += `${propertyName} = ${flowData.result};\n` + this.tab;
721+
flowData.code += `${ this.tab + propertyName } = ${ flowData.result };\n`;
681722

682723
}
683724

@@ -864,7 +905,7 @@ class NodeBuilder {
864905

865906
if ( fromTypeLength > toTypeLength ) {
866907

867-
return this.format( `${ snippet }.${ 'xyz'.slice( 0, toTypeLength ) }`, this.getTypeFromLength( toTypeLength ), toType );
908+
return this.format( `${ snippet }.${ 'xyz'.slice( 0, toTypeLength ) }`, this.getTypeFromLength( toTypeLength, this.getComponentType( fromType ) ), toType );
868909

869910
}
870911

‎examples/jsm/nodes/lighting/EnvironmentNode.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@ class EnvironmentNode extends LightingNode {
5353
// @TODO: Needed PMREM
5454

5555
radianceTextureUVNode = equirectUV( reflectVec );
56-
radianceTextureUVNode = vec2( radianceTextureUVNode.x, radianceTextureUVNode.y.oneMinus() );
5756

5857
}
5958

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ class WebGPUAttributes {
99

1010
get( attribute ) {
1111

12-
if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
12+
attribute = this._getAttribute( attribute );
1313

1414
return this.buffers.get( attribute );
1515

1616
}
1717

1818
remove( attribute ) {
1919

20-
if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
20+
attribute = this._getAttribute( attribute );
2121

2222
const data = this.buffers.get( attribute );
2323

@@ -33,7 +33,7 @@ class WebGPUAttributes {
3333

3434
update( attribute, isIndex = false, usage = null ) {
3535

36-
if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
36+
attribute = this._getAttribute( attribute );
3737

3838
let data = this.buffers.get( attribute );
3939

@@ -115,6 +115,14 @@ class WebGPUAttributes {
115115

116116
}
117117

118+
_getAttribute( attribute ) {
119+
120+
if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
121+
122+
return attribute;
123+
124+
}
125+
118126
_createBuffer( attribute, usage ) {
119127

120128
const array = attribute.array;

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,13 +69,16 @@ class WebGPUBackground {
6969
nodeMaterial.side = BackSide;
7070
nodeMaterial.depthTest = false;
7171
nodeMaterial.depthWrite = false;
72+
nodeMaterial.frustumCulled = false;
7273
nodeMaterial.fog = false;
7374

7475
this.boxMesh = boxMesh = new Mesh( new BoxGeometry( 1, 1, 1 ), nodeMaterial );
7576

7677
boxMesh.onBeforeRender = function ( renderer, scene, camera ) {
7778

78-
this.matrixWorld.copyPosition( camera.matrixWorld );
79+
const scale = camera.far;
80+
81+
this.matrixWorld.makeScale( scale, scale, scale ).copyPosition( camera.matrixWorld );
7982

8083
};
8184

0 commit comments

Comments
 (0)