Skip to content

Commit a5f4cee

Browse files
mrdoobmrdoob
committed
Improved webgl_materials_transparency example.
1 parent 7bc563e commit a5f4cee

File tree

1 file changed

+69
-87
lines changed

1 file changed

+69
-87
lines changed

‎examples/webgl_materials_transparency.html

Lines changed: 69 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,10 @@
5252

5353
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
5454

55+
var params = { opacity: 0.25 };
56+
5557
var container, stats;
56-
var params = {
57-
roughness: 1.0,
58-
opacity: 0.5
59-
};
60-
var camera, scene, renderer, controls, objects = [];
61-
var composer;
62-
var standardMaterial, standardMaterialPremultiplied;
58+
var camera, scene, renderer, controls;
6359

6460
init();
6561
animate();
@@ -74,82 +70,86 @@
7470

7571
scene = new THREE.Scene();
7672

77-
renderer = new THREE.WebGLRenderer( { antialias: false } );
73+
renderer = new THREE.WebGLRenderer();
74+
75+
//
76+
77+
var geometry = new THREE.SphereGeometry( 18, 30, 30 );
7878

79-
standardMaterial = new THREE.MeshStandardMaterial( {
80-
map: null,
81-
metalness: 0.9,
82-
roughness: 1.0,
83-
shading: THREE.SmoothShading,
84-
blending: THREE.NormalBlending,
79+
var material1 = new THREE.MeshStandardMaterial( {
80+
roughness: params.roughness,
81+
opacity: params.opacity,
8582
transparent: true
8683
} );
87-
var geometry = new THREE.SphereGeometry( 18, 30, 30 );
88-
var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
89-
torusMesh1.position.x = - 20.0;
90-
torusMesh1.castShadow = true;
91-
scene.add( torusMesh1 );
92-
objects.push( torusMesh1 );
93-
94-
standardMaterialPremultiplied = new THREE.MeshStandardMaterial( {
95-
map: null,
96-
metalness: 0.9,
97-
roughness: 1.0,
98-
shading: THREE.SmoothShading,
84+
85+
var material2 = new THREE.MeshStandardMaterial( {
86+
roughness: params.roughness,
87+
opacity: params.opacity,
9988
premultipliedAlpha: true,
10089
transparent: true
10190
} );
10291

10392
var textureLoader = new THREE.TextureLoader();
104-
textureLoader.load( "../examples/textures/roughness_map.jpg", function ( map ) {
105-
106-
map.wrapS = THREE.RepeatWrapping;
107-
map.wrapT = THREE.RepeatWrapping;
108-
map.anisotropy = 4;
109-
map.repeat.set( 2, 2 );
110-
standardMaterial.map = map;
111-
standardMaterial.roughnessMap = map;
112-
standardMaterial.needsUpdate = true;
113-
standardMaterialPremultiplied.map = map;
114-
standardMaterialPremultiplied.roughnessMap = map;
115-
standardMaterialPremultiplied.needsUpdate = true;
93+
textureLoader.load( "textures/hardwood2_diffuse.jpg", function ( map ) {
94+
95+
map.anisotropy = 8;
96+
97+
material1.map = map;
98+
material1.needsUpdate = true;
99+
material2.map = map;
100+
material2.needsUpdate = true;
116101

117102
} );
118103

119-
var torusMesh2 = new THREE.Mesh( geometry, standardMaterialPremultiplied );
120-
torusMesh2.position.x = 20.0;
121-
torusMesh2.castShadow = true;
122-
scene.add( torusMesh2 );
123-
objects.push( torusMesh2 );
104+
var textureLoader = new THREE.TextureLoader();
105+
textureLoader.load( "textures/hardwood2_roughness.jpg", function ( map ) {
106+
107+
map.anisotropy = 8;
108+
109+
material1.roughnessMap = map;
110+
material1.needsUpdate = true;
111+
material2.roughnessMap = map;
112+
material2.needsUpdate = true;
113+
114+
} );
115+
116+
var mesh = new THREE.Mesh( geometry, material1 );
117+
mesh.position.x = - 25.0;
118+
scene.add( mesh );
119+
120+
var mesh = new THREE.Mesh( geometry, material2 );
121+
mesh.position.x = 25.0;
122+
scene.add( mesh );
123+
124+
//
124125

125126
var floorMaterial = new THREE.MeshStandardMaterial( {
126-
map: null,
127-
roughnessMap: null,
128-
color: 0xffffff,
127+
color: 0x333333,
129128
metalness: 0.0,
130-
roughness: 0.0,
131-
shading: THREE.SmoothShading
129+
roughness: 0.0
132130
} );
133131

134-
var planeGeometry = new THREE.PlaneBufferGeometry( 200, 200 );
132+
var planeGeometry = new THREE.PlaneBufferGeometry( 800, 800 );
135133
var planeMesh1 = new THREE.Mesh( planeGeometry, floorMaterial );
136134
planeMesh1.position.y = - 50;
137135
planeMesh1.rotation.x = - Math.PI * 0.5;
138-
planeMesh1.receiveShadow = true;
139136
scene.add( planeMesh1 );
140137

141138
// Lights
142139

143-
scene.add( new THREE.AmbientLight( 0x222222 ) );
140+
var spotLight = new THREE.SpotLight( 0xff8888 );
141+
spotLight.position.set( 100, 200, 100 );
142+
spotLight.angle = Math.PI / 5;
143+
spotLight.penumbra = 0.9;
144+
scene.add( spotLight );
144145

145-
var spotLight = new THREE.SpotLight( 0xffffff );
146-
spotLight.position.set( 50, 100, 50 );
147-
spotLight.angle = Math.PI / 7;
148-
spotLight.penumbra = 0.8;
149-
spotLight.intensity = 5;
150-
spotLight.castShadow = true;
146+
var spotLight = new THREE.SpotLight( 0x8888ff );
147+
spotLight.position.set( - 100, - 200, - 100 );
148+
spotLight.angle = Math.PI / 5;
149+
spotLight.penumbra = 0.9;
151150
scene.add( spotLight );
152151

152+
153153
renderer.setPixelRatio( window.devicePixelRatio );
154154
renderer.setSize( window.innerWidth, window.innerHeight );
155155
renderer.shadowMap.enabled = true;
@@ -158,16 +158,6 @@
158158
renderer.gammaInput = true;
159159
renderer.gammaOutput = true;
160160

161-
composer = new THREE.EffectComposer( renderer );
162-
composer.setSize( window.innerWidth, window.innerHeight );
163-
164-
var renderScene = new THREE.RenderPass( scene, camera );
165-
composer.addPass( renderScene );
166-
167-
var copyPass = new THREE.ShaderPass( THREE.CopyShader );
168-
copyPass.renderToScreen = true;
169-
composer.addPass( copyPass );
170-
171161
stats = new Stats();
172162
stats.domElement.style.position = 'absolute';
173163
stats.domElement.style.top = '0px';
@@ -181,9 +171,12 @@
181171
window.addEventListener( 'resize', onWindowResize, false );
182172

183173
var gui = new dat.GUI();
174+
gui.add( params, 'opacity', 0, 1 ).onChange( function () {
175+
176+
material1.opacity = params.opacity;
177+
material2.opacity = params.opacity;
184178

185-
gui.add( params, 'roughness', 0, 1 );
186-
gui.add( params, 'opacity', 0, 1 );
179+
} );
187180
gui.open();
188181

189182
}
@@ -197,7 +190,6 @@
197190
camera.updateProjectionMatrix();
198191

199192
renderer.setSize( width, height );
200-
composer.setSize( width, height );
201193

202194
}
203195

@@ -215,33 +207,23 @@
215207

216208
function render() {
217209

218-
if ( standardMaterial !== undefined ) {
219-
210+
for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
220211

221-
standardMaterial.roughness = params.roughness;
222-
standardMaterialPremultiplied.roughness = params.roughness;
212+
var object = scene.children[ i ];
223213

224-
standardMaterial.opacity = params.opacity;
225-
standardMaterialPremultiplied.opacity = params.opacity;
226-
227-
}
214+
if ( object.geometry instanceof THREE.SphereGeometry ) {
228215

229-
var timer = Date.now() * 0.00025;
216+
object.rotation.x = performance.now() * 0.0002;
217+
object.rotation.y = - performance.now() * 0.0002;
230218

231-
camera.lookAt( scene.position );
232-
233-
for ( var i = 0, l = objects.length; i < l; i ++ ) {
234-
235-
var object = objects[ i ];
236-
object.rotation.y += 0.005;
219+
}
237220

238221
}
239222

240-
composer.render();
223+
renderer.render( scene, camera );
241224

242225
}
243226

244227
</script>
245-
246228
</body>
247229
</html>

0 commit comments

Comments
 (0)