super-three 0.157.1 → 0.158.0

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

@@ -1,5 +1,6 @@
-import { MathNode, GLSLNodeParser, NodeBuilder, NodeMaterial } from '../../../nodes/Nodes.js';
+import { MathNode, GLSLNodeParser, NodeBuilder, NodeMaterial, FunctionNode } from '../../../nodes/Nodes.js';
 
+import UniformBuffer from '../../common/UniformBuffer.js';
 import UniformsGroup from '../../common/UniformsGroup.js';
 import { NodeSampledTexture, NodeSampledCubeTexture } from '../../common/nodes/NodeSampledTexture.js';
 
@@ -14,6 +15,10 @@ const precisionLib = {
 	high: 'highp'
 };
 
+const supports = {
+	instance: true
+};
+
 class GLSLNodeBuilder extends NodeBuilder {
 
 	constructor( object, renderer, scene = null ) {
@@ -38,6 +43,36 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 	}
 
+	buildFunctionNode( shaderNode ) {
+
+		const layout = shaderNode.layout;
+		const flowData = this.flowShaderNode( shaderNode );
+
+		const parameters = [];
+
+		for ( const input of layout.inputs ) {
+
+			parameters.push( this.getType( input.type ) + ' ' + input.name );
+
+		}
+
+		//
+
+		const code = `${ this.getType( layout.type ) } ${ layout.name }( ${ parameters.join( ', ' ) } ) {
+
+	${ flowData.vars }
+
+${ flowData.code }
+	return ${ flowData.result };
+
+}`;
+
+		//
+
+		return new FunctionNode( code );
+
+	}
+
 	getTexture( texture, textureProperty, uvSnippet ) {
 
 		if ( texture.isTextureCube ) {
@@ -82,11 +117,15 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 		const vars = this.vars[ shaderStage ];
 
-		for ( const variable of vars ) {
+		if ( vars !== undefined ) {
+
+			for ( const variable of vars ) {
 
-			if ( variable.isOutputStructVar ) continue;
+				if ( variable.isOutputStructVar ) continue;
 
-			snippets.push( `${ this.getVar( variable.type, variable.name ) };` );
+				snippets.push( `${ this.getVar( variable.type, variable.name ) };` );
+
+			}
 
 		}
 
@@ -122,6 +161,15 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 				snippet = `samplerCube ${uniform.name};`;
 
+			} else if ( uniform.type === 'buffer' ) {
+
+				const bufferNode = uniform.node;
+				const bufferType = this.getType( bufferNode.bufferType );
+				const bufferCount = bufferNode.bufferCount;
+
+				const bufferCountSnippet = bufferCount > 0 ? bufferCount : '';
+				snippet = `${bufferNode.name} {\n\t${bufferType} ${uniform.name}[${bufferCountSnippet}];\n};\n`;
+
 			} else {
 
 				const vectorType = this.getVectorType( uniform.type );
@@ -176,7 +224,7 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 		if ( shaderStage === 'vertex' ) {
 
-			const attributes = this.attributes;
+			const attributes = this.getAttributesArray();
 
 			let location = 0;
 
@@ -215,7 +263,7 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 		if ( structs.length === 0 ) {
 
-			return "layout( location = 0 ) out vec4 fragColor;\n";
+			return 'layout( location = 0 ) out vec4 fragColor;\n';
 
 		}
 
@@ -223,7 +271,7 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 			const struct = structs[ index ];
 
-			let snippet = `\n`;
+			let snippet = '\n';
 			snippet += this.getStructMembers( struct );
 			snippet += '\n';
 
@@ -245,7 +293,10 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 			for ( const varying of varyings ) {
 
-				snippet += `${varying.needsInterpolation ? 'out' : '/*out*/'} ${varying.type} ${varying.name};\n`;
+				const type = varying.type;
+				const flat = type === 'int' || type === 'uint' ? 'flat ' : '';
+
+				snippet += `${flat}${varying.needsInterpolation ? 'out' : '/*out*/'} ${type} ${varying.name};\n`;
 
 			}
 
@@ -255,7 +306,10 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 				if ( varying.needsInterpolation ) {
 
-					snippet += `in ${varying.type} ${varying.name};\n`;
+					const type = varying.type;
+					const flat = type === 'int' || type === 'uint' ? 'flat ' : '';
+
+					snippet += `${flat}in ${type} ${varying.name};\n`;
 
 				}
 
@@ -273,6 +327,12 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 	}
 
+	getInstanceIndex() {
+
+		return 'uint( gl_InstanceID )';
+
+	}
+
 	getFrontFacing() {
 
 		return 'gl_FrontFacing';
@@ -285,6 +345,13 @@ class GLSLNodeBuilder extends NodeBuilder {
 
 	}
 
+	isAvailable( name ) {
+
+		return supports[ name ] === true;
+
+	}
+
+
 	isFlipY() {
 
 		return true;
@@ -440,9 +507,6 @@ 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.' );
@@ -473,6 +537,18 @@ void main() {
 
 				this.bindings[ shaderStage ].push( uniformGPU );
 
+			} else if ( type === 'buffer' ) {
+
+				node.name = `NodeBuffer_${node.id}`;
+
+				const buffer = new UniformBuffer( node.name, node.value );
+
+				uniformNode.name = `buffer${node.id}`;
+
+				this.bindings[ shaderStage ].push( buffer );
+
+				uniformGPU = buffer;
+
 			} else {
 
 				let uniformsGroup = this.uniformsGroup[ shaderStage ];

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

@@ -14,25 +14,41 @@ class WebGLAttributeUtils {
 		const array = attribute.array;
 		const usage = attribute.usage || gl.STATIC_DRAW;
 
-		const bufferGPU = gl.createBuffer();
+		const bufferAttribute = attribute.isInterleavedBufferAttribute ? attribute.data : attribute;
+		const bufferData = backend.get( bufferAttribute );
 
-		gl.bindBuffer( bufferType, bufferGPU );
-		gl.bufferData( bufferType, array, usage );
-		gl.bindBuffer( bufferType, null );
+		let bufferGPU = bufferData.bufferGPU;
+
+		if ( bufferGPU === undefined ) {
+
+			bufferGPU = gl.createBuffer();
+
+			gl.bindBuffer( bufferType, bufferGPU );
+			gl.bufferData( bufferType, array, usage );
+			gl.bindBuffer( bufferType, null );
+
+			bufferData.bufferGPU = bufferGPU;
+			bufferData.bufferType = bufferType;
+			bufferData.version = bufferAttribute.version;
+
+		}
 
 		//attribute.onUploadCallback();
 
 		let type;
+		let isFloat = false;
 
 		if ( array instanceof Float32Array ) {
 
 			type = gl.FLOAT;
+			isFloat = true;
 
 		} else if ( array instanceof Uint16Array ) {
 
 			if ( attribute.isFloat16BufferAttribute ) {
 
 				type = gl.HALF_FLOAT;
+				isFloat = true;
 
 			} else {
 
@@ -74,11 +90,30 @@ class WebGLAttributeUtils {
 			bufferGPU,
 			type,
 			bytesPerElement: array.BYTES_PER_ELEMENT,
-			version: attribute.version
+			version: attribute.version,
+			isFloat
 		} );
 
 	}
 
+	updateAttribute( attribute ) {
+
+		const backend = this.backend;
+		const { gl } = backend;
+
+		const array = attribute.array;
+		const bufferAttribute = attribute.isInterleavedBufferAttribute ? attribute.data : attribute;
+		const bufferData = backend.get( bufferAttribute );
+		const bufferType = bufferData.bufferType;
+
+		gl.bindBuffer( bufferType, bufferData.bufferGPU );
+		gl.bufferSubData( bufferType, 0, array );
+		gl.bindBuffer( bufferType, null );
+
+		bufferData.version = bufferAttribute.version;
+
+	}
+
 }
 
 export default WebGLAttributeUtils;

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

@@ -21,7 +21,7 @@ class WebGLState {
 		this.currentFlipSided = null;
 		this.currentCullFace = null;
 		this.currentProgram = null;
-		this.currentBlendingEnabled = null;
+		this.currentBlendingEnabled = false;
 		this.currentBlending = null;
 		this.currentBlendSrc = null;
 		this.currentBlendDst = null;
@@ -30,6 +30,7 @@ class WebGLState {
 		this.currentPremultipledAlpha = null;
 		this.currentPolygonOffsetFactor = null;
 		this.currentPolygonOffsetUnits = null;
+		this.currentColorMask = null;
 		this.currentDepthFunc = null;
 		this.currentDepthMask = null;
 		this.currentStencilFunc = null;
@@ -296,6 +297,17 @@ class WebGLState {
 
 	}
 
+	setColorMask( colorMask ) {
+
+		if ( this.currentColorMask !== colorMask ) {
+
+			this.gl.colorMask( colorMask, colorMask, colorMask, colorMask );
+			this.currentColorMask = colorMask;
+
+		}
+
+	}
+
 	setDepthTest( depthTest ) {
 
 		const { gl } = this;
@@ -462,7 +474,7 @@ class WebGLState {
 		this.setDepthFunc( material.depthFunc );
 		this.setDepthTest( material.depthTest );
 		this.setDepthMask( material.depthWrite );
-		this.setDepthMask( material.colorWrite );
+		this.setColorMask( material.colorWrite );
 
 		const stencilWrite = material.stencilWrite;
 		this.setStencilTest( stencilWrite );

package/examples/jsm/renderers/webgpu/WebGPUBackend.js

@@ -33,6 +33,8 @@ class WebGPUBackend extends Backend {
 
 		super( parameters );
 
+		this.isWebGPUBackend = true;
+
 		// some parameters require default values other than "undefined"
 
 		this.parameters.antialias = ( parameters.antialias === true );

package/examples/jsm/renderers/webgpu/nodes/WGSLNodeBuilder.js

@@ -9,7 +9,7 @@ import UniformBuffer from '../../common/UniformBuffer.js';
 import StorageBuffer from '../../common/StorageBuffer.js';
 import { getVectorLength, getStrideLength } from '../../common/BufferUtils.js';
 
-import { NodeBuilder, CodeNode, NodeMaterial } from '../../../nodes/Nodes.js';
+import { NodeBuilder, CodeNode, NodeMaterial, FunctionNode } from '../../../nodes/Nodes.js';
 
 import { getFormat } from '../utils/WebGPUTextureUtils.js';
 
@@ -436,6 +436,34 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 	}
 
+	buildFunctionNode( shaderNode ) {
+
+		const layout = shaderNode.layout;
+		const flowData = this.flowShaderNode( shaderNode );
+
+		const parameters = [];
+
+		for ( const input of layout.inputs ) {
+
+			parameters.push( input.name + ' : ' + this.getType( input.type ) );
+
+		}
+
+		//
+
+		const code = `fn ${ layout.name }( ${ parameters.join( ', ' ) } ) -> ${ this.getType( layout.type ) } {
+${ flowData.vars }
+${ flowData.code }
+	return ${ flowData.result };
+
+}`;
+
+		//
+
+		return new FunctionNode( code );
+
+	}
+
 	getInstanceIndex() {
 
 		if ( this.shaderStage === 'vertex' ) {
@@ -551,9 +579,13 @@ class WGSLNodeBuilder extends NodeBuilder {
 		const snippets = [];
 		const vars = this.vars[ shaderStage ];
 
-		for ( const variable of vars ) {
+		if ( vars !== undefined ) {
+
+			for ( const variable of vars ) {
 
-			snippets.push( `\t${ this.getVar( variable.type, variable.name ) };` );
+				snippets.push( `\t${ this.getVar( variable.type, variable.name ) };` );
+
+			}
 
 		}
 
@@ -584,7 +616,7 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 					let attributesSnippet = `@location( ${index} )`;
 
-					if ( varying.type === 'int' || varying.type === 'uint' ) {
+					if ( /^(int|uint|ivec|uvec)/.test( varying.type ) ) {
 
 						attributesSnippet += ' @interpolate( flat )';
 

package/examples/jsm/shaders/ACESFilmicToneMappingShader.js

@@ -8,6 +8,8 @@
 
 const ACESFilmicToneMappingShader = {
 
+	name: 'ACESFilmicToneMappingShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

package/examples/jsm/shaders/AfterimageShader.js

@@ -6,6 +6,8 @@
 
 const AfterimageShader = {
 
+	name: 'AfterimageShader',
+
 	uniforms: {
 
 		'damp': { value: 0.96 },

package/examples/jsm/shaders/BasicShader.js

@@ -4,6 +4,8 @@
 
 const BasicShader = {
 
+	name: 'BasicShader',
+
 	uniforms: {},
 
 	vertexShader: /* glsl */`

package/examples/jsm/shaders/BlendShader.js

@@ -4,6 +4,8 @@
 
 const BlendShader = {
 
+	name: 'BlendShader',
+
 	uniforms: {
 
 		'tDiffuse1': { value: null },

package/examples/jsm/shaders/BokehShader.js

@@ -6,6 +6,8 @@
 
 const BokehShader = {
 
+	name: 'BokehShader',
+
 	defines: {
 		'DEPTH_PACKING': 1,
 		'PERSPECTIVE_CAMERA': 1,

package/examples/jsm/shaders/BokehShader2.js

@@ -11,6 +11,8 @@ import {
  */
 const BokehShader = {
 
+	name: 'BokehShader',
+
 	uniforms: {
 
 		'textureWidth': { value: 1.0 },
@@ -354,6 +356,8 @@ const BokehShader = {
 
 const BokehDepthShader = {
 
+	name: 'BokehDepthShader',
+
 	uniforms: {
 
 		'mNear': { value: 1.0 },

package/examples/jsm/shaders/BrightnessContrastShader.js

@@ -7,6 +7,8 @@
 
 const BrightnessContrastShader = {
 
+	name: 'BrightnessContrastShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

package/examples/jsm/shaders/ColorCorrectionShader.js

@@ -8,6 +8,8 @@ import {
 
 const ColorCorrectionShader = {
 
+	name: 'ColorCorrectionShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

package/examples/jsm/shaders/DOFMipMapShader.js

@@ -6,6 +6,8 @@
 
 const DOFMipMapShader = {
 
+	name: 'DOFMipMapShader',
+
 	uniforms: {
 
 		'tColor': { value: null },

package/examples/jsm/shaders/DepthLimitedBlurShader.js

@@ -7,11 +7,15 @@ import {
  */
 
 const DepthLimitedBlurShader = {
+
+	name: 'DepthLimitedBlurShader',
+
 	defines: {
 		'KERNEL_RADIUS': 4,
 		'DEPTH_PACKING': 1,
 		'PERSPECTIVE_CAMERA': 1
 	},
+
 	uniforms: {
 		'tDiffuse': { value: null },
 		'size': { value: new Vector2( 512, 512 ) },
@@ -22,6 +26,7 @@ const DepthLimitedBlurShader = {
 		'cameraFar': { value: 1000 },
 		'depthCutoff': { value: 10 },
 	},
+
 	vertexShader: /* glsl */`
 
 		#include <common>

package/examples/jsm/shaders/FXAAShader.js

@@ -12,6 +12,8 @@ import {
 
 const FXAAShader = {
 
+	name: 'FXAAShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

package/examples/jsm/shaders/FilmShader.js

@@ -38,7 +38,7 @@ const FilmShader = {
 
 			vec4 base = texture2D( tDiffuse, vUv );
 
-			float noise = rand( vUv + time );
+			float noise = rand( fract( vUv + time ) );
 
 			vec3 color = base.rgb + base.rgb * clamp( 0.1 + noise, 0.0, 1.0 );
 

package/examples/jsm/shaders/FocusShader.js

@@ -6,6 +6,8 @@
 
 const FocusShader = {
 
+	name: 'FocusShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

package/examples/jsm/shaders/FreiChenShader.js

@@ -11,6 +11,8 @@ import {
 
 const FreiChenShader = {
 
+	name: 'FreiChenShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

package/examples/jsm/shaders/GodRaysShader.js

@@ -23,6 +23,8 @@ import {
 
 const GodRaysDepthMaskShader = {
 
+	name: 'GodRaysDepthMaskShader',
+
 	uniforms: {
 
 		tInput: {
@@ -74,6 +76,8 @@ const GodRaysDepthMaskShader = {
 
 const GodRaysGenerateShader = {
 
+	name: 'GodRaysGenerateShader',
+
 	uniforms: {
 
 		tInput: {
@@ -194,6 +198,8 @@ const GodRaysGenerateShader = {
 
 const GodRaysCombineShader = {
 
+	name: 'GodRaysCombineShader',
+
 	uniforms: {
 
 		tColors: {
@@ -251,6 +257,8 @@ const GodRaysCombineShader = {
 
 const GodRaysFakeSunShader = {
 
+	name: 'GodRaysFakeSunShader',
+
 	uniforms: {
 
 		vSunPositionScreenSpace: {

package/examples/jsm/shaders/HalftoneShader.js

@@ -7,6 +7,8 @@
 
 const HalftoneShader = {
 
+	name: 'HalftoneShader',
+
 	uniforms: {
 		'tDiffuse': { value: null },
 		'shape': { value: 1 },

package/examples/jsm/shaders/HorizontalTiltShiftShader.js

@@ -9,6 +9,8 @@
 
 const HorizontalTiltShiftShader = {
 
+	name: 'HorizontalTiltShiftShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

package/examples/jsm/shaders/HueSaturationShader.js

@@ -7,6 +7,8 @@
 
 const HueSaturationShader = {
 
+	name: 'HueSaturationShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

package/examples/jsm/shaders/KaleidoShader.js

@@ -10,6 +10,8 @@
 
 const KaleidoShader = {
 
+	name: 'KaleidoShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

package/examples/jsm/shaders/LuminosityHighPassShader.js

@@ -9,6 +9,8 @@ import {
 
 const LuminosityHighPassShader = {
 
+	name: 'LuminosityHighPassShader',
+
 	shaderID: 'luminosityHighPass',
 
 	uniforms: {

package/examples/jsm/shaders/LuminosityShader.js

@@ -5,6 +5,8 @@
 
 const LuminosityShader = {
 
+	name: 'LuminosityShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null }

package/examples/jsm/shaders/MMDToonShader.js

@@ -71,6 +71,8 @@ const mmd_toon_matcap_fragment = /* glsl */`
 
 const MMDToonShader = {
 
+	name: 'MMDToonShader',
+
 	defines: {
 		TOON: true,
 		MATCAP: true,

package/examples/jsm/shaders/MirrorShader.js

@@ -7,6 +7,8 @@
 
 const MirrorShader = {
 
+	name: 'MirrorShader',
+
 	uniforms: {
 
 		'tDiffuse': { value: null },

package/examples/jsm/shaders/NormalMapShader.js

@@ -9,6 +9,8 @@ import {
 
 const NormalMapShader = {
 
+	name: 'NormalMapShader',
+
 	uniforms: {
 
 		'heightMap': { value: null },