DRACOLoader.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  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() {
  40. let dracoDecoder;
  41. if (typeof DracoModule === 'function') {
  42. dracoDecoder = DracoModule();
  43. } else {
  44. console.error('THREE.DRACOLoader: DracoModule not found.');
  45. return;
  46. }
  47. return function(rawBuffer) {
  48. const scope = this;
  49. /*
  50. * Here is how to use Draco Javascript decoder and get the geometry.
  51. */
  52. const buffer = new dracoDecoder.DecoderBuffer();
  53. buffer.Init(new Int8Array(rawBuffer), rawBuffer.byteLength);
  54. const wrapper = new dracoDecoder.WebIDLWrapper();
  55. /*
  56. * Determine what type is this file: mesh or point cloud.
  57. */
  58. const geometryType = wrapper.GetEncodedGeometryType(buffer);
  59. if (geometryType == dracoDecoder.TRIANGULAR_MESH) {
  60. if (this.verbosity > 0) {
  61. console.log('Loaded a mesh.');
  62. }
  63. } else if (geometryType == dracoDecoder.POINT_CLOUD) {
  64. if (this.verbosity > 0) {
  65. console.log('Loaded a point cloud.');
  66. }
  67. } else {
  68. const errorMsg = 'THREE.DRACOLoader: Unknown geometry type.'
  69. console.error(errorMsg);
  70. throw new Error(errorMsg);
  71. }
  72. return scope.convertDracoGeometryTo3JS(wrapper, geometryType, buffer,
  73. dracoDecoder);
  74. }
  75. } )(),
  76. convertDracoGeometryTo3JS: function(wrapper, geometryType, buffer,
  77. dracoDecoder) {
  78. let dracoGeometry;
  79. const start_time = performance.now();
  80. if (geometryType == dracoDecoder.TRIANGULAR_MESH) {
  81. dracoGeometry = wrapper.DecodeMeshFromBuffer(buffer);
  82. } else {
  83. dracoGeometry = wrapper.DecodePointCloudFromBuffer(buffer);
  84. }
  85. const decode_end = performance.now();
  86. dracoDecoder.destroy(buffer);
  87. /*
  88. * Example on how to retrieve mesh and attributes.
  89. */
  90. let numFaces, numPoints;
  91. let numVertexCoordinates, numTextureCoordinates, numAttributes;
  92. // For output basic geometry information.
  93. let geometryInfoStr;
  94. if (geometryType == dracoDecoder.TRIANGULAR_MESH) {
  95. numFaces = dracoGeometry.num_faces();
  96. if (this.verbosity > 0) {
  97. console.log('Number of faces loaded: ' + numFaces.toString());
  98. }
  99. } else {
  100. numFaces = 0;
  101. }
  102. numPoints = dracoGeometry.num_points();
  103. numVertexCoordinates = numPoints * 3;
  104. numTextureCoordinates = numPoints * 2;
  105. numAttributes = dracoGeometry.num_attributes();
  106. if (this.verbosity > 0) {
  107. console.log('Number of points loaded: ' + numPoints.toString());
  108. console.log('Number of attributes loaded: ' +
  109. numAttributes.toString());
  110. }
  111. // Get position attribute. Must exists.
  112. const posAttId = wrapper.GetAttributeId(dracoGeometry,
  113. dracoDecoder.POSITION);
  114. if (posAttId == -1) {
  115. const errorMsg = 'THREE.DRACOLoader: No position attribute found.';
  116. console.error(errorMsg);
  117. dracoDecoder.destroy(wrapper);
  118. dracoDecoder.destroy(dracoGeometry);
  119. throw new Error(errorMsg);
  120. }
  121. const posAttribute = wrapper.GetAttribute(dracoGeometry, posAttId);
  122. const posAttributeData = new dracoDecoder.DracoFloat32Array();
  123. wrapper.GetAttributeFloatForAllPoints(
  124. dracoGeometry, posAttribute, posAttributeData);
  125. // Get color attributes if exists.
  126. const colorAttId = wrapper.GetAttributeId(dracoGeometry,
  127. dracoDecoder.COLOR);
  128. let colAttributeData;
  129. if (colorAttId != -1) {
  130. if (this.verbosity > 0) {
  131. console.log('Loaded color attribute.');
  132. }
  133. const colAttribute = wrapper.GetAttribute(dracoGeometry, colorAttId);
  134. colAttributeData = new dracoDecoder.DracoFloat32Array();
  135. wrapper.GetAttributeFloatForAllPoints(dracoGeometry, colAttribute,
  136. colAttributeData);
  137. }
  138. // Get normal attributes if exists.
  139. const normalAttId =
  140. wrapper.GetAttributeId(dracoGeometry, dracoDecoder.NORMAL);
  141. let norAttributeData;
  142. if (normalAttId != -1) {
  143. if (this.verbosity > 0) {
  144. console.log('Loaded normal attribute.');
  145. }
  146. const norAttribute = wrapper.GetAttribute(dracoGeometry, normalAttId);
  147. norAttributeData = new dracoDecoder.DracoFloat32Array();
  148. wrapper.GetAttributeFloatForAllPoints(dracoGeometry, norAttribute,
  149. norAttributeData);
  150. }
  151. // Get texture coord attributes if exists.
  152. const texCoordAttId =
  153. wrapper.GetAttributeId(dracoGeometry, dracoDecoder.TEX_COORD);
  154. let textCoordAttributeData;
  155. if (texCoordAttId != -1) {
  156. if (this.verbosity > 0) {
  157. console.log('Loaded texture coordinate attribute.');
  158. }
  159. const texCoordAttribute = wrapper.GetAttribute(dracoGeometry,
  160. texCoordAttId);
  161. textCoordAttributeData = new dracoDecoder.DracoFloat32Array();
  162. wrapper.GetAttributeFloatForAllPoints(dracoGeometry,
  163. texCoordAttribute,
  164. textCoordAttributeData);
  165. }
  166. // Structure for converting to THREEJS geometry later.
  167. const numIndices = numFaces * 3;
  168. const geometryBuffer = {
  169. indices: new Uint32Array(numIndices),
  170. vertices: new Float32Array(numVertexCoordinates),
  171. normals: new Float32Array(numVertexCoordinates),
  172. uvs: new Float32Array(numTextureCoordinates),
  173. colors: new Float32Array(numVertexCoordinates)
  174. };
  175. for (let i = 0; i < numVertexCoordinates; i += 3) {
  176. geometryBuffer.vertices[i] = posAttributeData.GetValue(i);
  177. geometryBuffer.vertices[i + 1] = posAttributeData.GetValue(i + 1);
  178. geometryBuffer.vertices[i + 2] = posAttributeData.GetValue(i + 2);
  179. // Add color.
  180. // ThreeJS vertex colors need to be normalized to properly display
  181. if (colorAttId != -1) {
  182. geometryBuffer.colors[i] = colAttributeData.GetValue(i) / 255;
  183. geometryBuffer.colors[i + 1] =
  184. colAttributeData.GetValue(i + 1) / 255;
  185. geometryBuffer.colors[i + 2] =
  186. colAttributeData.GetValue(i + 2) / 255;
  187. } else {
  188. // Default is white. This is faster than TypedArray.fill().
  189. geometryBuffer.colors[i] = 1.0;
  190. geometryBuffer.colors[i + 1] = 1.0;
  191. geometryBuffer.colors[i + 2] = 1.0;
  192. }
  193. // Add normal.
  194. if (normalAttId != -1) {
  195. geometryBuffer.normals[i] = norAttributeData.GetValue(i);
  196. geometryBuffer.normals[i + 1] = norAttributeData.GetValue(i + 1);
  197. geometryBuffer.normals[i + 2] = norAttributeData.GetValue(i + 2);
  198. }
  199. }
  200. // Add texture coordinates.
  201. if (texCoordAttId != -1) {
  202. for (let i = 0; i < numTextureCoordinates; i += 2) {
  203. geometryBuffer.uvs[i] = textCoordAttributeData.GetValue(i);
  204. geometryBuffer.uvs[i + 1] = textCoordAttributeData.GetValue(i + 1);
  205. }
  206. }
  207. dracoDecoder.destroy(posAttributeData);
  208. if (colorAttId != -1)
  209. dracoDecoder.destroy(colAttributeData);
  210. if (normalAttId != -1)
  211. dracoDecoder.destroy(norAttributeData);
  212. if (texCoordAttId != -1)
  213. dracoDecoder.destroy(textCoordAttributeData);
  214. // For mesh, we need to generate the faces.
  215. if (geometryType == dracoDecoder.TRIANGULAR_MESH) {
  216. const ia = new dracoDecoder.DracoInt32Array();
  217. for (let i = 0; i < numFaces; ++i) {
  218. wrapper.GetFaceFromMesh(dracoGeometry, i, ia);
  219. const index = i * 3;
  220. geometryBuffer.indices[index] = ia.GetValue(0);
  221. geometryBuffer.indices[index + 1] = ia.GetValue(1);
  222. geometryBuffer.indices[index + 2] = ia.GetValue(2);
  223. }
  224. dracoDecoder.destroy(ia);
  225. }
  226. dracoDecoder.destroy(wrapper);
  227. dracoDecoder.destroy(dracoGeometry);
  228. // Import data to Three JS geometry.
  229. const geometry = new THREE.BufferGeometry();
  230. if (geometryType == dracoDecoder.TRIANGULAR_MESH) {
  231. geometry.setIndex(new(geometryBuffer.indices.length > 65535 ?
  232. THREE.Uint32BufferAttribute : THREE.Uint16BufferAttribute)
  233. (geometryBuffer.indices, 1));
  234. }
  235. geometry.addAttribute('position',
  236. new THREE.Float32BufferAttribute(geometryBuffer.vertices, 3));
  237. geometry.addAttribute('color',
  238. new THREE.Float32BufferAttribute(geometryBuffer.colors, 3));
  239. if (normalAttId != -1) {
  240. geometry.addAttribute('normal',
  241. new THREE.Float32BufferAttribute(geometryBuffer.normals, 3));
  242. }
  243. if (texCoordAttId != -1) {
  244. geometry.addAttribute('uv',
  245. new THREE.Float32BufferAttribute(geometryBuffer.uvs, 2));
  246. }
  247. this.decode_time = decode_end - start_time;
  248. this.import_time = performance.now() - decode_end;
  249. if (this.verbosity > 0) {
  250. console.log('Decode time: ' + this.decode_time);
  251. console.log('Import time: ' + this.import_time);
  252. }
  253. return geometry;
  254. }
  255. };