DRACOLoader.js 11 KB

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