Skip to content

Commit 6f3d57f

Browse files
Mugen87RuthySheffi
Mugen87
authored and
RuthySheffi
committed
Examples: Make tonemapping demos more interesting. (mrdoob#31045)
1 parent 694bd17 commit 6f3d57f

File tree

5 files changed

+62
-36
lines changed

5 files changed

+62
-36
lines changed

‎examples/models/gltf/venice_mask.glb

4.08 MB
Binary file not shown.

‎examples/screenshots/webgl_tonemapping.jpg

71.2 KB
Loading

‎examples/screenshots/webgpu_tonemapping.jpg

71.9 KB
Loading

‎examples/webgl_tonemapping.html

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
<body>
1111
<div id="info">
1212
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Tone Mapping<br />
13-
Battle Damaged Sci-fi Helmet by
14-
<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
13+
Venice Mask by
14+
<a href="https://sketchfab.com/D.art" target="_blank" rel="noopener">DailyArt</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC Attribution-NonCommercial</a><br />
1515
<a href="https://hdrihaven.com/hdri/?h=venice_sunset" target="_blank" rel="noopener">Venice Sunset</a> from <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
1616
</div>
1717

@@ -31,14 +31,15 @@
3131
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
3232
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
3333
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
34+
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
3435
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
3536

36-
let mesh, renderer, scene, camera, controls;
37+
let renderer, scene, camera, controls;
3738
let gui, guiExposure = null;
3839

3940
const params = {
4041
exposure: 1.0,
41-
toneMapping: 'AgX',
42+
toneMapping: 'Neutral',
4243
blurriness: 0.3,
4344
intensity: 1.0,
4445
};
@@ -65,6 +66,7 @@
6566
renderer = new THREE.WebGLRenderer( { antialias: true } );
6667
renderer.setPixelRatio( window.devicePixelRatio );
6768
renderer.setSize( window.innerWidth, window.innerHeight );
69+
renderer.setAnimationLoop( animate );
6870
document.body.appendChild( renderer.domElement );
6971

7072
renderer.toneMapping = toneMappingOptions[ params.toneMapping ];
@@ -92,24 +94,36 @@
9294
scene = new THREE.Scene();
9395
scene.backgroundBlurriness = params.blurriness;
9496

95-
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
96-
camera.position.set( - 1.8, 0.6, 2.7 );
97+
const light = new THREE.DirectionalLight( 0xfff3ee, 3 ); // simualte sun
98+
light.position.set( 1, 0.05, 0.7 );
99+
scene.add( light );
100+
101+
// scene.add( new THREE.DirectionalLightHelper( light, 1, 0x000000 ) );
102+
103+
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 10 );
104+
camera.position.set( - 0.02, 0.03, 0.05 );
97105

98106
controls = new OrbitControls( camera, renderer.domElement );
99-
controls.addEventListener( 'change', render ); // use if there is no animation loop
100-
controls.enableZoom = false;
101107
controls.enablePan = false;
102-
controls.target.set( 0, 0, - 0.2 );
108+
controls.enableDamping = true;
109+
controls.minDistance = 0.03;
110+
controls.maxDistance = 0.2;
111+
controls.target.set( 0, 0.03, 0 );
103112
controls.update();
104113

105114
const rgbeLoader = new RGBELoader()
106115
.setPath( 'textures/equirectangular/' );
107116

108-
const gltfLoader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
117+
const dracoLoader = new DRACOLoader();
118+
dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
119+
120+
const gltfLoader = new GLTFLoader();
121+
gltfLoader.setDRACOLoader( dracoLoader );
122+
gltfLoader.setPath( 'models/gltf/' );
109123

110124
const [ texture, gltf ] = await Promise.all( [
111125
rgbeLoader.loadAsync( 'venice_sunset_1k.hdr' ),
112-
gltfLoader.loadAsync( 'DamagedHelmet.gltf' ),
126+
gltfLoader.loadAsync( 'venice_mask.glb' ),
113127
] );
114128

115129
// environment
@@ -121,13 +135,12 @@
121135

122136
// model
123137

124-
mesh = gltf.scene.getObjectByName( 'node_damagedHelmet_-6514' );
125-
scene.add( mesh );
126-
127-
render();
138+
scene.add( gltf.scene );
128139

129140
window.addEventListener( 'resize', onWindowResize );
130141

142+
//
143+
131144
gui = new GUI();
132145
const toneMappingFolder = gui.addFolder( 'Tone Mapping' );
133146

@@ -139,7 +152,6 @@
139152
updateGUI( toneMappingFolder );
140153

141154
renderer.toneMapping = toneMappingOptions[ params.toneMapping ];
142-
render();
143155

144156
} );
145157

@@ -148,7 +160,6 @@
148160
.onChange( function ( value ) {
149161

150162
renderer.toneMappingExposure = value;
151-
render();
152163

153164
} );
154165

@@ -159,7 +170,6 @@
159170
.onChange( function ( value ) {
160171

161172
scene.backgroundBlurriness = value;
162-
render();
163173

164174
} );
165175

@@ -168,7 +178,6 @@
168178
.onChange( function ( value ) {
169179

170180
scene.backgroundIntensity = value;
171-
render();
172181

173182
} );
174183

@@ -178,7 +187,7 @@
178187

179188
}
180189

181-
function updateGUI( folder ) {
190+
function updateGUI() {
182191

183192
if ( params.toneMapping === 'None' ) {
184193

@@ -200,11 +209,11 @@
200209

201210
renderer.setSize( window.innerWidth, window.innerHeight );
202211

203-
render();
204-
205212
}
206213

207-
function render() {
214+
function animate() {
215+
216+
controls.update();
208217

209218
renderer.render( scene, camera );
210219

‎examples/webgpu_tonemapping.html

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
<body>
1111
<div id="info">
1212
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - tone mapping<br />
13-
Battle Damaged Sci-fi Helmet by
14-
<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
13+
Venice Mask by
14+
<a href="https://sketchfab.com/D.art" target="_blank" rel="noopener">DailyArt</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC Attribution-NonCommercial</a><br />
1515
<a href="https://hdrihaven.com/hdri/?h=venice_sunset" target="_blank" rel="noopener">Venice Sunset</a> from <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
1616
</div>
1717

@@ -33,14 +33,15 @@
3333
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
3434
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
3535
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
36+
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
3637
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
3738

38-
let mesh, renderer, scene, camera, controls;
39+
let renderer, scene, camera, controls;
3940
let gui, guiExposure = null;
4041

4142
const params = {
4243
exposure: 1.0,
43-
toneMapping: 'AgX',
44+
toneMapping: 'Neutral',
4445
blurriness: 0.3,
4546
intensity: 1.0,
4647
};
@@ -75,23 +76,36 @@
7576
scene = new THREE.Scene();
7677
scene.backgroundBlurriness = params.blurriness;
7778

78-
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
79-
camera.position.set( - 1.8, 0.6, 2.7 );
79+
const light = new THREE.DirectionalLight( 0xfff3ee, 3 ); // simualte sun
80+
light.position.set( 1, 0.05, 0.7 );
81+
scene.add( light );
82+
83+
// scene.add( new THREE.DirectionalLightHelper( light, 1, 0x000000 ) );
84+
85+
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 10 );
86+
camera.position.set( - 0.02, 0.03, 0.05 );
8087

8188
controls = new OrbitControls( camera, renderer.domElement );
82-
controls.enableZoom = false;
8389
controls.enablePan = false;
84-
controls.target.set( 0, 0, - 0.2 );
90+
controls.enableDamping = true;
91+
controls.minDistance = 0.03;
92+
controls.maxDistance = 0.2;
93+
controls.target.set( 0, 0.03, 0 );
8594
controls.update();
8695

8796
const rgbeLoader = new RGBELoader()
8897
.setPath( 'textures/equirectangular/' );
8998

90-
const gltfLoader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
99+
const dracoLoader = new DRACOLoader();
100+
dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
101+
102+
const gltfLoader = new GLTFLoader();
103+
gltfLoader.setDRACOLoader( dracoLoader );
104+
gltfLoader.setPath( 'models/gltf/' );
91105

92106
const [ texture, gltf ] = await Promise.all( [
93107
rgbeLoader.loadAsync( 'venice_sunset_1k.hdr' ),
94-
gltfLoader.loadAsync( 'DamagedHelmet.gltf' ),
108+
gltfLoader.loadAsync( 'venice_mask.glb' ),
95109
] );
96110

97111
// environment
@@ -103,11 +117,12 @@
103117

104118
// model
105119

106-
mesh = gltf.scene.getObjectByName( 'node_damagedHelmet_-6514' );
107-
scene.add( mesh );
120+
scene.add( gltf.scene );
108121

109122
window.addEventListener( 'resize', onWindowResize );
110123

124+
//
125+
111126
gui = new GUI();
112127
const toneMappingFolder = gui.addFolder( 'Tone Mapping' );
113128

@@ -154,7 +169,7 @@
154169

155170
}
156171

157-
function updateGUI( folder ) {
172+
function updateGUI() {
158173

159174
if ( params.toneMapping === 'None' ) {
160175

@@ -180,6 +195,8 @@
180195

181196
function animate() {
182197

198+
controls.update();
199+
183200
renderer.render( scene, camera );
184201

185202
}

0 commit comments

Comments
 (0)