@needle-tools/three 0.145.0

package/examples/js/loaders/TiltLoader.js

@@ -0,0 +1,460 @@
+( function () {
+
+	class TiltLoader extends THREE.Loader {
+
+		load( url, onLoad, onProgress, onError ) {
+
+			const scope = this;
+			const loader = new THREE.FileLoader( this.manager );
+			loader.setPath( this.path );
+			loader.setResponseType( 'arraybuffer' );
+			loader.setWithCredentials( this.withCredentials );
+			loader.load( url, function ( buffer ) {
+
+				try {
+
+					onLoad( scope.parse( buffer ) );
+
+				} catch ( e ) {
+
+					if ( onError ) {
+
+						onError( e );
+
+					} else {
+
+						console.error( e );
+
+					}
+
+					scope.manager.itemError( url );
+
+				}
+
+			}, onProgress, onError );
+
+		}
+
+		parse( buffer ) {
+
+			const group = new THREE.Group(); // https://docs.google.com/document/d/11ZsHozYn9FnWG7y3s3WAyKIACfbfwb4PbaS8cZ_xjvo/edit#
+
+			const zip = fflate.unzipSync( new Uint8Array( buffer.slice( 16 ) ) );
+			/*
+    const thumbnail = zip[ 'thumbnail.png' ].buffer;
+    const img = document.createElement( 'img' );
+    img.src = URL.createObjectURL( new Blob( [ thumbnail ] ) );
+    document.body.appendChild( img );
+    */
+
+			const metadata = JSON.parse( fflate.strFromU8( zip[ 'metadata.json' ] ) );
+			/*
+    const blob = new Blob( [ zip[ 'data.sketch' ].buffer ], { type: 'application/octet-stream' } );
+    window.open( URL.createObjectURL( blob ) );
+    */
+
+			const data = new DataView( zip[ 'data.sketch' ].buffer );
+			const num_strokes = data.getInt32( 16, true );
+			const brushes = {};
+			let offset = 20;
+
+			for ( let i = 0; i < num_strokes; i ++ ) {
+
+				const brush_index = data.getInt32( offset, true );
+				const brush_color = [ data.getFloat32( offset + 4, true ), data.getFloat32( offset + 8, true ), data.getFloat32( offset + 12, true ), data.getFloat32( offset + 16, true ) ];
+				const brush_size = data.getFloat32( offset + 20, true );
+				const stroke_mask = data.getUint32( offset + 24, true );
+				const controlpoint_mask = data.getUint32( offset + 28, true );
+				let offset_stroke_mask = 0;
+				let offset_controlpoint_mask = 0;
+
+				for ( let j = 0; j < 4; j ++ ) {
+
+					// TOFIX: I don't understand these masks yet
+					const byte = 1 << j;
+					if ( ( stroke_mask & byte ) > 0 ) offset_stroke_mask += 4;
+					if ( ( controlpoint_mask & byte ) > 0 ) offset_controlpoint_mask += 4;
+
+				} // console.log( { brush_index, brush_color, brush_size, stroke_mask, controlpoint_mask } );
+				// console.log( offset_stroke_mask, offset_controlpoint_mask );
+
+
+				offset = offset + 28 + offset_stroke_mask + 4; // TOFIX: This is wrong
+
+				const num_control_points = data.getInt32( offset, true ); // console.log( { num_control_points } );
+
+				const positions = new Float32Array( num_control_points * 3 );
+				const quaternions = new Float32Array( num_control_points * 4 );
+				offset = offset + 4;
+
+				for ( let j = 0, k = 0; j < positions.length; j += 3, k += 4 ) {
+
+					positions[ j + 0 ] = data.getFloat32( offset + 0, true );
+					positions[ j + 1 ] = data.getFloat32( offset + 4, true );
+					positions[ j + 2 ] = data.getFloat32( offset + 8, true );
+					quaternions[ k + 0 ] = data.getFloat32( offset + 12, true );
+					quaternions[ k + 1 ] = data.getFloat32( offset + 16, true );
+					quaternions[ k + 2 ] = data.getFloat32( offset + 20, true );
+					quaternions[ k + 3 ] = data.getFloat32( offset + 24, true );
+					offset = offset + 28 + offset_controlpoint_mask; // TOFIX: This is wrong
+
+				}
+
+				if ( brush_index in brushes === false ) {
+
+					brushes[ brush_index ] = [];
+
+				}
+
+				brushes[ brush_index ].push( [ positions, quaternions, brush_size, brush_color ] );
+
+			}
+
+			for ( const brush_index in brushes ) {
+
+				const geometry = new StrokeGeometry( brushes[ brush_index ] );
+				const material = getMaterial( metadata.BrushIndex[ brush_index ] );
+				group.add( new THREE.Mesh( geometry, material ) );
+
+			}
+
+			return group;
+
+		}
+
+	}
+
+	class StrokeGeometry extends THREE.BufferGeometry {
+
+		constructor( strokes ) {
+
+			super();
+			const vertices = [];
+			const colors = [];
+			const uvs = [];
+			const position = new THREE.Vector3();
+			const prevPosition = new THREE.Vector3();
+			const quaternion = new THREE.Quaternion();
+			const prevQuaternion = new THREE.Quaternion();
+			const vector1 = new THREE.Vector3();
+			const vector2 = new THREE.Vector3();
+			const vector3 = new THREE.Vector3();
+			const vector4 = new THREE.Vector3(); // size = size / 2;
+
+			for ( const k in strokes ) {
+
+				const stroke = strokes[ k ];
+				const positions = stroke[ 0 ];
+				const quaternions = stroke[ 1 ];
+				const size = stroke[ 2 ];
+				const color = stroke[ 3 ];
+				prevPosition.fromArray( positions, 0 );
+				prevQuaternion.fromArray( quaternions, 0 );
+
+				for ( let i = 3, j = 4, l = positions.length; i < l; i += 3, j += 4 ) {
+
+					position.fromArray( positions, i );
+					quaternion.fromArray( quaternions, j );
+					vector1.set( - size, 0, 0 );
+					vector1.applyQuaternion( quaternion );
+					vector1.add( position );
+					vector2.set( size, 0, 0 );
+					vector2.applyQuaternion( quaternion );
+					vector2.add( position );
+					vector3.set( size, 0, 0 );
+					vector3.applyQuaternion( prevQuaternion );
+					vector3.add( prevPosition );
+					vector4.set( - size, 0, 0 );
+					vector4.applyQuaternion( prevQuaternion );
+					vector4.add( prevPosition );
+					vertices.push( vector1.x, vector1.y, - vector1.z );
+					vertices.push( vector2.x, vector2.y, - vector2.z );
+					vertices.push( vector4.x, vector4.y, - vector4.z );
+					vertices.push( vector2.x, vector2.y, - vector2.z );
+					vertices.push( vector3.x, vector3.y, - vector3.z );
+					vertices.push( vector4.x, vector4.y, - vector4.z );
+					prevPosition.copy( position );
+					prevQuaternion.copy( quaternion );
+					colors.push( ...color );
+					colors.push( ...color );
+					colors.push( ...color );
+					colors.push( ...color );
+					colors.push( ...color );
+					colors.push( ...color );
+					const p1 = i / l;
+					const p2 = ( i - 3 ) / l;
+					uvs.push( p1, 0 );
+					uvs.push( p1, 1 );
+					uvs.push( p2, 0 );
+					uvs.push( p1, 1 );
+					uvs.push( p2, 1 );
+					uvs.push( p2, 0 );
+
+				}
+
+			}
+
+			this.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array( vertices ), 3 ) );
+			this.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( colors ), 4 ) );
+			this.setAttribute( 'uv', new THREE.BufferAttribute( new Float32Array( uvs ), 2 ) );
+
+		}
+
+	}
+
+	const BRUSH_LIST_ARRAY = {
+		'89d104cd-d012-426b-b5b3-bbaee63ac43c': 'Bubbles',
+		'700f3aa8-9a7c-2384-8b8a-ea028905dd8c': 'CelVinyl',
+		'0f0ff7b2-a677-45eb-a7d6-0cd7206f4816': 'ChromaticWave',
+		'1161af82-50cf-47db-9706-0c3576d43c43': 'CoarseBristles',
+		'79168f10-6961-464a-8be1-57ed364c5600': 'CoarseBristlesSingleSided',
+		'1caa6d7d-f015-3f54-3a4b-8b5354d39f81': 'Comet',
+		'c8313697-2563-47fc-832e-290f4c04b901': 'DiamondHull',
+		'4391aaaa-df73-4396-9e33-31e4e4930b27': 'Disco',
+		'd1d991f2-e7a0-4cf1-b328-f57e915e6260': 'DotMarker',
+		'6a1cf9f9-032c-45ec-9b1d-a6680bee30f7': 'Dots',
+		'0d3889f3-3ede-470c-8af4-f44813306126': 'DoubleTaperedFlat',
+		'0d3889f3-3ede-470c-8af4-de4813306126': 'DoubleTaperedMarker',
+		'd0262945-853c-4481-9cbd-88586bed93cb': 'DuctTape',
+		'3ca16e2f-bdcd-4da2-8631-dcef342f40f1': 'DuctTapeSingleSided',
+		'f6e85de3-6dcc-4e7f-87fd-cee8c3d25d51': 'Electricity',
+		'02ffb866-7fb2-4d15-b761-1012cefb1360': 'Embers',
+		'cb92b597-94ca-4255-b017-0e3f42f12f9e': 'Fire',
+		'2d35bcf0-e4d8-452c-97b1-3311be063130': 'Flat',
+		'55303bc4-c749-4a72-98d9-d23e68e76e18': 'FlatDeprecated',
+		'280c0a7a-aad8-416c-a7d2-df63d129ca70': 'FlatSingleSided',
+		'cf019139-d41c-4eb0-a1d0-5cf54b0a42f3': 'Highlighter',
+		'6a1cf9f9-032c-45ec-9b6e-a6680bee32e9': 'HyperGrid',
+		'dce872c2-7b49-4684-b59b-c45387949c5c': 'Hypercolor',
+		'e8ef32b1-baa8-460a-9c2c-9cf8506794f5': 'HypercolorSingleSided',
+		'2f212815-f4d3-c1a4-681a-feeaf9c6dc37': 'Icing',
+		'f5c336cf-5108-4b40-ade9-c687504385ab': 'Ink',
+		'c0012095-3ffd-4040-8ee1-fc180d346eaa': 'InkSingleSided',
+		'4a76a27a-44d8-4bfe-9a8c-713749a499b0': 'Leaves',
+		'ea19de07-d0c0-4484-9198-18489a3c1487': 'LeavesSingleSided',
+		'2241cd32-8ba2-48a5-9ee7-2caef7e9ed62': 'Light',
+		'4391aaaa-df81-4396-9e33-31e4e4930b27': 'LightWire',
+		'd381e0f5-3def-4a0d-8853-31e9200bcbda': 'Lofted',
+		'429ed64a-4e97-4466-84d3-145a861ef684': 'Marker',
+		'79348357-432d-4746-8e29-0e25c112e3aa': 'MatteHull',
+		'b2ffef01-eaaa-4ab5-aa64-95a2c4f5dbc6': 'NeonPulse',
+		'f72ec0e7-a844-4e38-82e3-140c44772699': 'OilPaint',
+		'c515dad7-4393-4681-81ad-162ef052241b': 'OilPaintSingleSided',
+		'f1114e2e-eb8d-4fde-915a-6e653b54e9f5': 'Paper',
+		'759f1ebd-20cd-4720-8d41-234e0da63716': 'PaperSingleSided',
+		'e0abbc80-0f80-e854-4970-8924a0863dcc': 'Petal',
+		'c33714d1-b2f9-412e-bd50-1884c9d46336': 'Plasma',
+		'ad1ad437-76e2-450d-a23a-e17f8310b960': 'Rainbow',
+		'faaa4d44-fcfb-4177-96be-753ac0421ba3': 'ShinyHull',
+		'70d79cca-b159-4f35-990c-f02193947fe8': 'Smoke',
+		'd902ed8b-d0d1-476c-a8de-878a79e3a34c': 'Snow',
+		'accb32f5-4509-454f-93f8-1df3fd31df1b': 'SoftHighlighter',
+		'cf7f0059-7aeb-53a4-2b67-c83d863a9ffa': 'Spikes',
+		'8dc4a70c-d558-4efd-a5ed-d4e860f40dc3': 'Splatter',
+		'7a1c8107-50c5-4b70-9a39-421576d6617e': 'SplatterSingleSided',
+		'0eb4db27-3f82-408d-b5a1-19ebd7d5b711': 'Stars',
+		'44bb800a-fbc3-4592-8426-94ecb05ddec3': 'Streamers',
+		'0077f88c-d93a-42f3-b59b-b31c50cdb414': 'Taffy',
+		'b468c1fb-f254-41ed-8ec9-57030bc5660c': 'TaperedFlat',
+		'c8ccb53d-ae13-45ef-8afb-b730d81394eb': 'TaperedFlatSingleSided',
+		'd90c6ad8-af0f-4b54-b422-e0f92abe1b3c': 'TaperedMarker',
+		'1a26b8c0-8a07-4f8a-9fac-d2ef36e0cad0': 'TaperedMarker_Flat',
+		'75b32cf0-fdd6-4d89-a64b-e2a00b247b0f': 'ThickPaint',
+		'fdf0326a-c0d1-4fed-b101-9db0ff6d071f': 'ThickPaintSingleSided',
+		'4391385a-df73-4396-9e33-31e4e4930b27': 'Toon',
+		'a8fea537-da7c-4d4b-817f-24f074725d6d': 'UnlitHull',
+		'd229d335-c334-495a-a801-660ac8a87360': 'VelvetInk',
+		'10201aa3-ebc2-42d8-84b7-2e63f6eeb8ab': 'Waveform',
+		'b67c0e81-ce6d-40a8-aeb0-ef036b081aa3': 'WetPaint',
+		'dea67637-cd1a-27e4-c9b1-52f4bbcb84e5': 'WetPaintSingleSided',
+		'5347acf0-a8e2-47b6-8346-30c70719d763': 'WigglyGraphite',
+		'e814fef1-97fd-7194-4a2f-50c2bb918be2': 'WigglyGraphiteSingleSided',
+		'4391385a-cf83-4396-9e33-31e4e4930b27': 'Wire'
+	};
+	const common = {
+		'colors': {
+			'BloomColor': `
+			vec3 BloomColor(vec3 color, float gain) {
+				// Guarantee that there's at least a little bit of all 3 channels.
+				// This makes fully-saturated strokes (which only have 2 non-zero
+				// color channels) eventually clip to white rather than to a secondary.
+				float cmin = length(color.rgb) * .05;
+				color.rgb = max(color.rgb, vec3(cmin, cmin, cmin));
+				// If we try to remove this pow() from .a, it brightens up
+				// pressure-sensitive strokes; looks better as-is.
+				color = pow(color, vec3(2.2));
+				color.rgb *= 2. * exp(gain * 10.);
+				return color;
+			}
+		`,
+			'LinearToSrgb': `
+			vec3 LinearToSrgb(vec3 color) {
+				// Approximation http://chilliant.blogspot.com/2012/08/srgb-approximations-for-hlsl.html
+				vec3 linearColor = color.rgb;
+				vec3 S1 = sqrt(linearColor);
+				vec3 S2 = sqrt(S1);
+				vec3 S3 = sqrt(S2);
+				color.rgb = 0.662002687 * S1 + 0.684122060 * S2 - 0.323583601 * S3 - 0.0225411470 * linearColor;
+				return color;
+			}
+		`,
+			'hsv': `
+			// uniform sampler2D lookupTex;
+			vec4 lookup(vec4 textureColor) {
+				return textureColor;
+			}
+
+			vec3 lookup(vec3 textureColor) {
+				return textureColor;
+			}
+
+			vec3 hsv2rgb( vec3 hsv ) {
+				vec3 rgb = clamp( abs(mod(hsv.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 );
+				return hsv.z * mix( vec3(1.0), rgb, hsv.y);
+			}
+
+			vec3 rgb2hsv( vec3 rgb ) {
+				vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+				vec4 p = mix(vec4(rgb.bg, K.wz), vec4(rgb.gb, K.xy), step(rgb.b, rgb.g));
+				vec4 q = mix(vec4(p.xyw, rgb.r), vec4(rgb.r, p.yzx), step(p.x, rgb.r));
+
+				float d = q.x - min(q.w, q.y);
+				float e = 1.0e-10;
+
+				return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+			}
+		`,
+			'SrgbToLinear': `
+			vec3 SrgbToLinear(vec3 color) {
+				// Approximation http://chilliant.blogspot.com/2012/08/srgb-approximations-for-hlsl.html
+				vec3 sRGB = color.rgb;
+				color.rgb = sRGB * (sRGB * (sRGB * 0.305306011 + 0.682171111) + 0.012522878);
+				return color;
+			}
+		`
+		}
+	};
+	let shaders = null;
+
+	function getShaders() {
+
+		if ( shaders === null ) {
+
+			const loader = new THREE.TextureLoader().setPath( './textures/tiltbrush/' );
+			shaders = {
+				'Light': {
+					uniforms: {
+						mainTex: {
+							value: loader.load( 'Light.webp' )
+						},
+						alphaTest: {
+							value: 0.067
+						},
+						emission_gain: {
+							value: 0.45
+						},
+						alpha: {
+							value: 1
+						}
+					},
+					vertexShader: `
+					precision highp float;
+					precision highp int;
+
+					attribute vec2 uv;
+					attribute vec4 color;
+					attribute vec3 position;
+
+					uniform mat4 modelMatrix;
+					uniform mat4 modelViewMatrix;
+					uniform mat4 projectionMatrix;
+					uniform mat4 viewMatrix;
+					uniform mat3 normalMatrix;
+					uniform vec3 cameraPosition;
+
+					varying vec2 vUv;
+					varying vec3 vColor;
+
+					${common.colors.LinearToSrgb}
+					${common.colors.hsv}
+
+					void main() {
+
+						vUv = uv;
+
+						vColor = lookup(color.rgb);
+
+						vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+
+						gl_Position = projectionMatrix * mvPosition;
+
+					}
+				`,
+					fragmentShader: `
+					precision highp float;
+					precision highp int;
+
+					uniform float emission_gain;
+
+					uniform sampler2D mainTex;
+					uniform float alphaTest;
+
+					varying vec2 vUv;
+					varying vec3 vColor;
+
+					${common.colors.BloomColor}
+					${common.colors.SrgbToLinear}
+
+					void main(){
+						vec4 col = texture2D(mainTex, vUv);
+						vec3 color = vColor;
+						color = BloomColor(color, emission_gain);
+						color = color * col.rgb;
+						color = color * col.a;
+						color = SrgbToLinear(color);
+						gl_FragColor = vec4(color, 1.0);
+					}
+				`,
+					side: 2,
+					transparent: true,
+					depthFunc: 2,
+					depthWrite: true,
+					depthTest: false,
+					blending: 5,
+					blendDst: 201,
+					blendDstAlpha: 201,
+					blendEquation: 100,
+					blendEquationAlpha: 100,
+					blendSrc: 201,
+					blendSrcAlpha: 201
+				}
+			};
+
+		}
+
+		return shaders;
+
+	}
+
+	function getMaterial( GUID ) {
+
+		const name = BRUSH_LIST_ARRAY[ GUID ];
+
+		switch ( name ) {
+
+			case 'Light':
+				return new THREE.RawShaderMaterial( getShaders().Light );
+
+			default:
+				return new THREE.MeshBasicMaterial( {
+					vertexColors: true,
+					side: THREE.DoubleSide
+				} );
+
+		}
+
+	}
+
+	THREE.TiltLoader = TiltLoader;
+
+} )();

package/examples/js/loaders/VOXLoader.js

@@ -0,0 +1,248 @@
+( function () {
+
+	class VOXLoader extends THREE.Loader {
+
+		load( url, onLoad, onProgress, onError ) {
+
+			const scope = this;
+			const loader = new THREE.FileLoader( scope.manager );
+			loader.setPath( scope.path );
+			loader.setResponseType( 'arraybuffer' );
+			loader.setRequestHeader( scope.requestHeader );
+			loader.load( url, function ( buffer ) {
+
+				try {
+
+					onLoad( scope.parse( buffer ) );
+
+				} catch ( e ) {
+
+					if ( onError ) {
+
+						onError( e );
+
+					} else {
+
+						console.error( e );
+
+					}
+
+					scope.manager.itemError( url );
+
+				}
+
+			}, onProgress, onError );
+
+		}
+
+		parse( buffer ) {
+
+			const data = new DataView( buffer );
+			const id = data.getUint32( 0, true );
+			const version = data.getUint32( 4, true );
+
+			if ( id !== 542658390 || version !== 150 ) {
+
+				console.error( 'Not a valid VOX file' );
+				return;
+
+			}
+
+			const DEFAULT_PALETTE = [ 0x00000000, 0xffffffff, 0xffccffff, 0xff99ffff, 0xff66ffff, 0xff33ffff, 0xff00ffff, 0xffffccff, 0xffccccff, 0xff99ccff, 0xff66ccff, 0xff33ccff, 0xff00ccff, 0xffff99ff, 0xffcc99ff, 0xff9999ff, 0xff6699ff, 0xff3399ff, 0xff0099ff, 0xffff66ff, 0xffcc66ff, 0xff9966ff, 0xff6666ff, 0xff3366ff, 0xff0066ff, 0xffff33ff, 0xffcc33ff, 0xff9933ff, 0xff6633ff, 0xff3333ff, 0xff0033ff, 0xffff00ff, 0xffcc00ff, 0xff9900ff, 0xff6600ff, 0xff3300ff, 0xff0000ff, 0xffffffcc, 0xffccffcc, 0xff99ffcc, 0xff66ffcc, 0xff33ffcc, 0xff00ffcc, 0xffffcccc, 0xffcccccc, 0xff99cccc, 0xff66cccc, 0xff33cccc, 0xff00cccc, 0xffff99cc, 0xffcc99cc, 0xff9999cc, 0xff6699cc, 0xff3399cc, 0xff0099cc, 0xffff66cc, 0xffcc66cc, 0xff9966cc, 0xff6666cc, 0xff3366cc, 0xff0066cc, 0xffff33cc, 0xffcc33cc, 0xff9933cc, 0xff6633cc, 0xff3333cc, 0xff0033cc, 0xffff00cc, 0xffcc00cc, 0xff9900cc, 0xff6600cc, 0xff3300cc, 0xff0000cc, 0xffffff99, 0xffccff99, 0xff99ff99, 0xff66ff99, 0xff33ff99, 0xff00ff99, 0xffffcc99, 0xffcccc99, 0xff99cc99, 0xff66cc99, 0xff33cc99, 0xff00cc99, 0xffff9999, 0xffcc9999, 0xff999999, 0xff669999, 0xff339999, 0xff009999, 0xffff6699, 0xffcc6699, 0xff996699, 0xff666699, 0xff336699, 0xff006699, 0xffff3399, 0xffcc3399, 0xff993399, 0xff663399, 0xff333399, 0xff003399, 0xffff0099, 0xffcc0099, 0xff990099, 0xff660099, 0xff330099, 0xff000099, 0xffffff66, 0xffccff66, 0xff99ff66, 0xff66ff66, 0xff33ff66, 0xff00ff66, 0xffffcc66, 0xffcccc66, 0xff99cc66, 0xff66cc66, 0xff33cc66, 0xff00cc66, 0xffff9966, 0xffcc9966, 0xff999966, 0xff669966, 0xff339966, 0xff009966, 0xffff6666, 0xffcc6666, 0xff996666, 0xff666666, 0xff336666, 0xff006666, 0xffff3366, 0xffcc3366, 0xff993366, 0xff663366, 0xff333366, 0xff003366, 0xffff0066, 0xffcc0066, 0xff990066, 0xff660066, 0xff330066, 0xff000066, 0xffffff33, 0xffccff33, 0xff99ff33, 0xff66ff33, 0xff33ff33, 0xff00ff33, 0xffffcc33, 0xffcccc33, 0xff99cc33, 0xff66cc33, 0xff33cc33, 0xff00cc33, 0xffff9933, 0xffcc9933, 0xff999933, 0xff669933, 0xff339933, 0xff009933, 0xffff6633, 0xffcc6633, 0xff996633, 0xff666633, 0xff336633, 0xff006633, 0xffff3333, 0xffcc3333, 0xff993333, 0xff663333, 0xff333333, 0xff003333, 0xffff0033, 0xffcc0033, 0xff990033, 0xff660033, 0xff330033, 0xff000033, 0xffffff00, 0xffccff00, 0xff99ff00, 0xff66ff00, 0xff33ff00, 0xff00ff00, 0xffffcc00, 0xffcccc00, 0xff99cc00, 0xff66cc00, 0xff33cc00, 0xff00cc00, 0xffff9900, 0xffcc9900, 0xff999900, 0xff669900, 0xff339900, 0xff009900, 0xffff6600, 0xffcc6600, 0xff996600, 0xff666600, 0xff336600, 0xff006600, 0xffff3300, 0xffcc3300, 0xff993300, 0xff663300, 0xff333300, 0xff003300, 0xffff0000, 0xffcc0000, 0xff990000, 0xff660000, 0xff330000, 0xff0000ee, 0xff0000dd, 0xff0000bb, 0xff0000aa, 0xff000088, 0xff000077, 0xff000055, 0xff000044, 0xff000022, 0xff000011, 0xff00ee00, 0xff00dd00, 0xff00bb00, 0xff00aa00, 0xff008800, 0xff007700, 0xff005500, 0xff004400, 0xff002200, 0xff001100, 0xffee0000, 0xffdd0000, 0xffbb0000, 0xffaa0000, 0xff880000, 0xff770000, 0xff550000, 0xff440000, 0xff220000, 0xff110000, 0xffeeeeee, 0xffdddddd, 0xffbbbbbb, 0xffaaaaaa, 0xff888888, 0xff777777, 0xff555555, 0xff444444, 0xff222222, 0xff111111 ];
+			let i = 8;
+			let chunk;
+			const chunks = [];
+
+			while ( i < data.byteLength ) {
+
+				let id = '';
+
+				for ( let j = 0; j < 4; j ++ ) {
+
+					id += String.fromCharCode( data.getUint8( i ++ ) );
+
+				}
+
+				const chunkSize = data.getUint32( i, true );
+				i += 4;
+				i += 4; // childChunks
+
+				if ( id === 'SIZE' ) {
+
+					const x = data.getUint32( i, true );
+					i += 4;
+					const y = data.getUint32( i, true );
+					i += 4;
+					const z = data.getUint32( i, true );
+					i += 4;
+					chunk = {
+						palette: DEFAULT_PALETTE,
+						size: {
+							x: x,
+							y: y,
+							z: z
+						}
+					};
+					chunks.push( chunk );
+					i += chunkSize - 3 * 4;
+
+				} else if ( id === 'XYZI' ) {
+
+					const numVoxels = data.getUint32( i, true );
+					i += 4;
+					chunk.data = new Uint8Array( buffer, i, numVoxels * 4 );
+					i += numVoxels * 4;
+
+				} else if ( id === 'RGBA' ) {
+
+					const palette = [ 0 ];
+
+					for ( let j = 0; j < 256; j ++ ) {
+
+						palette[ j + 1 ] = data.getUint32( i, true );
+						i += 4;
+
+					}
+
+					chunk.palette = palette;
+
+				} else {
+
+					// console.log( id, chunkSize, childChunks );
+					i += chunkSize;
+
+				}
+
+			}
+
+			return chunks;
+
+		}
+
+	}
+
+	class VOXMesh extends THREE.Mesh {
+
+		constructor( chunk ) {
+
+			const data = chunk.data;
+			const size = chunk.size;
+			const palette = chunk.palette; //
+
+			const vertices = [];
+			const colors = [];
+			const nx = [ 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 0, 0, 0, 1 ];
+			const px = [ 1, 0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0 ];
+			const py = [ 0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1 ];
+			const ny = [ 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0 ];
+			const nz = [ 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 0 ];
+			const pz = [ 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 1 ];
+
+			function add( tile, x, y, z, r, g, b ) {
+
+				x -= size.x / 2;
+				y -= size.z / 2;
+				z += size.y / 2;
+
+				for ( let i = 0; i < 18; i += 3 ) {
+
+					vertices.push( tile[ i + 0 ] + x, tile[ i + 1 ] + y, tile[ i + 2 ] + z );
+					colors.push( r, g, b );
+
+				}
+
+			} // Store data in a volume for sampling
+
+
+			const offsety = size.x;
+			const offsetz = size.x * size.y;
+			const array = new Uint8Array( size.x * size.y * size.z );
+
+			for ( let j = 0; j < data.length; j += 4 ) {
+
+				const x = data[ j + 0 ];
+				const y = data[ j + 1 ];
+				const z = data[ j + 2 ];
+				const index = x + y * offsety + z * offsetz;
+				array[ index ] = 255;
+
+			} // Construct geometry
+
+
+			let hasColors = false;
+
+			for ( let j = 0; j < data.length; j += 4 ) {
+
+				const x = data[ j + 0 ];
+				const y = data[ j + 1 ];
+				const z = data[ j + 2 ];
+				const c = data[ j + 3 ];
+				const hex = palette[ c ];
+				const r = ( hex >> 0 & 0xff ) / 0xff;
+				const g = ( hex >> 8 & 0xff ) / 0xff;
+				const b = ( hex >> 16 & 0xff ) / 0xff;
+				if ( r > 0 || g > 0 || b > 0 ) hasColors = true;
+				const index = x + y * offsety + z * offsetz;
+				if ( array[ index + 1 ] === 0 || x === size.x - 1 ) add( px, x, z, - y, r, g, b );
+				if ( array[ index - 1 ] === 0 || x === 0 ) add( nx, x, z, - y, r, g, b );
+				if ( array[ index + offsety ] === 0 || y === size.y - 1 ) add( ny, x, z, - y, r, g, b );
+				if ( array[ index - offsety ] === 0 || y === 0 ) add( py, x, z, - y, r, g, b );
+				if ( array[ index + offsetz ] === 0 || z === size.z - 1 ) add( pz, x, z, - y, r, g, b );
+				if ( array[ index - offsetz ] === 0 || z === 0 ) add( nz, x, z, - y, r, g, b );
+
+			}
+
+			const geometry = new THREE.BufferGeometry();
+			geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+			geometry.computeVertexNormals();
+			const material = new THREE.MeshStandardMaterial();
+
+			if ( hasColors ) {
+
+				geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+				material.vertexColors = true;
+
+			}
+
+			super( geometry, material );
+
+		}
+
+	}
+
+	class VOXData3DTexture extends THREE.Data3DTexture {
+
+		constructor( chunk ) {
+
+			const data = chunk.data;
+			const size = chunk.size;
+			const offsety = size.x;
+			const offsetz = size.x * size.y;
+			const array = new Uint8Array( size.x * size.y * size.z );
+
+			for ( let j = 0; j < data.length; j += 4 ) {
+
+				const x = data[ j + 0 ];
+				const y = data[ j + 1 ];
+				const z = data[ j + 2 ];
+				const index = x + y * offsety + z * offsetz;
+				array[ index ] = 255;
+
+			}
+
+			super( array, size.x, size.y, size.z );
+			this.format = THREE.RedFormat;
+			this.minFilter = THREE.NearestFilter;
+			this.magFilter = THREE.LinearFilter;
+			this.unpackAlignment = 1;
+			this.needsUpdate = true;
+
+		}
+
+	}
+
+	THREE.VOXData3DTexture = VOXData3DTexture;
+	THREE.VOXLoader = VOXLoader;
+	THREE.VOXMesh = VOXMesh;
+
+} )();