DRACOLoader.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. // Copyright 2016 The Draco Authors.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. //
  15. 'use strict';
  16. THREE.DRACOLoader = function(manager) {
  17. this.manager = (manager !== undefined) ? manager :
  18. THREE.DefaultLoadingManager;
  19. this.materials = null;
  20. this.verbosity = 0;
  21. };
  22. THREE.DRACOLoader.prototype = {
  23. constructor: THREE.DRACOLoader,
  24. load: function(url, onLoad, onProgress, onError) {
  25. const scope = this;
  26. const loader = new THREE.FileLoader(scope.manager);
  27. loader.setPath(this.path);
  28. loader.setResponseType('arraybuffer');
  29. loader.load(url, function(blob) {
  30. onLoad(scope.decodeDracoFile(blob));
  31. }, onProgress, onError);
  32. },
  33. setPath: function(value) {
  34. this.path = value;
  35. },
  36. setVerbosity: function(level) {
  37. this.verbosity = level;
  38. },
  39. decodeDracoFile: function(rawBuffer) {
  40. const dracoDecoder = THREE.DRACOLoader.getDecoder();
  41. /*
  42. * Here is how to use Draco Javascript decoder and get the geometry.
  43. */
  44. const buffer = new dracoDecoder.DecoderBuffer();
  45. buffer.Init(new Int8Array(rawBuffer), rawBuffer.byteLength);
  46. const wrapper = new dracoDecoder.WebIDLWrapper();
  47. /*
  48. * Determine what type is this file: mesh or point cloud.
  49. */
  50. const geometryType = wrapper.GetEncodedGeometryType(buffer);
  51. if (geometryType == dracoDecoder.TRIANGULAR_MESH) {
  52. if (this.verbosity > 0) {
  53. console.log('Loaded a mesh.');
  54. }
  55. } else if (geometryType == dracoDecoder.POINT_CLOUD) {
  56. if (this.verbosity > 0) {
  57. console.log('Loaded a point cloud.');
  58. }
  59. } else {
  60. const errorMsg = 'THREE.DRACOLoader: Unknown geometry type.'
  61. console.error(errorMsg);
  62. throw new Error(errorMsg);
  63. }
  64. return this.convertDracoGeometryTo3JS(wrapper, geometryType, buffer);
  65. },
  66. convertDracoGeometryTo3JS: function(wrapper, geometryType, buffer) {
  67. const dracoDecoder = THREE.DRACOLoader.getDecoder();
  68. let dracoGeometry;
  69. const start_time = performance.now();
  70. if (geometryType == dracoDecoder.TRIANGULAR_MESH) {
  71. dracoGeometry = wrapper.DecodeMeshFromBuffer(buffer);
  72. } else {
  73. dracoGeometry = wrapper.DecodePointCloudFromBuffer(buffer);
  74. }
  75. const decode_end = performance.now();
  76. dracoDecoder.destroy(buffer);
  77. /*
  78. * Example on how to retrieve mesh and attributes.
  79. */
  80. let numFaces, numPoints;
  81. let numVertexCoordinates, numTextureCoordinates, numAttributes;
  82. // For output basic geometry information.
  83. let geometryInfoStr;
  84. if (geometryType == dracoDecoder.TRIANGULAR_MESH) {
  85. numFaces = dracoGeometry.num_faces();
  86. if (this.verbosity > 0) {
  87. console.log('Number of faces loaded: ' + numFaces.toString());
  88. }
  89. } else {
  90. numFaces = 0;
  91. }
  92. numPoints = dracoGeometry.num_points();
  93. numVertexCoordinates = numPoints * 3;
  94. numTextureCoordinates = numPoints * 2;
  95. numAttributes = dracoGeometry.num_attributes();
  96. if (this.verbosity > 0) {
  97. console.log('Number of points loaded: ' + numPoints.toString());
  98. console.log('Number of attributes loaded: ' +
  99. numAttributes.toString());
  100. }
  101. // Get position attribute. Must exists.
  102. const posAttId = wrapper.GetAttributeId(dracoGeometry,
  103. dracoDecoder.POSITION);
  104. if (posAttId == -1) {
  105. const errorMsg = 'THREE.DRACOLoader: No position attribute found.';
  106. console.error(errorMsg);
  107. dracoDecoder.destroy(wrapper);
  108. dracoDecoder.destroy(dracoGeometry);
  109. throw new Error(errorMsg);
  110. }
  111. const posAttribute = wrapper.GetAttribute(dracoGeometry, posAttId);
  112. const posAttributeData = new dracoDecoder.DracoFloat32Array();
  113. wrapper.GetAttributeFloatForAllPoints(
  114. dracoGeometry, posAttribute, posAttributeData);
  115. // Get color attributes if exists.
  116. const colorAttId = wrapper.GetAttributeId(dracoGeometry,
  117. dracoDecoder.COLOR);
  118. let colAttributeData;
  119. if (colorAttId != -1) {
  120. if (this.verbosity > 0) {
  121. console.log('Loaded color attribute.');
  122. }
  123. const colAttribute = wrapper.GetAttribute(dracoGeometry, colorAttId);
  124. colAttributeData = new dracoDecoder.DracoFloat32Array();
  125. wrapper.GetAttributeFloatForAllPoints(dracoGeometry, colAttribute,
  126. colAttributeData);
  127. }
  128. // Get normal attributes if exists.
  129. const normalAttId =
  130. wrapper.GetAttributeId(dracoGeometry, dracoDecoder.NORMAL);
  131. let norAttributeData;
  132. if (normalAttId != -1) {
  133. if (this.verbosity > 0) {
  134. console.log('Loaded normal attribute.');
  135. }
  136. const norAttribute = wrapper.GetAttribute(dracoGeometry, normalAttId);
  137. norAttributeData = new dracoDecoder.DracoFloat32Array();
  138. wrapper.GetAttributeFloatForAllPoints(dracoGeometry, norAttribute,
  139. norAttributeData);
  140. }
  141. // Get texture coord attributes if exists.
  142. const texCoordAttId =
  143. wrapper.GetAttributeId(dracoGeometry, dracoDecoder.TEX_COORD);
  144. let textCoordAttributeData;
  145. if (texCoordAttId != -1) {
  146. if (this.verbosity > 0) {
  147. console.log('Loaded texture coordinate attribute.');
  148. }
  149. const texCoordAttribute = wrapper.GetAttribute(dracoGeometry,
  150. texCoordAttId);
  151. textCoordAttributeData = new dracoDecoder.DracoFloat32Array();
  152. wrapper.GetAttributeFloatForAllPoints(dracoGeometry,
  153. texCoordAttribute,
  154. textCoordAttributeData);
  155. }
  156. // Structure for converting to THREEJS geometry later.
  157. const numIndices = numFaces * 3;
  158. const geometryBuffer = {
  159. indices: new Uint32Array(numIndices),
  160. vertices: new Float32Array(numVertexCoordinates),
  161. normals: new Float32Array(numVertexCoordinates),
  162. uvs: new Float32Array(numTextureCoordinates),
  163. colors: new Float32Array(numVertexCoordinates)
  164. };
  165. for (let i = 0; i < numVertexCoordinates; i += 3) {
  166. geometryBuffer.vertices[i] = posAttributeData.GetValue(i);
  167. geometryBuffer.vertices[i + 1] = posAttributeData.GetValue(i + 1);
  168. geometryBuffer.vertices[i + 2] = posAttributeData.GetValue(i + 2);
  169. // Add color.
  170. // ThreeJS vertex colors need to be normalized to properly display
  171. if (colorAttId != -1) {
  172. geometryBuffer.colors[i] = colAttributeData.GetValue(i) / 255;
  173. geometryBuffer.colors[i + 1] =
  174. colAttributeData.GetValue(i + 1) / 255;
  175. geometryBuffer.colors[i + 2] =
  176. colAttributeData.GetValue(i + 2) / 255;
  177. } else {
  178. // Default is white. This is faster than TypedArray.fill().
  179. geometryBuffer.colors[i] = 1.0;
  180. geometryBuffer.colors[i + 1] = 1.0;
  181. geometryBuffer.colors[i + 2] = 1.0;
  182. }
  183. // Add normal.
  184. if (normalAttId != -1) {
  185. geometryBuffer.normals[i] = norAttributeData.GetValue(i);
  186. geometryBuffer.normals[i + 1] = norAttributeData.GetValue(i + 1);
  187. geometryBuffer.normals[i + 2] = norAttributeData.GetValue(i + 2);
  188. }
  189. }
  190. // Add texture coordinates.
  191. if (texCoordAttId != -1) {
  192. for (let i = 0; i < numTextureCoordinates; i += 2) {
  193. geometryBuffer.uvs[i] = textCoordAttributeData.GetValue(i);
  194. geometryBuffer.uvs[i + 1] = textCoordAttributeData.GetValue(i + 1);
  195. }
  196. }
  197. dracoDecoder.destroy(posAttributeData);
  198. if (colorAttId != -1)
  199. dracoDecoder.destroy(colAttributeData);
  200. if (normalAttId != -1)
  201. dracoDecoder.destroy(norAttributeData);
  202. if (texCoordAttId != -1)
  203. dracoDecoder.destroy(textCoordAttributeData);
  204. // For mesh, we need to generate the faces.
  205. if (geometryType == dracoDecoder.TRIANGULAR_MESH) {
  206. const ia = new dracoDecoder.DracoInt32Array();
  207. for (let i = 0; i < numFaces; ++i) {
  208. wrapper.GetFaceFromMesh(dracoGeometry, i, ia);
  209. const index = i * 3;
  210. geometryBuffer.indices[index] = ia.GetValue(0);
  211. geometryBuffer.indices[index + 1] = ia.GetValue(1);
  212. geometryBuffer.indices[index + 2] = ia.GetValue(2);
  213. }
  214. dracoDecoder.destroy(ia);
  215. }
  216. dracoDecoder.destroy(wrapper);
  217. dracoDecoder.destroy(dracoGeometry);
  218. // Import data to Three JS geometry.
  219. const geometry = new THREE.BufferGeometry();
  220. if (geometryType == dracoDecoder.TRIANGULAR_MESH) {
  221. geometry.setIndex(new(geometryBuffer.indices.length > 65535 ?
  222. THREE.Uint32BufferAttribute : THREE.Uint16BufferAttribute)
  223. (geometryBuffer.indices, 1));
  224. }
  225. geometry.addAttribute('position',
  226. new THREE.Float32BufferAttribute(geometryBuffer.vertices, 3));
  227. geometry.addAttribute('color',
  228. new THREE.Float32BufferAttribute(geometryBuffer.colors, 3));
  229. if (normalAttId != -1) {
  230. geometry.addAttribute('normal',
  231. new THREE.Float32BufferAttribute(geometryBuffer.normals, 3));
  232. }
  233. if (texCoordAttId != -1) {
  234. geometry.addAttribute('uv',
  235. new THREE.Float32BufferAttribute(geometryBuffer.uvs, 2));
  236. }
  237. this.decode_time = decode_end - start_time;
  238. this.import_time = performance.now() - decode_end;
  239. if (this.verbosity > 0) {
  240. console.log('Decode time: ' + this.decode_time);
  241. console.log('Import time: ' + this.import_time);
  242. }
  243. return geometry;
  244. },
  245. isVersionSupported: function(version) {
  246. return THREE.DRACOLoader.getDecoder().isVersionSupported(version);
  247. }
  248. };
  249. /**
  250. * Returns a singleton instance of the DracoModule decoder. Creating multiple
  251. * copies of the decoder is expensive.
  252. */
  253. THREE.DRACOLoader.getDecoder = (function() {
  254. let decoder;
  255. return function() {
  256. if (typeof DracoModule === 'undefined') {
  257. throw new Error('THREE.DRACOLoader: DracoModule not found.');
  258. }
  259. decoder = decoder || DracoModule();
  260. return decoder;
  261. };
  262. })();