super-three 0.165.0 → 0.168.0

package/{examples/jsm/renderers/webgl → src/renderers/webgl-fallback}/nodes/GLSLNodeBuilder.js

@@ -1,14 +1,15 @@
-import { MathNode, GLSLNodeParser, NodeBuilder, UniformNode, vectorComponents } from '../../../nodes/Nodes.js';
+import { GLSLNodeParser, NodeBuilder, TextureNode, vectorComponents } from '../../../nodes/Nodes.js';
 
 import NodeUniformBuffer from '../../common/nodes/NodeUniformBuffer.js';
 import NodeUniformsGroup from '../../common/nodes/NodeUniformsGroup.js';
 
 import { NodeSampledTexture, NodeSampledCubeTexture, NodeSampledTexture3D } from '../../common/nodes/NodeSampledTexture.js';
 
-import { RedFormat, RGFormat, IntType, DataTexture, RGBFormat, RGBAFormat, FloatType } from 'three';
+import { NoColorSpace, ByteType, ShortType, RGBAIntegerFormat, RGBIntegerFormat, RedIntegerFormat, RGIntegerFormat, UnsignedByteType, UnsignedIntType, UnsignedShortType, RedFormat, RGFormat, IntType, RGBFormat, RGBAFormat, FloatType } from '../../../constants.js';
+import { DataTexture } from '../../../textures/DataTexture.js';
 
 const glslMethods = {
-	[ MathNode.ATAN2 ]: 'atan',
+	atan2: 'atan',
 	textureDimensions: 'textureSize',
 	equals: 'equal'
 };
@@ -20,38 +21,56 @@ const precisionLib = {
 };
 
 const supports = {
-	instance: true,
-	swizzleAssign: true
+	swizzleAssign: true,
+	storageBuffer: false
 };
 
 const defaultPrecisions = `
 precision highp float;
 precision highp int;
+precision highp sampler2D;
 precision highp sampler3D;
-precision mediump sampler2DArray;
+precision highp samplerCube;
+precision highp sampler2DArray;
+
+precision highp usampler2D;
+precision highp usampler3D;
+precision highp usamplerCube;
+precision highp usampler2DArray;
+
+precision highp isampler2D;
+precision highp isampler3D;
+precision highp isamplerCube;
+precision highp isampler2DArray;
+
 precision lowp sampler2DShadow;
 `;
 
 class GLSLNodeBuilder extends NodeBuilder {
 
-	constructor( object, renderer, scene = null ) {
+	constructor( object, renderer ) {
 
-		super( object, renderer, new GLSLNodeParser(), scene );
+		super( object, renderer, new GLSLNodeParser() );
 
 		this.uniformGroups = {};
 		this.transforms = [];
+		this.extensions = {};
+
+		this.instanceBindGroups = false;
+
+		this.useComparisonMethod = true;
 
 	}
 
-	getMethod( method ) {
+	needsColorSpaceToLinearSRGB( texture ) {
 
-		return glslMethods[ method ] || method;
+		return texture.isVideoTexture === true && texture.colorSpace !== NoColorSpace;
 
 	}
 
-	getPropertyName( node, shaderStage ) {
+	getMethod( method ) {
 
-		return super.getPropertyName( node, shaderStage );
+		return glslMethods[ method ] || method;
 
 	}
 
@@ -101,39 +120,54 @@ ${ flowData.code }
 			const numElements = attribute.count * attribute.itemSize;
 
 			const { itemSize } = attribute;
-			let format = RedFormat;
+
+			const isInteger = attribute.array.constructor.name.toLowerCase().includes( 'int' );
+
+			let format = isInteger ? RedIntegerFormat : RedFormat;
+
 
 			if ( itemSize === 2 ) {
 
-				format = RGFormat;
+				format = isInteger ? RGIntegerFormat : RGFormat;
 
 			} else if ( itemSize === 3 ) {
 
-				format = RGBFormat;
+				format = isInteger ? RGBIntegerFormat : RGBFormat;
 
 			} else if ( itemSize === 4 ) {
 
-				format = RGBAFormat;
+				format = isInteger ? RGBAIntegerFormat : RGBAFormat;
 
 			}
 
+			const typeMap = {
+				Float32Array: FloatType,
+				Uint8Array: UnsignedByteType,
+				Uint16Array: UnsignedShortType,
+				Uint32Array: UnsignedIntType,
+				Int8Array: ByteType,
+				Int16Array: ShortType,
+				Int32Array: IntType,
+				Uint8ClampedArray: UnsignedByteType,
+			};
+
 			const width = Math.pow( 2, Math.ceil( Math.log2( Math.sqrt( numElements / itemSize ) ) ) );
 			let height = Math.ceil( ( numElements / itemSize ) / width );
 			if ( width * height * itemSize < numElements ) height ++; // Ensure enough space
 
 			const newSize = width * height * itemSize;
 
-			const newArray = new Float32Array( newSize );
+			const newArray = new originalArray.constructor( newSize );
 
 			newArray.set( originalArray, 0 );
 
 			attribute.array = newArray;
 
-			const pboTexture = new DataTexture( attribute.array, width, height, format, FloatType );
+			const pboTexture = new DataTexture( attribute.array, width, height, format, typeMap[ attribute.array.constructor.name ] || FloatType );
 			pboTexture.needsUpdate = true;
 			pboTexture.isPBOTexture = true;
 
-			const pbo = new UniformNode( pboTexture );
+			const pbo = new TextureNode( pboTexture, null, null );
 			pbo.setPrecision( 'high' );
 
 			attribute.pboNode = pbo;
@@ -145,6 +179,18 @@ ${ flowData.code }
 
 	}
 
+	getPropertyName( node, shaderStage = this.shaderStage ) {
+
+		if ( node.isNodeUniform && node.node.isTextureNode !== true && node.node.isBufferNode !== true ) {
+
+			return shaderStage.charAt( 0 ) + '_' + node.name;
+
+		}
+
+		return super.getPropertyName( node, shaderStage );
+
+	}
+
 	generatePBO( storageArrayElementNode ) {
 
 		const { node, indexNode } = storageArrayElementNode;
@@ -161,7 +207,7 @@ ${ flowData.code }
 		const nodeUniform = this.getUniformFromNode( attribute.pboNode, 'texture', this.shaderStage, this.context.label );
 		const textureName = this.getPropertyName( nodeUniform );
 
-		indexNode.increaseUsage( this ); // force cache generate to be used as index in x,y
+		this.increaseUsage( indexNode ); // force cache generate to be used as index in x,y
 		const indexSnippet = indexNode.build( this, 'uint' );
 
 		const elementNodeData = this.getDataFromNode( storageArrayElementNode );
@@ -205,7 +251,20 @@ ${ flowData.code }
 
 			//
 
-			this.addLineFlowCode( `${ propertyName } = ${ snippet + channel }` );
+
+			let prefix = 'vec4';
+
+			if ( attribute.pbo.type === UnsignedIntType ) {
+
+				prefix = 'uvec4';
+
+			} else if ( attribute.pbo.type === IntType ) {
+
+				prefix = 'ivec4';
+
+			}
+
+			this.addLineFlowCode( `${ propertyName } = ${prefix}(${ snippet })${channel}` );
 
 			elementNodeData.propertyName = propertyName;
 
@@ -251,6 +310,12 @@ ${ flowData.code }
 
 	}
 
+	generateTextureBias( texture, textureProperty, uvSnippet, biasSnippet ) {
+
+		return `texture( ${ textureProperty }, ${ uvSnippet }, ${ biasSnippet } )`;
+
+	}
+
 	generateTextureGrad( texture, textureProperty, uvSnippet, gradSnippet ) {
 
 		return `textureGrad( ${ textureProperty }, ${ uvSnippet }, ${ gradSnippet[ 0 ] }, ${ gradSnippet[ 1 ] } )`;
@@ -307,17 +372,34 @@ ${ flowData.code }
 
 				const texture = uniform.node.value;
 
+				let typePrefix = '';
+
+				if ( texture.isDataTexture === true ) {
+
+
+					if ( texture.type === UnsignedIntType ) {
+
+						typePrefix = 'u';
+
+					} else if ( texture.type === IntType ) {
+
+						typePrefix = 'i';
+
+					}
+
+				}
+
 				if ( texture.compareFunction ) {
 
 					snippet = `sampler2DShadow ${ uniform.name };`;
 
-				} else if ( texture.isDataArrayTexture === true ) {
+				} else if ( texture.isDataArrayTexture === true || texture.isCompressedArrayTexture === true ) {
 
-					snippet = `sampler2DArray ${ uniform.name };`;
+					snippet = `${typePrefix}sampler2DArray ${ uniform.name };`;
 
 				} else {
 
-					snippet = `sampler2D ${ uniform.name };`;
+					snippet = `${typePrefix}sampler2D ${ uniform.name };`;
 
 				}
 
@@ -342,7 +424,7 @@ ${ flowData.code }
 
 				const vectorType = this.getVectorType( uniform.type );
 
-				snippet = `${vectorType} ${uniform.name};`;
+				snippet = `${ vectorType } ${ this.getPropertyName( uniform, shaderStage ) };`;
 
 				group = true;
 
@@ -403,7 +485,7 @@ ${ flowData.code }
 
 			const array = dataAttribute.array;
 
-			if ( ( array instanceof Uint32Array || array instanceof Int32Array || array instanceof Uint16Array || array instanceof Int16Array ) === false ) {
+			if ( ( array instanceof Uint32Array || array instanceof Int32Array ) === false ) {
 
 				nodeType = nodeType.slice( 1 );
 
@@ -492,7 +574,7 @@ ${ flowData.code }
 
 				if ( shaderStage === 'compute' ) varying.needsInterpolation = true;
 				const type = varying.type;
-				const flat = type === 'int' || type === 'uint' ? 'flat ' : '';
+				const flat = type.includes( 'int' ) || type.includes( 'uv' ) || type.includes( 'iv' ) ? 'flat ' : '';
 
 				snippet += `${flat}${varying.needsInterpolation ? 'out' : '/*out*/'} ${type} ${varying.name};\n`;
 
@@ -505,7 +587,7 @@ ${ flowData.code }
 				if ( varying.needsInterpolation ) {
 
 					const type = varying.type;
-					const flat = type === 'int' || type === 'uint' ? 'flat ' : '';
+					const flat = type.includes( 'int' ) || type.includes( 'uv' ) || type.includes( 'iv' ) ? 'flat ' : '';
 
 					snippet += `${flat}in ${type} ${varying.name};\n`;
 
@@ -531,6 +613,30 @@ ${ flowData.code }
 
 	}
 
+	getInvocationLocalIndex() {
+
+		const workgroupSize = this.object.workgroupSize;
+
+		const size = workgroupSize.reduce( ( acc, curr ) => acc * curr, 1 );
+
+		return `uint( gl_InstanceID ) % ${size}u`;
+
+	}
+
+	getDrawIndex() {
+
+		const extensions = this.renderer.backend.extensions;
+
+		if ( extensions.has( 'WEBGL_multi_draw' ) ) {
+
+			return 'uint( gl_DrawID )';
+
+		}
+
+		return null;
+
+	}
+
 	getFrontFacing() {
 
 		return 'gl_FrontFacing';
@@ -539,7 +645,7 @@ ${ flowData.code }
 
 	getFragCoord() {
 
-		return 'gl_FragCoord';
+		return 'gl_FragCoord.xy';
 
 	}
 
@@ -549,9 +655,82 @@ ${ flowData.code }
 
 	}
 
+	enableExtension( name, behavior, shaderStage = this.shaderStage ) {
+
+		const map = this.extensions[ shaderStage ] || ( this.extensions[ shaderStage ] = new Map() );
+
+		if ( map.has( name ) === false ) {
+
+			map.set( name, {
+				name,
+				behavior
+			} );
+
+		}
+
+	}
+
+	getExtensions( shaderStage ) {
+
+		const snippets = [];
+
+		if ( shaderStage === 'vertex' ) {
+
+			const ext = this.renderer.backend.extensions;
+			const isBatchedMesh = this.object.isBatchedMesh;
+
+			if ( isBatchedMesh && ext.has( 'WEBGL_multi_draw' ) ) {
+
+				this.enableExtension( 'GL_ANGLE_multi_draw', 'require', shaderStage );
+
+			}
+
+		}
+
+		const extensions = this.extensions[ shaderStage ];
+
+		if ( extensions !== undefined ) {
+
+			for ( const { name, behavior } of extensions.values() ) {
+
+				snippets.push( `#extension ${name} : ${behavior}` );
+
+			}
+
+		}
+
+		return snippets.join( '\n' );
+
+	}
+
 	isAvailable( name ) {
 
-		return supports[ name ] === true;
+		let result = supports[ name ];
+
+		if ( result === undefined ) {
+
+			if ( name === 'float32Filterable' ) {
+
+				const extensions = this.renderer.backend.extensions;
+
+				if ( extensions.has( 'OES_texture_float_linear' ) ) {
+
+					extensions.get( 'OES_texture_float_linear' );
+					result = true;
+
+				} else {
+
+					result = false;
+
+				}
+
+			}
+
+			supports[ name ] = result;
+
+		}
+
+		return result;
 
 	}
 
@@ -602,6 +781,9 @@ ${vars}
 
 ${ this.getSignature() }
 
+// extensions 
+${shaderData.extensions}
+
 // precision
 ${ defaultPrecisions }
 
@@ -721,6 +903,7 @@ void main() {
 
 			const stageData = shadersData[ shaderStage ];
 
+			stageData.extensions = this.getExtensions( shaderStage );
 			stageData.uniforms = this.getUniforms( shaderStage );
 			stageData.attributes = this.getAttributes( shaderStage );
 			stageData.varyings = this.getVaryings( shaderStage );
@@ -754,40 +937,40 @@ void main() {
 
 		if ( uniformGPU === undefined ) {
 
-			if ( type === 'texture' ) {
+			const group = node.groupNode;
+			const groupName = group.name;
 
-				uniformGPU = new NodeSampledTexture( uniformNode.name, uniformNode.node );
+			const bindings = this.getBindGroupArray( groupName, shaderStage );
 
-				this.bindings[ shaderStage ].push( uniformGPU );
+			if ( type === 'texture' ) {
 
-			} else if ( type === 'cubeTexture' ) {
+				uniformGPU = new NodeSampledTexture( uniformNode.name, uniformNode.node, group );
+				bindings.push( uniformGPU );
 
-				uniformGPU = new NodeSampledCubeTexture( uniformNode.name, uniformNode.node );
+			} else if ( type === 'cubeTexture' ) {
 
-				this.bindings[ shaderStage ].push( uniformGPU );
+				uniformGPU = new NodeSampledCubeTexture( uniformNode.name, uniformNode.node, group );
+				bindings.push( uniformGPU );
 
 			} else if ( type === 'texture3D' ) {
 
-				uniformGPU = new NodeSampledTexture3D( uniformNode.name, uniformNode.node );
-				this.bindings[ shaderStage ].push( uniformGPU );
+				uniformGPU = new NodeSampledTexture3D( uniformNode.name, uniformNode.node, group );
+				bindings.push( uniformGPU );
 
 			} else if ( type === 'buffer' ) {
 
 				node.name = `NodeBuffer_${ node.id }`;
 				uniformNode.name = `buffer${ node.id }`;
 
-				const buffer = new NodeUniformBuffer( node );
+				const buffer = new NodeUniformBuffer( node, group );
 				buffer.name = node.name;
 
-				this.bindings[ shaderStage ].push( buffer );
+				bindings.push( buffer );
 
 				uniformGPU = buffer;
 
 			} else {
 
-				const group = node.groupNode;
-				const groupName = group.name;
-
 				const uniformsStage = this.uniformGroups[ shaderStage ] || ( this.uniformGroups[ shaderStage ] = {} );
 
 				let uniformsGroup = uniformsStage[ groupName ];
@@ -799,7 +982,7 @@ void main() {
 
 					uniformsStage[ groupName ] = uniformsGroup;
 
-					this.bindings[ shaderStage ].push( uniformsGroup );
+					bindings.push( uniformsGroup );
 
 				}
 

package/{examples/jsm/renderers/webgl → src/renderers/webgl-fallback}/utils/WebGLAttributeUtils.js

@@ -1,4 +1,4 @@
-import { IntType } from 'three';
+import { IntType } from '../../../constants.js';
 
 let _id = 0;
 
@@ -135,7 +135,7 @@ class WebGLAttributeUtils {
 			bytesPerElement: array.BYTES_PER_ELEMENT,
 			version: attribute.version,
 			pbo: attribute.pbo,
-			isInteger: type === gl.INT || type === gl.UNSIGNED_INT || type === gl.UNSIGNED_SHORT || attribute.gpuType === IntType,
+			isInteger: type === gl.INT || type === gl.UNSIGNED_INT || attribute.gpuType === IntType,
 			id: _id ++
 		};
 

package/{examples/jsm/renderers/webgl → src/renderers/webgl-fallback}/utils/WebGLConstants.js

@@ -1,5 +1,6 @@
 export const GLFeatureName = {
 
+	'WEBGL_multi_draw': 'WEBGL_multi_draw',
 	'WEBGL_compressed_texture_astc': 'texture-compression-astc',
 	'WEBGL_compressed_texture_etc': 'texture-compression-etc2',
 	'WEBGL_compressed_texture_etc1': 'texture-compression-etc1',

package/{examples/jsm/renderers/webgl → src/renderers/webgl-fallback}/utils/WebGLExtensions.js

@@ -19,6 +19,8 @@ class WebGLExtensions {
 
 			extension = this.gl.getExtension( name );
 
+			this.extensions[ name ] = extension;
+
 		}
 
 		return extension;

package/{examples/jsm/renderers/webgl → src/renderers/webgl-fallback}/utils/WebGLState.js

@@ -5,7 +5,7 @@ import {
 	ZeroFactor, OneFactor, SrcColorFactor, SrcAlphaFactor, SrcAlphaSaturateFactor, DstColorFactor, DstAlphaFactor,
 	OneMinusSrcColorFactor, OneMinusSrcAlphaFactor, OneMinusDstColorFactor, OneMinusDstAlphaFactor,
 	NeverDepth, AlwaysDepth, LessDepth, LessEqualDepth, EqualDepth, GreaterEqualDepth, GreaterDepth, NotEqualDepth
-} from 'three';
+} from '../../../constants.js';
 
 let initialized = false, equationToGL, factorToGL;
 
@@ -48,6 +48,7 @@ class WebGLState {
 		this.maxTextures = this.gl.getParameter( this.gl.MAX_TEXTURE_IMAGE_UNITS );
 		this.currentTextureSlot = null;
 		this.currentBoundTextures = {};
+		this.currentBoundBufferBases = {};
 
 		if ( initialized === false ) {
 
@@ -716,6 +717,26 @@ class WebGLState {
 
 	}
 
+	bindBufferBase( target, index, buffer ) {
+
+		const { gl } = this;
+
+		const key = `${target}-${index}`;
+
+		if ( this.currentBoundBufferBases[ key ] !== buffer ) {
+
+			gl.bindBufferBase( target, index, buffer );
+			this.currentBoundBufferBases[ key ] = buffer;
+
+			return true;
+
+		}
+
+		return false;
+
+	}
+
+
 	unbindTexture() {
 
 		const { gl, currentTextureSlot, currentBoundTextures } = this;