VOXLoader.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. import {
  2. BufferGeometry,
  3. Color,
  4. Data3DTexture,
  5. FileLoader,
  6. Float32BufferAttribute,
  7. Loader,
  8. LinearFilter,
  9. Mesh,
  10. MeshStandardMaterial,
  11. NearestFilter,
  12. RedFormat,
  13. SRGBColorSpace
  14. } from 'three';
  15. /**
  16. * A loader for the VOX format.
  17. *
  18. * ```js
  19. * const loader = new VOXLoader();
  20. * const chunks = await loader.loadAsync( 'models/vox/monu10.vox' );
  21. *
  22. * for ( let i = 0; i < chunks.length; i ++ ) {
  23. *
  24. * const chunk = chunks[ i ];
  25. * const mesh = new VOXMesh( chunk );
  26. * mesh.scale.setScalar( 0.0015 );
  27. * scene.add( mesh );
  28. *
  29. * }
  30. * ```
  31. * @augments Loader
  32. * @three_import import { VOXLoader } from 'three/addons/loaders/VOXLoader.js';
  33. */
  34. class VOXLoader extends Loader {
  35. /**
  36. * Starts loading from the given URL and passes the loaded VOX asset
  37. * to the `onLoad()` callback.
  38. *
  39. * @param {string} url - The path/URL of the file to be loaded. This can also be a data URI.
  40. * @param {function(Array<Object>)} onLoad - Executed when the loading process has been finished.
  41. * @param {onProgressCallback} onProgress - Executed while the loading is in progress.
  42. * @param {onErrorCallback} onError - Executed when errors occur.
  43. */
  44. load( url, onLoad, onProgress, onError ) {
  45. const scope = this;
  46. const loader = new FileLoader( scope.manager );
  47. loader.setPath( scope.path );
  48. loader.setResponseType( 'arraybuffer' );
  49. loader.setRequestHeader( scope.requestHeader );
  50. loader.load( url, function ( buffer ) {
  51. try {
  52. onLoad( scope.parse( buffer ) );
  53. } catch ( e ) {
  54. if ( onError ) {
  55. onError( e );
  56. } else {
  57. console.error( e );
  58. }
  59. scope.manager.itemError( url );
  60. }
  61. }, onProgress, onError );
  62. }
  63. /**
  64. * Parses the given VOX data and returns the resulting chunks.
  65. *
  66. * @param {ArrayBuffer} buffer - The raw VOX data as an array buffer.
  67. * @return {Array<Object>} The parsed chunks.
  68. */
  69. parse( buffer ) {
  70. const data = new DataView( buffer );
  71. const id = data.getUint32( 0, true );
  72. const version = data.getUint32( 4, true );
  73. if ( id !== 542658390 ) {
  74. console.error( 'THREE.VOXLoader: Invalid VOX file.' );
  75. return;
  76. }
  77. if ( version !== 150 ) {
  78. console.error( 'THREE.VOXLoader: Invalid VOX file. Unsupported version:', version );
  79. return;
  80. }
  81. const DEFAULT_PALETTE = [
  82. 0x00000000, 0xffffffff, 0xffccffff, 0xff99ffff, 0xff66ffff, 0xff33ffff, 0xff00ffff, 0xffffccff,
  83. 0xffccccff, 0xff99ccff, 0xff66ccff, 0xff33ccff, 0xff00ccff, 0xffff99ff, 0xffcc99ff, 0xff9999ff,
  84. 0xff6699ff, 0xff3399ff, 0xff0099ff, 0xffff66ff, 0xffcc66ff, 0xff9966ff, 0xff6666ff, 0xff3366ff,
  85. 0xff0066ff, 0xffff33ff, 0xffcc33ff, 0xff9933ff, 0xff6633ff, 0xff3333ff, 0xff0033ff, 0xffff00ff,
  86. 0xffcc00ff, 0xff9900ff, 0xff6600ff, 0xff3300ff, 0xff0000ff, 0xffffffcc, 0xffccffcc, 0xff99ffcc,
  87. 0xff66ffcc, 0xff33ffcc, 0xff00ffcc, 0xffffcccc, 0xffcccccc, 0xff99cccc, 0xff66cccc, 0xff33cccc,
  88. 0xff00cccc, 0xffff99cc, 0xffcc99cc, 0xff9999cc, 0xff6699cc, 0xff3399cc, 0xff0099cc, 0xffff66cc,
  89. 0xffcc66cc, 0xff9966cc, 0xff6666cc, 0xff3366cc, 0xff0066cc, 0xffff33cc, 0xffcc33cc, 0xff9933cc,
  90. 0xff6633cc, 0xff3333cc, 0xff0033cc, 0xffff00cc, 0xffcc00cc, 0xff9900cc, 0xff6600cc, 0xff3300cc,
  91. 0xff0000cc, 0xffffff99, 0xffccff99, 0xff99ff99, 0xff66ff99, 0xff33ff99, 0xff00ff99, 0xffffcc99,
  92. 0xffcccc99, 0xff99cc99, 0xff66cc99, 0xff33cc99, 0xff00cc99, 0xffff9999, 0xffcc9999, 0xff999999,
  93. 0xff669999, 0xff339999, 0xff009999, 0xffff6699, 0xffcc6699, 0xff996699, 0xff666699, 0xff336699,
  94. 0xff006699, 0xffff3399, 0xffcc3399, 0xff993399, 0xff663399, 0xff333399, 0xff003399, 0xffff0099,
  95. 0xffcc0099, 0xff990099, 0xff660099, 0xff330099, 0xff000099, 0xffffff66, 0xffccff66, 0xff99ff66,
  96. 0xff66ff66, 0xff33ff66, 0xff00ff66, 0xffffcc66, 0xffcccc66, 0xff99cc66, 0xff66cc66, 0xff33cc66,
  97. 0xff00cc66, 0xffff9966, 0xffcc9966, 0xff999966, 0xff669966, 0xff339966, 0xff009966, 0xffff6666,
  98. 0xffcc6666, 0xff996666, 0xff666666, 0xff336666, 0xff006666, 0xffff3366, 0xffcc3366, 0xff993366,
  99. 0xff663366, 0xff333366, 0xff003366, 0xffff0066, 0xffcc0066, 0xff990066, 0xff660066, 0xff330066,
  100. 0xff000066, 0xffffff33, 0xffccff33, 0xff99ff33, 0xff66ff33, 0xff33ff33, 0xff00ff33, 0xffffcc33,
  101. 0xffcccc33, 0xff99cc33, 0xff66cc33, 0xff33cc33, 0xff00cc33, 0xffff9933, 0xffcc9933, 0xff999933,
  102. 0xff669933, 0xff339933, 0xff009933, 0xffff6633, 0xffcc6633, 0xff996633, 0xff666633, 0xff336633,
  103. 0xff006633, 0xffff3333, 0xffcc3333, 0xff993333, 0xff663333, 0xff333333, 0xff003333, 0xffff0033,
  104. 0xffcc0033, 0xff990033, 0xff660033, 0xff330033, 0xff000033, 0xffffff00, 0xffccff00, 0xff99ff00,
  105. 0xff66ff00, 0xff33ff00, 0xff00ff00, 0xffffcc00, 0xffcccc00, 0xff99cc00, 0xff66cc00, 0xff33cc00,
  106. 0xff00cc00, 0xffff9900, 0xffcc9900, 0xff999900, 0xff669900, 0xff339900, 0xff009900, 0xffff6600,
  107. 0xffcc6600, 0xff996600, 0xff666600, 0xff336600, 0xff006600, 0xffff3300, 0xffcc3300, 0xff993300,
  108. 0xff663300, 0xff333300, 0xff003300, 0xffff0000, 0xffcc0000, 0xff990000, 0xff660000, 0xff330000,
  109. 0xff0000ee, 0xff0000dd, 0xff0000bb, 0xff0000aa, 0xff000088, 0xff000077, 0xff000055, 0xff000044,
  110. 0xff000022, 0xff000011, 0xff00ee00, 0xff00dd00, 0xff00bb00, 0xff00aa00, 0xff008800, 0xff007700,
  111. 0xff005500, 0xff004400, 0xff002200, 0xff001100, 0xffee0000, 0xffdd0000, 0xffbb0000, 0xffaa0000,
  112. 0xff880000, 0xff770000, 0xff550000, 0xff440000, 0xff220000, 0xff110000, 0xffeeeeee, 0xffdddddd,
  113. 0xffbbbbbb, 0xffaaaaaa, 0xff888888, 0xff777777, 0xff555555, 0xff444444, 0xff222222, 0xff111111
  114. ];
  115. let i = 8;
  116. let chunk;
  117. const chunks = [];
  118. while ( i < data.byteLength ) {
  119. let id = '';
  120. for ( let j = 0; j < 4; j ++ ) {
  121. id += String.fromCharCode( data.getUint8( i ++ ) );
  122. }
  123. const chunkSize = data.getUint32( i, true ); i += 4;
  124. i += 4; // childChunks
  125. if ( id === 'SIZE' ) {
  126. const x = data.getUint32( i, true ); i += 4;
  127. const y = data.getUint32( i, true ); i += 4;
  128. const z = data.getUint32( i, true ); i += 4;
  129. chunk = {
  130. palette: DEFAULT_PALETTE,
  131. size: { x: x, y: y, z: z },
  132. };
  133. chunks.push( chunk );
  134. i += chunkSize - ( 3 * 4 );
  135. } else if ( id === 'XYZI' ) {
  136. const numVoxels = data.getUint32( i, true ); i += 4;
  137. chunk.data = new Uint8Array( buffer, i, numVoxels * 4 );
  138. i += numVoxels * 4;
  139. } else if ( id === 'RGBA' ) {
  140. const palette = [ 0 ];
  141. for ( let j = 0; j < 256; j ++ ) {
  142. palette[ j + 1 ] = data.getUint32( i, true ); i += 4;
  143. }
  144. chunk.palette = palette;
  145. } else {
  146. // console.log( id, chunkSize, childChunks );
  147. i += chunkSize;
  148. }
  149. }
  150. return chunks;
  151. }
  152. }
  153. /**
  154. * A VOX mesh.
  155. *
  156. * Instances of this class are created from the loaded chunks of {@link VOXLoader}.
  157. *
  158. * @augments Mesh
  159. */
  160. class VOXMesh extends Mesh {
  161. /**
  162. * Constructs a new VOX mesh.
  163. *
  164. * @param {Object} chunk - A VOX chunk loaded via {@link VOXLoader}.
  165. */
  166. constructor( chunk ) {
  167. const data = chunk.data;
  168. const size = chunk.size;
  169. const palette = chunk.palette;
  170. //
  171. const vertices = [];
  172. const colors = [];
  173. const nx = [ 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 0, 0, 0, 1 ];
  174. const px = [ 1, 0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0 ];
  175. const py = [ 0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1 ];
  176. const ny = [ 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0 ];
  177. const nz = [ 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 0 ];
  178. const pz = [ 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 1 ];
  179. const _color = new Color();
  180. function add( tile, x, y, z, r, g, b ) {
  181. x -= size.x / 2;
  182. y -= size.z / 2;
  183. z += size.y / 2;
  184. for ( let i = 0; i < 18; i += 3 ) {
  185. _color.setRGB( r, g, b, SRGBColorSpace );
  186. vertices.push( tile[ i + 0 ] + x, tile[ i + 1 ] + y, tile[ i + 2 ] + z );
  187. colors.push( _color.r, _color.g, _color.b );
  188. }
  189. }
  190. // Store data in a volume for sampling
  191. const offsety = size.x;
  192. const offsetz = size.x * size.y;
  193. const array = new Uint8Array( size.x * size.y * size.z );
  194. for ( let j = 0; j < data.length; j += 4 ) {
  195. const x = data[ j + 0 ];
  196. const y = data[ j + 1 ];
  197. const z = data[ j + 2 ];
  198. const index = x + ( y * offsety ) + ( z * offsetz );
  199. array[ index ] = 255;
  200. }
  201. // Construct geometry
  202. let hasColors = false;
  203. for ( let j = 0; j < data.length; j += 4 ) {
  204. const x = data[ j + 0 ];
  205. const y = data[ j + 1 ];
  206. const z = data[ j + 2 ];
  207. const c = data[ j + 3 ];
  208. const hex = palette[ c ];
  209. const r = ( hex >> 0 & 0xff ) / 0xff;
  210. const g = ( hex >> 8 & 0xff ) / 0xff;
  211. const b = ( hex >> 16 & 0xff ) / 0xff;
  212. if ( r > 0 || g > 0 || b > 0 ) hasColors = true;
  213. const index = x + ( y * offsety ) + ( z * offsetz );
  214. if ( array[ index + 1 ] === 0 || x === size.x - 1 ) add( px, x, z, - y, r, g, b );
  215. if ( array[ index - 1 ] === 0 || x === 0 ) add( nx, x, z, - y, r, g, b );
  216. if ( array[ index + offsety ] === 0 || y === size.y - 1 ) add( ny, x, z, - y, r, g, b );
  217. if ( array[ index - offsety ] === 0 || y === 0 ) add( py, x, z, - y, r, g, b );
  218. if ( array[ index + offsetz ] === 0 || z === size.z - 1 ) add( pz, x, z, - y, r, g, b );
  219. if ( array[ index - offsetz ] === 0 || z === 0 ) add( nz, x, z, - y, r, g, b );
  220. }
  221. const geometry = new BufferGeometry();
  222. geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
  223. geometry.computeVertexNormals();
  224. const material = new MeshStandardMaterial();
  225. if ( hasColors ) {
  226. geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
  227. material.vertexColors = true;
  228. }
  229. super( geometry, material );
  230. }
  231. }
  232. /**
  233. * A VOX 3D texture.
  234. *
  235. * Instances of this class are created from the loaded chunks of {@link VOXLoader}.
  236. *
  237. * @augments Data3DTexture
  238. */
  239. class VOXData3DTexture extends Data3DTexture {
  240. /**
  241. * Constructs a new VOX 3D texture.
  242. *
  243. * @param {Object} chunk - A VOX chunk loaded via {@link VOXLoader}.
  244. */
  245. constructor( chunk ) {
  246. const data = chunk.data;
  247. const size = chunk.size;
  248. const offsety = size.x;
  249. const offsetz = size.x * size.y;
  250. const array = new Uint8Array( size.x * size.y * size.z );
  251. for ( let j = 0; j < data.length; j += 4 ) {
  252. const x = data[ j + 0 ];
  253. const y = data[ j + 1 ];
  254. const z = data[ j + 2 ];
  255. const index = x + ( y * offsety ) + ( z * offsetz );
  256. array[ index ] = 255;
  257. }
  258. super( array, size.x, size.y, size.z );
  259. this.format = RedFormat;
  260. this.minFilter = NearestFilter;
  261. this.magFilter = LinearFilter;
  262. this.unpackAlignment = 1;
  263. this.needsUpdate = true;
  264. }
  265. }
  266. export { VOXLoader, VOXMesh, VOXData3DTexture };