What is draco3d?
The draco3d npm package is a library for compressing and decompressing 3D geometric meshes and point clouds. It is designed to improve the storage and transmission efficiency of 3D graphics data.
What are draco3d's main functionalities?
Compression
This feature allows you to compress 3D meshes to reduce their size. The code sample demonstrates how to use the draco3d library to encode a mesh into a compressed format.
const draco3d = require('draco3d');
const encoderModule = draco3d.createEncoderModule();
const encoder = new encoderModule.Encoder();
// Assume mesh is a valid mesh object
const encodedData = encoder.EncodeMeshToDracoBuffer(mesh);
console.log('Encoded data size:', encodedData.byteLength);
Decompression
This feature allows you to decompress 3D meshes that were previously compressed using the draco3d library. The code sample demonstrates how to decode a compressed mesh buffer back into a mesh object.
const draco3d = require('draco3d');
const decoderModule = draco3d.createDecoderModule();
const decoder = new decoderModule.Decoder();
// Assume buffer contains compressed mesh data
const buffer = new decoderModule.DecoderBuffer();
buffer.Init(new Int8Array(compressedData), compressedData.length);
const geometryType = decoder.GetEncodedGeometryType(buffer);
if (geometryType === decoderModule.TRIANGULAR_MESH) {
const mesh = new decoderModule.Mesh();
decoder.DecodeBufferToMesh(buffer, mesh);
console.log('Decompressed mesh:', mesh);
}
Point Cloud Compression
This feature allows you to compress point clouds to reduce their size. The code sample demonstrates how to use the draco3d library to encode a point cloud into a compressed format.
const draco3d = require('draco3d');
const encoderModule = draco3d.createEncoderModule();
const encoder = new encoderModule.Encoder();
// Assume pointCloud is a valid point cloud object
const encodedData = encoder.EncodePointCloudToDracoBuffer(pointCloud);
console.log('Encoded point cloud size:', encodedData.byteLength);
Point Cloud Decompression
This feature allows you to decompress point clouds that were previously compressed using the draco3d library. The code sample demonstrates how to decode a compressed point cloud buffer back into a point cloud object.
const draco3d = require('draco3d');
const decoderModule = draco3d.createDecoderModule();
const decoder = new decoderModule.Decoder();
// Assume buffer contains compressed point cloud data
const buffer = new decoderModule.DecoderBuffer();
buffer.Init(new Int8Array(compressedData), compressedData.length);
const pointCloud = new decoderModule.PointCloud();
decoder.DecodeBufferToPointCloud(buffer, pointCloud);
console.log('Decompressed point cloud:', pointCloud);
Other packages similar to draco3d
three
Three.js is a popular JavaScript library for creating and displaying 3D graphics in the browser. While it does not focus on compression, it provides extensive functionality for rendering, animating, and interacting with 3D models. It can be used in conjunction with draco3d for handling compressed assets.
potree
Potree is a WebGL based point cloud renderer for large point clouds. It is designed for visualizing large point cloud datasets efficiently. Unlike draco3d, which focuses on compression, Potree is more about rendering and visualizing point clouds.
gltf-pipeline
gltf-pipeline is a library for optimizing glTF assets. It includes features for compressing geometry, textures, and animations. While it offers some compression capabilities similar to draco3d, it is specifically tailored for the glTF format and includes additional optimization features.
News
Check out the README
file for news about this release.
Description
Draco is a library for compressing and decompressing 3D geometric meshes and
point clouds. It is intended to improve the storage and transmission of 3D
graphics.
Draco was designed and built for compression efficiency and speed. The code
supports compressing points, connectivity information, texture coordinates,
color information, normals, and any other generic attributes associated with
geometry. With Draco, applications using 3D graphics can be significantly
smaller without compromising visual fidelity. For users, this means apps can
now be downloaded faster, 3D graphics in the browser can load quicker, and VR
and AR scenes can now be transmitted with a fraction of the bandwidth and
rendered quickly.
Draco is released as C++/Javascript source code that can be used to compress 3D
graphics as well as decoders for the encoded data.
NPM Package
The code shows a simple example of using Draco encoder and decoder with Node.js.
draco_encoder_node.js
and draco_decoder_node.js
are modified Javascript
encoding/decoding files that are compatible with Node.js.
How to run the code:
(1) Install draco3d package :
$ npm install draco3d
Working example
draco_nodejs_example.js
has the example code for usage.
(2) Run example code to test:
$ cp node_modules/draco3d/draco_nodejs_example.js .
$ cp node_modules/draco3d/bunny.drc .
$ node draco_nodejs_example.js
The code loads the Bunny model, it will first decode to a mesh
and then encode it with different settings.
Minimal examples
These examples only show how to load the encoder and decoder modules. draco_minimal_encoder_decoder_example.js
, draco_minimal_encoder_example.js
, and draco_minimal_decoder_example.js
has the example code for usage.
(2) Run the code to test:
$ node draco_minimal_encoder_decoder_example.js
$ node draco_minimal_encoder_example.js
$ node draco_minimal_decoder_example.js
References
Bunny model from Stanford's graphic department https://graphics.stanford.edu/data/3Dscanrep/