From cef26c486709ab370d53085cb01fa893d0b5c827 Mon Sep 17 00:00:00 2001
From: David Peicho <david.peicho@gmail.com>
Date: Tue, 9 Feb 2021 23:04:43 +0100
Subject: [PATCH 1/6] WebGLRenderer: add copyTextureToTexture3D

---
 src/renderers/WebGLRenderer.js | 56 ++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js
index 5c50a0c11b923f..ca943cd486f68b 100644
--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -1987,6 +1987,62 @@ function WebGLRenderer( parameters ) {
 
 	};
 
+	this.copyTextureToTexture3D = function ( box, srcTexture, dstTexture, level = 0 ) {
+
+		if ( ! _this.isWebGL1Renderer ) {
+
+			console.warn( 'THREE.WebGLRenderer.copyTextureToTexture3D: can only be used with WebGL2.' );
+			return;
+
+		}
+
+		const { width, height, data } = srcTexture.image;
+		const glFormat = utils.convert( dstTexture.format );
+		const glType = utils.convert( dstTexture.type );
+		let glTarget;
+
+		if ( dstTexture.isDataTexture3D ) {
+
+			textures.setTexture3D( dstTexture, 0 );
+			glTarget = _gl.TEXTURE_3D;
+
+		} else if ( dstTexture.isDataTexture2DArray ) {
+
+			textures.setTexture2DArray( dstTexture, 0 );
+			glTarget = _gl.TEXTURE_2D_ARRAY;
+
+		} else {
+
+			console.warn( 'THREE.WebGLRenderer.copyTextureToTexture3D: only supports THREE.DataTexture3D and THREE.DataTexture2DArray.' );
+			return;
+
+		}
+
+		_gl.pixelStorei( _gl.UNPACK_FLIP_Y_WEBGL, dstTexture.flipY );
+		_gl.pixelStorei( _gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, dstTexture.premultiplyAlpha );
+		_gl.pixelStorei( _gl.UNPACK_ALIGNMENT, dstTexture.unpackAlignment );
+		_gl.pixelStorei( _gl.UNPACK_ROW_LENGTH, width );
+		_gl.pixelStorei( _gl.UNPACK_IMAGE_HEIGHT, height );
+		_gl.pixelStorei( _gl.UNPACK_SKIP_PIXELS, box.x );
+		_gl.pixelStorei( _gl.UNPACK_SKIP_ROWS, box.y );
+		_gl.pixelStorei( _gl.UNPACK_SKIP_IMAGES, box.z );
+
+		_gl.texSubImage3D(
+			glTarget,
+			level,
+			box.x,
+			box.y,
+			box.z,
+			box.max.x - box.min.x + 1,
+			box.max.y - box.min.y + 1,
+			box.max.z - box.min.z + 1,
+			glFormat,
+			glType,
+			data
+		);
+
+	};
+
 	this.initTexture = function ( texture ) {
 
 		textures.setTexture2D( texture, 0 );

From 33692c84b106d8676d33466e42179e961f967b9d Mon Sep 17 00:00:00 2001
From: David Peicho <david.peicho@gmail.com>
Date: Wed, 10 Feb 2021 00:28:58 +0100
Subject: [PATCH 2/6] WebGLRenderer: implement copyTextureToTexture3D

---
 src/renderers/WebGLRenderer.js | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js
index ca943cd486f68b..182bb412f0d4bf 100644
--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -1987,9 +1987,9 @@ function WebGLRenderer( parameters ) {
 
 	};
 
-	this.copyTextureToTexture3D = function ( box, srcTexture, dstTexture, level = 0 ) {
+	this.copyTextureToTexture3D = function ( sourceBox, position, srcTexture, dstTexture, level = 0 ) {
 
-		if ( ! _this.isWebGL1Renderer ) {
+		if ( _this.isWebGL1Renderer ) {
 
 			console.warn( 'THREE.WebGLRenderer.copyTextureToTexture3D: can only be used with WebGL2.' );
 			return;
@@ -2021,26 +2021,38 @@ function WebGLRenderer( parameters ) {
 		_gl.pixelStorei( _gl.UNPACK_FLIP_Y_WEBGL, dstTexture.flipY );
 		_gl.pixelStorei( _gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, dstTexture.premultiplyAlpha );
 		_gl.pixelStorei( _gl.UNPACK_ALIGNMENT, dstTexture.unpackAlignment );
+
+		// @todo: we can move those parameters to the 3D texture
+		// classes just like `UNPACK_ALIGNMENT`, and then we can use them when
+		// uploading texture. If we decide to keep this function this way with the
+		// `sourceBox` parameter, then we need to reset those parameters to the
+		// default values either after the `texSubImage3D` call, or when uploading
+		// a texture.
 		_gl.pixelStorei( _gl.UNPACK_ROW_LENGTH, width );
 		_gl.pixelStorei( _gl.UNPACK_IMAGE_HEIGHT, height );
-		_gl.pixelStorei( _gl.UNPACK_SKIP_PIXELS, box.x );
-		_gl.pixelStorei( _gl.UNPACK_SKIP_ROWS, box.y );
-		_gl.pixelStorei( _gl.UNPACK_SKIP_IMAGES, box.z );
+		_gl.pixelStorei( _gl.UNPACK_SKIP_PIXELS, sourceBox.min.x );
+		_gl.pixelStorei( _gl.UNPACK_SKIP_ROWS, sourceBox.min.y );
+		_gl.pixelStorei( _gl.UNPACK_SKIP_IMAGES, sourceBox.min.z );
 
 		_gl.texSubImage3D(
 			glTarget,
 			level,
-			box.x,
-			box.y,
-			box.z,
-			box.max.x - box.min.x + 1,
-			box.max.y - box.min.y + 1,
-			box.max.z - box.min.z + 1,
+			position.x,
+			position.y,
+			position.z,
+			sourceBox.max.x - sourceBox.min.x + 1,
+			sourceBox.max.y - sourceBox.min.y + 1,
+			sourceBox.max.z - sourceBox.min.z + 1,
 			glFormat,
 			glType,
 			data
 		);
 
+		// Generate mipmaps only when copying level 0
+		if ( level === 0 && dstTexture.generateMipmaps ) _gl.generateMipmap( glTarget );
+
+		state.unbindTexture();
+
 	};
 
 	this.initTexture = function ( texture ) {

From 0c9b21e48d7763d3c2b093fa05424beafe6ce537 Mon Sep 17 00:00:00 2001
From: David Peicho <david.peicho@gmail.com>
Date: Wed, 10 Feb 2021 00:38:27 +0100
Subject: [PATCH 3/6] rollup.config.js: add constants for unpack* WebGL2

---
 utils/build/rollup.config.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/utils/build/rollup.config.js b/utils/build/rollup.config.js
index 240e78392aa170..912649d8333174 100644
--- a/utils/build/rollup.config.js
+++ b/utils/build/rollup.config.js
@@ -153,6 +153,11 @@ function glconstants() {
 		MAX_FRAGMENT_UNIFORM_VECTORS: 36349,
 		UNPACK_FLIP_Y_WEBGL: 37440,
 		UNPACK_PREMULTIPLY_ALPHA_WEBGL: 37441,
+		UNPACK_ROW_LENGTH: 3314,
+		UNPACK_IMAGE_HEIGHT: 32878,
+		UNPACK_SKIP_PIXELS: 3316,
+		UNPACK_SKIP_ROWS: 3315,
+		UNPACK_SKIP_IMAGES: 32877,
 		MAX_SAMPLES: 36183,
 		READ_FRAMEBUFFER: 36008,
 		DRAW_FRAMEBUFFER: 36009

From dac51599b7d91bca0615fffe56a3a070db96a194 Mon Sep 17 00:00:00 2001
From: David Peicho <david.peicho@gmail.com>
Date: Wed, 17 Feb 2021 14:32:17 +0100
Subject: [PATCH 4/6] docs: add API entry for

---
 docs/api/en/renderers/WebGLRenderer.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/api/en/renderers/WebGLRenderer.html b/docs/api/en/renderers/WebGLRenderer.html
index ce1ba15f2502bc..640b3694ae13db 100644
--- a/docs/api/en/renderers/WebGLRenderer.html
+++ b/docs/api/en/renderers/WebGLRenderer.html
@@ -310,6 +310,9 @@ <h3>[method:null copyFramebufferToTexture]( [param:Vector2 position], [param:Tex
 		<h3>[method:null copyTextureToTexture]( [param:Vector2 position], [param:Texture srcTexture], [param:Texture dstTexture], [param:Number level] )</h3>
 		<p>Copies all pixels of a texture to an existing texture starting from the given position. Enables access to [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texSubImage2D WebGLRenderingContext.texSubImage2D].</p>
 
+    <h3>[method:null copyTextureToTexture3D]( [param:Box3 sourceBox], [param:Vector2 position], [param:Texture srcTexture], [param:Texture dstTexture], [param:Number level] )</h3>
+		<p>Copies the pixels of a texture in the bounds '[page:Box3 sourceBox]' in the desination texture starting from the given position. Enables access to [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/texSubImage3D WebGL2RenderingContext.texSubImage3D].</p>
+
 		<h3>[method:null dispose]( )</h3>
 		<p>Dispose of the current rendering context.</p>
 

From 6cfb83c59b0b167f9e4804bed8f1423cb22d7f8f Mon Sep 17 00:00:00 2001
From: David Peicho <david.peicho@gmail.com>
Date: Wed, 17 Feb 2021 14:32:43 +0100
Subject: [PATCH 5/6] WebGLRenderer: copyTextureToTexture3D: reset pixelStorei
 param

---
 src/renderers/WebGLRenderer.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js
index 182bb412f0d4bf..451552aca98644 100644
--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -2022,12 +2022,12 @@ function WebGLRenderer( parameters ) {
 		_gl.pixelStorei( _gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, dstTexture.premultiplyAlpha );
 		_gl.pixelStorei( _gl.UNPACK_ALIGNMENT, dstTexture.unpackAlignment );
 
-		// @todo: we can move those parameters to the 3D texture
-		// classes just like `UNPACK_ALIGNMENT`, and then we can use them when
-		// uploading texture. If we decide to keep this function this way with the
-		// `sourceBox` parameter, then we need to reset those parameters to the
-		// default values either after the `texSubImage3D` call, or when uploading
-		// a texture.
+		const unpackRowLen = _gl.getParameter( _gl.UNPACK_ROW_LENGTH );
+		const unpackImageHeight = _gl.getParameter( _gl.UNPACK_IMAGE_HEIGHT );
+		const unpackSkipPixels = _gl.getParameter( _gl.UNPACK_SKIP_PIXELS );
+		const unpackSkipRows = _gl.getParameter( _gl.UNPACK_SKIP_ROWS );
+		const unpackSkipImages = _gl.getParameter( _gl.UNPACK_SKIP_IMAGES );
+
 		_gl.pixelStorei( _gl.UNPACK_ROW_LENGTH, width );
 		_gl.pixelStorei( _gl.UNPACK_IMAGE_HEIGHT, height );
 		_gl.pixelStorei( _gl.UNPACK_SKIP_PIXELS, sourceBox.min.x );
@@ -2048,6 +2048,12 @@ function WebGLRenderer( parameters ) {
 			data
 		);
 
+		_gl.pixelStorei( _gl.UNPACK_ROW_LENGTH, unpackRowLen );
+		_gl.pixelStorei( _gl.UNPACK_IMAGE_HEIGHT, unpackImageHeight );
+		_gl.pixelStorei( _gl.UNPACK_SKIP_PIXELS, unpackSkipPixels );
+		_gl.pixelStorei( _gl.UNPACK_SKIP_ROWS, unpackSkipRows );
+		_gl.pixelStorei( _gl.UNPACK_SKIP_IMAGES, unpackSkipImages );
+
 		// Generate mipmaps only when copying level 0
 		if ( level === 0 && dstTexture.generateMipmaps ) _gl.generateMipmap( glTarget );
 

From c2d3e24ab4d6de57d2a356b2619f5167e0224839 Mon Sep 17 00:00:00 2001
From: David Peicho <david.peicho@gmail.com>
Date: Wed, 17 Feb 2021 14:33:02 +0100
Subject: [PATCH 6/6] examples: add
 webgl2_materials_texture3d_partialupdate.html

---
 examples/files.json                           |   1 +
 ...gl2_materials_texture3d_partialupdate.html | 358 ++++++++++++++++++
 2 files changed, 359 insertions(+)
 create mode 100644 examples/webgl2_materials_texture3d_partialupdate.html

diff --git a/examples/files.json b/examples/files.json
index 6c0a0db3c02dd0..e6928ef0a17e5d 100644
--- a/examples/files.json
+++ b/examples/files.json
@@ -319,6 +319,7 @@
 		"webgl2_materials_texture3d",
 		"webgl2_multisampled_renderbuffers",
 		"webgl2_rendertarget_texture2darray",
+    "webgl2_materials_texture3d_partialupdate.html",
 		"webgl2_volume_cloud",
 		"webgl2_volume_instancing",
 		"webgl2_volume_perlin"
diff --git a/examples/webgl2_materials_texture3d_partialupdate.html b/examples/webgl2_materials_texture3d_partialupdate.html
new file mode 100644
index 00000000000000..db841419f16290
--- /dev/null
+++ b/examples/webgl2_materials_texture3d_partialupdate.html
@@ -0,0 +1,358 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl2 - volume - cloud</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> webgl2 - volume - cloud
+		</div>
+
+		<script type="module">
+			import * as THREE from '../build/three.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { WEBGL } from './jsm/WebGL.js';
+
+			if ( WEBGL.isWebGL2Available() === false ) {
+
+				document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
+
+			}
+
+			const INITIAL_CLOUD_SIZE = 128;
+
+			let renderer, scene, camera;
+			let mesh;
+			let prevTime = performance.now();
+			let cloudTexture = null;
+
+			init();
+			animate();
+
+			function generateCloudTexture( size, scaleFactor = 1.0 ) {
+
+				const data = new Uint8Array( size * size * size );
+				const scale = scaleFactor * 10.0 / size;
+
+				let i = 0;
+				const perlin = new ImprovedNoise();
+				const vector = new THREE.Vector3();
+
+				for ( let z = 0; z < size; z ++ ) {
+
+					for ( let y = 0; y < size; y ++ ) {
+
+						for ( let x = 0; x < size; x ++ ) {
+
+							const dist = vector.set( x, y, z ).subScalar( size / 2 ).divideScalar( size ).length();
+							const fadingFactor = ( 1.0 - dist ) * ( 1.0 - dist );
+							data[ i ] = ( 128 + 128 * perlin.noise( x * scale / 1.5, y * scale, z * scale / 1.5 ) ) * fadingFactor;
+
+							i ++;
+
+						}
+
+					}
+
+				}
+
+				return new THREE.DataTexture3D( data, size, size, size );
+
+			}
+
+			function init() {
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				scene = new THREE.Scene();
+
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.set( 0, 0, 1.5 );
+
+				new OrbitControls( camera, renderer.domElement );
+
+				// Sky
+
+				const canvas = document.createElement( 'canvas' );
+				canvas.width = 1;
+				canvas.height = 32;
+
+				const context = canvas.getContext( '2d' );
+				const gradient = context.createLinearGradient( 0, 0, 0, 32 );
+				gradient.addColorStop( 0.0, '#014a84' );
+				gradient.addColorStop( 0.5, '#0561a0' );
+				gradient.addColorStop( 1.0, '#437ab6' );
+				context.fillStyle = gradient;
+				context.fillRect( 0, 0, 1, 32 );
+
+				const sky = new THREE.Mesh(
+					new THREE.SphereGeometry( 10 ),
+					new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture( canvas ), side: THREE.BackSide } )
+				);
+				scene.add( sky );
+
+				// Texture
+
+				const texture = new THREE.DataTexture3D(
+					new Uint8Array( INITIAL_CLOUD_SIZE * INITIAL_CLOUD_SIZE * INITIAL_CLOUD_SIZE ).fill( 0 ),
+					INITIAL_CLOUD_SIZE,
+					INITIAL_CLOUD_SIZE,
+					INITIAL_CLOUD_SIZE
+				);
+				texture.format = THREE.RedFormat;
+				texture.minFilter = THREE.LinearFilter;
+				texture.magFilter = THREE.LinearFilter;
+				texture.unpackAlignment = 1;
+
+				cloudTexture = texture;
+
+				// Material
+
+				const vertexShader = /* glsl */`
+					in vec3 position;
+
+					uniform mat4 modelMatrix;
+					uniform mat4 modelViewMatrix;
+					uniform mat4 projectionMatrix;
+					uniform vec3 cameraPos;
+
+					out vec3 vOrigin;
+					out vec3 vDirection;
+
+					void main() {
+						vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+
+						vOrigin = vec3( inverse( modelMatrix ) * vec4( cameraPos, 1.0 ) ).xyz;
+						vDirection = position - vOrigin;
+
+						gl_Position = projectionMatrix * mvPosition;
+					}
+				`;
+
+				const fragmentShader = /* glsl */`
+					precision highp float;
+					precision highp sampler3D;
+
+					uniform mat4 modelViewMatrix;
+					uniform mat4 projectionMatrix;
+
+					in vec3 vOrigin;
+					in vec3 vDirection;
+
+					out vec4 color;
+
+					uniform vec3 base;
+					uniform sampler3D map;
+
+					uniform float threshold;
+					uniform float range;
+					uniform float opacity;
+					uniform float steps;
+					uniform float frame;
+
+					uint wang_hash(uint seed)
+					{
+							seed = (seed ^ 61u) ^ (seed >> 16u);
+							seed *= 9u;
+							seed = seed ^ (seed >> 4u);
+							seed *= 0x27d4eb2du;
+							seed = seed ^ (seed >> 15u);
+							return seed;
+					}
+
+					float randomFloat(inout uint seed)
+					{
+							return float(wang_hash(seed)) / 4294967296.;
+					}
+
+					vec2 hitBox( vec3 orig, vec3 dir ) {
+						const vec3 box_min = vec3( - 0.5 );
+						const vec3 box_max = vec3( 0.5 );
+						vec3 inv_dir = 1.0 / dir;
+						vec3 tmin_tmp = ( box_min - orig ) * inv_dir;
+						vec3 tmax_tmp = ( box_max - orig ) * inv_dir;
+						vec3 tmin = min( tmin_tmp, tmax_tmp );
+						vec3 tmax = max( tmin_tmp, tmax_tmp );
+						float t0 = max( tmin.x, max( tmin.y, tmin.z ) );
+						float t1 = min( tmax.x, min( tmax.y, tmax.z ) );
+						return vec2( t0, t1 );
+					}
+
+					float sample1( vec3 p ) {
+						return texture( map, p ).r;
+					}
+
+					float shading( vec3 coord ) {
+						float step = 0.01;
+						return sample1( coord + vec3( - step ) ) - sample1( coord + vec3( step ) );
+					}
+
+					void main(){
+						vec3 rayDir = normalize( vDirection );
+						vec2 bounds = hitBox( vOrigin, rayDir );
+
+						if ( bounds.x > bounds.y ) discard;
+
+						bounds.x = max( bounds.x, 0.0 );
+
+						vec3 p = vOrigin + bounds.x * rayDir;
+						vec3 inc = 1.0 / abs( rayDir );
+						float delta = min( inc.x, min( inc.y, inc.z ) );
+						delta /= steps;
+
+						// Jitter
+
+						// Nice little seed from
+						// https://blog.demofox.org/2020/05/25/casual-shadertoy-path-tracing-1-basic-camera-diffuse-emissive/
+						uint seed = uint( gl_FragCoord.x ) * uint( 1973 ) + uint( gl_FragCoord.y ) * uint( 9277 ) + uint( frame ) * uint( 26699 );
+						vec3 size = vec3( textureSize( map, 0 ) );
+						float randNum = randomFloat( seed ) * 2.0 - 1.0;
+						p += rayDir * randNum * ( 1.0 / size );
+
+						//
+
+						vec4 ac = vec4( base, 0.0 );
+
+						for ( float t = bounds.x; t < bounds.y; t += delta ) {
+
+							float d = sample1( p + 0.5 );
+
+							d = smoothstep( threshold - range, threshold + range, d ) * opacity;
+
+							float col = shading( p + 0.5 ) * 3.0 + ( ( p.x + p.y ) * 0.25 ) + 0.2;
+
+							ac.rgb += ( 1.0 - ac.a ) * d * col;
+
+							ac.a += ( 1.0 - ac.a ) * d;
+
+							if ( ac.a >= 0.95 ) break;
+
+							p += rayDir * delta;
+
+						}
+
+						color = ac;
+
+						if ( color.a == 0.0 ) discard;
+
+					}
+				`;
+
+				const geometry = new THREE.BoxGeometry( 1, 1, 1 );
+				const material = new THREE.RawShaderMaterial( {
+					glslVersion: THREE.GLSL3,
+					uniforms: {
+						base: { value: new THREE.Color( 0x798aa0 ) },
+						map: { value: texture },
+						cameraPos: { value: new THREE.Vector3() },
+						threshold: { value: 0.25 },
+						opacity: { value: 0.25 },
+						range: { value: 0.1 },
+						steps: { value: 100 },
+						frame: { value: 0 }
+					},
+					vertexShader,
+					fragmentShader,
+					side: THREE.BackSide,
+					transparent: true
+				} );
+
+				mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
+
+				//
+
+				const parameters = {
+					threshold: 0.25,
+					opacity: 0.25,
+					range: 0.1,
+					steps: 100
+				};
+
+				function update() {
+
+					material.uniforms.threshold.value = parameters.threshold;
+					material.uniforms.opacity.value = parameters.opacity;
+					material.uniforms.range.value = parameters.range;
+					material.uniforms.steps.value = parameters.steps;
+
+				}
+
+				const gui = new GUI();
+				gui.add( parameters, 'threshold', 0, 1, 0.01 ).onChange( update );
+				gui.add( parameters, 'opacity', 0, 1, 0.01 ).onChange( update );
+				gui.add( parameters, 'range', 0, 1, 0.01 ).onChange( update );
+				gui.add( parameters, 'steps', 0, 200, 1 ).onChange( update );
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			let curr = 0;
+			const countPerRow = 4;
+			const countPerSlice = countPerRow * countPerRow;
+			const sliceCount = 4;
+			const totalCount = sliceCount * countPerSlice;
+			const margins = 8;
+
+			const perElementPaddedSize = ( INITIAL_CLOUD_SIZE - margins ) / countPerRow;
+			const perElementSize = Math.floor( ( INITIAL_CLOUD_SIZE - 1 ) / countPerRow );
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				const time = performance.now();
+				if ( time - prevTime > 1500.0 && curr < totalCount ) {
+
+					const position = new THREE.Vector3(
+						Math.floor( curr % countPerRow ) * perElementSize + margins * 0.5,
+						( Math.floor( ( ( curr % countPerSlice ) / countPerRow ) ) ) * perElementSize + margins * 0.5,
+						Math.floor( curr / countPerSlice ) * perElementSize + margins * 0.5
+					).floor();
+
+					const maxDimension = perElementPaddedSize - 1;
+					const box = new THREE.Box3( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( maxDimension, maxDimension, maxDimension ) );
+					const scaleFactor = ( Math.random() + 0.5 ) * 0.5;
+					const source = generateCloudTexture( perElementPaddedSize, scaleFactor );
+
+					renderer.copyTextureToTexture3D( box, position, source, cloudTexture );
+
+					prevTime = time;
+
+					curr ++;
+
+				}
+
+				mesh.material.uniforms.cameraPos.value.copy( camera.position );
+				// mesh.rotation.y = - performance.now() / 7500;
+
+				mesh.material.uniforms.frame.value ++;
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>