GitHub-Proxy/draco
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/google/draco synced 2025-04-22 05:39:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added JavaScript decoding in the browser

Browse Source
This commit is contained in:
Frank Galligan 2018-02-07 14:39:00 -08:00
parent 31558ad1ff
commit ace5000d18
2 changed files with 116 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
docs/guides/BROWSER.md Normal file
View File

@ -0,0 +1,108 @@
# Using Draco in the Browser
This guide will show you how to use Draco files from the browser.
## JavaScript Decode
This is a minimal example to show how to use the Draco JavaScript deocder to
decode Draco files in the browser.
This is the minimal amount of code to decode a Draco file:
~~~
// Create the Draco decoder.
const decoderModule = DracoDecoderModule();
const buffer = new decoderModule.DecoderBuffer();
buffer.Init(byteArray, byteArray.length);
// Create a buffer to hold the encoded data.
const decoder = new decoderModule.Decoder();
const geometryType = decoder.GetEncodedGeometryType(buffer);
// Decode the encoded geometry.
let outputGeometry;
let status;
if (geometryType == decoderModule.TRIANGULAR_MESH) {
outputGeometry = new decoderModule.Mesh();
status = decoder.DecodeBufferToMesh(buffer, outputGeometry);
} else {
outputGeometry = new decoderModule.PointCloud();
status = decoder.DecodeBufferToPointCloud(buffer, outputGeometry);
}
// You must explicitly delete objects created from the DracoDecoderModule
// or Decoder.
decoderModule.destroy(outputGeometry);
decoderModule.destroy(decoder);
decoderModule.destroy(buffer);
~~~
Now create a web page to decode a Draco file and just output the number of
points decoded. Save this file as *DracoDecode.html*.
~~~
<!DOCTYPE html>
<html>
<head>
<title>Draco Decoder - Simple</title>
<script src="https://rawgit.com/google/draco/master/javascript/draco_decoder.js"></script>
<script>
'use strict';
// Decode an encoded Draco mesh. byteArray is the encoded mesh as
// an Uint8Array.
function decodeMesh(byteArray) {
// Create the Draco decoder.
const decoderModule = DracoDecoderModule();
const buffer = new decoderModule.DecoderBuffer();
buffer.Init(byteArray, byteArray.length);
// Create a buffer to hold the encoded data.
const decoder = new decoderModule.Decoder();
const geometryType = decoder.GetEncodedGeometryType(buffer);
// Decode the encoded geometry.
let outputGeometry;
let status;
if (geometryType == decoderModule.TRIANGULAR_MESH) {
outputGeometry = new decoderModule.Mesh();
status = decoder.DecodeBufferToMesh(buffer, outputGeometry);
} else {
outputGeometry = new decoderModule.PointCloud();
status = decoder.DecodeBufferToPointCloud(buffer, outputGeometry);
}
alert('Num points = ' + outputGeometry.num_points());
// You must explicitly delete objects created from the DracoDecoderModule
// or Decoder.
decoderModule.destroy(outputGeometry);
decoderModule.destroy(decoder);
decoderModule.destroy(buffer);
}
// Download and decode the Draco encoded geometry.
function downloadEncodedMesh(filename) {
// Download the encoded file.
const xhr = new XMLHttpRequest();
xhr.open("GET", filename, true);
xhr.responseType = "arraybuffer";
xhr.onload = function(event) {
const arrayBuffer = xhr.response;
if (arrayBuffer) {
const byteArray = new Uint8Array(arrayBuffer);
decodeMesh(byteArray);
}
};
xhr.send(null);
}
downloadEncodedMesh('bunny.drc');
</script>
</head>
<body>
</body>
</html>
~~~
Copy *bunny.drc* to the same folder as *DracoDecode.html*. Serve *DracoDecode.html* from a webserver, such as *python -m SimpleHTTPServer*. Open *DracoDecode.html* in a browser, you should see an alert message with xxxxx points decoded.

8
docs/guides/README.md Normal file
View File

@ -0,0 +1,8 @@
GUIDES
======
_**Contents**_
* [Command Line Applications](COMMAND_LINE_APPLICATIONS.md)
* [Browser](BROWSER.md)
* [JavaScript Decode](BROWSER.md#JavaScript-Decode)