mirror of
https://git.mirrors.martin98.com/https://github.com/google/draco
synced 2025-04-21 21:30:01 +08:00
5186ec2f7a
* Up to 20% faster decoding * Added support for integer attributes to our Javascript Encoder * Fixed issues with THREE.DracoLoader not releasing memory associated with the Draco module * OBJ decoder can now be used to parse pure point clouds * Added Unity plugins to support runtime loading and design-time importing of encoded Draco files
227 lines
8.8 KiB
HTML
227 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>three.js webgl - loaders - Draco loader</title>
|
|
<style>
|
|
body {
|
|
font-family: Monospace;
|
|
background-color: #000;
|
|
color: #fff;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="page-wrapper">
|
|
<h1>Open a draco compressed file (.drc):</h1>
|
|
<div>
|
|
<input type="file" id="fileInput">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<pre id="decoderType"><pre>
|
|
</div>
|
|
<div>
|
|
<pre id="fileDisplayArea"><pre>
|
|
</div>
|
|
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
|
|
<script src="DRACOLoader.js"></script>
|
|
<script src="geometry_helper.js"></script>
|
|
<script>
|
|
'use strict';
|
|
|
|
// Global Draco decoder type.
|
|
var dracoLoader;
|
|
|
|
createDracoDecoder();
|
|
|
|
function createDracoDecoder() {
|
|
dracoLoader = new THREE.DRACOLoader('../');
|
|
}
|
|
|
|
var camera, cameraTarget, scene, renderer;
|
|
|
|
function init() {
|
|
var container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
|
|
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15);
|
|
camera.position.set(3, 0.15, 3);
|
|
cameraTarget = new THREE.Vector3(0, 0, 0);
|
|
|
|
scene = new THREE.Scene();
|
|
scene.fog = new THREE.Fog(0x72645b, 2, 15);
|
|
|
|
// Ground
|
|
var plane = new THREE.Mesh(
|
|
new THREE.PlaneBufferGeometry(40, 40),
|
|
new THREE.MeshPhongMaterial({color: 0x999999, specular: 0x101010}));
|
|
plane.rotation.x = -Math.PI/2;
|
|
plane.position.y = -0.5;
|
|
scene.add(plane);
|
|
plane.receiveShadow = true;
|
|
|
|
// Lights
|
|
scene.add(new THREE.HemisphereLight(0x443333, 0x111122));
|
|
addShadowedLight(1, 1, 1, 0xffffff, 1.35);
|
|
addShadowedLight(0.5, 1, -1, 0xffaa00, 1);
|
|
|
|
// renderer
|
|
renderer = new THREE.WebGLRenderer({antialias: true});
|
|
renderer.setClearColor(scene.fog.color);
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
container.appendChild(renderer.domElement);
|
|
window.addEventListener('resize', onWindowResize, false);
|
|
}
|
|
|
|
function addShadowedLight(x, y, z, color, intensity) {
|
|
var directionalLight = new THREE.DirectionalLight(color, intensity);
|
|
directionalLight.position.set(x, y, z);
|
|
scene.add(directionalLight);
|
|
}
|
|
|
|
function onWindowResize() {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
}
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
render();
|
|
}
|
|
|
|
function render() {
|
|
var timer = Date.now() * 0.0005;
|
|
camera.position.x = Math.sin(timer) * 2.5;
|
|
camera.position.z = Math.cos(timer) * 2.5;
|
|
camera.lookAt(cameraTarget);
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
window.onload = function() {
|
|
var fileInput = document.getElementById('fileInput');
|
|
var fileDisplayArea = document.getElementById('fileDisplayArea');
|
|
|
|
fileInput.onclick = function() {
|
|
this.value = '';
|
|
}
|
|
|
|
fileInput.addEventListener('change', function(e) {
|
|
var file = fileInput.files[0];
|
|
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
// Enable logging to console output.
|
|
dracoLoader.setVerbosity(1);
|
|
|
|
// To use triangle strips use:
|
|
// dracoLoader.setDrawMode(THREE.TriangleStripDrawMode);
|
|
dracoLoader.setDrawMode(THREE.TrianglesDrawMode);
|
|
|
|
// Skip dequantization of the position attribute. It will be done on the GPU.
|
|
dracoLoader.setSkipDequantization('position', true);
|
|
dracoLoader.decodeDracoFile(reader.result, function(bufferGeometry) {
|
|
if (dracoLoader.decode_time !== undefined) {
|
|
fileDisplayArea.innerText = 'Decode time = ' + dracoLoader.decode_time + '\n' +
|
|
'Import time = ' + dracoLoader.import_time;
|
|
}
|
|
var material = new THREE.MeshStandardMaterial({vertexColors: THREE.VertexColors});
|
|
// If the position attribute is quantized, modify the material to perform
|
|
// dequantization on the GPU.
|
|
if (bufferGeometry.attributes['position'].isQuantized) {
|
|
setDequantizationForMaterial(material, bufferGeometry);
|
|
}
|
|
|
|
var geometry;
|
|
// Point cloud does not have face indices.
|
|
if (bufferGeometry.index == null) {
|
|
geometry = new THREE.Points(bufferGeometry, material);
|
|
} else {
|
|
if (bufferGeometry.attributes.normal === undefined) {
|
|
var geometryHelper = new GeometryHelper();
|
|
geometryHelper.computeVertexNormals(bufferGeometry);
|
|
}
|
|
geometry = new THREE.Mesh(bufferGeometry, material);
|
|
geometry.drawMode = dracoLoader.drawMode;
|
|
}
|
|
// Compute range of the geometry coordinates for proper rendering.
|
|
bufferGeometry.computeBoundingBox();
|
|
if (bufferGeometry.attributes['position'].isQuantized) {
|
|
// If the geometry is quantized, transform the bounding box to the dequantized
|
|
// coordinates.
|
|
var posAttribute = bufferGeometry.attributes['position'];
|
|
var normConstant =
|
|
posAttribute.maxRange / (1 << posAttribute.numQuantizationBits);
|
|
var minPos = posAttribute.minValues;
|
|
bufferGeometry.boundingBox.max.x =
|
|
minPos[0] + bufferGeometry.boundingBox.max.x * normConstant;
|
|
bufferGeometry.boundingBox.max.y =
|
|
minPos[1] + bufferGeometry.boundingBox.max.y * normConstant;
|
|
bufferGeometry.boundingBox.max.z =
|
|
minPos[2] + bufferGeometry.boundingBox.max.z * normConstant;
|
|
bufferGeometry.boundingBox.min.x =
|
|
minPos[0] + bufferGeometry.boundingBox.min.x * normConstant;
|
|
bufferGeometry.boundingBox.min.y =
|
|
minPos[1] + bufferGeometry.boundingBox.min.y * normConstant;
|
|
bufferGeometry.boundingBox.min.z =
|
|
minPos[2] + bufferGeometry.boundingBox.min.z * normConstant;
|
|
}
|
|
var sizeX = bufferGeometry.boundingBox.max.x - bufferGeometry.boundingBox.min.x;
|
|
var sizeY = bufferGeometry.boundingBox.max.y - bufferGeometry.boundingBox.min.y;
|
|
var sizeZ = bufferGeometry.boundingBox.max.z - bufferGeometry.boundingBox.min.z;
|
|
var diagonalSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY + sizeZ * sizeZ);
|
|
var scale = 1.0 / diagonalSize;
|
|
var midX =
|
|
(bufferGeometry.boundingBox.min.x + bufferGeometry.boundingBox.max.x) / 2;
|
|
var midY =
|
|
(bufferGeometry.boundingBox.min.y + bufferGeometry.boundingBox.max.y) / 2;
|
|
var midZ =
|
|
(bufferGeometry.boundingBox.min.z + bufferGeometry.boundingBox.max.z) / 2;
|
|
|
|
geometry.scale.multiplyScalar(scale);
|
|
geometry.position.x = -midX * scale;
|
|
geometry.position.y = -midY * scale;
|
|
geometry.position.z = -midZ * scale;
|
|
geometry.castShadow = true;
|
|
geometry.receiveShadow = true;
|
|
|
|
var selectedObject = scene.getObjectByName("my_mesh");
|
|
scene.remove(selectedObject);
|
|
geometry.name = "my_mesh";
|
|
scene.add(geometry);
|
|
});
|
|
}
|
|
reader.readAsArrayBuffer(file);
|
|
});
|
|
|
|
init();
|
|
animate();
|
|
}
|
|
|
|
function setDequantizationForMaterial(material, bufferGeometry) {
|
|
material.onBeforeCompile = function(shader) {
|
|
// Add uniform variables needed for dequantization.
|
|
var posAttribute = bufferGeometry.attributes['position'];
|
|
shader.uniforms.normConstant =
|
|
{ value: posAttribute.maxRange / (1 << posAttribute.numQuantizationBits) };
|
|
shader.uniforms.minPos = { value: posAttribute.minValues };
|
|
|
|
shader.vertexShader = 'uniform float maxRange;\n' +
|
|
'uniform float normConstant;\n' +
|
|
'uniform vec3 minPos;\n' +
|
|
shader.vertexShader;
|
|
shader.vertexShader = shader.vertexShader.replace(
|
|
'#include <begin_vertex>',
|
|
'vec3 transformed = minPos + position * normConstant;'
|
|
);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|