Skip to content

Commit 504ce22

Browse files
mrdoobmrdoob
authored
Merge pull request mrdoob#13775 from WestLangley/dev-pmrem_cleanup
PMREM Examples: Clean up
2 parents b69d7c7 + 7376637 commit 504ce22

File tree

2 files changed

+36
-106
lines changed

2 files changed

+36
-106
lines changed

‎examples/webgl_materials_envmaps_exr.html‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,10 @@
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
77
<style>
88
body {
9-
color: #000;
9+
color: #fff;
1010
font-family:Monospace;
1111
font-size:13px;
1212
text-align:center;
13-
color: #fff;
1413

1514
background-color: #000;
1615

@@ -50,7 +49,7 @@
5049

5150
var container, stats;
5251
var params = {
53-
envMap: "EXR",
52+
envMap: 'EXR',
5453
roughness: 0.0,
5554
metalness: 0.0,
5655
exposure: 1.0
@@ -67,7 +66,7 @@
6766
container = document.createElement( 'div' );
6867
document.body.appendChild( container );
6968

70-
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
69+
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
7170
camera.position.set( 0.0, 0, 120 );
7271

7372
scene = new THREE.Scene();
@@ -101,7 +100,7 @@
101100
planeMesh1.rotation.x = - Math.PI * 0.5;
102101
scene.add( planeMesh1 );
103102

104-
new THREE.EXRLoader().load( "textures/piz_compressed.exr", function ( texture ) {
103+
new THREE.EXRLoader().load( 'textures/piz_compressed.exr', function ( texture ) {
105104

106105
texture.minFilter = THREE.NearestFilter;
107106
texture.magFilter = THREE.NearestFilter;
@@ -120,7 +119,7 @@
120119

121120
} );
122121

123-
new THREE.TextureLoader().load( "textures/equiangular.png", function ( texture ) {
122+
new THREE.TextureLoader().load( 'textures/equiangular.png', function ( texture ) {
124123

125124
texture.encoding = THREE.sRGBEncoding;
126125

@@ -214,9 +213,7 @@
214213

215214
}
216215

217-
renderer.toneMappingExposure = Math.pow( params.exposure, 4.0 );
218-
219-
camera.lookAt( scene.position );
216+
renderer.toneMappingExposure = params.exposure;
220217

221218
for ( var i = 0, l = objects.length; i < l; i ++ ) {
222219

‎examples/webgl_materials_envmaps_hdr.html‎

Lines changed: 30 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
77
<style>
88
body {
9-
color: #000;
9+
color: #fff;
1010
font-family:Monospace;
1111
font-size:13px;
1212
text-align:center;
@@ -33,6 +33,7 @@
3333

3434
<script src="../build/three.js"></script>
3535
<script src="js/controls/OrbitControls.js"></script>
36+
3637
<script src="js/loaders/RGBELoader.js"></script>
3738
<script src="js/loaders/HDRCubeTextureLoader.js"></script>
3839

@@ -43,32 +44,18 @@
4344
<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
4445
<script src="js/libs/dat.gui.min.js"></script>
4546

46-
<script src="js/postprocessing/EffectComposer.js"></script>
47-
<script src="js/postprocessing/RenderPass.js"></script>
48-
<script src="js/postprocessing/MaskPass.js"></script>
49-
<script src="js/postprocessing/ShaderPass.js"></script>
50-
<script src="js/shaders/CopyShader.js"></script>
51-
<script src="js/shaders/FXAAShader.js"></script>
52-
<script src="js/postprocessing/BloomPass.js"></script>
53-
<script src="js/shaders/ConvolutionShader.js"></script>
54-
5547
<script>
5648

5749
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
5850

5951
var container, stats;
6052
var params = {
61-
envMap: "HDR",
62-
projection: 'normal',
63-
roughness: 1.0,
64-
bumpScale: 0.3,
65-
background: false,
66-
exposure: 1.0,
67-
side: 'front'
53+
envMap: 'HDR',
54+
roughness: 0.0,
55+
metalness: 0.0,
56+
exposure: 1.0
6857
};
6958
var camera, scene, renderer, controls, objects = [];
70-
var hdrCubeMap;
71-
var composer;
7259
var standardMaterial, floorMaterial;
7360
var ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
7461

@@ -80,58 +67,39 @@
8067
container = document.createElement( 'div' );
8168
document.body.appendChild( container );
8269

83-
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
84-
camera.position.set( 0.0, 40, 40 * 3.5 );
70+
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
71+
camera.position.set( 0.0, 0, 120 );
8572

8673
scene = new THREE.Scene();
87-
scene.background = new THREE.Color( 0xffffff );
74+
scene.background = new THREE.Color( 0x000000 );
8875

8976
renderer = new THREE.WebGLRenderer();
9077
renderer.toneMapping = THREE.LinearToneMapping;
9178

9279
standardMaterial = new THREE.MeshStandardMaterial( {
9380
map: null,
94-
bumpScale: - 0.05,
95-
color: 0xff4444,
96-
metalness: 0.5,
97-
roughness: 1.0
81+
color: 0xffffff,
82+
metalness: params.metalness,
83+
roughness: params.roughness
9884
} );
9985

100-
var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );
86+
var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
87+
10188
var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
102-
torusMesh1.position.x = 0.0;
103-
torusMesh1.castShadow = true;
104-
torusMesh1.receiveShadow = true;
89+
10590
scene.add( torusMesh1 );
10691
objects.push( torusMesh1 );
10792

108-
floorMaterial = new THREE.MeshStandardMaterial( {
109-
map: null,
110-
roughnessMap: null,
93+
floorMaterial = new THREE.MeshBasicMaterial( {
11194
color: 0xffffff,
112-
metalness: 0.0,
113-
roughness: 0.0
11495
} );
11596

11697
var planeGeometry = new THREE.PlaneBufferGeometry( 200, 200 );
11798
var planeMesh1 = new THREE.Mesh( planeGeometry, floorMaterial );
11899
planeMesh1.position.y = - 50;
119100
planeMesh1.rotation.x = - Math.PI * 0.5;
120-
planeMesh1.receiveShadow = true;
121101
scene.add( planeMesh1 );
122102

123-
var textureLoader = new THREE.TextureLoader();
124-
textureLoader.load( "./textures/roughness_map.jpg", function( map ) {
125-
map.wrapS = THREE.RepeatWrapping;
126-
map.wrapT = THREE.RepeatWrapping;
127-
map.anisotropy = 4;
128-
map.repeat.set( 9, 2 );
129-
standardMaterial.map = map;
130-
standardMaterial.roughnessMap = map;
131-
standardMaterial.bumpMap = map;
132-
standardMaterial.needsUpdate = true;
133-
} );
134-
135103
var genCubeUrls = function( prefix, postfix ) {
136104
return [
137105
prefix + 'px' + postfix, prefix + 'nx' + postfix,
@@ -140,7 +108,7 @@
140108
];
141109
};
142110

143-
var hdrUrls = genCubeUrls( "./textures/cube/pisaHDR/", ".hdr" );
111+
var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
144112
new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
145113

146114
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
@@ -153,7 +121,7 @@
153121

154122
} );
155123

156-
var ldrUrls = genCubeUrls( "./textures/cube/pisa/", ".png" );
124+
var ldrUrls = genCubeUrls( './textures/cube/pisa/', '.png' );
157125
new THREE.CubeTextureLoader().load( ldrUrls, function ( ldrCubeMap ) {
158126

159127
ldrCubeMap.encoding = THREE.GammaEncoding;
@@ -169,7 +137,7 @@
169137
} );
170138

171139

172-
var rgbmUrls = genCubeUrls( "./textures/cube/pisaRGBM16/", ".png" );
140+
var rgbmUrls = genCubeUrls( './textures/cube/pisaRGBM16/', '.png' );
173141
new THREE.CubeTextureLoader().load( rgbmUrls, function ( rgbmCubeMap ) {
174142

175143
rgbmCubeMap.encoding = THREE.RGBM16Encoding;
@@ -184,40 +152,29 @@
184152

185153
} );
186154

187-
// Lights
188-
189-
scene.add( new THREE.AmbientLight( 0x222222 ) );
190-
191-
var spotLight = new THREE.SpotLight( 0xffffff );
192-
spotLight.position.set( 50, 100, 50 );
193-
spotLight.angle = Math.PI / 7;
194-
spotLight.penumbra = 0.8;
195-
spotLight.castShadow = true;
196-
scene.add( spotLight );
197-
198155
renderer.setPixelRatio( window.devicePixelRatio );
199156
renderer.setSize( window.innerWidth, window.innerHeight );
200-
renderer.shadowMap.enabled = true;
201157
container.appendChild( renderer.domElement );
202158

203159
//renderer.toneMapping = THREE.ReinhardToneMapping;
204-
renderer.gammaInput = true;
160+
renderer.gammaInput = true; // ???
205161
renderer.gammaOutput = true;
206162

207163
stats = new Stats();
208164
container.appendChild( stats.dom );
209165

210166
controls = new THREE.OrbitControls( camera, renderer.domElement );
167+
controls.minDistance = 50;
168+
controls.maxDistance = 300;
211169

212170
window.addEventListener( 'resize', onWindowResize, false );
213171

214172
var gui = new dat.GUI();
215173

216-
gui.add( params, 'envMap', [ 'None', 'LDR', 'HDR', 'RGBM16' ] );
174+
gui.add( params, 'envMap', [ 'LDR', 'HDR', 'RGBM16' ] );
217175
gui.add( params, 'roughness', 0, 1 );
218-
gui.add( params, 'bumpScale', - 1, 1 );
219-
gui.add( params, 'exposure', 0.1, 2 );
220-
gui.add( params, 'side', [ 'front', 'back', 'double' ] );
176+
gui.add( params, 'metalness', 0, 1 );
177+
gui.add( params, 'exposure', 0, 2 );
221178
gui.open();
222179

223180
}
@@ -234,8 +191,6 @@
234191

235192
}
236193

237-
//
238-
239194
function animate() {
240195

241196
requestAnimationFrame( animate );
@@ -251,53 +206,31 @@
251206
if ( standardMaterial !== undefined ) {
252207

253208
standardMaterial.roughness = params.roughness;
254-
standardMaterial.bumpScale = - 0.05 * params.bumpScale;
209+
standardMaterial.metalness = params.metalness;
255210

256211
var newEnvMap = standardMaterial.envMap;
257212

258213
switch( params.envMap ) {
259214

260-
case 'None': newEnvMap = null; break;
261215
case 'LDR': newEnvMap = ldrCubeRenderTarget ? ldrCubeRenderTarget.texture : null; break;
262216
case 'HDR': newEnvMap = hdrCubeRenderTarget ? hdrCubeRenderTarget.texture : null; break;
263217
case 'RGBM16': newEnvMap = rgbmCubeRenderTarget ? rgbmCubeRenderTarget.texture : null; break;
264218

265219
}
266220

267-
if( newEnvMap !== standardMaterial.envMap ) {
221+
if ( newEnvMap !== standardMaterial.envMap ) {
268222

269223
standardMaterial.envMap = newEnvMap;
270224
standardMaterial.needsUpdate = true;
271-
floorMaterial.emissive = new THREE.Color( 1, 1, 1 );
272-
floorMaterial.emissiveMap = newEnvMap;
273-
floorMaterial.needsUpdate = true;
274225

275-
}
276-
277-
278-
var side = standardMaterial.side;
279-
280-
switch ( params.side ) {
281-
282-
case 'front': side = THREE.FrontSide; break;
283-
case 'back': side = THREE.BackSide; break;
284-
case 'double': side = THREE.DoubleSide; break;
226+
floorMaterial.map = newEnvMap;
227+
floorMaterial.needsUpdate = true;
285228

286229
}
287230

288-
if( standardMaterial.side !== side ) {
289-
290-
standardMaterial.side = side;
291-
standardMaterial.needsUpdate = true;
292-
293-
}
294231
}
295232

296-
renderer.toneMappingExposure = Math.pow( params.exposure, 4.0 );
297-
298-
var timer = Date.now() * 0.00025;
299-
300-
camera.lookAt( scene.position );
233+
renderer.toneMappingExposure = params.exposure;
301234

302235
for ( var i = 0, l = objects.length; i < l; i ++ ) {
303236

0 commit comments

Comments
 (0)