DRACOLoader.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  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. THREE.DRACOLoader = function(manager) {
  16. this.manager = (manager !== undefined) ? manager :
  17. THREE.DefaultLoadingManager;
  18. this.materials = null;
  19. };
  20. const DracoModule = Module;
  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(rawBuffer) {
  36. const scope = this;
  37. /*
  38. * Here is how to use Draco Javascript decoder and get the geometry.
  39. */
  40. const buffer = new DracoModule.DecoderBuffer();
  41. buffer.Init(new Int8Array(rawBuffer), rawBuffer.byteLength);
  42. const wrapper = new DracoModule.WebIDLWrapper();
  43. /*
  44. * Determine what type is this file, mesh or point cloud.
  45. */
  46. const geometryType = wrapper.GetEncodedGeometryType(buffer);
  47. if (geometryType == DracoModule.TRIANGULAR_MESH) {
  48. //fileDisplayArea.innerText = "Loaded a mesh.\n";
  49. } else if (geometryType == DracoModule.POINT_CLOUD) {
  50. //fileDisplayArea.innerText = "Loaded a point cloud.\n";
  51. } else {
  52. const errorMsg = "Error: Unknown geometry type.";
  53. //fileDisplayArea.innerText = errorMsg;
  54. throw new Error(errorMsg);
  55. }
  56. return scope.convertDracoGeometryTo3JS(wrapper, geometryType, buffer);
  57. },
  58. convertDracoGeometryTo3JS: function(wrapper, geometryType, buffer) {
  59. let dracoGeometry;
  60. if (geometryType == DracoModule.TRIANGULAR_MESH) {
  61. dracoGeometry = wrapper.DecodeMeshFromBuffer(buffer);
  62. } else {
  63. dracoGeometry = wrapper.DecodePointCloudFromBuffer(buffer);
  64. }
  65. DracoModule.destroy(buffer);
  66. /*
  67. * Example on how to retrieve mesh and attributes.
  68. */
  69. let numFaces, numPoints, numVertexCoordinates, numAttributes;
  70. // For output basic geometry information.
  71. let geometryInfoStr;
  72. if (geometryType == DracoModule.TRIANGULAR_MESH) {
  73. numFaces = dracoGeometry.num_faces();
  74. geometryInfoStr += "Number of faces loaded: " + numFaces.toString()
  75. + ".\n";
  76. } else {
  77. numFaces = 0;
  78. }
  79. numPoints = dracoGeometry.num_points();
  80. numVertexCoordinates = numPoints * 3;
  81. numAttributes = dracoGeometry.num_attributes();
  82. geometryInfoStr = "Number of points loaded: " + numPoints.toString()
  83. + ".\n";
  84. geometryInfoStr += "Number of attributes loaded: " +
  85. numAttributes.toString() + ".\n";
  86. // Get position attribute. Must exists.
  87. const posAttId = wrapper.GetAttributeId(dracoGeometry,
  88. Module.POSITION);
  89. if (posAttId == -1) {
  90. const errorMsg = "No position attribute found in the mesh.";
  91. //fileDisplayArea.innerText = errorMsg;
  92. DracoModule.destroy(wrapper);
  93. DracoModule.destroy(dracoGeometry);
  94. throw new Error(errorMsg);
  95. }
  96. const posAttribute = wrapper.GetAttribute(dracoGeometry, posAttId);
  97. const posAttributeData = new DracoModule.DracoFloat32Array();
  98. wrapper.GetAttributeFloatForAllPoints(
  99. dracoGeometry, posAttribute, posAttributeData);
  100. // Get color attributes if exists.
  101. const colorAttId = wrapper.GetAttributeId(dracoGeometry, Module.COLOR);
  102. let colAttributeData;
  103. if (colorAttId != -1) {
  104. geometryInfoStr += "\nLoaded color attribute.\n";
  105. const colAttribute = wrapper.GetAttribute(dracoGeometry, colorAttId);
  106. colAttributeData = new DracoModule.DracoFloat32Array();
  107. wrapper.GetAttributeFloatForAllPoints(dracoGeometry, colAttribute,
  108. colAttributeData);
  109. }
  110. // Get normal attributes if exists.
  111. const normalAttId =
  112. wrapper.GetAttributeId(dracoGeometry, Module.NORMAL);
  113. let norAttributeData;
  114. if (normalAttId != -1) {
  115. geometryInfoStr += "\nLoaded normal attribute.\n";
  116. const norAttribute = wrapper.GetAttribute(dracoGeometry, normalAttId);
  117. norAttributeData = new DracoModule.DracoFloat32Array();
  118. wrapper.GetAttributeFloatForAllPoints(dracoGeometry, norAttribute,
  119. norAttributeData);
  120. }
  121. // Structure for converting to THREEJS geometry later.
  122. const geometryBuffer = {
  123. indices: [],
  124. vertices: [],
  125. normals: [],
  126. uvs: [],
  127. colors: []
  128. };
  129. for (let i = 0; i < numVertexCoordinates; i += 3) {
  130. geometryBuffer.vertices.push(
  131. posAttributeData.GetValue(i),
  132. posAttributeData.GetValue(i + 1),
  133. posAttributeData.GetValue(i + 2));
  134. // Add color.
  135. if (colorAttId != -1) {
  136. geometryBuffer.colors.push(
  137. colAttributeData.GetValue(i),
  138. colAttributeData.GetValue(i + 1),
  139. colAttributeData.GetValue(i + 2));
  140. } else {
  141. // Default is white.
  142. geometryBuffer.colors.push(1.0, 1.0, 1.0);
  143. }
  144. // Add normal.
  145. if (normalAttId != -1) {
  146. geometryBuffer.normals.push(
  147. norAttributeData.GetValue(i),
  148. norAttributeData.GetValue(i + 1),
  149. norAttributeData.GetValue(i + 2));
  150. }
  151. }
  152. DracoModule.destroy(posAttributeData);
  153. if (colorAttId != -1)
  154. DracoModule.destroy(colAttributeData);
  155. if (normalAttId != -1)
  156. DracoModule.destroy(norAttributeData);
  157. // For mesh, we need to generate the faces.
  158. if (geometryType == DracoModule.TRIANGULAR_MESH) {
  159. const numIndices = numFaces * 3;
  160. const ia = new DracoInt32Array();
  161. for (let i = 0; i < numFaces; ++i) {
  162. wrapper.GetFaceFromMesh(dracoGeometry, i, ia);
  163. geometryBuffer.indices.push(
  164. ia.GetValue(0), ia.GetValue(1), ia.GetValue(2));
  165. }
  166. DracoModule.destroy(ia);
  167. }
  168. DracoModule.destroy(wrapper);
  169. DracoModule.destroy(dracoGeometry);
  170. //fileDisplayArea.innerText += geometryInfoStr;
  171. // Import data to Three JS geometry.
  172. const geometry = new THREE.BufferGeometry();
  173. if (geometryType == DracoModule.TRIANGULAR_MESH) {
  174. geometry.setIndex(new(geometryBuffer.indices.length > 65535 ?
  175. THREE.Uint32BufferAttribute : THREE.Uint16BufferAttribute)
  176. (geometryBuffer.indices, 1));
  177. }
  178. geometry.addAttribute('position',
  179. new THREE.Float32BufferAttribute(geometryBuffer.vertices, 3));
  180. geometry.addAttribute('color',
  181. new THREE.Float32BufferAttribute(geometryBuffer.colors, 3));
  182. if (normalAttId != -1) {
  183. geometry.addAttribute('normal',
  184. new THREE.Float32BufferAttribute(geometryBuffer.normals, 3));
  185. }
  186. return geometry;
  187. }
  188. };