DRACO Loader
Video Lecture
Your browser does not support the video tag.
Description
The DRACO loader is used to load geometry compressed with the Draco library.
Draco is an open source library for compressing and decompressing 3D meshes and point clouds.
glTF files can also be compressed using the DRACO library, and they can also be loaded using the glTF loader. We can configure the glTF loader to use the DRACOLoader to decompress the file in such cases.
Compressed geometry can be significantly smaller, but at the cost of additional decoding time on the client side browser.
Compressed (DRACO)
Uncompressed
Resources
The 3D models used in this lesson can be easily created using Blender . If you don't want to use blender to create the models, then you can download them from the zip file named models4.zip
. Extract the models4.zip
contents into the ./dist/client/models/
folder.
models4.zip
Lesson Script
./src/client/client.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84 import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import Stats from 'three/examples/jsm/libs/stats.module'
const scene = new THREE . Scene ()
scene . add ( new THREE . AxesHelper ( 5 ))
const camera = new THREE . PerspectiveCamera (
75 ,
window . innerWidth / window . innerHeight ,
0.1 ,
1000
)
camera . position . z = 2
const renderer = new THREE . WebGLRenderer ()
renderer . physicallyCorrectLights = true
renderer . shadowMap . enabled = true
renderer . setSize ( window . innerWidth , window . innerHeight )
document . body . appendChild ( renderer . domElement )
const controls = new OrbitControls ( camera , renderer . domElement )
controls . enableDamping = true
const dracoLoader = new DRACOLoader ()
dracoLoader . setDecoderPath ( '/js/libs/draco/' )
const loader = new GLTFLoader ()
loader . setDRACOLoader ( dracoLoader )
loader . load (
'models/monkey_compressed.glb' ,
function ( gltf ) {
gltf . scene . traverse ( function ( child ) {
if (( child as THREE . Mesh ). isMesh ) {
const m = child as THREE . Mesh
m . receiveShadow = true
m . castShadow = true
}
if (( child as THREE . Light ). isLight ) {
const l = child as THREE . Light
l . castShadow = true
l . shadow . bias = - 0.003
l . shadow . mapSize . width = 2048
l . shadow . mapSize . height = 2048
}
})
scene . add ( gltf . scene )
},
( xhr ) => {
console . log (( xhr . loaded / xhr . total ) * 100 + '% loaded' )
},
( error ) => {
console . log ( error )
}
)
window . addEventListener ( 'resize' , onWindowResize , false )
function onWindowResize () {
camera . aspect = window . innerWidth / window . innerHeight
camera . updateProjectionMatrix ()
renderer . setSize ( window . innerWidth , window . innerHeight )
render ()
}
const stats = Stats ()
document . body . appendChild ( stats . dom )
function animate () {
requestAnimationFrame ( animate )
controls . update ()
render ()
stats . update ()
}
function render () {
renderer . render ( scene , camera )
}
animate ()
Useful Links
DRACO 3D Data Compression
DRACOLoader (Official Documentation)
WebAssembly (MDN)
WebAssembly (Official)