super-three 0.167.0 → 0.169.0

package/src/{nodes/materials → materials/nodes}/MeshSSSNodeMaterial.js

@@ -1,9 +1,8 @@
-import { addNodeMaterial } from './NodeMaterial.js';
-import { transformedNormalView } from '../accessors/NormalNode.js';
-import { positionViewDirection } from '../accessors/PositionNode.js';
-import PhysicalLightingModel from '../functions/PhysicalLightingModel.js';
 import MeshPhysicalNodeMaterial from './MeshPhysicalNodeMaterial.js';
-import { float, vec3 } from '../shadernode/ShaderNode.js';
+import PhysicalLightingModel from '../../nodes/functions/PhysicalLightingModel.js';
+import { transformedNormalView } from '../../nodes/accessors/Normal.js';
+import { positionViewDirection } from '../../nodes/accessors/Position.js';
+import { float, vec3 } from '../../nodes/tsl/TSLBase.js';
 
 class SSSLightingModel extends PhysicalLightingModel {
 
@@ -39,6 +38,12 @@ class SSSLightingModel extends PhysicalLightingModel {
 
 class MeshSSSNodeMaterial extends MeshPhysicalNodeMaterial {
 
+	static get type() {
+
+		return 'MeshSSSNodeMaterial';
+
+	}
+
 	constructor( parameters ) {
 
 		super( parameters );
@@ -80,5 +85,3 @@ class MeshSSSNodeMaterial extends MeshPhysicalNodeMaterial {
 }
 
 export default MeshSSSNodeMaterial;
-
-addNodeMaterial( 'MeshSSSNodeMaterial', MeshSSSNodeMaterial );

package/src/{nodes/materials → materials/nodes}/MeshStandardNodeMaterial.js

@@ -1,18 +1,24 @@
-import NodeMaterial, { addNodeMaterial } from './NodeMaterial.js';
-import { diffuseColor, metalness, roughness, specularColor, specularF90 } from '../core/PropertyNode.js';
-import { mix } from '../math/MathNode.js';
-import { materialRoughness, materialMetalness } from '../accessors/MaterialNode.js';
-import getRoughness from '../functions/material/getRoughness.js';
-import PhysicalLightingModel from '../functions/PhysicalLightingModel.js';
-import EnvironmentNode from '../lighting/EnvironmentNode.js';
-import { float, vec3, vec4 } from '../shadernode/ShaderNode.js';
+import NodeMaterial from './NodeMaterial.js';
+import { diffuseColor, metalness, roughness, specularColor, specularF90 } from '../../nodes/core/PropertyNode.js';
+import { mix } from '../../nodes/math/MathNode.js';
+import { materialRoughness, materialMetalness } from '../../nodes/accessors/MaterialNode.js';
+import getRoughness from '../../nodes/functions/material/getRoughness.js';
+import PhysicalLightingModel from '../../nodes/functions/PhysicalLightingModel.js';
+import EnvironmentNode from '../../nodes/lighting/EnvironmentNode.js';
+import { float, vec3, vec4 } from '../../nodes/tsl/TSLBase.js';
 
-import { MeshStandardMaterial } from '../../materials/MeshStandardMaterial.js';
+import { MeshStandardMaterial } from '../MeshStandardMaterial.js';
 
 const _defaultValues = /*@__PURE__*/ new MeshStandardMaterial();
 
 class MeshStandardNodeMaterial extends NodeMaterial {
 
+	static get type() {
+
+		return 'MeshStandardNodeMaterial';
+
+	}
+
 	constructor( parameters ) {
 
 		super();
@@ -34,7 +40,13 @@ class MeshStandardNodeMaterial extends NodeMaterial {
 
 	setupEnvironment( builder ) {
 
-		const envNode = super.setupEnvironment( builder );
+		let envNode = super.setupEnvironment( builder );
+
+		if ( envNode === null && builder.environmentNode ) {
+
+			envNode = builder.environmentNode;
+
+		}
 
 		return envNode ? new EnvironmentNode( envNode ) : null;
 
@@ -94,5 +106,3 @@ class MeshStandardNodeMaterial extends NodeMaterial {
 }
 
 export default MeshStandardNodeMaterial;
-
-addNodeMaterial( 'MeshStandardNodeMaterial', MeshStandardNodeMaterial );

package/src/{nodes/materials → materials/nodes}/MeshToonNodeMaterial.js

@@ -1,12 +1,18 @@
-import NodeMaterial, { addNodeMaterial } from './NodeMaterial.js';
-import ToonLightingModel from '../functions/ToonLightingModel.js';
+import NodeMaterial from './NodeMaterial.js';
+import ToonLightingModel from '../../nodes/functions/ToonLightingModel.js';
 
-import { MeshToonMaterial } from '../../materials/MeshToonMaterial.js';
+import { MeshToonMaterial } from '../MeshToonMaterial.js';
 
 const _defaultValues = /*@__PURE__*/ new MeshToonMaterial();
 
 class MeshToonNodeMaterial extends NodeMaterial {
 
+	static get type() {
+
+		return 'MeshToonNodeMaterial';
+
+	}
+
 	constructor( parameters ) {
 
 		super();
@@ -30,5 +36,3 @@ class MeshToonNodeMaterial extends NodeMaterial {
 }
 
 export default MeshToonNodeMaterial;
-
-addNodeMaterial( 'MeshToonNodeMaterial', MeshToonNodeMaterial );

package/src/{nodes/materials → materials/nodes}/NodeMaterial.js

@@ -1,35 +1,37 @@
-import { Material } from '../../materials/Material.js';
+import { Material } from '../Material.js';
 import { NormalBlending } from '../../constants.js';
 
-import { getNodeChildren, getCacheKey } from '../core/NodeUtils.js';
-import { attribute } from '../core/AttributeNode.js';
-import { output, diffuseColor, emissive, varyingProperty } from '../core/PropertyNode.js';
-import { materialAlphaTest, materialColor, materialOpacity, materialEmissive, materialNormal, materialLightMap, materialAOMap } from '../accessors/MaterialNode.js';
-import { modelViewProjection } from '../accessors/ModelViewProjectionNode.js';
-import { transformedNormalView, normalLocal } from '../accessors/NormalNode.js';
-import { instance } from '../accessors/InstanceNode.js';
-import { batch } from '../accessors/BatchNode.js';
-import { materialReference } from '../accessors/MaterialReferenceNode.js';
-import { positionLocal, positionView } from '../accessors/PositionNode.js';
-import { skinningReference } from '../accessors/SkinningNode.js';
-import { morphReference } from '../accessors/MorphNode.js';
-import { texture } from '../accessors/TextureNode.js';
-import { cubeTexture } from '../accessors/CubeTextureNode.js';
-import { lightsNode } from '../lighting/LightsNode.js';
-import { mix } from '../math/MathNode.js';
-import { float, vec3, vec4 } from '../shadernode/ShaderNode.js';
-import AONode from '../lighting/AONode.js';
-import { lightingContext } from '../lighting/LightingContextNode.js';
-import IrradianceNode from '../lighting/IrradianceNode.js';
-import { depth } from '../display/ViewportDepthNode.js';
-import { cameraLogDepth } from '../accessors/CameraNode.js';
-import { clipping, clippingAlpha } from '../accessors/ClippingNode.js';
-import { faceDirection } from '../display/FrontFacingNode.js';
-
-const NodeMaterials = new Map();
+import { getNodeChildren, getCacheKey } from '../../nodes/core/NodeUtils.js';
+import { attribute } from '../../nodes/core/AttributeNode.js';
+import { output, diffuseColor, emissive, varyingProperty } from '../../nodes/core/PropertyNode.js';
+import { materialAlphaTest, materialColor, materialOpacity, materialEmissive, materialNormal, materialLightMap, materialAOMap } from '../../nodes/accessors/MaterialNode.js';
+import { modelViewProjection } from '../../nodes/accessors/ModelViewProjectionNode.js';
+import { normalLocal } from '../../nodes/accessors/Normal.js';
+import { instance } from '../../nodes/accessors/InstanceNode.js';
+import { batch } from '../../nodes/accessors/BatchNode.js';
+import { materialReference } from '../../nodes/accessors/MaterialReferenceNode.js';
+import { positionLocal } from '../../nodes/accessors/Position.js';
+import { skinningReference } from '../../nodes/accessors/SkinningNode.js';
+import { morphReference } from '../../nodes/accessors/MorphNode.js';
+import { lights } from '../../nodes/lighting/LightsNode.js';
+import { mix } from '../../nodes/math/MathNode.js';
+import { float, vec3, vec4 } from '../../nodes/tsl/TSLBase.js';
+import AONode from '../../nodes/lighting/AONode.js';
+import { lightingContext } from '../../nodes/lighting/LightingContextNode.js';
+import IrradianceNode from '../../nodes/lighting/IrradianceNode.js';
+import { depth } from '../../nodes/display/ViewportDepthNode.js';
+import { cameraLogDepth } from '../../nodes/accessors/Camera.js';
+import { clipping, clippingAlpha } from '../../nodes/accessors/ClippingNode.js';
+import NodeMaterialObserver from './manager/NodeMaterialObserver.js';
 
 class NodeMaterial extends Material {
 
+	static get type() {
+
+		return 'NodeMaterial';
+
+	}
+
 	constructor() {
 
 		super();
@@ -42,7 +44,6 @@ class NodeMaterial extends Material {
 
 		this.fog = true;
 		this.lights = false;
-		this.normals = true;
 
 		this.lightsNode = null;
 		this.envNode = null;
@@ -81,8 +82,16 @@ class NodeMaterial extends Material {
 
 	}
 
+	setupObserver( builder ) {
+
+		return new NodeMaterialObserver( builder );
+
+	}
+
 	setup( builder ) {
 
+		builder.context.setupNormal = () => this.setupNormal( builder );
+
 		// < VERTEX STAGE >
 
 		builder.addStack();
@@ -103,8 +112,6 @@ class NodeMaterial extends Material {
 
 		if ( this.fragmentNode === null ) {
 
-			if ( this.normals === true ) this.setupNormal( builder );
-
 			this.setupDiffuseColor( builder );
 			this.setupVariants( builder );
 
@@ -171,6 +178,10 @@ class NodeMaterial extends Material {
 
 		builder.addFlow( 'fragment', builder.removeStack() );
 
+		// < MONITOR >
+
+		builder.monitor = this.setupObserver( builder );
+
 	}
 
 	setupClipping( builder ) {
@@ -183,7 +194,9 @@ class NodeMaterial extends Material {
 
 		if ( globalClippingCount || localClippingCount ) {
 
-			if ( this.alphaToCoverage ) {
+			const samples = builder.renderer.samples;
+
+			if ( this.alphaToCoverage && samples > 1 ) {
 
 				// to be added to flow when the color/alpha value has been determined
 				result = clippingAlpha();
@@ -208,11 +221,21 @@ class NodeMaterial extends Material {
 
 		let depthNode = this.depthNode;
 
-		if ( depthNode === null && renderer.logarithmicDepthBuffer === true ) {
+		if ( depthNode === null ) {
+
+			const mrt = renderer.getMRT();
+
+			if ( mrt && mrt.has( 'depth' ) ) {
+
+				depthNode = mrt.get( 'depth' );
+
+			} else if ( renderer.logarithmicDepthBuffer === true ) {
+
+				const fragDepth = modelViewProjection().w.add( 1 );
 
-			const fragDepth = modelViewProjection().w.add( 1 );
+				depthNode = fragDepth.log2().mul( cameraLogDepth ).mul( 0.5 );
 
-			depthNode = fragDepth.log2().mul( cameraLogDepth ).mul( 0.5 );
+			}
 
 		}
 
@@ -304,6 +327,15 @@ class NodeMaterial extends Material {
 
 		}
 
+		if ( object.isBatchedMesh && object._colorsTexture ) {
+
+			const batchColor = varyingProperty( 'vec3', 'vBatchColor' );
+
+			colorNode = batchColor.mul( colorNode );
+
+		}
+
+
 		// COLOR
 
 		diffuseColor.assign( colorNode );
@@ -337,7 +369,6 @@ class NodeMaterial extends Material {
 
 	}
 
-
 	setupOutgoingLight() {
 
 		return ( this.lights === true ) ? vec3( 0 ) : diffuseColor.rgb;
@@ -346,25 +377,11 @@ class NodeMaterial extends Material {
 
 	setupNormal() {
 
-		// NORMAL VIEW
-
-		if ( this.flatShading === true ) {
-
-			const normalNode = positionView.dFdx().cross( positionView.dFdy() ).normalize();
-
-			transformedNormalView.assign( normalNode.mul( faceDirection ) );
-
-		} else {
-
-			const normalNode = this.normalNode ? vec3( this.normalNode ) : materialNormal;
-
-			transformedNormalView.assign( normalNode.mul( faceDirection ) );
-
-		}
+		return this.normalNode ? vec3( this.normalNode ) : materialNormal;
 
 	}
 
-	setupEnvironment( builder ) {
+	setupEnvironment( /*builder*/ ) {
 
 		let node = null;
 
@@ -374,11 +391,7 @@ class NodeMaterial extends Material {
 
 		} else if ( this.envMap ) {
 
-			node = this.envMap.isCubeTexture ? cubeTexture( this.envMap ) : texture( this.envMap );
-
-		} else if ( builder.environmentNode ) {
-
-			node = builder.environmentNode;
+			node = this.envMap.isCubeTexture ? materialReference( 'envMap', 'cubeTexture' ) : materialReference( 'envMap', 'texture' );
 
 		}
 
@@ -434,7 +447,7 @@ class NodeMaterial extends Material {
 
 		if ( materialLightsNode.length > 0 ) {
 
-			lightsN = lightsNode( [ ...lightsN.lightNodes, ...materialLightsNode ] );
+			lightsN = lights( [ ...lightsN.getLights(), ...materialLightsNode ] );
 
 		}
 
@@ -461,7 +474,7 @@ class NodeMaterial extends Material {
 
 		let outgoingLightNode = this.setupOutgoingLight( builder );
 
-		if ( lightsNode && lightsNode.hasLight !== false ) {
+		if ( lightsNode && lightsNode.getScope().getLights().length > 0 ) {
 
 			const lightingModel = this.setupLightingModel( builder );
 
@@ -624,63 +637,6 @@ class NodeMaterial extends Material {
 
 	}
 
-	static fromMaterial( material ) {
-
-		if ( material.isNodeMaterial === true ) { // is already a node material
-
-			return material;
-
-		}
-
-		const type = material.type.replace( 'Material', 'NodeMaterial' );
-
-		const nodeMaterial = createNodeMaterialFromType( type );
-
-		if ( nodeMaterial === undefined ) {
-
-			throw new Error( `NodeMaterial: Material "${ material.type }" is not compatible.` );
-
-		}
-
-		for ( const key in material ) {
-
-			nodeMaterial[ key ] = material[ key ];
-
-		}
-
-		return nodeMaterial;
-
-	}
-
 }
 
 export default NodeMaterial;
-
-export function addNodeMaterial( type, nodeMaterial ) {
-
-	if ( typeof nodeMaterial !== 'function' || ! type ) throw new Error( `Node material ${ type } is not a class` );
-	if ( NodeMaterials.has( type ) ) {
-
-		console.warn( `Redefinition of node material ${ type }` );
-		return;
-
-	}
-
-	NodeMaterials.set( type, nodeMaterial );
-	nodeMaterial.type = type;
-
-}
-
-export function createNodeMaterialFromType( type ) {
-
-	const Material = NodeMaterials.get( type );
-
-	if ( Material !== undefined ) {
-
-		return new Material();
-
-	}
-
-}
-
-addNodeMaterial( 'NodeMaterial', NodeMaterial );

package/src/{nodes/materials/Materials.js → materials/nodes/NodeMaterials.js}

@@ -1,6 +1,8 @@
 // @TODO: We can simplify "export { default as SomeNode, other, exports } from '...'" to just "export * from '...'" if we will use only named exports
 
-export { default as NodeMaterial, addNodeMaterial, createNodeMaterialFromType } from './NodeMaterial.js';
+export { default as NodeMaterialObserver } from './manager/NodeMaterialObserver.js';
+
+export { default as NodeMaterial } from './NodeMaterial.js';
 export { default as InstancedPointsNodeMaterial } from './InstancedPointsNodeMaterial.js';
 export { default as LineBasicNodeMaterial } from './LineBasicNodeMaterial.js';
 export { default as LineDashedNodeMaterial } from './LineDashedNodeMaterial.js';

package/src/{nodes/materials → materials/nodes}/PointsNodeMaterial.js

@@ -1,11 +1,17 @@
-import NodeMaterial, { addNodeMaterial } from './NodeMaterial.js';
+import NodeMaterial from './NodeMaterial.js';
 
-import { PointsMaterial } from '../../materials/PointsMaterial.js';
+import { PointsMaterial } from '../PointsMaterial.js';
 
 const _defaultValues = /*@__PURE__*/ new PointsMaterial();
 
 class PointsNodeMaterial extends NodeMaterial {
 
+	static get type() {
+
+		return 'PointsNodeMaterial';
+
+	}
+
 	constructor( parameters ) {
 
 		super();
@@ -13,7 +19,6 @@ class PointsNodeMaterial extends NodeMaterial {
 		this.isPointsNodeMaterial = true;
 
 		this.lights = false;
-		this.normals = false;
 		this.transparent = true;
 
 		this.sizeNode = null;
@@ -35,5 +40,3 @@ class PointsNodeMaterial extends NodeMaterial {
 }
 
 export default PointsNodeMaterial;
-
-addNodeMaterial( 'PointsNodeMaterial', PointsNodeMaterial );

package/src/{nodes/materials → materials/nodes}/ShadowNodeMaterial.js

@@ -1,12 +1,18 @@
-import NodeMaterial, { addNodeMaterial } from './NodeMaterial.js';
-import ShadowMaskModel from '../functions/ShadowMaskModel.js';
+import NodeMaterial from './NodeMaterial.js';
+import ShadowMaskModel from '../../nodes/functions/ShadowMaskModel.js';
 
-import { ShadowMaterial } from '../../materials/ShadowMaterial.js';
+import { ShadowMaterial } from '../ShadowMaterial.js';
 
 const _defaultValues = /*@__PURE__*/ new ShadowMaterial();
 
 class ShadowNodeMaterial extends NodeMaterial {
 
+	static get type() {
+
+		return 'ShadowNodeMaterial';
+
+	}
+
 	constructor( parameters ) {
 
 		super();
@@ -30,5 +36,3 @@ class ShadowNodeMaterial extends NodeMaterial {
 }
 
 export default ShadowNodeMaterial;
-
-addNodeMaterial( 'ShadowNodeMaterial', ShadowNodeMaterial );

package/src/{nodes/materials → materials/nodes}/SpriteNodeMaterial.js

@@ -1,17 +1,24 @@
-import NodeMaterial, { addNodeMaterial } from './NodeMaterial.js';
-import { uniform } from '../core/UniformNode.js';
-import { cameraProjectionMatrix } from '../accessors/CameraNode.js';
-import { materialRotation } from '../accessors/MaterialNode.js';
-import { modelViewMatrix, modelWorldMatrix } from '../accessors/ModelNode.js';
-import { positionLocal } from '../accessors/PositionNode.js';
-import { float, vec2, vec3, vec4 } from '../shadernode/ShaderNode.js';
+import NodeMaterial from './NodeMaterial.js';
+import { cameraProjectionMatrix } from '../../nodes/accessors/Camera.js';
+import { materialRotation } from '../../nodes/accessors/MaterialNode.js';
+import { modelViewMatrix, modelWorldMatrix } from '../../nodes/accessors/ModelNode.js';
+import { positionLocal } from '../../nodes/accessors/Position.js';
+import { rotate } from '../../nodes/utils/RotateNode.js';
+import { float, vec2, vec3, vec4 } from '../../nodes/tsl/TSLBase.js';
 
-import { SpriteMaterial } from '../../materials/SpriteMaterial.js';
+import { SpriteMaterial } from '../SpriteMaterial.js';
+import { reference } from '../../nodes/accessors/ReferenceBaseNode.js';
 
 const _defaultValues = /*@__PURE__*/ new SpriteMaterial();
 
 class SpriteNodeMaterial extends NodeMaterial {
 
+	static get type() {
+
+		return 'SpriteNodeMaterial';
+
+	}
+
 	constructor( parameters ) {
 
 		super();
@@ -19,7 +26,7 @@ class SpriteNodeMaterial extends NodeMaterial {
 		this.isSpriteNodeMaterial = true;
 
 		this.lights = false;
-		this.normals = false;
+		this._useSizeAttenuation = true;
 
 		this.positionNode = null;
 		this.rotationNode = null;
@@ -31,7 +38,9 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 	}
 
-	setupPosition( { object, context } ) {
+	setupPosition( { object, camera, context } ) {
+
+		const sizeAttenuation = this.sizeAttenuation;
 
 		// < VERTEX STAGE >
 
@@ -49,11 +58,20 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 		}
 
+
+		if ( ! sizeAttenuation && camera.isPerspectiveCamera ) {
+
+			scale = scale.mul( mvPosition.z.negate() );
+
+		}
+
 		let alignedPosition = vertex.xy;
 
 		if ( object.center && object.center.isVector2 === true ) {
 
-			alignedPosition = alignedPosition.sub( uniform( object.center ).sub( 0.5 ) );
+			const center = reference( 'center', 'vec2' );
+
+			alignedPosition = alignedPosition.sub( center.sub( 0.5 ) );
 
 		}
 
@@ -61,7 +79,7 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 		const rotation = float( rotationNode || materialRotation );
 
-		const rotatedPosition = alignedPosition.rotate( rotation );
+		const rotatedPosition = rotate( alignedPosition, rotation );
 
 		mvPosition = vec4( mvPosition.xy.add( rotatedPosition ), mvPosition.zw );
 
@@ -83,8 +101,23 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 	}
 
+	get sizeAttenuation() {
+
+		return this._useSizeAttenuation;
+
+	}
+
+	set sizeAttenuation( value ) {
+
+		if ( this._useSizeAttenuation !== value ) {
+
+			this._useSizeAttenuation = value;
+			this.needsUpdate = true;
+
+		}
+
+	}
+
 }
 
 export default SpriteNodeMaterial;
-
-addNodeMaterial( 'SpriteNodeMaterial', SpriteNodeMaterial );

package/src/{nodes/materials → materials/nodes}/VolumeNodeMaterial.js

@@ -1,22 +1,26 @@
-import NodeMaterial, { addNodeMaterial } from './NodeMaterial.js';
-import { varying } from '../core/VaryingNode.js';
-import { property } from '../core/PropertyNode.js';
-import { materialReference } from '../accessors/MaterialReferenceNode.js';
-import { modelWorldMatrixInverse } from '../accessors/ModelNode.js';
-import { cameraPosition } from '../accessors/CameraNode.js';
-import { positionGeometry } from '../accessors/PositionNode.js';
-import { tslFn, vec2, vec3, vec4 } from '../shadernode/ShaderNode.js';
-import { min, max } from '../math/MathNode.js';
-import { loop, Break } from '../utils/LoopNode.js';
-import { texture3D } from '../accessors/Texture3DNode.js';
+import NodeMaterial from './NodeMaterial.js';
+import { property } from '../../nodes/core/PropertyNode.js';
+import { materialReference } from '../../nodes/accessors/MaterialReferenceNode.js';
+import { modelWorldMatrixInverse } from '../../nodes/accessors/ModelNode.js';
+import { cameraPosition } from '../../nodes/accessors/Camera.js';
+import { positionGeometry } from '../../nodes/accessors/Position.js';
+import { Fn, varying, float, vec2, vec3, vec4 } from '../../nodes/tsl/TSLBase.js';
+import { min, max } from '../../nodes/math/MathNode.js';
+import { Loop, Break } from '../../nodes/utils/LoopNode.js';
+import { texture3D } from '../../nodes/accessors/Texture3DNode.js';
 
 class VolumeNodeMaterial extends NodeMaterial {
 
+	static get type() {
+
+		return 'VolumeNodeMaterial';
+
+	}
+
 	constructor( params = {} ) {
 
 		super();
 
-		this.normals = false;
 		this.lights = false;
 		this.isVolumeNodeMaterial = true;
 		this.testNode = null;
@@ -29,7 +33,7 @@ class VolumeNodeMaterial extends NodeMaterial {
 
 		const map = texture3D( this.map, null, 0 );
 
-		const hitBox = tslFn( ( { orig, dir } ) => {
+		const hitBox = Fn( ( { orig, dir } ) => {
 
 			const box_min = vec3( - 0.5 );
 			const box_max = vec3( 0.5 );
@@ -49,27 +53,27 @@ class VolumeNodeMaterial extends NodeMaterial {
 
 		} );
 
-		this.fragmentNode = tslFn( () => {
+		this.fragmentNode = Fn( () => {
 
 			const vOrigin = varying( vec3( modelWorldMatrixInverse.mul( vec4( cameraPosition, 1.0 ) ) ) );
 			const vDirection = varying( positionGeometry.sub( vOrigin ) );
 
 			const rayDir = vDirection.normalize();
-			const bounds = property( 'vec2', 'bounds' ).assign( hitBox( { orig: vOrigin, dir: rayDir } ) );
+			const bounds = vec2( hitBox( { orig: vOrigin, dir: rayDir } ) ).toVar();
 
 			bounds.x.greaterThan( bounds.y ).discard();
 
 			bounds.assign( vec2( max( bounds.x, 0.0 ), bounds.y ) );
 
-			const p = property( 'vec3', 'p' ).assign( vOrigin.add( bounds.x.mul( rayDir ) ) );
-			const inc = property( 'vec3', 'inc' ).assign( vec3( rayDir.abs().reciprocal() ) );
-			const delta = property( 'float', 'delta' ).assign( min( inc.x, min( inc.y, inc.z ) ) );
+			const p = vec3( vOrigin.add( bounds.x.mul( rayDir ) ) ).toVar();
+			const inc = vec3( rayDir.abs().reciprocal() ).toVar();
+			const delta = float( min( inc.x, min( inc.y, inc.z ) ) ).toVar( 'delta' ); // used 'delta' name in loop
 
 			delta.divAssign( materialReference( 'steps', 'float' ) );
 
-			const ac = property( 'vec4', 'ac' ).assign( vec4( materialReference( 'base', 'color' ), 0.0 ) );
+			const ac = vec4( materialReference( 'base', 'color' ), 0.0 ).toVar();
 
-			loop( { type: 'float', start: bounds.x, end: bounds.y, update: '+= delta' }, () => {
+			Loop( { type: 'float', start: bounds.x, end: bounds.y, update: '+= delta' }, () => {
 
 				const d = property( 'float', 'd' ).assign( map.uv( p.add( 0.5 ) ).r );
 
@@ -102,5 +106,3 @@ class VolumeNodeMaterial extends NodeMaterial {
 }
 
 export default VolumeNodeMaterial;
-
-addNodeMaterial( 'VolumeNodeMaterial', VolumeNodeMaterial );