super-three 0.155.0 → 0.157.0

package/examples/jsm/renderers/webgl/nodes/GLSLNodeBuilder.js

@@ -1,7 +1,11 @@
-import { MathNode, GLSLNodeParser, NodeBuilder, NodeMaterial } from 'three/nodes';
+import { MathNode, GLSLNodeParser, NodeBuilder, NodeMaterial } from '../../../nodes/Nodes.js';
+
+import UniformsGroup from '../../common/UniformsGroup.js';
+import { NodeSampledTexture, NodeSampledCubeTexture } from '../../common/nodes/NodeSampledTexture.js';
 
 const glslMethods = {
-	[ MathNode.ATAN2 ]: 'atan'
+	[ MathNode.ATAN2 ]: 'atan',
+	textureDimensions: 'textureSize'
 };
 
 const precisionLib = {
@@ -16,6 +20,8 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 		super( object, renderer, new GLSLNodeParser(), scene );
 
+		this.uniformsGroup = {};
+
 	}
 
 	getMethod( method ) {
@@ -24,28 +30,52 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 	}
 
+	getPropertyName( node, shaderStage ) {
+
+		if ( node.isOutputStructVar ) return '';
+
+		return super.getPropertyName( node, shaderStage );
+
+	}
+
 	getTexture( texture, textureProperty, uvSnippet ) {
 
 		if ( texture.isTextureCube ) {
 
 			return `textureCube( ${textureProperty}, ${uvSnippet} )`;
 
+		} else if ( texture.isDepthTexture ) {
+
+			return `texture( ${textureProperty}, ${uvSnippet} ).x`;
+
 		} else {
 
-			return `texture2D( ${textureProperty}, ${uvSnippet} )`;
+			return `texture( ${textureProperty}, ${uvSnippet} )`;
 
 		}
 
 	}
 
-	getTextureBias( texture, textureProperty, uvSnippet, biasSnippet ) {
-
-		if ( this.material.extensions !== undefined ) this.material.extensions.shaderTextureLOD = true;
+	getTextureLevel( texture, textureProperty, uvSnippet, biasSnippet ) {
 
 		return `textureLod( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
 
 	}
 
+	getTextureCompare( texture, textureProperty, uvSnippet, compareSnippet, shaderStage = this.shaderStage ) {
+
+		if ( shaderStage === 'fragment' ) {
+
+			return `texture( ${textureProperty}, vec3( ${uvSnippet}, ${compareSnippet} ) )`;
+
+		} else {
+
+			console.error( `WebGPURenderer: THREE.DepthTexture.compareFunction() does not support ${ shaderStage } shader.` );
+
+		}
+
+	}
+
 	getVars( shaderStage ) {
 
 		const snippets = [];
@@ -54,6 +84,8 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 		for ( const variable of vars ) {
 
+			if ( variable.isOutputStructVar ) continue;
+
 			snippets.push( `${ this.getVar( variable.type, variable.name ) };` );
 
 		}
@@ -66,25 +98,37 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 		const uniforms = this.uniforms[ shaderStage ];
 
-		let output = '';
+		const bindingSnippets = [];
+		const groupSnippets = [];
 
 		for ( const uniform of uniforms ) {
 
 			let snippet = null;
+			let group = false;
 
 			if ( uniform.type === 'texture' ) {
 
-				snippet = `sampler2D ${uniform.name};\n`;
+				if ( uniform.node.value.compareFunction ) {
+
+					snippet = `sampler2DShadow ${uniform.name};`;
+
+				} else {
+
+					snippet = `sampler2D ${uniform.name};`;
+
+				}
 
 			} else if ( uniform.type === 'cubeTexture' ) {
 
-				snippet = `samplerCube ${uniform.name};\n`;
+				snippet = `samplerCube ${uniform.name};`;
 
 			} else {
 
 				const vectorType = this.getVectorType( uniform.type );
 
-				snippet = `${vectorType} ${uniform.name};\n`;
+				snippet = `${vectorType} ${uniform.name};`;
+
+				group = true;
 
 			}
 
@@ -92,18 +136,36 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 			if ( precision !== null ) {
 
-				snippet = 'uniform ' + precisionLib[ precision ] + ' ' + snippet;
+				snippet = precisionLib[ precision ] + ' ' + snippet;
+
+			}
+
+			if ( group ) {
+
+				snippet = '\t' + snippet;
+
+				groupSnippets.push( snippet );
 
 			} else {
 
 				snippet = 'uniform ' + snippet;
 
+				bindingSnippets.push( snippet );
+
 			}
 
-			output += snippet;
+		}
+
+		let output = '';
+
+		if ( groupSnippets.length > 0 ) {
+
+			output += this._getGLSLUniformStruct( shaderStage + 'NodeUniforms', groupSnippets.join( '\n' ) ) + '\n';
 
 		}
 
+		output += bindingSnippets.join( '\n' );
+
 		return output;
 
 	}
@@ -116,9 +178,11 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 			const attributes = this.attributes;
 
+			let location = 0;
+
 			for ( const attribute of attributes ) {
 
-				snippet += `attribute ${attribute.type} ${attribute.name};\n`;
+				snippet += `layout( location = ${ location ++ } ) in ${ attribute.type } ${ attribute.name };\n`;
 
 			}
 
@@ -128,6 +192,49 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 	}
 
+	getStructMembers( struct ) {
+
+		const snippets = [];
+		const members = struct.getMemberTypes();
+
+		for ( let i = 0; i < members.length; i ++ ) {
+
+			const member = members[ i ];
+			snippets.push( `layout( location = ${i} ) out ${ member} m${i};` );
+
+		}
+
+		return snippets.join( '\n' );
+
+	}
+
+	getStructs( shaderStage ) {
+
+		const snippets = [];
+		const structs = this.structs[ shaderStage ];
+
+		if ( structs.length === 0 ) {
+
+			return "layout( location = 0 ) out vec4 fragColor;\n";
+
+		}
+
+		for ( let index = 0, length = structs.length; index < length; index ++ ) {
+
+			const struct = structs[ index ];
+
+			let snippet = `\n`;
+			snippet += this.getStructMembers( struct );
+			snippet += '\n';
+
+			snippets.push( snippet );
+
+		}
+
+		return snippets.join( '\n\n' );
+
+	}
+
 	getVaryings( shaderStage ) {
 
 		let snippet = '';
@@ -138,7 +245,7 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 			for ( const varying of varyings ) {
 
-				snippet += `${varying.needsInterpolation ? 'varying' : '/*varying*/'} ${varying.type} ${varying.name};\n`;
+				snippet += `${varying.needsInterpolation ? 'out' : '/*out*/'} ${varying.type} ${varying.name};\n`;
 
 			}
 
@@ -148,7 +255,7 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 				if ( varying.needsInterpolation ) {
 
-					snippet += `varying ${varying.type} ${varying.name};\n`;
+					snippet += `in ${varying.type} ${varying.name};\n`;
 
 				}
 
@@ -184,9 +291,24 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 	}
 
+	_getGLSLUniformStruct( name, vars ) {
+
+		return `
+layout( std140 ) uniform ${name} {
+${vars}
+};`;
+
+	}
+
 	_getGLSLVertexCode( shaderData ) {
 
-		return `${ this.getSignature() }
+		return `#version 300 es
+
+${ this.getSignature() }
+
+// precision
+precision highp float;
+precision highp int;
 
 // uniforms
 ${shaderData.uniforms}
@@ -208,6 +330,8 @@ void main() {
 	// flow
 	${shaderData.flow}
 
+	gl_PointSize = 1.0;
+
 }
 `;
 
@@ -215,11 +339,14 @@ void main() {
 
 	_getGLSLFragmentCode( shaderData ) {
 
-		return `${ this.getSignature() }
+		return `#version 300 es
+
+${ this.getSignature() }
 
 // precision
 precision highp float;
 precision highp int;
+precision lowp sampler2DShadow;
 
 // uniforms
 ${shaderData.uniforms}
@@ -230,6 +357,8 @@ ${shaderData.varyings}
 // codes
 ${shaderData.codes}
 
+${shaderData.structs}
+
 void main() {
 
 	// vars
@@ -277,14 +406,18 @@ void main() {
 					if ( shaderStage === 'vertex' ) {
 
 						flow += 'gl_Position = ';
+						flow += `${ flowSlotData.result };`;
 
 					} else if ( shaderStage === 'fragment' ) {
 
-						flow += 'gl_FragColor = ';
+						if ( ! node.outputNode.isOutputStructNode ) {
 
-					}
+							flow += 'fragColor = ';
+							flow += `${ flowSlotData.result };`;
 
-					flow += `${ flowSlotData.result };`;
+						}
+
+					}
 
 				}
 
@@ -296,6 +429,7 @@ void main() {
 			stageData.attributes = this.getAttributes( shaderStage );
 			stageData.varyings = this.getVaryings( shaderStage );
 			stageData.vars = this.getVars( shaderStage );
+			stageData.structs = this.getStructs( shaderStage );
 			stageData.codes = this.getCodes( shaderStage );
 			stageData.flow = flow;
 
@@ -306,6 +440,9 @@ void main() {
 			this.vertexShader = this._getGLSLVertexCode( shadersData.vertex );
 			this.fragmentShader = this._getGLSLFragmentCode( shadersData.fragment );
 
+			//console.log( this.vertexShader );
+			//console.log( this.fragmentShader );
+
 		} else {
 
 			console.warn( 'GLSLNodeBuilder: compute shaders are not supported.' );
@@ -315,6 +452,56 @@ void main() {
 
 	}
 
+	getUniformFromNode( node, type, shaderStage, name = null ) {
+
+		const uniformNode = super.getUniformFromNode( node, type, shaderStage, name );
+		const nodeData = this.getDataFromNode( node, shaderStage );
+
+		let uniformGPU = nodeData.uniformGPU;
+
+		if ( uniformGPU === undefined ) {
+
+			if ( type === 'texture' ) {
+
+				uniformGPU = new NodeSampledTexture( uniformNode.name, uniformNode.node );
+
+				this.bindings[ shaderStage ].push( uniformGPU );
+
+			} else if ( type === 'cubeTexture' ) {
+
+				uniformGPU = new NodeSampledCubeTexture( uniformNode.name, uniformNode.node );
+
+				this.bindings[ shaderStage ].push( uniformGPU );
+
+			} else {
+
+				let uniformsGroup = this.uniformsGroup[ shaderStage ];
+
+				if ( uniformsGroup === undefined ) {
+
+					uniformsGroup = new UniformsGroup( shaderStage + 'NodeUniforms' );
+					//uniformsGroup.setVisibility( gpuShaderStageLib[ shaderStage ] );
+
+					this.uniformsGroup[ shaderStage ] = uniformsGroup;
+
+					this.bindings[ shaderStage ].push( uniformsGroup );
+
+				}
+
+				uniformGPU = this.getNodeUniform( uniformNode, type );
+
+				uniformsGroup.addUniform( uniformGPU );
+
+			}
+
+			nodeData.uniformGPU = uniformGPU;
+
+		}
+
+		return uniformNode;
+
+	}
+
 	build() {
 
 		// @TODO: Move this code to super.build()

package/examples/jsm/renderers/webgl/utils/WebGLAttributeUtils.js

@@ -0,0 +1,84 @@
+class WebGLAttributeUtils {
+
+	constructor( backend ) {
+
+		this.backend = backend;
+
+	}
+
+	createAttribute( attribute, bufferType ) {
+
+		const backend = this.backend;
+		const { gl } = backend;
+
+		const array = attribute.array;
+		const usage = attribute.usage || gl.STATIC_DRAW;
+
+		const bufferGPU = gl.createBuffer();
+
+		gl.bindBuffer( bufferType, bufferGPU );
+		gl.bufferData( bufferType, array, usage );
+		gl.bindBuffer( bufferType, null );
+
+		//attribute.onUploadCallback();
+
+		let type;
+
+		if ( array instanceof Float32Array ) {
+
+			type = gl.FLOAT;
+
+		} else if ( array instanceof Uint16Array ) {
+
+			if ( attribute.isFloat16BufferAttribute ) {
+
+				type = gl.HALF_FLOAT;
+
+			} else {
+
+				type = gl.UNSIGNED_SHORT;
+
+			}
+
+		} else if ( array instanceof Int16Array ) {
+
+			type = gl.SHORT;
+
+		} else if ( array instanceof Uint32Array ) {
+
+			type = gl.UNSIGNED_INT;
+
+		} else if ( array instanceof Int32Array ) {
+
+			type = gl.INT;
+
+		} else if ( array instanceof Int8Array ) {
+
+			type = gl.BYTE;
+
+		} else if ( array instanceof Uint8Array ) {
+
+			type = gl.UNSIGNED_BYTE;
+
+		} else if ( array instanceof Uint8ClampedArray ) {
+
+			type = gl.UNSIGNED_BYTE;
+
+		} else {
+
+			throw new Error( 'THREE.WebGLBackend: Unsupported buffer data format: ' + array );
+
+		}
+
+		backend.set( attribute, {
+			bufferGPU,
+			type,
+			bytesPerElement: array.BYTES_PER_ELEMENT,
+			version: attribute.version
+		} );
+
+	}
+
+}
+
+export default WebGLAttributeUtils;

package/examples/jsm/renderers/webgl/utils/WebGLExtensions.js

@@ -0,0 +1,26 @@
+class WebGLExtensions {
+
+	constructor( backend ) {
+
+		this.backend = backend;
+
+		this.gl = this.backend.gl;
+		this.availableExtensions = this.gl.getSupportedExtensions();
+
+	}
+
+	get( name ) {
+
+		return this.gl.getExtension( name );
+
+	}
+
+	has( name ) {
+
+		return this.availableExtensions.includes( name );
+
+	}
+
+}
+
+export default WebGLExtensions;