NodeMaterial: Remove `WebGLNodeBuilder` (#28167)

* Remove WebGLNodeBuilder

* Update webgpu_materials_lightmap.jpg

docs/api/ar/loaders/ObjectLoader.html

@@ -53,7 +53,7 @@
 		 
 		<h2>أمثلة (Examples)</h2>
 		 
-		<p>[example:webgl_materials_lightmap WebGL / materials / lightmap]</p>
+		<p>[example:webgpu_materials_lightmap WebGL / materials / lightmap]</p>
 		 
 		<h2>المنشئ (Constructor)</h2>
 

docs/api/ar/materials/ShaderMaterial.html

@@ -109,7 +109,6 @@
 		[example:webgl_lights_hemisphere webgl / lights / hemisphere]<br />
 		[example:webgl_marchingcubes webgl / marchingcubes]<br />
 		[example:webgl_materials_envmaps webgl / materials / envmaps]<br />
-		[example:webgl_materials_lightmap webgl / materials / lightmap]<br />
 		[example:webgl_materials_wireframe webgl / materials / wireframe]<br />
 		[example:webgl_modifier_tessellation webgl / modifier / tessellation]<br />
 		[example:webgl_postprocessing_dof2 webgl / postprocessing / dof2]<br />

docs/api/en/loaders/ObjectLoader.html

@@ -53,7 +53,7 @@
 
 		<h2>Examples</h2>
 
-		<p>[example:webgl_materials_lightmap WebGL / materials / lightmap]</p>
+		<p>[example:webgpu_materials_lightmap WebGL / materials / lightmap]</p>
 
 		<h2>Constructor</h2>
 

docs/api/en/materials/ShaderMaterial.html

@@ -115,7 +115,6 @@
 			[example:webgl_lights_hemisphere webgl / lights / hemisphere]<br />
 			[example:webgl_marchingcubes webgl / marchingcubes]<br />
 			[example:webgl_materials_envmaps webgl / materials / envmaps]<br />
-			[example:webgl_materials_lightmap webgl / materials / lightmap]<br />
 			[example:webgl_materials_wireframe webgl / materials / wireframe]<br />
 			[example:webgl_modifier_tessellation webgl / modifier / tessellation]<br />
 			[example:webgl_postprocessing_dof2 webgl / postprocessing / dof2]<br />

docs/api/fr/materials/ShaderMaterial.html

@@ -107,7 +107,6 @@
 			[example:webgl_lights_hemisphere webgl / lights / hemisphere]<br />
 			[example:webgl_marchingcubes webgl / marchingcubes]<br />
 			[example:webgl_materials_envmaps webgl / materials / envmaps]<br />
-			[example:webgl_materials_lightmap webgl / materials / lightmap]<br />
 			[example:webgl_materials_wireframe webgl / materials / wireframe]<br />
 			[example:webgl_modifier_tessellation webgl / modifier / tessellation]<br />
 			[example:webgl_postprocessing_dof2 webgl / postprocessing / dof2]<br />

docs/api/it/loaders/ObjectLoader.html

@@ -56,7 +56,7 @@
 		<h2>Esempi</h2>
 
 		<p>
-			[example:webgl_materials_lightmap WebGL / materials / lightmap]
+			[example:webgpu_materials_lightmap WebGL / materials / lightmap]
 		</p>
 
 		<h2>Costruttore</h2>

docs/api/it/materials/ShaderMaterial.html

@@ -109,7 +109,6 @@
 			[example:webgl_lights_hemisphere webgl / lights / hemisphere]<br />
 			[example:webgl_marchingcubes webgl / marchingcubes]<br />
 			[example:webgl_materials_envmaps webgl / materials / envmaps]<br />
-			[example:webgl_materials_lightmap webgl / materials / lightmap]<br />
 			[example:webgl_materials_wireframe webgl / materials / wireframe]<br />
 			[example:webgl_modifier_tessellation webgl / modifier / tessellation]<br />
 			[example:webgl_postprocessing_dof2 webgl / postprocessing / dof2]<br />

docs/api/zh/loaders/ObjectLoader.html

@@ -54,7 +54,7 @@
 		<h2>例子</h2>
 
 		<p>
-			[example:webgl_materials_lightmap WebGL / materials / lightmap]
+			[example:webgpu_materials_lightmap WebGL / materials / lightmap]
 		</p>
 
 		<h2>构造函数</h2>

docs/api/zh/materials/ShaderMaterial.html

@@ -97,7 +97,6 @@
 			[example:webgl_lights_hemisphere webgl / lights / hemisphere]<br />
 			[example:webgl_marchingcubes webgl / marchingcubes]<br />
 			[example:webgl_materials_envmaps webgl / materials / envmaps]<br />
-			[example:webgl_materials_lightmap webgl / materials / lightmap]<br />
 			[example:webgl_materials_wireframe webgl / materials / wireframe]<br />
 			[example:webgl_modifier_tessellation webgl / modifier / tessellation]<br />
 			[example:webgl_postprocessing_dof2 webgl / postprocessing / dof2]<br />

examples/files.json

@@ -153,7 +153,6 @@
 		"webgl_materials_envmaps_exr",
 		"webgl_materials_envmaps_groundprojected",
 		"webgl_materials_envmaps_hdr",
-		"webgl_materials_lightmap",
 		"webgl_materials_matcap",
 		"webgl_materials_normalmap",
 		"webgl_materials_normalmap_object_space",
@@ -225,17 +224,6 @@
 		"webgl_water",
 		"webgl_water_flowmap"
 	],
-	"webgl / nodes": [
-		"webgl_nodes_loader_gltf_iridescence",
-		"webgl_nodes_loader_gltf_transmission",
-		"webgl_nodes_loader_gltf_sheen",
-		"webgl_nodes_loader_materialx",
-		"webgl_nodes_materials_instance_uniform",
-		"webgl_nodes_materials_physical_clearcoat",
-		"webgl_nodes_materials_standard",
-		"webgl_nodes_materialx_noise",
-		"webgl_nodes_points"
-	],
 	"webgl / postprocessing": [
 		"webgl_postprocessing",
 		"webgl_postprocessing_3dlut",
@@ -354,6 +342,7 @@
 		"webgpu_loader_gltf_transmission",
 		"webgpu_loader_materialx",
 		"webgpu_materials",
+		"webgpu_materials_lightmap",
 		"webgpu_materials_sss",
 		"webgpu_materials_transmission",
 		"webgpu_materials_video",

examples/jsm/nodes/accessors/MaterialNode.js

@@ -91,7 +91,7 @@ class MaterialNode extends Node {
 
 			if ( material.specularMap && material.specularMap.isTexture === true ) {
 
-				node = this.getTexture( scope ).r;
+				node = this.getTexture( 'specular' ).r;
 
 			} else {
 

examples/jsm/renderers/webgl-legacy/nodes/GLSL1NodeBuilder.js

@@ -1,318 +0,0 @@
-import { MathNode, GLSLNodeParser, NodeBuilder } from '../../../nodes/Nodes.js';
-
-const glslMethods = {
-	[ MathNode.ATAN2 ]: 'atan'
-};
-
-const precisionLib = {
-	low: 'lowp',
-	medium: 'mediump',
-	high: 'highp'
-};
-
-class GLSL1NodeBuilder extends NodeBuilder {
-
-	constructor( object, renderer, scene = null ) {
-
-		super( object, renderer, new GLSLNodeParser(), scene );
-
-	}
-
-	getMethod( method ) {
-
-		return glslMethods[ method ] || method;
-
-	}
-
-	getTexture( texture, textureProperty, uvSnippet ) {
-
-		if ( texture.isTextureCube ) {
-
-			return `textureCube( ${textureProperty}, ${uvSnippet} )`;
-
-		} else {
-
-			return `texture2D( ${textureProperty}, ${uvSnippet} )`;
-
-		}
-
-	}
-
-	getTextureBias( texture, textureProperty, uvSnippet, biasSnippet ) {
-
-		return `textureLod( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
-
-	}
-
-	getVars( shaderStage ) {
-
-		const snippets = [];
-
-		const vars = this.vars[ shaderStage ];
-
-		for ( const variable of vars ) {
-
-			snippets.push( `${ this.getVar( variable.type, variable.name ) };` );
-
-		}
-
-		return snippets.join( '\n\t' );
-
-	}
-
-	getUniforms( shaderStage ) {
-
-		const uniforms = this.uniforms[ shaderStage ];
-
-		let output = '';
-
-		for ( const uniform of uniforms ) {
-
-			let snippet = null;
-
-			if ( uniform.type === 'texture' ) {
-
-				snippet = `sampler2D ${uniform.name};\n`;
-
-			} else if ( uniform.type === 'cubeTexture' ) {
-
-				snippet = `samplerCube ${uniform.name};\n`;
-
-			} else {
-
-				const vectorType = this.getVectorType( uniform.type );
-
-				snippet = `${vectorType} ${uniform.name};\n`;
-
-			}
-
-			const precision = uniform.node.precision;
-
-			if ( precision !== null ) {
-
-				snippet = 'uniform ' + precisionLib[ precision ] + ' ' + snippet;
-
-			} else {
-
-				snippet = 'uniform ' + snippet;
-
-			}
-
-			output += snippet;
-
-		}
-
-		return output;
-
-	}
-
-	getAttributes( shaderStage ) {
-
-		let snippet = '';
-
-		if ( shaderStage === 'vertex' ) {
-
-			const attributes = this.attributes;
-
-			for ( const attribute of attributes ) {
-
-				snippet += `attribute ${attribute.type} ${attribute.name};\n`;
-
-			}
-
-		}
-
-		return snippet;
-
-	}
-
-	getVaryings( shaderStage ) {
-
-		let snippet = '';
-
-		const varyings = this.varyings;
-
-		if ( shaderStage === 'vertex' ) {
-
-			for ( const varying of varyings ) {
-
-				snippet += `${varying.needsInterpolation ? 'varying' : '/*varying*/'} ${varying.type} ${varying.name};\n`;
-
-			}
-
-		} else if ( shaderStage === 'fragment' ) {
-
-			for ( const varying of varyings ) {
-
-				if ( varying.needsInterpolation ) {
-
-					snippet += `varying ${varying.type} ${varying.name};\n`;
-
-				}
-
-			}
-
-		}
-
-		return snippet;
-
-	}
-
-	getVertexIndex() {
-
-		return 'gl_VertexID';
-
-	}
-
-	getFrontFacing() {
-
-		return 'gl_FrontFacing';
-
-	}
-
-	getFragCoord() {
-
-		return 'gl_FragCoord';
-
-	}
-
-	isFlipY() {
-
-		return true;
-
-	}
-
-	_getGLSLVertexCode( shaderData ) {
-
-		return `${ this.getSignature() }
-
-// uniforms
-${shaderData.uniforms}
-
-// varyings
-${shaderData.varyings}
-
-// attributes
-${shaderData.attributes}
-
-// codes
-${shaderData.codes}
-
-void main() {
-
-	// vars
-	${shaderData.vars}
-
-	// flow
-	${shaderData.flow}
-
-}
-`;
-
-	}
-
-	_getGLSLFragmentCode( shaderData ) {
-
-		return `${ this.getSignature() }
-
-// precision
-precision highp float;
-precision highp int;
-
-// uniforms
-${shaderData.uniforms}
-
-// varyings
-${shaderData.varyings}
-
-// codes
-${shaderData.codes}
-
-void main() {
-
-	// vars
-	${shaderData.vars}
-
-	// flow
-	${shaderData.flow}
-
-}
-`;
-
-	}
-
-	buildCode() {
-
-		const shadersData = this.material !== null ? { fragment: {}, vertex: {} } : { compute: {} };
-
-		for ( const shaderStage in shadersData ) {
-
-			let flow = '// code\n\n';
-			flow += this.flowCode[ shaderStage ];
-
-			const flowNodes = this.flowNodes[ shaderStage ];
-			const mainNode = flowNodes[ flowNodes.length - 1 ];
-
-			for ( const node of flowNodes ) {
-
-				const flowSlotData = this.getFlowData( node/*, shaderStage*/ );
-				const slotName = node.name;
-
-				if ( slotName ) {
-
-					if ( flow.length > 0 ) flow += '\n';
-
-					flow += `\t// flow -> ${ slotName }\n\t`;
-
-				}
-
-				flow += `${ flowSlotData.code }\n\t`;
-
-				if ( node === mainNode && shaderStage !== 'compute' ) {
-
-					flow += '// result\n\t';
-
-					if ( shaderStage === 'vertex' ) {
-
-						flow += 'gl_Position = ';
-
-					} else if ( shaderStage === 'fragment' ) {
-
-						flow += 'gl_FragColor = ';
-
-					}
-
-					flow += `${ flowSlotData.result };`;
-
-				}
-
-			}
-
-			const stageData = shadersData[ shaderStage ];
-
-			stageData.uniforms = this.getUniforms( shaderStage );
-			stageData.attributes = this.getAttributes( shaderStage );
-			stageData.varyings = this.getVaryings( shaderStage );
-			stageData.vars = this.getVars( shaderStage );
-			stageData.codes = this.getCodes( shaderStage );
-			stageData.flow = flow;
-
-		}
-
-		if ( this.material !== null ) {
-
-			this.vertexShader = this._getGLSLVertexCode( shadersData.vertex );
-			this.fragmentShader = this._getGLSLFragmentCode( shadersData.fragment );
-
-		} else {
-
-			console.warn( 'GLSLNodeBuilder: compute shaders are not supported.' );
-			//this.computeShader = this._getGLSLComputeCode( shadersData.compute );
-
-		}
-
-	}
-
-}
-
-export default GLSL1NodeBuilder;

examples/jsm/renderers/webgl-legacy/nodes/SlotNode.js

@@ -1,26 +0,0 @@
-import { Node } from '../../../nodes/Nodes.js';
-
-class SlotNode extends Node {
-
-	constructor( params ) {
-
-		super( params.nodeType );
-
-		this.node = null;
-		this.source = null;
-		this.target = null;
-		this.inclusionType = 'replace';
-
-		Object.assign( this, params );
-
-	}
-
-	generate( builder ) {
-
-		return this.node.build( builder, this.getNodeType( builder ) );
-
-	}
-
-}
-
-export default SlotNode;

examples/jsm/renderers/webgl-legacy/nodes/WebGLNodeBuilder.js

@@ -1,792 +0,0 @@
-import { defaultShaderStages, NodeFrame, MathNode, GLSLNodeParser, NodeBuilder, normalView } from '../../../nodes/Nodes.js';
-import SlotNode from './SlotNode.js';
-import { PerspectiveCamera, ShaderChunk, ShaderLib, UniformsUtils, UniformsLib } from 'three';
-
-const nodeFrame = new NodeFrame();
-nodeFrame.camera = new PerspectiveCamera();
-
-const nodeShaderLib = {
-	LineBasicNodeMaterial: ShaderLib.basic,
-	MeshBasicNodeMaterial: ShaderLib.basic,
-	PointsNodeMaterial: ShaderLib.points,
-	MeshStandardNodeMaterial: ShaderLib.standard,
-	MeshPhysicalNodeMaterial: ShaderLib.physical,
-	MeshPhongNodeMaterial: ShaderLib.phong
-};
-
-const glslMethods = {
-	[ MathNode.ATAN2 ]: 'atan'
-};
-
-const precisionLib = {
-	low: 'lowp',
-	medium: 'mediump',
-	high: 'highp'
-};
-
-function getIncludeSnippet( name ) {
-
-	return `#include <${name}>`;
-
-}
-
-function getShaderStageProperty( shaderStage ) {
-
-	return `${shaderStage}Shader`;
-
-}
-
-class WebGLNodeBuilder extends NodeBuilder {
-
-	constructor( object, renderer, shader, material = null ) {
-
-		super( object, renderer, new GLSLNodeParser(), null, material );
-
-		this.shader = shader;
-		this.slots = { vertex: [], fragment: [] };
-
-		this._parseShaderLib();
-		this._parseInclude( 'fragment', 'lights_physical_fragment', 'clearcoat_normal_fragment_begin', 'transmission_fragment' );
-		this._parseObject();
-
-		this._sortSlotsToFlow();
-
-	}
-
-	getMethod( method ) {
-
-		return glslMethods[ method ] || method;
-
-	}
-
-	addSlot( shaderStage, slotNode ) {
-
-		this.slots[ shaderStage ].push( slotNode );
-
-	}
-
-	_parseShaderLib() {
-
-		const material = this.material;
-
-		let type = material.type;
-
-		// see https://github.com/mrdoob/three.js/issues/23707
-
-		if ( material.isMeshPhysicalNodeMaterial ) type = 'MeshPhysicalNodeMaterial';
-		else if ( material.isMeshStandardNodeMaterial ) type = 'MeshStandardNodeMaterial';
-		else if ( material.isMeshPhongNodeMaterial ) type = 'MeshPhongNodeMaterial';
-		else if ( material.isMeshBasicNodeMaterial ) type = 'MeshBasicNodeMaterial';
-		else if ( material.isPointsNodeMaterial ) type = 'PointsNodeMaterial';
-		else if ( material.isLineBasicNodeMaterial ) type = 'LineBasicNodeMaterial';
-
-		// shader lib
-
-		if ( nodeShaderLib[ type ] !== undefined ) {
-
-			const shaderLib = nodeShaderLib[ type ];
-			const shader = this.shader;
-
-			shader.vertexShader = shaderLib.vertexShader;
-			shader.fragmentShader = shaderLib.fragmentShader;
-			shader.uniforms = UniformsUtils.merge( [ shaderLib.uniforms, UniformsLib.lights ] );
-
-		}
-
-	}
-
-	_parseObject() {
-
-		const { material, renderer } = this;
-
-		this.addSlot( 'fragment', new SlotNode( {
-			node: normalView,
-			nodeType: 'vec3',
-			source: 'void main() {',
-			target: 'vec3 TransformedNormalView = %RESULT%;',
-			inclusionType: 'append'
-		} ) );
-
-		if ( renderer.toneMappingNode && renderer.toneMappingNode.isNode === true ) {
-
-			this.addSlot( 'fragment', new SlotNode( {
-				node: material.colorNode,
-				nodeType: 'vec4',
-				source: getIncludeSnippet( 'tonemapping_fragment' ),
-				target: ''
-			} ) );
-
-		}
-
-		// parse inputs
-
-		if ( material.colorNode && material.colorNode.isNode ) {
-
-			this.addSlot( 'fragment', new SlotNode( {
-				node: material.colorNode,
-				nodeType: 'vec4',
-				source: 'vec4 diffuseColor = vec4( diffuse, opacity );',
-				target: 'vec4 diffuseColor = %RESULT%; diffuseColor.a *= opacity;',
-			} ) );
-
-		}
-
-		if ( material.opacityNode && material.opacityNode.isNode ) {
-
-			this.addSlot( 'fragment', new SlotNode( {
-				node: material.opacityNode,
-				nodeType: 'float',
-				source: getIncludeSnippet( 'alphatest_fragment' ),
-				target: 'diffuseColor.a = %RESULT%;',
-				inclusionType: 'append'
-			} ) );
-
-		}
-
-		if ( material.normalNode && material.normalNode.isNode ) {
-
-			this.addSlot( 'fragment', new SlotNode( {
-				node: material.normalNode,
-				nodeType: 'vec3',
-				source: getIncludeSnippet( 'normal_fragment_begin' ),
-				target: 'normal = %RESULT%;',
-				inclusionType: 'append'
-			} ) );
-
-		}
-
-		if ( material.emissiveNode && material.emissiveNode.isNode ) {
-
-			this.addSlot( 'fragment', new SlotNode( {
-				node: material.emissiveNode,
-				nodeType: 'vec3',
-				source: getIncludeSnippet( 'emissivemap_fragment' ),
-				target: 'totalEmissiveRadiance = %RESULT%;',
-				inclusionType: 'append'
-			} ) );
-
-		}
-
-		if ( material.isMeshStandardNodeMaterial ) {
-
-			if ( material.metalnessNode && material.metalnessNode.isNode ) {
-
-				this.addSlot( 'fragment', new SlotNode( {
-					node: material.metalnessNode,
-					nodeType: 'float',
-					source: getIncludeSnippet( 'metalnessmap_fragment' ),
-					target: 'metalnessFactor = %RESULT%;',
-					inclusionType: 'append'
-				} ) );
-
-			}
-
-			if ( material.roughnessNode && material.roughnessNode.isNode ) {
-
-				this.addSlot( 'fragment', new SlotNode( {
-					node: material.roughnessNode,
-					nodeType: 'float',
-					source: getIncludeSnippet( 'roughnessmap_fragment' ),
-					target: 'roughnessFactor = %RESULT%;',
-					inclusionType: 'append'
-				} ) );
-
-			}
-
-			if ( material.isMeshPhysicalNodeMaterial ) {
-
-				if ( material.clearcoatNode && material.clearcoatNode.isNode ) {
-
-					this.addSlot( 'fragment', new SlotNode( {
-						node: material.clearcoatNode,
-						nodeType: 'float',
-						source: 'material.clearcoat = clearcoat;',
-						target: 'material.clearcoat = %RESULT%;'
-					} ) );
-
-					if ( material.clearcoatRoughnessNode && material.clearcoatRoughnessNode.isNode ) {
-
-						this.addSlot( 'fragment', new SlotNode( {
-							node: material.clearcoatRoughnessNode,
-							nodeType: 'float',
-							source: 'material.clearcoatRoughness = clearcoatRoughness;',
-							target: 'material.clearcoatRoughness = %RESULT%;'
-						} ) );
-
-					}
-
-					if ( material.clearcoatNormalNode && material.clearcoatNormalNode.isNode ) {
-
-						this.addSlot( 'fragment', new SlotNode( {
-							node: material.clearcoatNormalNode,
-							nodeType: 'vec3',
-							source: 'vec3 clearcoatNormal = nonPerturbedNormal;',
-							target: 'vec3 clearcoatNormal = %RESULT%;'
-						} ) );
-
-					}
-
-					material.defines.USE_CLEARCOAT = '';
-
-				} else {
-
-					delete material.defines.USE_CLEARCOAT;
-
-				}
-
-				if ( material.sheenNode && material.sheenNode.isNode ) {
-
-					this.addSlot( 'fragment', new SlotNode( {
-						node: material.sheenNode,
-						nodeType: 'vec3',
-						source: 'material.sheenColor = sheenColor;',
-						target: 'material.sheenColor = %RESULT%;'
-					} ) );
-
-					if ( material.sheenRoughnessNode && material.sheenRoughnessNode.isNode ) {
-
-						this.addSlot( 'fragment', new SlotNode( {
-							node: material.sheenRoughnessNode,
-							nodeType: 'float',
-							source: 'material.sheenRoughness = clamp( sheenRoughness, 0.07, 1.0 );',
-							target: 'material.sheenRoughness = clamp( %RESULT%, 0.07, 1.0 );'
-						} ) );
-
-					}
-
-					material.defines.USE_SHEEN = '';
-
-				} else {
-
-					delete material.defines.USE_SHEEN;
-
-				}
-
-				if ( material.iridescenceNode && material.iridescenceNode.isNode ) {
-
-					this.addSlot( 'fragment', new SlotNode( {
-						node: material.iridescenceNode,
-						nodeType: 'float',
-						source: 'material.iridescence = iridescence;',
-						target: 'material.iridescence = %RESULT%;'
-					} ) );
-
-					if ( material.iridescenceIORNode && material.iridescenceIORNode.isNode ) {
-
-						this.addSlot( 'fragment', new SlotNode( {
-							node: material.iridescenceIORNode,
-							nodeType: 'float',
-							source: 'material.iridescenceIOR = iridescenceIOR;',
-							target: 'material.iridescenceIOR = %RESULT%;'
-						} ) );
-
-					}
-
-					if ( material.iridescenceThicknessNode && material.iridescenceThicknessNode.isNode ) {
-
-						this.addSlot( 'fragment', new SlotNode( {
-							node: material.iridescenceThicknessNode,
-							nodeType: 'float',
-							source: 'material.iridescenceThickness = iridescenceThicknessMaximum;',
-							target: 'material.iridescenceThickness = %RESULT%;'
-						} ) );
-
-					}
-
-					material.defines.USE_IRIDESCENCE = '';
-
-				} else {
-
-					delete material.defines.USE_IRIDESCENCE;
-
-				}
-
-				if ( material.iorNode && material.iorNode.isNode ) {
-
-					this.addSlot( 'fragment', new SlotNode( {
-						node: material.iorNode,
-						nodeType: 'float',
-						source: 'material.ior = ior;',
-						target: 'material.ior = %RESULT%;'
-					} ) );
-
-				}
-
-				if ( material.specularColorNode && material.specularColorNode.isNode ) {
-
-					this.addSlot( 'fragment', new SlotNode( {
-						node: material.specularColorNode,
-						nodeType: 'vec3',
-						source: 'vec3 specularColorFactor = specularColor;',
-						target: 'vec3 specularColorFactor = %RESULT%;'
-					} ) );
-
-				}
-
-				if ( material.specularIntensityNode && material.specularIntensityNode.isNode ) {
-
-					this.addSlot( 'fragment', new SlotNode( {
-						node: material.specularIntensityNode,
-						nodeType: 'float',
-						source: 'float specularIntensityFactor = specularIntensity;',
-						target: 'float specularIntensityFactor = %RESULT%;'
-					} ) );
-
-				}
-
-				if ( material.transmissionNode && material.transmissionNode.isNode ) {
-
-					this.addSlot( 'fragment', new SlotNode( {
-						node: material.transmissionNode,
-						nodeType: 'float',
-						source: 'material.transmission = transmission;',
-						target: 'material.transmission = %RESULT%;'
-					} ) );
-
-					if ( material.thicknessNode && material.thicknessNode.isNode ) {
-
-						this.addSlot( 'fragment', new SlotNode( {
-							node: material.thicknessNode,
-							nodeType: 'float',
-							source: 'material.thickness = thickness;',
-							target: 'material.thickness = %RESULT%;'
-						} ) );
-
-					}
-
-					if ( material.attenuationDistanceNode && material.attenuationDistanceNode.isNode ) {
-
-						this.addSlot( 'fragment', new SlotNode( {
-							node: material.attenuationDistanceNode,
-							nodeType: 'float',
-							source: 'material.attenuationDistance = attenuationDistance;',
-							target: 'material.attenuationDistance = %RESULT%;'
-						} ) );
-
-					}
-
-					if ( material.attenuationColorNode && material.attenuationColorNode.isNode ) {
-
-						this.addSlot( 'fragment', new SlotNode( {
-							node: material.attenuationColorNode,
-							nodeType: 'vec3',
-							source: 'material.attenuationColor = attenuationColor;',
-							target: 'material.attenuationColor = %RESULT%;'
-						} ) );
-
-					}
-
-					material.transmission = 1;
-					material.defines.USE_TRANSMISSION = '';
-
-				} else {
-
-					material.transmission = 0;
-					delete material.defines.USE_TRANSMISSION;
-
-				}
-
-			}
-
-		}
-
-		//
-
-		if ( material.positionNode && material.positionNode.isNode ) {
-
-			this.addSlot( 'vertex', new SlotNode( {
-				node: material.positionNode,
-				nodeType: 'vec3',
-				source: getIncludeSnippet( 'begin_vertex' ),
-				target: 'transformed = %RESULT%;',
-				inclusionType: 'append'
-			} ) );
-
-		}
-
-		if ( material.sizeNode && material.sizeNode.isNode ) {
-
-			this.addSlot( 'vertex', new SlotNode( {
-				node: material.sizeNode,
-				nodeType: 'float',
-				source: 'gl_PointSize = size;',
-				target: 'gl_PointSize = %RESULT%;'
-			} ) );
-
-		}
-
-	}
-
-	generateTexture( texture, textureProperty, uvSnippet ) {
-
-		if ( texture.isTextureCube ) {
-
-			return `textureCube( ${textureProperty}, ${uvSnippet} )`;
-
-		} else {
-
-			return `texture2D( ${textureProperty}, ${uvSnippet} )`;
-
-		}
-
-	}
-
-	generateTextureLevel( texture, textureProperty, uvSnippet, biasSnippet ) {
-
-		return `textureLod( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
-
-	}
-
-	buildFunctionCode( 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 code;
-
-	}
-
-	getUniforms( shaderStage ) {
-
-		const uniforms = this.uniforms[ shaderStage ];
-
-		let output = '';
-
-		for ( const uniform of uniforms ) {
-
-			if ( /^(modelViewMatrix|projectionMatrix)$/.test( uniform.name ) )
-				continue;
-
-			let snippet = null;
-
-			if ( uniform.type === 'texture' ) {
-
-				snippet = `sampler2D ${uniform.name}; `;
-
-			} else if ( uniform.type === 'cubeTexture' ) {
-
-				snippet = `samplerCube ${uniform.name}; `;
-
-			} else {
-
-				const vectorType = this.getVectorType( uniform.type );
-
-				snippet = `${vectorType} ${uniform.name}; `;
-
-			}
-
-			const precision = uniform.node.precision;
-
-			if ( precision !== null ) {
-
-				snippet = 'uniform ' + precisionLib[ precision ] + ' ' + snippet;
-
-			} else {
-
-				snippet = 'uniform ' + snippet;
-
-			}
-
-			output += snippet;
-
-		}
-
-		return output;
-
-	}
-
-	getAttributes( shaderStage ) {
-
-		let snippet = '';
-
-		if ( shaderStage === 'vertex' ) {
-
-			const attributes = this.attributes;
-
-			for ( const attribute of attributes ) {
-
-				// ignore common attributes to prevent redefinitions
-				if ( /^(position|normal|uv[1-3]?)$/.test( attribute.name ) )
-					continue;
-
-				snippet += `attribute ${attribute.type} ${attribute.name}; `;
-
-			}
-
-		}
-
-		return snippet;
-
-	}
-
-	getVaryings( shaderStage ) {
-
-		let snippet = '';
-
-		const varyings = this.varyings;
-
-		if ( shaderStage === 'vertex' ) {
-
-			for ( const varying of varyings ) {
-
-				snippet += `${varying.needsInterpolation ? 'varying' : '/*varying*/'} ${varying.type} ${varying.name}; `;
-
-			}
-
-		} else if ( shaderStage === 'fragment' ) {
-
-			for ( const varying of varyings ) {
-
-				if ( varying.needsInterpolation ) {
-
-					snippet += `varying ${varying.type} ${varying.name}; `;
-
-				}
-
-			}
-
-		}
-
-		return snippet;
-
-	}
-
-	addCode( shaderStage, source, code, scope = this ) {
-
-		const shaderProperty = getShaderStageProperty( shaderStage );
-
-		let snippet = scope[ shaderProperty ];
-
-		const index = snippet.indexOf( source );
-
-		if ( index !== - 1 ) {
-
-			const start = snippet.substring( 0, index + source.length );
-			const end = snippet.substring( index + source.length );
-
-			snippet = `${start}\n${code}\n${end}`;
-
-		}
-
-		scope[ shaderProperty ] = snippet;
-
-	}
-
-	replaceCode( shaderStage, source, target, scope = this ) {
-
-		const shaderProperty = getShaderStageProperty( shaderStage );
-
-		scope[ shaderProperty ] = scope[ shaderProperty ].replaceAll( source, target );
-
-	}
-
-	getVertexIndex() {
-
-		return 'gl_VertexID';
-
-	}
-
-	getFrontFacing() {
-
-		return 'gl_FrontFacing';
-
-	}
-
-	getFragCoord() {
-
-		return 'gl_FragCoord';
-
-	}
-
-	isFlipY() {
-
-		return true;
-
-	}
-
-	buildCode() {
-
-		const shaderData = {};
-
-		for ( const shaderStage of defaultShaderStages ) {
-
-			const uniforms = this.getUniforms( shaderStage );
-			const attributes = this.getAttributes( shaderStage );
-			const varyings = this.getVaryings( shaderStage );
-			const vars = this.getVars( shaderStage );
-			const codes = this.getCodes( shaderStage );
-
-			shaderData[ shaderStage ] = `${this.getSignature()}
-// <node_builder>
-
-// uniforms
-${uniforms}
-
-// attributes
-${attributes}
-
-// varyings
-${varyings}
-
-// vars
-${vars}
-
-// codes
-${codes}
-
-// </node_builder>
-
-${this.shader[ getShaderStageProperty( shaderStage ) ]}
-`;
-
-		}
-
-		this.vertexShader = shaderData.vertex;
-		this.fragmentShader = shaderData.fragment;
-
-	}
-
-	build() {
-
-		super.build( false );
-
-		this._addSnippets();
-		this._addUniforms();
-
-		this._updateUniforms();
-
-		this.shader.vertexShader = this.vertexShader;
-		this.shader.fragmentShader = this.fragmentShader;
-
-		return this;
-
-	}
-
-	_parseInclude( shaderStage, ...includes ) {
-
-		for ( const name of includes ) {
-
-			const includeSnippet = getIncludeSnippet( name );
-			const code = ShaderChunk[ name ];
-
-			const shaderProperty = getShaderStageProperty( shaderStage );
-
-			this.shader[ shaderProperty ] = this.shader[ shaderProperty ].replaceAll( includeSnippet, code );
-
-		}
-
-	}
-
-	_sortSlotsToFlow() {
-
-		for ( const shaderStage of defaultShaderStages ) {
-
-			const sourceCode = this.shader[ getShaderStageProperty( shaderStage ) ];
-
-			const slots = this.slots[ shaderStage ].sort( ( slotA, slotB ) => {
-
-				return sourceCode.indexOf( slotA.source ) > sourceCode.indexOf( slotB.source ) ? 1 : - 1;
-
-			} );
-
-			for ( const slotNode of slots ) {
-
-				this.addFlow( shaderStage, slotNode );
-
-			}
-
-		}
-
-	}
-
-	_addSnippets() {
-
-		for ( const shaderStage of defaultShaderStages ) {
-
-			for ( const slotNode of this.slots[ shaderStage ] ) {
-
-				const flowData = this.getFlowData( slotNode/*, shaderStage*/ );
-
-				const inclusionType = slotNode.inclusionType;
-				const source = slotNode.source;
-				const target = flowData.code + '\n\t' + slotNode.target.replace( '%RESULT%', flowData.result );
-
-				if ( inclusionType === 'append' ) {
-
-					this.addCode( shaderStage, source, target );
-
-				} else if ( inclusionType === 'replace' ) {
-
-					this.replaceCode( shaderStage, source, target );
-
-				} else {
-
-					console.warn( `Inclusion type "${ inclusionType }" not compatible.` );
-
-				}
-
-			}
-
-			this.addCode(
-				shaderStage,
-				'main() {',
-				'\n\t' + this.flowCode[ shaderStage ]
-			);
-
-		}
-
-	}
-
-	_addUniforms() {
-
-		for ( const shaderStage of defaultShaderStages ) {
-
-			// uniforms
-
-			for ( const uniform of this.uniforms[ shaderStage ] ) {
-
-				this.shader.uniforms[ uniform.name ] = uniform;
-
-			}
-
-		}
-
-	}
-
-	_updateUniforms() {
-
-		nodeFrame.object = this.object;
-		nodeFrame.renderer = this.renderer;
-
-		for ( const node of this.updateNodes ) {
-
-			nodeFrame.updateNode( node );
-
-		}
-
-	}
-
-}
-
-export { WebGLNodeBuilder };

examples/jsm/renderers/webgl-legacy/nodes/WebGLNodes.js

@@ -1,51 +0,0 @@
-import { WebGLNodeBuilder } from './WebGLNodeBuilder.js';
-import { NodeFrame } from '../../../nodes/Nodes.js';
-
-import { Material } from 'three';
-
-const builders = new WeakMap();
-export const nodeFrame = new NodeFrame();
-
-Material.prototype.onBuild = function ( object, parameters, renderer ) {
-
-	const material = this;
-
-	if ( material.isNodeMaterial === true ) {
-
-		builders.set( material, new WebGLNodeBuilder( object, renderer, parameters, material ).build() );
-
-	}
-
-};
-
-Material.prototype.onBeforeRender = function ( renderer, scene, camera, geometry, object ) {
-
-	const nodeBuilder = builders.get( this );
-
-	if ( nodeBuilder !== undefined ) {
-
-		nodeFrame.material = this;
-		nodeFrame.camera = camera;
-		nodeFrame.object = object;
-		nodeFrame.renderer = renderer;
-
-		const updateNodes = nodeBuilder.updateNodes;
-
-		if ( updateNodes.length > 0 ) {
-
-			// force refresh material uniforms
-			renderer.state.useProgram( null );
-
-			//this.uniformsNeedUpdate = true;
-
-			for ( const node of updateNodes ) {
-
-				nodeFrame.updateNode( node );
-
-			}
-
-		}
-
-	}
-
-};

examples/tags.json

@@ -52,7 +52,6 @@
 	"webgl_materials_cubemap_mipmaps": [ "envmap" ],
 	"webgl_materials_cubemap_render_to_mipmaps": [ "envmap", "renderTarget", "mipmap" ],
 	"webgl_materials_envmaps_hdr": [ "rgbm" ],
-	"webgl_materials_lightmap": [ "shadow" ],
 	"webgl_materials_physical_clearcoat": [ "anisotropy" ],
 	"webgl_materials_physical_transmission": [ "alpha" ],
 	"webgl_materials_texture_canvas": [ "paint" ],
@@ -109,5 +108,6 @@
 	"webgl_simple_gi": [ "global illumination" ],
 	"webgl2_multiple_rendertargets": [ "mrt" ],
 	"webgl2_multisampled_renderbuffers": [ "msaa" ],
-	"webxr_xr_ballshooter": [ "physics" ]
+	"webxr_xr_ballshooter": [ "physics" ],
+	"webgpu_materials_lightmap": [ "shadow" ]
 }

examples/webgl_nodes_loader_gltf_iridescence.html

@@ -1,131 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - GLTFloader + Iridescence + Nodes</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-	</head>
-
-	<body>
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_iridescence" target="_blank" rel="noopener">KHR_materials_iridescence</a> + Nodes<br />
-			Iridescence Lamp from <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/IridescenceLamp" target="_blank" rel="noopener">glTF-Sample-Models</a><br />
-			<a href="https://hdrihaven.com/hdri/?h=venice_sunset" target="_blank" rel="noopener">Venice Sunset</a> from <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
-		</div>
-
-		<script type="importmap">
-			{
-				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
-				}
-			}
-		</script>
-
-		<script type="module">
-
-			import * as THREE from 'three';
-			import { NodeMaterial, uv, vec2, checker, float, timerLocal } from 'three/nodes';
-
-			import { nodeFrame } from 'three/addons/renderers/webgl-legacy/nodes/WebGLNodes.js';
-
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
-
-			let renderer, scene, camera, controls;
-
-			init().catch( function ( err ) {
-
-				console.error( err );
-
-			} );
-
-			async function init() {
-
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.setAnimationLoop( render );
-				document.body.appendChild( renderer.domElement );
-
-				scene = new THREE.Scene();
-
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 20 );
-				camera.position.set( 0.35, 0.05, 0.35 );
-
-				controls = new OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 0.2, 0 );
-				controls.update();
-
-				const rgbeLoader = new RGBELoader()
-					.setPath( 'textures/equirectangular/' );
-
-				const gltfLoader = new GLTFLoader().setPath( 'models/gltf/' );
-
-				const [ texture, gltf ] = await Promise.all( [
-					rgbeLoader.loadAsync( 'venice_sunset_1k.hdr' ),
-					gltfLoader.loadAsync( 'IridescenceLamp.glb' ),
-				] );
-
-				// nodes
-
-				gltf.scene.traverse( mesh => {
-
-					const material = mesh.material;
-
-					if ( material && material.iridescence > 0 ) {
-
-						const iridescenceFactorNode = checker( uv().add( vec2( timerLocal( - .05 ), 0 ) ).mul( 20 ) );
-
-						const nodeMaterial = NodeMaterial.fromMaterial( material ); // @TODO: NodeMaterial.fromMaterial can be removed if WebGLNodes will apply it by default (as in WebGPURenderer)
-						nodeMaterial.iridescenceNode = iridescenceFactorNode;
-						nodeMaterial.iridescenceIORNode = float( 1.3 );
-						nodeMaterial.iridescenceThicknessNode = float( 400 );
-
-						mesh.material = nodeMaterial;
-
-					}
-
-				} );
-
-				// environment
-
-				texture.mapping = THREE.EquirectangularReflectionMapping;
-
-				scene.background = texture;
-				scene.environment = texture;
-
-				// model
-
-				scene.add( gltf.scene );
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			function onWindowResize() {
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			function render() {
-
-				nodeFrame.update();
-
-				renderer.render( scene, camera );
-
-			}
-
-		</script>
-
-	</body>
-</html>

examples/webgl_nodes_loader_gltf_sheen.html

@@ -1,135 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - GLTFloader + Sheen + Nodes</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-		<style>
-			body {
-				background: #bbbbbb;
-			}
-		</style>
-	</head>
-
-	<body>
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_sheen" target="_blank" rel="noopener">KHR_materials_sheen</a> + Nodes<br />
-			Sheen Chair from <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/SheenChair" target="_blank" rel="noopener">glTF-Sample-Models</a>
-		</div>
-
-		<script type="importmap">
-			{
-				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
-				}
-			}
-		</script>
-
-		<script type="module">
-
-			import * as THREE from 'three';
-			import { NodeMaterial, uv, mix, color, checker } from 'three/nodes';
-
-			import { nodeFrame } from 'three/addons/renderers/webgl-legacy/nodes/WebGLNodes.js';
-
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
-
-			let camera, scene, renderer, controls;
-
-			init();
-			animate();
-
-			function init() {
-
-				const container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20 );
-				camera.position.set( - 0.75, 0.7, 1.25 );
-
-				scene = new THREE.Scene();
-
-				// model
-
-				new GLTFLoader()
-					.setPath( 'models/gltf/' )
-					.load( 'SheenChair.glb', function ( gltf ) {
-
-						scene.add( gltf.scene );
-
-						const object = gltf.scene.getObjectByName( 'SheenChair_fabric' );
-
-						// Convert to NodeMaterial
-						const material = NodeMaterial.fromMaterial( object.material ); // @TODO: NodeMaterial.fromMaterial can be removed if WebGLNodes will apply it by default (as in WebGPURenderer)
-
-						const checkerNode = checker( uv().mul( 5 ) );
-
-						material.sheenNode = mix( color( 0x00ffff ), color( 0xffff00 ), checkerNode );
-						material.sheenRoughnessNode = checkerNode;
-
-						object.material = material;
-
-					} );
-
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 1;
-				container.appendChild( renderer.domElement );
-
-				const environment = new RoomEnvironment( renderer );
-				const pmremGenerator = new THREE.PMREMGenerator( renderer );
-
-				scene.background = new THREE.Color( 0xbbbbbb );
-				scene.environment = pmremGenerator.fromScene( environment ).texture;
-
-				controls = new OrbitControls( camera, renderer.domElement );
-				controls.enableDamping = true;
-				controls.minDistance = 1;
-				controls.maxDistance = 10;
-				controls.target.set( 0, 0.35, 0 );
-				controls.update();
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			function onWindowResize() {
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				nodeFrame.update();
-
-				controls.update(); // required if damping enabled
-
-				render();
-
-			}
-
-			function render() {
-
-				renderer.render( scene, camera );
-
-			}
-
-		</script>
-
-	</body>
-</html>

examples/webgl_nodes_loader_gltf_transmission.html

@@ -1,156 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - GLTFloader + transmission + nodes</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-	</head>
-
-	<body>
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_transmission" target="_blank" rel="noopener">KHR_materials_transmission</a> + Nodes<br />
-			Iridescent Dish With Olives by <a href="https://github.com/echadwick-wayfair" target="_blank" rel="noopener">Eric Chadwick</a><br />
-			<a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> from <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
-		</div>
-
-		<script type="importmap">
-			{
-				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
-				}
-			}
-		</script>
-
-		<script type="module">
-
-			import * as THREE from 'three';
-			import { NodeMaterial, float, texture } from 'three/nodes';
-
-			import { nodeFrame } from 'three/addons/renderers/webgl-legacy/nodes/WebGLNodes.js';
-
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
-
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
-
-			let camera, scene, renderer, controls, clock, mixer;
-
-			init();
-			animate();
-
-			function init() {
-
-				clock = new THREE.Clock();
-
-				const container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
-				camera.position.set( 0, 0.4, 0.7 );
-
-				scene = new THREE.Scene();
-
-				new RGBELoader()
-					.setPath( 'textures/equirectangular/' )
-					.load( 'royal_esplanade_1k.hdr', function ( envMap ) {
-
-						envMap.mapping = THREE.EquirectangularReflectionMapping;
-
-						scene.background = envMap;
-						scene.environment = envMap;
-
-						// model
-
-						new GLTFLoader()
-							.setPath( 'models/gltf/' )
-							.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) )
-							.load( 'IridescentDishWithOlives.glb', function ( gltf ) {
-
-								// nodes
-
-								const glassMesh = gltf.scene.getObjectByName( 'glassCover' );
-
-								const material = glassMesh.material;
-
-								if ( material && material.transmission > 0 ) {
-
-									const nodeMaterial = NodeMaterial.fromMaterial( material ); // @TODO: NodeMaterial.fromMaterial can be removed if WebGLNodes will apply it by default (as in WebGPURenderer)
-									nodeMaterial.transmissionNode = float( 1 );
-									nodeMaterial.iorNode = float( 1.5 );
-									nodeMaterial.thicknessNode = texture( material.thicknessMap ).g.mul( 0.1 );
-									//nodeMaterial.attenuationDistanceNode;
-									//nodeMaterial.attenuationColorNode;
-
-									// ignore traditional maps
-									nodeMaterial.transmissionMap = null;
-									nodeMaterial.thicknessMap = null;
-
-									glassMesh.material = nodeMaterial;
-
-								}
-
-								mixer = new THREE.AnimationMixer( gltf.scene );
-								mixer.clipAction( gltf.animations[ 0 ] ).play();
-								scene.add( gltf.scene );
-
-							} );
-
-					} );
-
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 1;
-				container.appendChild( renderer.domElement );
-
-				controls = new OrbitControls( camera, renderer.domElement );
-				controls.enableDamping = true;
-				controls.minDistance = 0.5;
-				controls.maxDistance = 1;
-				controls.target.set( 0, 0.1, 0 );
-				controls.update();
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			function onWindowResize() {
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				if ( mixer ) mixer.update( clock.getDelta() );
-
-				controls.update(); // required if damping enabled
-
-				render();
-
-			}
-
-			function render() {
-
-				nodeFrame.update();
-
-				renderer.render( scene, camera );
-
-			}
-
-		</script>
-
-	</body>
-</html>

examples/webgl_nodes_loader_materialx.html

@@ -1,190 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - MaterialX loader</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-		<style>
-			.dg .property-name {
-				width: 20% !important;
-			}
-		</style>
-	</head>
-	<body>
-
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - MaterialXLoader<br />
-		</div>
-
-		<script type="importmap">
-			{
-				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
-				}
-			}
-		</script>
-
-		<script type="module">
-
-			import * as THREE from 'three';
-
-			import { MaterialXLoader } from './jsm/loaders/MaterialXLoader.js';
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
-			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
-
-			import { nodeFrame } from './jsm/renderers/webgl-legacy/nodes/WebGLNodes.js';
-
-			const SAMPLE_PATH = 'https://raw.githubusercontent.com/materialx/MaterialX/main/resources/Materials/Examples/StandardSurface/';
-
-			const samples = [
-				'standard_surface_brass_tiled.mtlx',
-				//'standard_surface_brick_procedural.mtlx',
-				'standard_surface_carpaint.mtlx',
-				//'standard_surface_chess_set.mtlx',
-				'standard_surface_chrome.mtlx',
-				'standard_surface_copper.mtlx',
-				//'standard_surface_default.mtlx',
-				//'standard_surface_glass.mtlx',
-				//'standard_surface_glass_tinted.mtlx',
-				'standard_surface_gold.mtlx',
-				'standard_surface_greysphere.mtlx',
-				//'standard_surface_greysphere_calibration.mtlx',
-				'standard_surface_jade.mtlx',
-				//'standard_surface_look_brass_tiled.mtlx',
-				//'standard_surface_look_wood_tiled.mtlx',
-				'standard_surface_marble_solid.mtlx',
-				'standard_surface_metal_brushed.mtlx',
-				'standard_surface_plastic.mtlx',
-				//'standard_surface_thin_film.mtlx',
-				'standard_surface_velvet.mtlx',
-				'standard_surface_wood_tiled.mtlx'
-			];
-
-			let camera, scene, renderer, prefab;
-			const models = [];
-
-			init();
-
-			function init() {
-
-				const container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 50 );
-				camera.position.set( 0, 3, 20 );
-
-				scene = new THREE.Scene();
-
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.toneMapping = THREE.LinearToneMapping;
-				renderer.toneMappingExposure = .5;
-				renderer.setAnimationLoop( render );
-				container.appendChild( renderer.domElement );
-
-				//
-
-				const controls = new OrbitControls( camera, renderer.domElement );
-				controls.minDistance = 2;
-				controls.maxDistance = 40;
-
-				//
-
-				new RGBELoader()
-					.setPath( 'textures/equirectangular/' )
-					.load( 'san_giuseppe_bridge_2k.hdr', async ( texture ) => {
-
-						texture.mapping = THREE.EquirectangularReflectionMapping;
-
-						scene.background = texture;
-						scene.environment = texture;
-
-						prefab = ( await new GLTFLoader().loadAsync( './models/gltf/ShaderBall.glb' ) ).scene;
-
-						for ( const sample of samples ) {
-
-							addSample( sample );
-
-						}
-
-					} );
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			function updateModelsAlign() {
-
-				const COLUMN_COUNT = 6;
-				const DIST_X = 3;
-				const DIST_Y = 4;
-
-				const lineCount = Math.floor( models.length / COLUMN_COUNT ) - 1.5;
-
-				const offsetX = ( DIST_X * ( COLUMN_COUNT - 1 ) ) * - .5;
-				const offsetY = ( DIST_Y * lineCount ) * .5;
-
-				for ( let i = 0; i < models.length; i ++ ) {
-
-					const model = models[ i ];
-
-					model.position.x = ( ( i % COLUMN_COUNT ) * DIST_X ) + offsetX;
-					model.position.y = ( Math.floor( i / COLUMN_COUNT ) * - DIST_Y ) + offsetY;
-
-				}
-
-			}
-
-			async function addSample( sample ) {
-
-				const model = prefab.clone();
-
-				models.push( model );
-
-				scene.add( model );
-
-				updateModelsAlign();
-
-				//
-
-				const material = await new MaterialXLoader()
-					.setPath( SAMPLE_PATH )
-					.loadAsync( sample )
-					.then( ( { materials } ) => Object.values( materials ).pop() );
-
-				const calibrationMesh = model.getObjectByName( 'Calibration_Mesh' );
-				calibrationMesh.material = material;
-
-				const Preview_Mesh = model.getObjectByName( 'Preview_Mesh' );
-				Preview_Mesh.material = material;
-
-			}
-
-			//
-
-			function onWindowResize() {
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			function render() {
-
-				nodeFrame.update();
-
-				renderer.render( scene, camera );
-
-			}
-
-		</script>
-
-	</body>
-</html>

examples/webgl_nodes_materials_instance_uniform.html

@@ -1,226 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - material instance uniform</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-	</head>
-	<body>
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl material instance uniform
-		</div>
-
-		<script type="importmap">
-			{
-				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
-				}
-			}
-		</script>
-
-		<script type="module">
-
-			import * as THREE from 'three';
-			import { MeshStandardNodeMaterial, Node, NodeUpdateType, nodeObject, uniform, cubeTexture } from 'three/nodes';
-
-			import Stats from 'three/addons/libs/stats.module.js';
-
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-			import { nodeFrame } from 'three/addons/renderers/webgl-legacy/nodes/WebGLNodes.js';
-
-			class InstanceUniformNode extends Node {
-
-				constructor() {
-
-					super( 'vec3' );
-
-					this.updateType = NodeUpdateType.OBJECT;
-
-					this.uniformNode = uniform( new THREE.Color() );
-
-				}
-
-				update( frame ) {
-
-					this.uniformNode.value.copy( frame.object.color );
-
-				}
-
-				generate( builder, output ) {
-
-					return this.uniformNode.build( builder, output );
-
-				}
-
-			}
-
-			let stats;
-
-			let camera, scene, renderer;
-			let controls;
-			let pointLight;
-
-			const objects = [];
-
-			init();
-			animate();
-
-			function init() {
-
-				const container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 400 );
-				camera.position.set( 0, 20, 120 );
-
-				scene = new THREE.Scene();
-
-				// Grid
-
-				const helper = new THREE.GridHelper( 100, 40, 0x303030, 0x303030 );
-				helper.position.y = - 7.5;
-				scene.add( helper );
-
-				// CubeMap
-
-				const path = 'textures/cube/SwedishRoyalCastle/';
-				const format = '.jpg';
-				const urls = [
-					path + 'px' + format, path + 'nx' + format,
-					path + 'py' + format, path + 'ny' + format,
-					path + 'pz' + format, path + 'nz' + format
-				];
-
-				const cubeMap = new THREE.CubeTextureLoader().load( urls );
-
-				// Material
-
-				const instanceUniform = nodeObject( new InstanceUniformNode() );
-				const cubeTextureNode = cubeTexture( cubeMap );
-
-				const material = new MeshStandardNodeMaterial();
-				material.colorNode = instanceUniform.add( cubeTextureNode );
-				material.emissiveNode = instanceUniform.mul( cubeTextureNode );
-
-				// Spheres geometry
-
-				const geometry = new THREE.SphereGeometry( 7, 32, 16 );
-
-				for ( let i = 0, l = 12; i < l; i ++ ) {
-
-					addMesh( geometry, material );
-
-				}
-
-				// Lights
-
-				scene.add( new THREE.AmbientLight( 0x444444 ) );
-
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.4 );
-
-				directionalLight.position.x = Math.random() - 0.5;
-				directionalLight.position.y = Math.random() - 0.5;
-				directionalLight.position.z = Math.random() - 0.5;
-				directionalLight.position.normalize();
-
-				scene.add( directionalLight );
-
-				pointLight = new THREE.PointLight( 0xffffff, 1000 );
-				scene.add( pointLight );
-
-				pointLight.add( new THREE.Mesh( new THREE.SphereGeometry( 0.4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) ) );
-
-				//
-
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
-				//
-
-				controls = new OrbitControls( camera, renderer.domElement );
-				controls.minDistance = 40;
-				controls.maxDistance = 200;
-
-				//
-
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
-				//
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			function addMesh( geometry, material ) {
-
-				const mesh = new THREE.Mesh( geometry, material );
-
-				mesh.color = new THREE.Color( Math.random() * 0xffffff );
-
-				mesh.position.x = ( objects.length % 4 ) * 20 - 30;
-				mesh.position.z = Math.floor( objects.length / 4 ) * 20 - 20;
-
-				mesh.rotation.x = Math.random() * 200 - 100;
-				mesh.rotation.y = Math.random() * 200 - 100;
-				mesh.rotation.z = Math.random() * 200 - 100;
-
-				objects.push( mesh );
-
-				scene.add( mesh );
-
-			}
-
-			function onWindowResize() {
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				nodeFrame.update();
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
-				const timer = 0.0001 * Date.now();
-
-				for ( let i = 0, l = objects.length; i < l; i ++ ) {
-
-					const object = objects[ i ];
-
-					object.rotation.x += 0.01;
-					object.rotation.y += 0.005;
-
-				}
-
-				pointLight.position.x = Math.sin( timer * 7 ) * 30;
-				pointLight.position.y = Math.cos( timer * 5 ) * 40;
-				pointLight.position.z = Math.cos( timer * 3 ) * 30;
-
-				renderer.render( scene, camera );
-
-			}
-
-		</script>
-
-	</body>
-</html>

examples/webgl_nodes_materials_physical_clearcoat.html

@@ -1,250 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - materials - clearcoat nodes</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-	</head>
-	<body>
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - materials - clearcoat nodes
-		</div>
-
-		<script type="importmap">
-			{
-				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
-				}
-			}
-		</script>
-
-		<script type="module">
-
-			import * as THREE from 'three';
-			import { color, float, vec2, texture, normalMap, uv, MeshPhysicalNodeMaterial } from 'three/nodes';
-
-			import { nodeFrame } from 'three/addons/renderers/webgl-legacy/nodes/WebGLNodes.js';
-
-			import Stats from 'three/addons/libs/stats.module.js';
-
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { HDRCubeTextureLoader } from 'three/addons/loaders/HDRCubeTextureLoader.js';
-
-			import { FlakesTexture } from 'three/addons/textures/FlakesTexture.js';
-
-			let container, stats;
-
-			let camera, scene, renderer;
-
-			let particleLight;
-			let group;
-
-			init();
-			animate();
-
-			function init() {
-
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 0.25, 50 );
-				camera.position.z = 10;
-
-				scene = new THREE.Scene();
-
-				group = new THREE.Group();
-				scene.add( group );
-
-				new HDRCubeTextureLoader()
-					.setPath( 'textures/cube/pisaHDR/' )
-					.load( [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ],
-						  function ( hdrTexture ) {
-
-							const geometry = new THREE.SphereGeometry( .8, 64, 32 );
-
-							const textureLoader = new THREE.TextureLoader();
-
-							const diffuse = textureLoader.load( 'textures/carbon/Carbon.png' );
-							diffuse.colorSpace = THREE.SRGBColorSpace;
-							diffuse.wrapS = THREE.RepeatWrapping;
-							diffuse.wrapT = THREE.RepeatWrapping;
-
-							const normalMap1 = textureLoader.load( 'textures/carbon/Carbon_Normal.png' );
-							normalMap1.wrapS = THREE.RepeatWrapping;
-							normalMap1.wrapT = THREE.RepeatWrapping;
-
-							const normalMap2 = textureLoader.load( 'textures/water/Water_1_M_Normal.jpg' );
-
-							const normalMap3 = new THREE.CanvasTexture( new FlakesTexture() );
-							normalMap3.wrapS = THREE.RepeatWrapping;
-							normalMap3.wrapT = THREE.RepeatWrapping;
-							normalMap3.anisotropy = 16;
-
-							const normalMap4 = textureLoader.load( 'textures/golfball.jpg' );
-
-							const clearcoatNormalMap = textureLoader.load( 'textures/pbr/Scratched_gold/Scratched_gold_01_1K_Normal.png' );
-
-							// car paint
-
-							const carPaintUV = uv().mul( vec2( 10, 6 ) );
-							const carPaintNormalScale = vec2( 0.15 );
-
-							let material = new MeshPhysicalNodeMaterial();
-							material.clearcoatNode = float( 1 );
-							material.clearcoatRoughnessNode = float( 0.1 );
-							material.metalnessNode = float( 0.9 );
-							material.roughnessNode = float( 0.5 );
-							material.colorNode = color( 0x0000ff );
-							material.normalNode = normalMap( texture( normalMap3, carPaintUV ), carPaintNormalScale );
-
-							let mesh = new THREE.Mesh( geometry, material );
-							mesh.position.x = - 1;
-							mesh.position.y = 1;
-							group.add( mesh );
-
-							// fibers
-
-							const fibersUV = uv().mul( 10 );
-
-							material = new MeshPhysicalNodeMaterial();
-							material.roughnessNode = float( 0.5 );
-							material.clearcoatNode = float( 1 );
-							material.clearcoatRoughnessNode = float( 0.1 );
-							material.colorNode = texture( diffuse, fibersUV );
-							material.normalNode = normalMap( texture( normalMap1, fibersUV ) );
-
-							mesh = new THREE.Mesh( geometry, material );
-							mesh.position.x = 1;
-							mesh.position.y = 1;
-							group.add( mesh );
-
-							// golf
-
-							material = new MeshPhysicalNodeMaterial();
-							material.clearcoatNode = float( 1 );
-							material.roughnessNode = float( 0.1 );
-							material.metalnessNode = float( 0 );
-							material.colorNode = color( 0xffffff );
-							material.normalNode = normalMap( texture( normalMap4 ) );
-							// y scale is negated to compensate for normal map handedness.
-							material.clearcoatNormalNode = normalMap( texture( clearcoatNormalMap ), vec2( 2.0, - 2.0 ) );
-
-							mesh = new THREE.Mesh( geometry, material );
-							mesh.position.x = - 1;
-							mesh.position.y = - 1;
-							group.add( mesh );
-
-							// clearcoat + normalmap
-
-							material = new MeshPhysicalNodeMaterial();
-							material.clearcoatNode = float( 1 );
-							material.roughnessNode = float( 1 );
-							material.metalnessNode = float( 1 );
-							material.colorNode = color( 0xff0000 );
-							material.normalNode = normalMap( texture( normalMap2 ), vec2( 0.15, 0.15 ) );
-							// y scale is negated to compensate for normal map handedness.
-							material.clearcoatNormalNode = normalMap( texture( clearcoatNormalMap ), vec2( 2.0, - 2.0 ) );
-
-							mesh = new THREE.Mesh( geometry, material );
-							mesh.position.x = 1;
-							mesh.position.y = - 1;
-							group.add( mesh );
-
-							//
-
-							scene.background = hdrTexture;
-							scene.environment = hdrTexture;
-
-						}
-
-						 );
-
-				// LIGHTS
-
-				particleLight = new THREE.Mesh(
-					new THREE.SphereGeometry( .05, 8, 8 ),
-					new THREE.MeshBasicMaterial( { color: 0xffffff } )
-				);
-				scene.add( particleLight );
-
-				particleLight.add( new THREE.PointLight( 0xffffff, 30 ) );
-
-				renderer = new THREE.WebGLRenderer();
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
-				//
-
-				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 1.25;
-
-				//
-
-
-				//
-
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
-				// EVENTS
-
-				new OrbitControls( camera, renderer.domElement );
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			//
-
-			function onWindowResize() {
-
-				const width = window.innerWidth;
-				const height = window.innerHeight;
-
-				camera.aspect = width / height;
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( width, height );
-
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				nodeFrame.update();
-
-				render();
-
-				stats.update();
-
-			}
-
-			function render() {
-
-				const timer = Date.now() * 0.00025;
-
-				particleLight.position.x = Math.sin( timer * 7 ) * 3;
-				particleLight.position.y = Math.cos( timer * 5 ) * 4;
-				particleLight.position.z = Math.cos( timer * 3 ) * 3;
-
-				for ( let i = 0; i < group.children.length; i ++ ) {
-
-					const child = group.children[ i ];
-					child.rotation.y += 0.005;
-
-				}
-
-				renderer.render( scene, camera );
-
-			}
-
-		</script>
-	</body>
-</html>

examples/webgl_nodes_materials_standard.html

@@ -1,261 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - materials - standard (nodes)</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-	</head>
-
-	<body>
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl physically based material<br/>
-			<a href="http://www.polycount.com/forum/showthread.php?t=130641" target="_blank" rel="noopener">Cerberus(FFVII Gun) model</a> by Andrew Maximov.
-		</div>
-
-		<script type="importmap">
-			{
-				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
-				}
-			}
-		</script>
-
-		<script type="module">
-
-			import * as THREE from 'three';
-			import { texture, uniform, normalMap, MeshStandardNodeMaterial, NodeObjectLoader } from 'three/nodes';
-
-			import Stats from 'three/addons/libs/stats.module.js';
-
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-			import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
-			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
-			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
-
-			import { nodeFrame } from 'three/addons/renderers/webgl-legacy/nodes/WebGLNodes.js';
-
-			let container, stats;
-
-			let camera, scene, renderer, controls;
-
-			init();
-			animate();
-
-			function init() {
-
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
-				renderer.toneMapping = THREE.ReinhardToneMapping;
-				renderer.toneMappingExposure = 3;
-
-				//
-
-				scene = new THREE.Scene();
-
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 1000 );
-				camera.position.z = 2;
-
-				controls = new TrackballControls( camera, renderer.domElement );
-
-				// Test Extended Material
-
-				class MeshCustomNodeMaterial extends MeshStandardNodeMaterial {
-
-					constructor() {
-
-						super();
-
-					}
-
-				}
-
-				// Extends Serialization Material
-
-				const superCreateMaterialFromType = THREE.MaterialLoader.createMaterialFromType;
-
-				THREE.MaterialLoader.createMaterialFromType = function ( type ) {
-
-					const materialLib = {
-						MeshCustomNodeMaterial
-					};
-
-					if ( materialLib[ type ] !== undefined ) {
-
-						return new materialLib[ type ]();
-
-					}
-
-					return superCreateMaterialFromType.call( this, type );
-
-				};
-
-				//
-
-				const material = new MeshCustomNodeMaterial();
-
-				new OBJLoader()
-					.setPath( 'models/obj/cerberus/' )
-					.load( 'Cerberus.obj', function ( group ) {
-
-						const loaderManager = new THREE.LoadingManager();
-
-						const loader = new THREE.TextureLoader( loaderManager )
-							.setPath( 'models/obj/cerberus/' );
-
-						const diffuseMap = loader.load( 'Cerberus_A.jpg' );
-						diffuseMap.wrapS = THREE.RepeatWrapping;
-						diffuseMap.colorSpace = THREE.SRGBColorSpace;
-
-						const rmMap = loader.load( 'Cerberus_RM.jpg' );
-						rmMap.wrapS = THREE.RepeatWrapping;
-
-						const normalMapTexture = loader.load( 'Cerberus_N.jpg' );
-						normalMapTexture.wrapS = THREE.RepeatWrapping;
-
-						const mgMapNode = texture( rmMap );
-
-						material.colorNode = texture( diffuseMap ).mul( uniform( material.color ) );
-
-						// roughness is in G channel, metalness is in B channel
-						material.roughnessNode = mgMapNode.g;
-						material.metalnessNode = mgMapNode.b;
-
-						material.normalNode = normalMap( texture( normalMapTexture ) );
-
-						group.traverse( function ( child ) {
-
-							if ( child.isMesh ) {
-
-								child.material = material;
-
-							}
-
-						} );
-
-						group.position.x = - 0.45;
-						group.rotation.y = - Math.PI / 2;
-						//scene.add( group );
-
-						// TODO: Serialization test
-
-						loaderManager.onLoad = () => {
-
-							const groupJSON = JSON.stringify( group.toJSON() );
-
-							const objectLoader = new NodeObjectLoader();
-							objectLoader.parse( JSON.parse( groupJSON ), ( newGroup ) => {
-
-								//scene.remove( group );
-
-								newGroup.position.copy( group.position );
-								newGroup.rotation.copy( group.rotation );
-
-								scene.add( newGroup );
-
-								console.log( 'Serialized!' );
-
-							} );
-
-						};
-
-					} );
-
-				const environments = {
-
-					'Venice Sunset': { filename: 'venice_sunset_1k.hdr' },
-					'Overpass': { filename: 'pedestrian_overpass_1k.hdr' }
-
-				};
-
-				function loadEnvironment( name ) {
-
-					if ( environments[ name ].texture !== undefined ) {
-
-						scene.background = environments[ name ].texture;
-						scene.environment = environments[ name ].texture;
-						return;
-
-					}
-
-					const filename = environments[ name ].filename;
-					new RGBELoader()
-						.setPath( 'textures/equirectangular/' )
-						.load( filename, function ( hdrEquirect ) {
-
-							const hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect );
-							hdrEquirect.dispose();
-
-							scene.background = hdrCubeRenderTarget.texture;
-							scene.environment = hdrCubeRenderTarget.texture;
-							environments[ name ].texture = hdrCubeRenderTarget.texture;
-
-						} );
-
-				}
-
-				const params = {
-
-					environment: Object.keys( environments )[ 0 ]
-
-				};
-				loadEnvironment( params.environment );
-
-				const gui = new GUI();
-				gui.add( params, 'environment', Object.keys( environments ) ).onChange( function ( value ) {
-
-					loadEnvironment( value );
-
-				} );
-				gui.open();
-
-				const pmremGenerator = new THREE.PMREMGenerator( renderer );
-				pmremGenerator.compileEquirectangularShader();
-
-				//
-
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			//
-
-			function onWindowResize() {
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				nodeFrame.update();
-
-				controls.update();
-				renderer.render( scene, camera );
-
-				stats.update();
-
-			}
-
-		</script>
-
-	</body>
-</html>

examples/webgl_nodes_materialx_noise.html

@@ -1,203 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - materials - materialx nodes</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-	</head>
-	<body>
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - MaterialX - Noise
-		</div>
-
-		<script type="importmap">
-			{
-				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
-				}
-			}
-		</script>
-
-		<script type="module">
-
-			import * as THREE from 'three';
-			import { MeshPhysicalNodeMaterial, normalWorld, timerLocal, mx_noise_vec3, mx_worley_noise_vec3, mx_cell_noise_float, mx_fractal_noise_vec3 } from 'three/nodes';
-
-			import { nodeFrame } from 'three/addons/renderers/webgl-legacy/nodes/WebGLNodes.js';
-
-			import Stats from 'three/addons/libs/stats.module.js';
-
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { HDRCubeTextureLoader } from 'three/addons/loaders/HDRCubeTextureLoader.js';
-
-			let container, stats;
-
-			let camera, scene, renderer;
-
-			let particleLight;
-			let group;
-
-			init();
-			animate();
-
-			function init() {
-
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.z = 100;
-
-				scene = new THREE.Scene();
-
-				group = new THREE.Group();
-				scene.add( group );
-
-				new HDRCubeTextureLoader()
-					.setPath( 'textures/cube/pisaHDR/' )
-					.load( [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ],
-						function ( hdrTexture ) {
-
-							const geometry = new THREE.SphereGeometry( 8, 64, 32 );
-
-							const offsetNode = timerLocal();
-							const customUV = normalWorld.mul( 10 ).add( offsetNode );
-
-							// left top
-
-							let material = new MeshPhysicalNodeMaterial();
-							material.colorNode = mx_noise_vec3( customUV );
-
-							let mesh = new THREE.Mesh( geometry, material );
-							mesh.position.x = - 10;
-							mesh.position.y = 10;
-							group.add( mesh );
-
-							// right top
-
-							material = new MeshPhysicalNodeMaterial();
-							material.colorNode = mx_cell_noise_float( customUV );
-
-							mesh = new THREE.Mesh( geometry, material );
-							mesh.position.x = 10;
-							mesh.position.y = 10;
-							group.add( mesh );
-
-							// left bottom
-
-							material = new MeshPhysicalNodeMaterial();
-							material.colorNode = mx_worley_noise_vec3( customUV );
-
-							mesh = new THREE.Mesh( geometry, material );
-							mesh.position.x = - 10;
-							mesh.position.y = - 10;
-							group.add( mesh );
-
-							// right bottom
-
-							material = new MeshPhysicalNodeMaterial();
-							material.colorNode = mx_fractal_noise_vec3( customUV.mul( .2 ) );
-
-							mesh = new THREE.Mesh( geometry, material );
-							mesh.position.x = 10;
-							mesh.position.y = - 10;
-							group.add( mesh );
-
-							//
-
-							scene.background = hdrTexture;
-							scene.environment = hdrTexture;
-
-						}
-
-					);
-
-				// LIGHTS
-
-				particleLight = new THREE.Mesh(
-					new THREE.SphereGeometry( 0.4, 8, 8 ),
-					new THREE.MeshBasicMaterial( { color: 0xffffff } )
-				);
-				scene.add( particleLight );
-
-				particleLight.add( new THREE.PointLight( 0xffffff, 1000 ) );
-
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
-				//
-
-				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 1.25;
-
-				//
-
-
-				//
-
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
-				// EVENTS
-
-				new OrbitControls( camera, renderer.domElement );
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			//
-
-			function onWindowResize() {
-
-				const width = window.innerWidth;
-				const height = window.innerHeight;
-
-				camera.aspect = width / height;
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( width, height );
-
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				nodeFrame.update();
-
-				render();
-
-				stats.update();
-
-			}
-
-			function render() {
-
-				const timer = Date.now() * 0.00025;
-
-				particleLight.position.x = Math.sin( timer * 7 ) * 30;
-				particleLight.position.y = Math.cos( timer * 5 ) * 40;
-				particleLight.position.z = Math.cos( timer * 3 ) * 30;
-
-				for ( let i = 0; i < group.children.length; i ++ ) {
-
-					const child = group.children[ i ];
-					child.rotation.y += 0.005;
-
-				}
-
-				renderer.render( scene, camera );
-
-			}
-
-		</script>
-	</body>
-</html>

examples/webgl_nodes_points.html

@@ -1,205 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - node particles</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-	</head>
-	<body>
-
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl node particles example
-		</div>
-
-		<script type="importmap">
-			{
-				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
-				}
-			}
-		</script>
-
-		<script type="module">
-
-			import * as THREE from 'three';
-			import { attribute, timerLocal, positionLocal, spritesheetUV, pointUV, vec2, vec3, texture, uniform, mix, PointsNodeMaterial } from 'three/nodes';
-
-			import Stats from 'three/addons/libs/stats.module.js';
-
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
-			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
-
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-			import { nodeFrame } from 'three/addons/renderers/webgl-legacy/nodes/WebGLNodes.js';
-
-			let camera, scene, renderer, stats;
-
-			init();
-			animate();
-
-			function init() {
-
-				camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 2, 2000 );
-				camera.position.x = 0;
-				camera.position.y = 100;
-				camera.position.z = - 300;
-
-				scene = new THREE.Scene();
-				scene.fog = new THREE.FogExp2( 0x000000, 0.001 );
-
-				// geometries
-
-				const teapotGeometry = new TeapotGeometry( 50, 7 );
-				const sphereGeometry = new THREE.SphereGeometry( 50, 130, 16 );
-
-				const geometry = new THREE.BufferGeometry();
-
-				// buffers
-
-				const speed = [];
-				const intensity = [];
-				const size = [];
-
-				const positionAttribute = teapotGeometry.getAttribute( 'position' );
-				const particleCount = positionAttribute.count;
-
-				for ( let i = 0; i < particleCount; i ++ ) {
-
-					speed.push( 20 + Math.random() * 50 );
-
-					intensity.push( Math.random() * .04 );
-
-					size.push( 30 + Math.random() * 230 );
-
-				}
-
-				geometry.setAttribute( 'position', positionAttribute );
-				geometry.setAttribute( 'targetPosition', sphereGeometry.getAttribute( 'position' ) );
-				geometry.setAttribute( 'particleSpeed', new THREE.Float32BufferAttribute( speed, 1 ) );
-				geometry.setAttribute( 'particleIntensity', new THREE.Float32BufferAttribute( intensity, 1 ) );
-				geometry.setAttribute( 'particleSize', new THREE.Float32BufferAttribute( size, 1 ) );
-
-				// maps
-
-				// Forked from: https://answers.unrealengine.com/questions/143267/emergency-need-help-with-fire-fx-weird-loop.html
-
-				const fireMap = new THREE.TextureLoader().load( 'textures/sprites/firetorch_1.jpg' );
-				fireMap.colorSpace = THREE.SRGBColorSpace;
-
-				// nodes
-
-				const targetPosition = attribute( 'targetPosition', 'vec3' );
-				const particleSpeed = attribute( 'particleSpeed', 'float' );
-				const particleIntensity = attribute( 'particleIntensity', 'float' );
-				const particleSize = attribute( 'particleSize', 'float' );
-
-				const time = timerLocal();
-
-				const fireUV = spritesheetUV(
-					vec2( 6, 6 ), // count
-					pointUV, // uv
-					time.mul( particleSpeed ) // current frame
-				);
-
-				const fireSprite = texture( fireMap, fireUV );
-				const fire = fireSprite.mul( particleIntensity );
-
-				const lerpPosition = uniform( 0 );
-
-				const positionNode = mix( positionLocal, targetPosition, lerpPosition );
-
-				// material
-
-				const material = new PointsNodeMaterial( {
-					depthWrite: false,
-					transparent: true,
-					sizeAttenuation: true,
-					blending: THREE.AdditiveBlending
-				} );
-
-				material.colorNode = vec3( fire );
-				material.sizeNode = particleSize;
-				material.positionNode = positionNode;
-
-				const particles = new THREE.Points( geometry, material );
-				scene.add( particles );
-
-				// renderer
-
-				renderer = new THREE.WebGLRenderer();
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				document.body.appendChild( renderer.domElement );
-
-				// stats
-
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
-				// gui
-
-				const gui = new GUI();
-				const guiNode = { lerpPosition: 0 };
-
-				gui.add( material, 'sizeAttenuation' ).onChange( function () {
-
-					material.needsUpdate = true;
-
-				} );
-
-				gui.add( guiNode, 'lerpPosition', 0, 1 ).onChange( function () {
-
-					lerpPosition.value = guiNode.lerpPosition;
-
-				} );
-
-				gui.open();
-
-				// controls
-
-				const controls = new OrbitControls( camera, renderer.domElement );
-				controls.maxDistance = 1000;
-				controls.update();
-
-				// events
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			function onWindowResize() {
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
-				nodeFrame.update();
-
-				renderer.render( scene, camera );
-
-			}
-
-		</script>
-	</body>
-</html>

examples/webgl_materials_lightmap.html → examples/webgpu_materials_lightmap.html

@@ -24,15 +24,16 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
+			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import { MeshBasicNodeMaterial, vec4, color, positionLocal, mix } from 'three/nodes';
-			import { nodeFrame } from 'three/addons/renderers/webgl-legacy/nodes/WebGLNodes.js';
 
 			let container, stats;
 			let camera, scene, renderer;
 
-			init().then( animate );
+			init();
 
 			async function init() {
 
@@ -74,9 +75,16 @@
 				const sky = new THREE.Mesh( new THREE.SphereGeometry( 4000, 32, 15 ), skyMat );
 				scene.add( sky );
 
+				// MODEL
+
+				const loader = new THREE.ObjectLoader();
+				const object = await loader.loadAsync( 'models/json/lightmap/lightmap.json' );
+				scene.add( object );
+
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGPURenderer( { antialias: true } );
+				renderer.setAnimationLoop( animate );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( innerWidth, innerHeight );
 				container.appendChild( renderer.domElement );
@@ -92,12 +100,6 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				// MODEL
-
-				const loader = new THREE.ObjectLoader();
-				const object = await loader.loadAsync( 'models/json/lightmap/lightmap.json' );
-				scene.add( object );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -117,10 +119,6 @@
 
 			function animate() {
 
-				requestAnimationFrame( animate );
-
-				nodeFrame.update();
-
 				renderer.render( scene, camera );
 				stats.update();
 

playground/NodeEditor.js

@@ -391,46 +391,13 @@ export class NodeEditor extends THREE.EventDispatcher {
 		// EXAMPLES
 		//**************//
 
-		addExamples( 'Universal', [
+		addExamples( 'Basic', [
 			'Teapot',
 			'Matcap',
-			'Fresnel'
+			'Fresnel',
+			'Particles'
 		] );
 
-		if ( this.renderer.isWebGLRenderer ) {
-
-			addExamples( 'WebGL', [
-				'Car'
-			] );
-
-			context.add( new ButtonInput( 'WebGPU Version' ).onClick( () => {
-
-				if ( confirm( 'Are you sure?' ) === true ) {
-
-					window.location.search = '?backend=webgpu';
-
-				}
-
-			} ) );
-
-		} else if ( this.renderer.isWebGPURenderer ) {
-
-			addExamples( 'WebGPU', [
-				'Particle'
-			] );
-
-			context.add( new ButtonInput( 'WebGL Version' ).onClick( () => {
-
-				if ( confirm( 'Are you sure?' ) === true ) {
-
-					window.location.search = '';
-
-				}
-
-			} ) );
-
-		}
-
 		this.examplesContext = context;
 
 	}
@@ -474,7 +441,7 @@ export class NodeEditor extends THREE.EventDispatcher {
 
 		const urlParams = new URLSearchParams( window.location.search );
 
-		const example = urlParams.get( 'example' ) || 'universal/teapot';
+		const example = urlParams.get( 'example' ) || 'basic/teapot';
 
 		this.loadURL( `./examples/${example}.json` );
 

playground/index.html

@@ -109,13 +109,10 @@
 
 			import * as THREE from 'three';
 
-			import { nodeFrame } from 'three/addons/renderers/webgl-legacy/nodes/WebGLNodes.js';
+			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-
 			import { NodeEditor } from './NodeEditor.js';
 
 			let camera, scene, renderer, composer;
@@ -129,9 +126,6 @@
 
 				document.body.appendChild( container );
 
-				const urlParams = new URLSearchParams( window.location.search );
-				const backend = urlParams.get( 'backend' );
-
 				//
 
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.5, 200 );
@@ -142,32 +136,7 @@
 
 				//
 
-				if ( backend === 'webgpu' ) {
-
-					const { default: WebGPU } = await import( 'three/addons/capabilities/WebGPU.js' );
-					const { default: WebGPURenderer } = await import( 'three/addons/renderers/webgpu/WebGPURenderer.js' );
-
-					renderer = new WebGPURenderer();
-
-					if ( WebGPU.isAvailable() === false ) {
-
-						document.body.appendChild( WebGPU.getErrorMessage() );
-
-						throw new Error( 'No WebGPU support' );
-
-					}
-
-				} else {
-
-					renderer = new THREE.WebGLRenderer( { antialias: true } );
-
-					composer = new EffectComposer( renderer );
-					composer.addPass( new RenderPass( scene, camera ) );
-
-				}
-
-				//
-
+				renderer = new WebGPURenderer( { antialias: true } );
 				renderer.setAnimationLoop( animate );
 				renderer.toneMapping = THREE.LinearToneMapping;
 				renderer.toneMappingExposure = 1;
@@ -187,13 +156,13 @@
 
 				window.addEventListener( 'resize', onWindowResize );
 
-				initEditor(container);
+				initEditor( container );
 
 				onWindowResize();
 
 			}
 
-			function initEditor(container) {
+			function initEditor( container ) {
 
 				nodeEditor = new NodeEditor( scene, renderer, composer );
 
@@ -219,8 +188,6 @@
 
 			function animate() {
 
-				if ( renderer.isWebGLRenderer ) nodeFrame.update();
-
 				render();
 
 			}
@@ -229,8 +196,7 @@
 
 				checkResize();
 
-				if ( composer && composer.passes.length > 1 ) composer.render();
-				else renderer.render( scene, camera );
+				renderer.render( scene, camera );
 
 			}
 
@@ -247,10 +213,10 @@
 					camera.aspect = width / height;
 					camera.updateProjectionMatrix();
 
-					renderer.setSize( width , height );
-					if ( composer ) composer.setSize( width, height );
+					renderer.setSize( width, height );
 
 				}
+
 			}
 
 		</script>

test/e2e/puppeteer.js

@@ -89,9 +89,6 @@ const exceptionList = [
 	'webgl_materials_blending',
 	'webgl_mirror',
 	'webgl_morphtargets_face',
-	'webgl_nodes_loader_materialx',
-	'webgl_nodes_materials_standard',
-	'webgl_nodes_materialx_noise',
 	'webgl_postprocessing_crossfade',
 	'webgl_postprocessing_dof2',
 	'webgl_raymarching_reflect',