diff --git a/examples/jsm/environments/RoomEnvironment.js b/examples/jsm/environments/RoomEnvironment.js
index 2f2bedd77a6417..d22ddaf96ce86d 100644
--- a/examples/jsm/environments/RoomEnvironment.js
+++ b/examples/jsm/environments/RoomEnvironment.js
@@ -36,6 +36,8 @@ class RoomEnvironment extends Scene {
 
 		super();
 
+		this.name = 'RoomEnvironment';
+
 		const geometry = new BoxGeometry();
 		geometry.deleteAttribute( 'uv' );
 
diff --git a/examples/misc_controls_map.html b/examples/misc_controls_map.html
index d42b77366cc989..9c78156028b3be 100644
--- a/examples/misc_controls_map.html
+++ b/examples/misc_controls_map.html
@@ -81,21 +81,25 @@
 				geometry.translate( 0, 0.5, 0 );
 				const material = new THREE.MeshPhongMaterial( { color: 0xeeeeee, flatShading: true } );
 
+				const mesh = new THREE.InstancedMesh( geometry, material, 500 );
+				const dummy = new THREE.Object3D();
+
 				for ( let i = 0; i < 500; i ++ ) {
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = Math.random() * 1600 - 800;
-					mesh.position.y = 0;
-					mesh.position.z = Math.random() * 1600 - 800;
-					mesh.scale.x = 20;
-					mesh.scale.y = Math.random() * 80 + 10;
-					mesh.scale.z = 20;
-					mesh.updateMatrix();
-					mesh.matrixAutoUpdate = false;
-					scene.add( mesh );
+					dummy.position.x = Math.random() * 1600 - 800;
+					dummy.position.y = 0;
+					dummy.position.z = Math.random() * 1600 - 800;
+					dummy.scale.x = 20;
+					dummy.scale.y = Math.random() * 80 + 10;
+					dummy.scale.z = 20;
+
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
 				}
 
+				scene.add( mesh );
+
 				// lights
 
 				const dirLight1 = new THREE.DirectionalLight( 0xffffff, 3 );
diff --git a/examples/misc_controls_orbit.html b/examples/misc_controls_orbit.html
index a04664c7c4f40a..4521bc06523e0b 100644
--- a/examples/misc_controls_orbit.html
+++ b/examples/misc_controls_orbit.html
@@ -79,18 +79,22 @@
 				const geometry = new THREE.ConeGeometry( 10, 30, 4, 1 );
 				const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
+				const mesh = new THREE.InstancedMesh( geometry, material, 500 );
+				const dummy = new THREE.Object3D();
+
 				for ( let i = 0; i < 500; i ++ ) {
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = Math.random() * 1600 - 800;
-					mesh.position.y = 0;
-					mesh.position.z = Math.random() * 1600 - 800;
-					mesh.updateMatrix();
-					mesh.matrixAutoUpdate = false;
-					scene.add( mesh );
+					dummy.position.x = Math.random() * 1600 - 800;
+					dummy.position.y = 0;
+					dummy.position.z = Math.random() * 1600 - 800;
+
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
 				}
 
+				scene.add( mesh );
+
 				// lights
 
 				const dirLight1 = new THREE.DirectionalLight( 0xffffff, 3 );
diff --git a/examples/misc_controls_trackball.html b/examples/misc_controls_trackball.html
index e7cbf12f3adc3c..89eef61a9afba7 100644
--- a/examples/misc_controls_trackball.html
+++ b/examples/misc_controls_trackball.html
@@ -69,18 +69,22 @@
 				const geometry = new THREE.ConeGeometry( 10, 30, 4, 1 );
 				const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
+				const mesh = new THREE.InstancedMesh( geometry, material, 500 );
+				const dummy = new THREE.Object3D();
+
 				for ( let i = 0; i < 500; i ++ ) {
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = ( Math.random() - 0.5 ) * 1000;
-					mesh.position.y = ( Math.random() - 0.5 ) * 1000;
-					mesh.position.z = ( Math.random() - 0.5 ) * 1000;
-					mesh.updateMatrix();
-					mesh.matrixAutoUpdate = false;
-					scene.add( mesh );
+					dummy.position.x = ( Math.random() - 0.5 ) * 1000;
+					dummy.position.y = ( Math.random() - 0.5 ) * 1000;
+					dummy.position.z = ( Math.random() - 0.5 ) * 1000;
+
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
 				}
 
+				scene.add( mesh );
+
 				// lights
 
 				const dirLight1 = new THREE.DirectionalLight( 0xffffff, 3 );
diff --git a/examples/webgl_depth_texture.html b/examples/webgl_depth_texture.html
index 9ea6e249a08f28..f7205ba6d1d725 100644
--- a/examples/webgl_depth_texture.html
+++ b/examples/webgl_depth_texture.html
@@ -189,23 +189,29 @@
 				const count = 50;
 				const scale = 5;
 
+				const mesh = new THREE.InstancedMesh( geometry, material, count );
+				const dummy = new THREE.Object3D();
+
 				for ( let i = 0; i < count; i ++ ) {
 
 					const r = Math.random() * 2.0 * Math.PI;
 					const z = ( Math.random() * 2.0 ) - 1.0;
 					const zScale = Math.sqrt( 1.0 - z * z ) * scale;
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.set(
+					dummy.position.set(
 						Math.cos( r ) * zScale,
 						Math.sin( r ) * zScale,
 						z * scale
 					);
-					mesh.rotation.set( Math.random(), Math.random(), Math.random() );
-					scene.add( mesh );
+					dummy.rotation.set( Math.random(), Math.random(), Math.random() );
+
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
 				}
 
+				scene.add( mesh );
+
 			}
 
 			function onWindowResize() {
diff --git a/examples/webgl_postprocessing_fxaa.html b/examples/webgl_postprocessing_fxaa.html
index 04715180684331..276b92834617d0 100644
--- a/examples/webgl_postprocessing_fxaa.html
+++ b/examples/webgl_postprocessing_fxaa.html
@@ -82,24 +82,28 @@
 				const geometry = new THREE.TetrahedronGeometry( 10 );
 				const material = new THREE.MeshStandardMaterial( { color: 0xf73232, flatShading: true } );
 
-				for ( let i = 0; i < 100; i ++ ) {
+				const mesh = new THREE.InstancedMesh( geometry, material, 100 );
+				const dummy = new THREE.Object3D();
 
-					const mesh = new THREE.Mesh( geometry, material );
+				for ( let i = 0; i < 100; i ++ ) {
 
-					mesh.position.x = Math.random() * 500 - 250;
-					mesh.position.y = Math.random() * 500 - 250;
-					mesh.position.z = Math.random() * 500 - 250;
+					dummy.position.x = Math.random() * 500 - 250;
+					dummy.position.y = Math.random() * 500 - 250;
+					dummy.position.z = Math.random() * 500 - 250;
 
-					mesh.scale.setScalar( Math.random() * 2 + 1 );
+					dummy.scale.setScalar( Math.random() * 2 + 1 );
 
-					mesh.rotation.x = Math.random() * Math.PI;
-					mesh.rotation.y = Math.random() * Math.PI;
-					mesh.rotation.z = Math.random() * Math.PI;
+					dummy.rotation.x = Math.random() * Math.PI;
+					dummy.rotation.y = Math.random() * Math.PI;
+					dummy.rotation.z = Math.random() * Math.PI;
 
-					scene.add( mesh );
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
 				}
 
+				scene.add( mesh );
+
 				//
 
 				renderer = new THREE.WebGLRenderer();
diff --git a/examples/webgl_postprocessing_glitch.html b/examples/webgl_postprocessing_glitch.html
index 04528ce7e333a0..a700091358b8b1 100644
--- a/examples/webgl_postprocessing_glitch.html
+++ b/examples/webgl_postprocessing_glitch.html
@@ -80,20 +80,31 @@ <h2>WARNING</h2>
 				scene.add( object );
 
 				const geometry = new THREE.SphereGeometry( 1, 4, 4 );
+				const material = new THREE.MeshPhongMaterial( { flatShading: true } );
+
+				const mesh = new THREE.InstancedMesh( geometry, material, 100 );
+				const dummy = new THREE.Object3D();
+				const color = new THREE.Color();
 
 				for ( let i = 0; i < 100; i ++ ) {
 
-					const material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random(), flatShading: true } );
+					dummy.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
+					dummy.position.multiplyScalar( Math.random() * 400 );
+					dummy.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
+
+					const scale = Math.random() * 50;
+					dummy.scale.set( scale, scale, scale );
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
-					mesh.position.multiplyScalar( Math.random() * 400 );
-					mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
-					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50;
-					object.add( mesh );
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
+
+					color.setHex( 0xffffff * Math.random() );
+					mesh.setColorAt( i, color );
 
 				}
 
+				object.add( mesh );
+
 				scene.add( new THREE.AmbientLight( 0xcccccc ) );
 
 				light = new THREE.DirectionalLight( 0xffffff, 3 );
diff --git a/examples/webgl_postprocessing_sao.html b/examples/webgl_postprocessing_sao.html
index 7961e6ee88335b..d4b83bf07aa3e0 100644
--- a/examples/webgl_postprocessing_sao.html
+++ b/examples/webgl_postprocessing_sao.html
@@ -84,27 +84,36 @@
 				scene.add( light4 );
 
 				const geometry = new THREE.SphereGeometry( 3, 48, 24 );
+				const material = new THREE.MeshStandardMaterial();
+				material.roughness = 0.5;
+				material.metalness = 0;
+
+				const mesh = new THREE.InstancedMesh( geometry, material, 120 );
+				const dummy = new THREE.Object3D();
+				const color = new THREE.Color();
 
 				for ( let i = 0; i < 120; i ++ ) {
 
-					const material = new THREE.MeshStandardMaterial();
-					material.roughness = 0.5 * Math.random() + 0.25;
-					material.metalness = 0;
-					material.color.setHSL( Math.random(), 1.0, 0.3 );
+					dummy.position.x = Math.random() * 4 - 2;
+					dummy.position.y = Math.random() * 4 - 2;
+					dummy.position.z = Math.random() * 4 - 2;
+					dummy.rotation.x = Math.random();
+					dummy.rotation.y = Math.random();
+					dummy.rotation.z = Math.random();
+
+					const scale = Math.random() * 0.2 + 0.05;
+					dummy.scale.set( scale, scale, scale );
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = Math.random() * 4 - 2;
-					mesh.position.y = Math.random() * 4 - 2;
-					mesh.position.z = Math.random() * 4 - 2;
-					mesh.rotation.x = Math.random();
-					mesh.rotation.y = Math.random();
-					mesh.rotation.z = Math.random();
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
-					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 0.2 + 0.05;
-					group.add( mesh );
+					color.setHSL( Math.random(), 1.0, 0.3 );
+					mesh.setColorAt( i, color );
 
 				}
 
+				group.add( mesh );
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
diff --git a/examples/webgl_postprocessing_ssaa.html b/examples/webgl_postprocessing_ssaa.html
index b9eb45e8c14898..9474d86d8d6bf0 100644
--- a/examples/webgl_postprocessing_ssaa.html
+++ b/examples/webgl_postprocessing_ssaa.html
@@ -138,27 +138,35 @@
 				scene.add( light4 );
 
 				const geometry = new THREE.SphereGeometry( 3, 48, 24 );
+				const material = new THREE.MeshStandardMaterial();
+				material.roughness = 0.5;
+				material.metalness = 0;
+
+				const mesh = new THREE.InstancedMesh( geometry, material, 120 );
+				const dummy = new THREE.Object3D();
+				const color = new THREE.Color();
 
 				for ( let i = 0; i < 120; i ++ ) {
 
-					const material = new THREE.MeshStandardMaterial();
-					material.roughness = 0.5 * Math.random() + 0.25;
-					material.metalness = 0;
-					material.color.setHSL( Math.random(), 1.0, 0.3 );
+					dummy.position.x = Math.random() * 4 - 2;
+					dummy.position.y = Math.random() * 4 - 2;
+					dummy.position.z = Math.random() * 4 - 2;
+					dummy.rotation.x = Math.random();
+					dummy.rotation.y = Math.random();
+					dummy.rotation.z = Math.random();
+
+					dummy.scale.setScalar( Math.random() * 0.2 + 0.05 );
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = Math.random() * 4 - 2;
-					mesh.position.y = Math.random() * 4 - 2;
-					mesh.position.z = Math.random() * 4 - 2;
-					mesh.rotation.x = Math.random();
-					mesh.rotation.y = Math.random();
-					mesh.rotation.z = Math.random();
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
-					mesh.scale.setScalar( Math.random() * 0.2 + 0.05 );
-					group.add( mesh );
+					color.setHSL( Math.random(), 1.0, 0.3 );
+					mesh.setColorAt( i, color );
 
 				}
 
+				group.add( mesh );
+
 				// postprocessing
 
 				composer = new EffectComposer( renderer );
diff --git a/examples/webgl_postprocessing_ssao.html b/examples/webgl_postprocessing_ssao.html
index d5ff113816955d..a153e8fe09670f 100644
--- a/examples/webgl_postprocessing_ssao.html
+++ b/examples/webgl_postprocessing_ssao.html
@@ -67,26 +67,33 @@
 				scene.add( group );
 
 				const geometry = new THREE.BoxGeometry( 10, 10, 10 );
+				const material = new THREE.MeshLambertMaterial();
+
+				const mesh = new THREE.InstancedMesh( geometry, material, 100 );
+				const dummy = new THREE.Object3D();
+				const color = new THREE.Color();
 
 				for ( let i = 0; i < 100; i ++ ) {
 
-					const material = new THREE.MeshLambertMaterial( {
-						color: Math.random() * 0xffffff
-					} );
+					dummy.position.x = Math.random() * 400 - 200;
+					dummy.position.y = Math.random() * 400 - 200;
+					dummy.position.z = Math.random() * 400 - 200;
+					dummy.rotation.x = Math.random();
+					dummy.rotation.y = Math.random();
+					dummy.rotation.z = Math.random();
+
+					dummy.scale.setScalar( Math.random() * 10 + 2 );
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = Math.random() * 400 - 200;
-					mesh.position.y = Math.random() * 400 - 200;
-					mesh.position.z = Math.random() * 400 - 200;
-					mesh.rotation.x = Math.random();
-					mesh.rotation.y = Math.random();
-					mesh.rotation.z = Math.random();
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
-					mesh.scale.setScalar( Math.random() * 10 + 2 );
-					group.add( mesh );
+					color.setHex( Math.random() * 0xffffff );
+					mesh.setColorAt( i, color );
 
 				}
 
+				group.add( mesh );
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
diff --git a/examples/webgpu_postprocessing_fxaa.html b/examples/webgpu_postprocessing_fxaa.html
index a877d541374e55..c4f8b904c692c5 100644
--- a/examples/webgpu_postprocessing_fxaa.html
+++ b/examples/webgpu_postprocessing_fxaa.html
@@ -75,24 +75,27 @@
 				const geometry = new THREE.TetrahedronGeometry();
 				const material = new THREE.MeshStandardMaterial( { color: 0xf73232, flatShading: true } );
 
-				for ( let i = 0; i < 100; i ++ ) {
+				const mesh = new THREE.InstancedMesh( geometry, material, 100 );
+				const dummy = new THREE.Object3D();
 
-					const mesh = new THREE.Mesh( geometry, material );
+				for ( let i = 0; i < 100; i ++ ) {
 
-					mesh.position.x = Math.random() * 50 - 25;
-					mesh.position.y = Math.random() * 50 - 25;
-					mesh.position.z = Math.random() * 50 - 25;
+					dummy.position.x = Math.random() * 50 - 25;
+					dummy.position.y = Math.random() * 50 - 25;
+					dummy.position.z = Math.random() * 50 - 25;
 
-					mesh.scale.setScalar( Math.random() * 2 + 1 );
+					dummy.scale.setScalar( Math.random() * 2 + 1 );
 
-					mesh.rotation.x = Math.random() * Math.PI;
-					mesh.rotation.y = Math.random() * Math.PI;
-					mesh.rotation.z = Math.random() * Math.PI;
+					dummy.rotation.x = Math.random() * Math.PI;
+					dummy.rotation.y = Math.random() * Math.PI;
+					dummy.rotation.z = Math.random() * Math.PI;
 
-					group.add( mesh );
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
 				}
 
+				group.add( mesh );
 				scene.add( group );
 
 				renderer = new THREE.WebGPURenderer();
diff --git a/examples/webgpu_struct_drawindirect.html b/examples/webgpu_struct_drawindirect.html
index 25373e5160b1e4..4a8fe477b26ba0 100644
--- a/examples/webgpu_struct_drawindirect.html
+++ b/examples/webgpu_struct_drawindirect.html
@@ -34,7 +34,7 @@
 		<script type="module">
 
 			import * as THREE from 'three/webgpu';
-			import { struct, storage, wgslFn, instanceIndex, time, varyingProperty, attribute } from 'three/tsl';
+			import { struct, storage, sin, cross, normalize, abs, mix, Fn, vec4, max, pow, time, varyingProperty, attribute, uint, atomicStore } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -138,48 +138,34 @@
 					offset: 'uint'
 				}, 'DrawBuffer' );
 
-				const writeDrawBuffer = wgslFn( `
-					fn compute(
-						index: u32,
-						drawBuffer: ptr<storage, DrawBuffer, read_write>,
-						instances: f32,
-						time: f32,
-					) -> void {
+				const drawStorage = storage( drawBuffer, drawBufferStruct, drawBuffer.count );
 
-						let instanceCount = max( instances * pow( sin( time * 0.5 ) + 1, 4.0 ), 100 );
+				computeDrawBuffer = Fn( () => {
 
-						atomicStore( &drawBuffer.instanceCount, u32( instanceCount ) );
-					}
-				` );
+					const halfTime = sin( time.mul( 0.5 ) );
 
-				computeDrawBuffer = writeDrawBuffer( {
-					drawBuffer: storage( drawBuffer, drawBufferStruct, drawBuffer.count ),
-					instances: instances,
-					index: instanceIndex,
-					time: time
-				} ).compute( instances ); // not necessary in this case but normally one wants to run through all instances
+					const instanceCount = max( ( pow( halfTime.add( 1 ), 4.0 ) ).mul( instances ), 100 ).toVar( 'instanceCount' );
+					atomicStore( drawStorage.get( 'instanceCount' ), instanceCount );
+			
+				} )().compute( instances );
 
-				const initDrawBuffer = wgslFn( `
-					fn compute(
-						drawBuffer: ptr< storage, DrawBuffer, read_write >,
-					) -> void {
+				computeInitDrawBuffer = Fn( () => {
 
-						drawBuffer.vertexCount = 3u;
-						atomicStore(&drawBuffer.instanceCount, 0u);
-						drawBuffer.firstVertex = 0u;
-						drawBuffer.firstInstance = 0u;
-						drawBuffer.offset = 0u;
-					}
-				` );
+					const drawInfo = drawStorage;
+			
+					drawInfo.get( 'vertexCount' ).assign( 3 );
+					atomicStore( drawInfo.get( 'instanceCount' ), uint( 0 ) );
+					drawInfo.get( 'firstVertex' ).assign( 0 );
+					drawInfo.get( 'firstInstance' ).assign( 0 );
+					drawInfo.get( 'offset' ).assign( 0 );
 
-				computeInitDrawBuffer = initDrawBuffer( {
-					drawBuffer: storage( drawBuffer, drawBufferStruct, drawBuffer.count ),
-  				} ).compute( 1 );
+				} )().compute( 1 );
+			
 
-  				const vPosition = varyingProperty( 'vec3', 'vPosition' );
-  				const vColor = varyingProperty( 'vec4', 'vColor' );
+  			const vPosition = varyingProperty( 'vec3', 'vPosition' );
+  			const vColor = varyingProperty( 'vec4', 'vColor' );
 
-  				const positionShaderParams = {
+  			const positionShaderParams = {
 					position: attribute( 'position' ),
 					offset: attribute( 'offset' ),
 					color: attribute( 'color' ),
@@ -187,52 +173,39 @@
 					orientationEnd: attribute( 'orientationEnd' ),
 					time: time
 				};
+			
+			
+				const positionFn = Fn( () => {
 
-				const positionShader = wgslFn( `
-					fn main_vertex(
-						position: vec3<f32>,
-						offset: vec3<f32>,
-						color: vec4<f32>,
-						orientationStart: vec4<f32>,
-						orientationEnd: vec4<f32>,
-						time: f32
-					) -> vec4<f32> {
+					const { position, offset, color, orientationStart, orientationEnd } = positionShaderParams;
 
-						var vPosition = offset * max( abs( sin( time * 0.5 ) * 2.0 + 1.0 ), 0.5 ) + position;
-						var orientation = normalize( mix( orientationStart, orientationEnd, sin( time * 0.5 ) ) );
-						var vcV = cross( orientation.xyz, vPosition );
-						vPosition = vcV * ( 2.0 * orientation.w ) + ( cross( orientation.xyz, vcV ) * 2.0 + vPosition );
+					const halfTime = sin( time.mul( 0.5 ) );
 
-						var vColor = color;
+					// Convert slowed sign range of (-1 to 1) to range of (1 -> 0 / 0.5 -> 3)
+					const oscilationRange = max( abs( halfTime.mul( 2.0 ).add( 1.0 ) ), 0.5 );
 
-						var outPosition = vec4f(vPosition, 1);
+					const sphereOscilation = offset.mul( oscilationRange ).add( position ).toVar();
 
-						varyings.vPosition = vPosition;
-						varyings.vColor = vColor;
+					const orientation = normalize( mix( orientationStart, orientationEnd, halfTime ) );
+					const vcV = cross( orientation.xyz, sphereOscilation );
+					const crossvcV = cross( orientation.xyz, vcV );
 
-						return outPosition;
-					}
-				`, [ vPosition, vColor ] );
+					vPosition.assign( vcV.mul( orientation.w.mul( 2.0 ) ).add( crossvcV.mul( 2.0 ).add( sphereOscilation ) ) );
+					vColor.assign( color );
 
-				const fragmentShaderParams = {
-					time: time,
-					vPosition: vPosition,
-					vColor: vColor
-				};
+					return vPosition;
+
+				} )();
+
+				const fragmentFn = Fn( () => {
+
+					const color = vec4( vColor ).toVar();
 
-				const fragmentShader = wgslFn( `
-					fn main_fragment(
-						time: f32,
-						vPosition: vec3<f32>,
-						vColor: vec4<f32>
-					) -> vec4<f32> {
+					color.r.addAssign( sin( vPosition.x.mul( 10.0 ).add( time ) ).mul( 0.5 ) );
 
-						var color = vec4f( vColor );
-						color.r += sin( vPosition.x * 10.0 + time ) * 0.5;
+					return color;
 
-						return color;
-					}
-				` );
+				} )();
 
 				const material = new THREE.MeshBasicNodeMaterial( {
 					side: THREE.DoubleSide,
@@ -240,8 +213,8 @@
 					transparent: true
 				} );
 
-				material.positionNode = positionShader( positionShaderParams );
-				material.fragmentNode = fragmentShader( fragmentShaderParams );
+				material.positionNode = positionFn;
+				material.fragmentNode = fragmentFn;
 
 				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );