Merge branch 'dev' of https://github.com/mrdoob/three.js into dev

editor/js/Loader.js

@@ -307,12 +307,19 @@ function Loader( editor ) {
 
 					const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
 					const { GLTFLoader } = await import( 'three/addons/loaders/GLTFLoader.js' );
+					const { KTX2Loader } = await import( 'three/addons/loaders/KTX2Loader.js' );
+					const { MeshoptDecoder } = await import( 'three/addons/libs/meshopt_decoder.module.js' );
 
 					const dracoLoader = new DRACOLoader();
 					dracoLoader.setDecoderPath( '../examples/jsm/libs/draco/gltf/' );
 
+					const ktx2Loader = new KTX2Loader();
+					ktx2Loader.setTranscoderPath( '../examples/jsm/libs/basis/' );
+
 					const loader = new GLTFLoader( manager );
 					loader.setDRACOLoader( dracoLoader );
+					loader.setKTX2Loader( ktx2Loader );
+					loader.setMeshoptDecoder( MeshoptDecoder );
 
 					loader.parse( contents, '', function ( result ) {
 
@@ -953,14 +960,21 @@ function Loader( editor ) {
 
 				{
 
-					const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
 					const { GLTFLoader } = await import( 'three/addons/loaders/GLTFLoader.js' );
+					const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
+					const { KTX2Loader } = await import( 'three/addons/loaders/KTX2Loader.js' );
+					const { MeshoptDecoder } = await import( 'three/addons/libs/meshopt_decoder.module.js' );
 
 					const dracoLoader = new DRACOLoader();
 					dracoLoader.setDecoderPath( '../examples/jsm/libs/draco/gltf/' );
 
+					const ktx2Loader = new KTX2Loader();
+					ktx2Loader.setTranscoderPath( '../examples/jsm/libs/basis/' );
+
 					const loader = new GLTFLoader();
 					loader.setDRACOLoader( dracoLoader );
+					loader.setKTX2Loader( ktx2Loader );
+					loader.setMeshoptDecoder( MeshoptDecoder );
 
 					loader.parse( file.buffer, '', function ( result ) {
 
@@ -981,14 +995,22 @@ function Loader( editor ) {
 
 				{
 
-					const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
 					const { GLTFLoader } = await import( 'three/addons/loaders/GLTFLoader.js' );
+					const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
+					const { KTX2Loader } = await import( 'three/addons/loaders/KTX2Loader.js' );
+					const { MeshoptDecoder } = await import( 'three/addons/libs/meshopt_decoder.module.js' );
 
 					const dracoLoader = new DRACOLoader();
 					dracoLoader.setDecoderPath( '../examples/jsm/libs/draco/gltf/' );
 
-					const loader = new GLTFLoader( manager );
+					const ktx2Loader = new KTX2Loader();
+					ktx2Loader.setTranscoderPath( '../examples/jsm/libs/basis/' );
+
+					const loader = new GLTFLoader();
 					loader.setDRACOLoader( dracoLoader );
+					loader.setKTX2Loader( ktx2Loader );
+					loader.setMeshoptDecoder( MeshoptDecoder );
+
 					loader.parse( strFromU8( file ), '', function ( result ) {
 
 						const scene = result.scene;

examples/jsm/nodes/Nodes.js

@@ -24,7 +24,7 @@ export { default as NodeKeywords } from './core/NodeKeywords.js';
 export { default as NodeUniform } from './core/NodeUniform.js';
 export { default as NodeVar } from './core/NodeVar.js';
 export { default as NodeVarying } from './core/NodeVarying.js';
-export { default as PropertyNode, property, diffuseColor, roughness, metalness, specularColor, shininess } from './core/PropertyNode.js';
+export { default as PropertyNode, property, output, diffuseColor, roughness, metalness, specularColor, shininess } from './core/PropertyNode.js';
 export { default as StackNode, stack } from './core/StackNode.js';
 export { default as TempNode } from './core/TempNode.js';
 export { default as UniformNode, uniform } from './core/UniformNode.js';

examples/jsm/nodes/core/PropertyNode.js

@@ -53,5 +53,6 @@ export const sheen = nodeImmutable( PropertyNode, 'vec3', 'Sheen' );
 export const sheenRoughness = nodeImmutable( PropertyNode, 'float', 'SheenRoughness' );
 export const specularColor = nodeImmutable( PropertyNode, 'color', 'SpecularColor' );
 export const shininess = nodeImmutable( PropertyNode, 'float', 'Shininess' );
+export const output = nodeImmutable( PropertyNode, 'vec4', 'Output' );
 
 addNodeClass( PropertyNode );

examples/jsm/nodes/materials/NodeMaterial.js

@@ -1,7 +1,7 @@
 import { Material, ShaderMaterial, NoColorSpace } from 'three';
 import { getNodeChildren, getCacheKey } from '../core/NodeUtils.js';
 import { attribute } from '../core/AttributeNode.js';
-import { diffuseColor } from '../core/PropertyNode.js';
+import { output, diffuseColor } from '../core/PropertyNode.js';
 import { materialNormal } from '../accessors/ExtendedMaterialNode.js';
 import { materialAlphaTest, materialColor, materialOpacity, materialEmissive } from '../accessors/MaterialNode.js';
 import { modelViewProjection } from '../accessors/ModelViewProjectionNode.js';
@@ -76,6 +76,8 @@ class NodeMaterial extends ShaderMaterial {
 
 		builder.addStack();
 
+		let outputNode;
+
 		if ( this.isUnlit === false ) {
 
 			if ( this.normals === true ) this.constructNormal( builder );
@@ -85,14 +87,18 @@ class NodeMaterial extends ShaderMaterial {
 
 			const outgoingLightNode = this.constructLighting( builder );
 
-			builder.stack.outputNode = this.constructOutput( builder, vec4( outgoingLightNode, diffuseColor.a ) );
+			outputNode = this.constructOutput( builder, vec4( outgoingLightNode, diffuseColor.a ) );
+
+			if ( this.outputNode !== null ) outputNode = this.outputNode;
 
 		} else {
 
-			builder.stack.outputNode = this.constructOutput( builder, this.outputNode || vec4( 0, 0, 0, 1 ) );
+			outputNode = this.constructOutput( builder, this.outputNode || vec4( 0, 0, 0, 1 ) );
 
 		}
 
+		builder.stack.outputNode = outputNode;
+
 		builder.addFlow( 'fragment', builder.removeStack() );
 
 	}
@@ -330,6 +336,10 @@ class NodeMaterial extends ShaderMaterial {
 
 		if ( fogNode ) outputNode = vec4( fogNode.mixAssign( outputNode.rgb ), outputNode.a );
 
+		// OUTPUT NODE
+
+		builder.stack.assign( output, outputNode );
+
 		return outputNode;
 
 	}

examples/jsm/renderers/common/Renderer.js

@@ -250,6 +250,10 @@ class Renderer {
 
 		//
 
+		sceneRef.onBeforeRender( this, scene, camera, renderTarget );
+
+		//
+
 		_projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 		_frustum.setFromProjectionMatrix( _projScreenMatrix, coordinateSystem );
 
@@ -318,6 +322,10 @@ class Renderer {
 
 		this._lastRenderContext = renderContext;
 
+		//
+
+		sceneRef.onAfterRender( this, scene, camera, renderTarget );
+
 	}
 
 	setAnimationLoop( callback ) {
@@ -830,36 +838,23 @@ class Renderer {
 
 		object.onBeforeRender( this, scene, camera, geometry, material, group );
 
-		//
-
-		const renderObject = this._objects.get( object, material, scene, camera, lightsNode, this._currentRenderContext );
-
-		this._nodes.updateBefore( renderObject );
-
-		//
-
-		object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
-		object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
-
-		//
-
 		material.onBeforeRender( this, scene, camera, geometry, material, group );
 
 		//
 
 		if ( material.transparent === true && material.side === DoubleSide && material.forceSinglePass === false ) {
 
 			material.side = BackSide;
-			this._renderObjectDirect( object, scene, camera, geometry, material, group, lightsNode, 'backSide' ); // create backSide pass id
+			this._renderObjectDirect( object, material, scene, camera, lightsNode, 'backSide' ); // create backSide pass id
 
 			material.side = FrontSide;
-			this._renderObjectDirect( object, scene, camera, geometry, material, group, lightsNode ); // use default pass id
+			this._renderObjectDirect( object, material, scene, camera, lightsNode ); // use default pass id
 
 			material.side = DoubleSide;
 
 		} else {
 
-			this._renderObjectDirect( object, scene, camera, geometry, material, group, lightsNode );
+			this._renderObjectDirect( object, material, scene, camera, lightsNode );
 
 		}
 
@@ -869,11 +864,18 @@ class Renderer {
 
 	}
 
-	_renderObjectDirect( object, scene, camera, geometry, material, group, lightsNode, passId ) {
+	_renderObjectDirect( object, material, scene, camera, lightsNode, passId ) {
+
+		const renderObject = this._objects.get( object, material, scene, camera, lightsNode, this._currentRenderContext, passId );
 
 		//
 
-		const renderObject = this._objects.get( object, material, scene, camera, lightsNode, this._currentRenderContext, passId );
+		this._nodes.updateBefore( renderObject );
+
+		//
+
+		object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
+		object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
 
 		//
 

examples/webgpu_backdrop.html

@@ -27,7 +27,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { float, vec3, color, toneMapping, viewportSharedTexture, viewportTopLeft, checker, uv, oscSine, MeshStandardNodeMaterial } from 'three/nodes';
+			import { float, vec3, color, toneMapping, viewportSharedTexture, viewportTopLeft, checker, uv, timerLocal, oscSine, output, MeshStandardNodeMaterial } from 'three/nodes';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -74,6 +74,13 @@
 					const object = gltf.scene;
 					mixer = new THREE.AnimationMixer( object );
 
+					const material = object.children[ 0 ].children[ 0 ].material;
+
+					// output material effect ( better using hsv )
+					// ignore output.sRGBToLinear().linearTosRGB() for now
+
+					material.outputNode = oscSine( timerLocal( .1 ) ).mix( output, output.add( .1 ).posterize( 4 ).mul( 2 ) );
+
 					const action = mixer.clipAction( gltf.animations[ 0 ] );
 					action.play();
 

src/core/Object3D.js

@@ -945,7 +945,7 @@ class Object3D extends EventDispatcher {
 		this.frustumCulled = source.frustumCulled;
 		this.renderOrder = source.renderOrder;
 
-		this.animations = source.animations;
+		this.animations = source.animations.slice();
 
 		this.userData = JSON.parse( JSON.stringify( source.userData ) );