Skip to content

Commit 214135b

Browse files
mrdoobmrdoob
authored
Merge pull request #21114 from zeux/gltf-compressed
Examples: Add glTF compression example
2 parents af3920a + b9715ce commit 214135b

File tree

4 files changed

+128
-0
lines changed

4 files changed

+128
-0
lines changed

‎examples/files.json

+1
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
"webgl_loader_fbx_nurbs",
9292
"webgl_loader_gcode",
9393
"webgl_loader_gltf",
94+
"webgl_loader_gltf_compressed",
9495
"webgl_loader_gltf_extensions",
9596
"webgl_loader_gltf_variants",
9697
"webgl_loader_imagebitmap",

‎examples/models/gltf/coffeemat.glb

4.56 MB
Binary file not shown.

‎examples/screenshots/webgl_loader_gltf_compressed.jpg

35 KB
Loading

‎examples/webgl_loader_gltf_compressed.html

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgl - glTF 2.0 - compressed</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link type="text/css" rel="stylesheet" href="main.css">
8+
</head>
9+
10+
<body>
11+
<div id="info">
12+
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader + compression extensions<br />
13+
<a href="https://sketchfab.com/3d-models/coffeemat-7fb196a40a6e4697aad9ca2f75c8b33d" target="_blank" rel="noopener">Coffeemat</a> by
14+
<a href="https://sketchfab.com/OFFcours1" target="_blank" rel="noopener">Roman Red</a><br />
15+
<a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> by <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
16+
</div>
17+
18+
<script src="./js/libs/basis/msc_basis_transcoder.js"></script>
19+
20+
<script type="module">
21+
22+
import * as THREE from '../build/three.module.js';
23+
24+
import { OrbitControls } from './jsm/controls/OrbitControls.js';
25+
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
26+
import { RGBELoader } from './jsm/loaders/RGBELoader.js';
27+
28+
import { KTX2Loader } from './jsm/loaders/KTX2Loader.js';
29+
import { MeshoptDecoder } from './jsm/libs/meshopt_decoder.module.js';
30+
31+
let camera, scene, renderer;
32+
33+
init();
34+
render();
35+
36+
function init() {
37+
38+
const container = document.createElement( 'div' );
39+
document.body.appendChild( container );
40+
41+
renderer = new THREE.WebGLRenderer( { antialias: true } );
42+
renderer.setPixelRatio( window.devicePixelRatio );
43+
renderer.setSize( window.innerWidth, window.innerHeight );
44+
renderer.toneMapping = THREE.ACESFilmicToneMapping;
45+
renderer.toneMappingExposure = 1;
46+
renderer.outputEncoding = THREE.sRGBEncoding;
47+
container.appendChild( renderer.domElement );
48+
49+
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
50+
camera.position.set( 0, 90, 0 );
51+
52+
scene = new THREE.Scene();
53+
54+
const ktx2Loader = new KTX2Loader().detectSupport( renderer );
55+
56+
new RGBELoader()
57+
.setDataType( THREE.UnsignedByteType )
58+
.setPath( 'textures/equirectangular/' )
59+
.load( 'royal_esplanade_1k.hdr', function ( texture ) {
60+
61+
const envMap = pmremGenerator.fromEquirectangular( texture ).texture;
62+
63+
scene.background = envMap;
64+
scene.environment = envMap;
65+
66+
texture.dispose();
67+
pmremGenerator.dispose();
68+
69+
render();
70+
71+
// model
72+
73+
const loader = new GLTFLoader().setPath( 'models/gltf/' );
74+
loader.setKTX2Loader( ktx2Loader );
75+
loader.setMeshoptDecoder( MeshoptDecoder );
76+
77+
// coffeemat.glb was produced from the source scene using gltfpack:
78+
// gltfpack -i coffeemat/scene.gltf -o coffeemat.glb -cc -tc
79+
// The resulting model uses EXT_meshopt_compression (for geometry) and KHR_texture_basisu (for texture compression using ETC1S/BasisLZ)
80+
81+
loader.load( 'coffeemat.glb', function ( gltf ) {
82+
83+
scene.add( gltf.scene );
84+
85+
render();
86+
87+
} );
88+
89+
} );
90+
91+
const pmremGenerator = new THREE.PMREMGenerator( renderer );
92+
pmremGenerator.compileEquirectangularShader();
93+
94+
const controls = new OrbitControls( camera, renderer.domElement );
95+
controls.addEventListener( 'change', render ); // use if there is no animation loop
96+
controls.minDistance = 500;
97+
controls.maxDistance = 1000;
98+
controls.target.set( 10, 76, -16 );
99+
controls.update();
100+
101+
window.addEventListener( 'resize', onWindowResize, false );
102+
103+
}
104+
105+
function onWindowResize() {
106+
107+
camera.aspect = window.innerWidth / window.innerHeight;
108+
camera.updateProjectionMatrix();
109+
110+
renderer.setSize( window.innerWidth, window.innerHeight );
111+
112+
render();
113+
114+
}
115+
116+
//
117+
118+
function render() {
119+
120+
renderer.render( scene, camera );
121+
122+
}
123+
124+
</script>
125+
126+
</body>
127+
</html>

0 commit comments

Comments
 (0)