API tools faq
paste
Guest User

Render DRC with MTL

a guest
Jan 8th, 2019
307
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.69 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <title>three.js webgl - loaders - Draco loader</title>
  6. <style>
  7. body {
  8. font-family: Monospace;
  9. background-color: #000;
  10. color: #fff;
  11. margin: 0px;
  12. overflow: hidden;
  13. }
  14. </style>
  15. </head>
  16.  
  17. <body>
  18. <div id="page-wrapper">
  19. <h1>Open a draco compressed file (.drc):</h1>
  20. <div>
  21. <input type="file" id="fileInput">
  22. </div>
  23. </div>
  24. <div>
  25. <pre id="decoderType"><pre>
  26. </div>
  27. <div>
  28. <pre id="fileDisplayArea"><pre>
  29. </div>
  30. <script src="https://cdn.rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
  31. <script src="DDSLoader.js"></script>
  32. <script src="DRACOLoader.js"></script>
  33. <script src="MTLLoader.js"></script>
  34. <script src="geometry_helper.js"></script>
  35. <script>
  36. 'use strict';
  37.  
  38. // Configure decoder and create loader.
  39. THREE.DRACOLoader.setDecoderPath( '../' );
  40. var dracoLoader = new THREE.DRACOLoader();
  41.  
  42. // (Optional) Pre-fetch decoder source files.
  43. THREE.DRACOLoader.getDecoderModule();
  44.  
  45. var camera, cameraTarget, scene, renderer, materials;
  46.  
  47. function init() {
  48. var container = document.createElement('div');
  49. document.body.appendChild(container);
  50.  
  51. camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15);
  52. camera.position.set(3, 0.15, 3);
  53. cameraTarget = new THREE.Vector3(0, 0, 0);
  54.  
  55. scene = new THREE.Scene();
  56. scene.fog = new THREE.Fog(0x72645b, 2, 15);
  57.  
  58.  
  59. // Ground
  60. var plane = new THREE.Mesh(
  61. new THREE.PlaneBufferGeometry(40, 40),
  62. new THREE.MeshPhongMaterial({color: 0x999999, specular: 0x101010}));
  63. plane.rotation.x = -Math.PI/2;
  64. plane.position.y = -0.5;
  65. scene.add(plane);
  66. plane.receiveShadow = true;
  67.  
  68. // Lights
  69. scene.add(new THREE.HemisphereLight(0x443333, 0x111122));
  70. addShadowedLight(1, 1, 1, 0xffffff, 1.35);
  71. addShadowedLight(0.5, 1, -1, 0xffaa00, 1);
  72.  
  73. var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
  74. scene.add( ambientLight );
  75. var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
  76. camera.add( pointLight );
  77. scene.add( camera );
  78.  
  79.  
  80. //MTL Loader
  81. THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
  82.  
  83. new THREE.MTLLoader()
  84. .load( './bed.mtl', function ( materials ) {
  85. materials.preload();
  86. new THREE.DRACOLoader()
  87. .setMaterials( materials )
  88. } );
  89.  
  90. // renderer
  91. renderer = new THREE.WebGLRenderer({antialias: true});
  92. renderer.setClearColor(scene.fog.color);
  93. renderer.setPixelRatio(window.devicePixelRatio);
  94. renderer.setSize(window.innerWidth, window.innerHeight);
  95. container.appendChild(renderer.domElement);
  96. window.addEventListener('resize', onWindowResize, false);
  97. }
  98.  
  99. function addShadowedLight(x, y, z, color, intensity) {
  100. var directionalLight = new THREE.DirectionalLight(color, intensity);
  101. directionalLight.position.set(x, y, z);
  102. scene.add(directionalLight);
  103. }
  104.  
  105. function onWindowResize() {
  106. camera.aspect = window.innerWidth / window.innerHeight;
  107. camera.updateProjectionMatrix();
  108. renderer.setSize(window.innerWidth, window.innerHeight);
  109. }
  110.  
  111. function animate() {
  112. requestAnimationFrame(animate);
  113. render();
  114. }
  115.  
  116. function render() {
  117. var timer = Date.now() * 0.0005;
  118. camera.position.x = Math.sin(timer) * 2.5;
  119. camera.position.z = Math.cos(timer) * 2.5;
  120. camera.lookAt(cameraTarget);
  121. renderer.render(scene, camera, materials);
  122. }
  123.  
  124. window.onload = function() {
  125. var fileInput = document.getElementById('fileInput');
  126. var fileDisplayArea = document.getElementById('fileDisplayArea');
  127.  
  128. fileInput.onclick = function() {
  129. this.value = '';
  130. }
  131.  
  132. fileInput.addEventListener('change', function(e) {
  133. var file = fileInput.files[0];
  134.  
  135. var reader = new FileReader();
  136. reader.onload = function(e) {
  137. // Enable logging to console output.
  138. dracoLoader.setVerbosity(1);
  139.  
  140. // To use triangle strips use:
  141. // dracoLoader.setDrawMode(THREE.TriangleStripDrawMode);
  142. dracoLoader.setDrawMode(THREE.TrianglesDrawMode);
  143.  
  144. // Skip dequantization of the position attribute. It will be done on the GPU.
  145. dracoLoader.setSkipDequantization('position', true);
  146. dracoLoader.decodeDracoFile(reader.result, function(bufferGeometry) {
  147. if (dracoLoader.decode_time !== undefined) {
  148. fileDisplayArea.innerText = 'Decode time = ' + dracoLoader.decode_time + '\n' +
  149. 'Import time = ' + dracoLoader.import_time;
  150. }
  151. var material = new THREE.MeshStandardMaterial({vertexColors: THREE.VertexColors});
  152. // If the position attribute is quantized, modify the material to perform
  153. // dequantization on the GPU.
  154. if (bufferGeometry.attributes['position'].isQuantized) {
  155. setDequantizationForMaterial(material, bufferGeometry);
  156. }
  157.  
  158. var geometry;
  159. // Point cloud does not have face indices.
  160. if (bufferGeometry.index == null) {
  161. geometry = new THREE.Points(bufferGeometry, material);
  162. } else {
  163. if (bufferGeometry.attributes.normal === undefined) {
  164. var geometryHelper = new GeometryHelper();
  165. geometryHelper.computeVertexNormals(bufferGeometry);
  166. }
  167. geometry = new THREE.Mesh(bufferGeometry, material);
  168. geometry.drawMode = dracoLoader.drawMode;
  169. }
  170. // Compute range of the geometry coordinates for proper rendering.
  171. bufferGeometry.computeBoundingBox();
  172. if (bufferGeometry.attributes['position'].isQuantized) {
  173. // If the geometry is quantized, transform the bounding box to the dequantized
  174. // coordinates.
  175. var posAttribute = bufferGeometry.attributes['position'];
  176. var normConstant =
  177. posAttribute.maxRange / (1 << posAttribute.numQuantizationBits);
  178. var minPos = posAttribute.minValues;
  179. bufferGeometry.boundingBox.max.x =
  180. minPos[0] + bufferGeometry.boundingBox.max.x * normConstant;
  181. bufferGeometry.boundingBox.max.y =
  182. minPos[1] + bufferGeometry.boundingBox.max.y * normConstant;
  183. bufferGeometry.boundingBox.max.z =
  184. minPos[2] + bufferGeometry.boundingBox.max.z * normConstant;
  185. bufferGeometry.boundingBox.min.x =
  186. minPos[0] + bufferGeometry.boundingBox.min.x * normConstant;
  187. bufferGeometry.boundingBox.min.y =
  188. minPos[1] + bufferGeometry.boundingBox.min.y * normConstant;
  189. bufferGeometry.boundingBox.min.z =
  190. minPos[2] + bufferGeometry.boundingBox.min.z * normConstant;
  191. }
  192. var sizeX = bufferGeometry.boundingBox.max.x - bufferGeometry.boundingBox.min.x;
  193. var sizeY = bufferGeometry.boundingBox.max.y - bufferGeometry.boundingBox.min.y;
  194. var sizeZ = bufferGeometry.boundingBox.max.z - bufferGeometry.boundingBox.min.z;
  195. var diagonalSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY + sizeZ * sizeZ);
  196. var scale = 1.0 / diagonalSize;
  197. var midX =
  198. (bufferGeometry.boundingBox.min.x + bufferGeometry.boundingBox.max.x) / 2;
  199. var midY =
  200. (bufferGeometry.boundingBox.min.y + bufferGeometry.boundingBox.max.y) / 2;
  201. var midZ =
  202. (bufferGeometry.boundingBox.min.z + bufferGeometry.boundingBox.max.z) / 2;
  203.  
  204. geometry.scale.multiplyScalar(scale);
  205. geometry.position.x = -midX * scale;
  206. geometry.position.y = -midY * scale;
  207. geometry.position.z = -midZ * scale;
  208. geometry.castShadow = true;
  209. geometry.receiveShadow = true;
  210.  
  211. var selectedObject = scene.getObjectByName("my_mesh");
  212. scene.remove(selectedObject);
  213. geometry.name = "my_mesh";
  214. scene.add(geometry, materials);
  215. });
  216. }
  217. reader.readAsArrayBuffer(file);
  218. });
  219.  
  220. init();
  221. animate();
  222. }
  223.  
  224. function setDequantizationForMaterial(material, bufferGeometry) {
  225. material.onBeforeCompile = function(shader) {
  226. // Add uniform variables needed for dequantization.
  227. var posAttribute = bufferGeometry.attributes['position'];
  228. shader.uniforms.normConstant =
  229. { value: posAttribute.maxRange / (1 << posAttribute.numQuantizationBits) };
  230. shader.uniforms.minPos = { value: posAttribute.minValues };
  231.  
  232. shader.vertexShader = 'uniform float maxRange;\n' +
  233. 'uniform float normConstant;\n' +
  234. 'uniform vec3 minPos;\n' +
  235. shader.vertexShader;
  236. shader.vertexShader = shader.vertexShader.replace(
  237. '#include <begin_vertex>',
  238. 'vec3 transformed = minPos + position * normConstant;'
  239. );
  240. }
  241. }
  242. </script>
  243. </body>
  244. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!