Skip to content

Commit 3606d2f

Browse files
mrdoobmrdoob
committed
Merge pull request mrdoob#8360 from bhouston/improve_mat_standard_example
Add PMREM/CubeUV envMaps to materials_standard example
2 parents 13c97b1 + 48566c2 commit 3606d2f

File tree

2 files changed

+69
-39
lines changed

2 files changed

+69
-39
lines changed

‎examples/webgl_materials_envmaps_hdr.html

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -32,28 +32,27 @@
3232
Created by Prashant Sharma and <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
3333

3434
<script src="../build/three.min.js"></script>
35-
<script src="../examples/js/controls/OrbitControls.js"></script>
36-
<script src="../src/loaders/BinaryTextureLoader.js"></script>
37-
<script src="../examples/js/loaders/RGBELoader.js"></script>
38-
<script src="../examples/js/loaders/HDRCubeTextureLoader.js"></script>
39-
40-
<script src="../examples/js/Detector.js"></script>
41-
<script src="../examples/js/libs/stats.min.js"></script>
42-
43-
<script src="../examples/js/Half.js"></script>
44-
<script src="../examples/js/Encodings.js"></script>
45-
<script src="../examples/js/pmrem/PMREMGenerator.js"></script>
46-
<script src="../examples/js/pmrem/PMREMCubeUVPacker.js"></script>
47-
<script src="../examples/js/libs/dat.gui.min.js"></script>
48-
49-
<script src="../examples/js/postprocessing/EffectComposer.js"></script>
50-
<script src="../examples/js/postprocessing/RenderPass.js"></script>
51-
<script src="../examples/js/postprocessing/MaskPass.js"></script>
52-
<script src="../examples/js/postprocessing/ShaderPass.js"></script>
53-
<script src="../examples/js/shaders/CopyShader.js"></script>
54-
<script src="../examples/js/shaders/FXAAShader.js"></script>
55-
<script src="../examples/js/postprocessing/BloomPass.js"></script>
56-
<script src="../examples/js/shaders/ConvolutionShader.js"></script>
35+
<script src="js/controls/OrbitControls.js"></script>
36+
<script src="js/loaders/RGBELoader.js"></script>
37+
<script src="js/loaders/HDRCubeTextureLoader.js"></script>
38+
39+
<script src="js/Detector.js"></script>
40+
<script src="js/libs/stats.min.js"></script>
41+
42+
<script src="js/Half.js"></script>
43+
<script src="js/Encodings.js"></script>
44+
<script src="js/pmrem/PMREMGenerator.js"></script>
45+
<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
46+
<script src="js/libs/dat.gui.min.js"></script>
47+
48+
<script src="js/postprocessing/EffectComposer.js"></script>
49+
<script src="js/postprocessing/RenderPass.js"></script>
50+
<script src="js/postprocessing/MaskPass.js"></script>
51+
<script src="js/postprocessing/ShaderPass.js"></script>
52+
<script src="js/shaders/CopyShader.js"></script>
53+
<script src="js/shaders/FXAAShader.js"></script>
54+
<script src="js/postprocessing/BloomPass.js"></script>
55+
<script src="js/shaders/ConvolutionShader.js"></script>
5756

5857
<script>
5958

@@ -125,7 +124,7 @@
125124
scene.add( planeMesh1 );
126125

127126
var textureLoader = new THREE.TextureLoader();
128-
textureLoader.load( "../examples/textures/roughness_map.jpg", function( map ) {
127+
textureLoader.load( "./textures/roughness_map.jpg", function( map ) {
129128
map.wrapS = THREE.RepeatWrapping;
130129
map.wrapT = THREE.RepeatWrapping;
131130
map.anisotropy = 4;
@@ -143,7 +142,7 @@
143142
];
144143
};
145144

146-
var hdrUrls = genCubeUrls( "../examples/textures/cube/pisaHDR/", ".hdr" );
145+
var hdrUrls = genCubeUrls( "./textures/cube/pisaHDR/", ".hdr" );
147146
new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
148147

149148
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
@@ -158,7 +157,7 @@
158157
standardMaterial.needsUpdate = true;
159158
} );
160159

161-
var ldrUrls = genCubeUrls( "../examples/textures/cube/pisa/", ".png" );
160+
var ldrUrls = genCubeUrls( "./textures/cube/pisa/", ".png" );
162161
new THREE.CubeTextureLoader().load( ldrUrls, function ( ldrCubeMap ) {
163162

164163
ldrCubeMap.encoding = THREE.GammaEncoding;
@@ -173,7 +172,7 @@
173172
} );
174173

175174

176-
var rgbmUrls = genCubeUrls( "../examples/textures/cube/pisaRGBM16/", ".png" );
175+
var rgbmUrls = genCubeUrls( "./textures/cube/pisaRGBM16/", ".png" );
177176
new THREE.CubeTextureLoader().load( rgbmUrls, function ( rgbmCubeMap ) {
178177

179178
rgbmCubeMap.encoding = THREE.RGBM16Encoding;

‎examples/webgl_materials_standard.html

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@
5151

5252
<script src="js/controls/TrackballControls.js"></script>
5353
<script src="js/loaders/OBJLoader.js"></script>
54+
<script src="js/loaders/RGBELoader.js"></script>
55+
<script src="js/loaders/HDRCubeTextureLoader.js"></script>
56+
<script src="js/Half.js"></script>
57+
<script src="js/Encodings.js"></script>
58+
<script src="js/pmrem/PMREMGenerator.js"></script>
59+
<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
5460

5561
<script src="js/Detector.js"></script>
5662
<script src="js/libs/stats.min.js"></script>
@@ -87,6 +93,21 @@
8793

8894
controls = new THREE.TrackballControls( camera );
8995

96+
//
97+
98+
renderer = new THREE.WebGLRenderer( { antialias: true } );
99+
renderer.setClearColor( 0x202020 );
100+
renderer.setPixelRatio( window.devicePixelRatio );
101+
renderer.setSize( window.innerWidth, window.innerHeight );
102+
container.appendChild( renderer.domElement );
103+
104+
renderer.autoClear = false;
105+
renderer.gammaInput = true;
106+
renderer.gammaOutput = true;
107+
renderer.toneMapping = THREE.ReinhardToneMapping;
108+
renderer.toneMappingExposure = 3;
109+
110+
90111
scene = new THREE.Scene();
91112

92113
sceneCube = new THREE.Scene();
@@ -111,7 +132,7 @@
111132
var shader = THREE.ShaderLib[ "cube" ];
112133
shader.uniforms[ "tCube" ].value = textureCube;
113134

114-
var material = new THREE.ShaderMaterial( {
135+
var materialBG = new THREE.ShaderMaterial( {
115136

116137
fragmentShader: shader.fragmentShader,
117138
vertexShader: shader.vertexShader,
@@ -121,18 +142,18 @@
121142

122143
} ),
123144

124-
mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
145+
mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), materialBG );
125146
sceneCube.add( mesh );
126147

127148
//
128149

129150
var path = 'models/obj/cerberus/';
130151

131152
var loader = new THREE.OBJLoader();
153+
var material = new THREE.MeshStandardMaterial();
132154
loader.load( path + 'Cerberus.obj', function ( group ) {
133155

134156
// var material = new THREE.MeshBasicMaterial( { wireframe: true } );
135-
var material = new THREE.MeshStandardMaterial();
136157

137158
var loader = new THREE.TextureLoader();
138159

@@ -143,7 +164,6 @@
143164
material.roughnessMap = loader.load( path + 'Cerberus_R.jpg' );
144165
material.metalnessMap = loader.load( path + 'Cerberus_M.jpg' );
145166
material.normalMap = loader.load( path + 'Cerberus_N.jpg' );
146-
material.envMap = textureCube;
147167

148168
material.map.wrapS = THREE.RepeatWrapping;
149169
material.roughnessMap.wrapS = THREE.RepeatWrapping;
@@ -166,17 +186,28 @@
166186

167187
} );
168188

169-
//
189+
var genCubeUrls = function( prefix, postfix ) {
190+
return [
191+
prefix + 'px' + postfix, prefix + 'nx' + postfix,
192+
prefix + 'py' + postfix, prefix + 'ny' + postfix,
193+
prefix + 'pz' + postfix, prefix + 'nz' + postfix
194+
];
195+
};
170196

171-
renderer = new THREE.WebGLRenderer( { antialias: true } );
172-
renderer.setClearColor( 0x202020 );
173-
renderer.setPixelRatio( window.devicePixelRatio );
174-
renderer.setSize( window.innerWidth, window.innerHeight );
175-
container.appendChild( renderer.domElement );
197+
var hdrUrls = genCubeUrls( "./textures/cube/pisaHDR/", ".hdr" );
198+
new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
176199

177-
renderer.autoClear = false;
178-
renderer.gammaInput = true;
179-
renderer.gammaOutput = true;
200+
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
201+
pmremGenerator.update( renderer );
202+
203+
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
204+
pmremCubeUVPacker.update( renderer );
205+
206+
hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
207+
208+
material.envMap = hdrCubeRenderTarget;
209+
material.needsUpdate = true;
210+
} );
180211

181212
//
182213

0 commit comments

Comments
 (0)