Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 308 lines (209 sloc) 8.467 kb
bbb65a7 @mrdoob Updated HTML of the rest of the examples.
authored
1 <!doctype html>
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
2 <html lang="en">
3 <head>
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
4 <title>three.js webgl - materials - normal map</title>
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
5 <meta charset="utf-8">
bbb65a7 @mrdoob Updated HTML of the rest of the examples.
authored
6 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7 <style>
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
8 body {
9 background:#000;
10 color:#fff;
11 padding:0;
12 margin:0;
13 font-weight: bold;
14 overflow:hidden;
15 }
16
17 a { color: #ffffff; }
18
19 #info {
20 position: absolute;
21 top: 0px; width: 100%;
22 color: #ffffff;
23 padding: 5px;
24 font-family:Monospace;
25 font-size:13px;
26 text-align:center;
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
27 z-index:1000;
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
28 }
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
29
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
30 #oldie {
29cf97e @alteredq Added centralized message for non-WebGL-compatible browser to majorit…
alteredq authored
31 background:rgb(200,100,0) !important;
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
32 color:#fff;
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
33 }
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
34
35 #vt { display:none }
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
36 #vt, #vt a { color:orange; }
37 </style>
38 </head>
39
40 <body>
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
41
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
42 <div id="info">
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
43 <a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl (<span id="description">normal + ao + displacement + environment + shadow</span>) map demo.
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
44 ninja head from <a href="http://developer.amd.com/archive/gpu/MeshMapper/pages/default.aspx" target="_blank">AMD GPU MeshMapper</a>
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
45
495de75 @alteredq Added OrthoCamera.
alteredq authored
46 <div id="vt">displacement mapping needs vertex textures (GPU with Shader Model 3.0)</div>
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
47 </div>
48
19d8261 @mrdoob More examples clean up.
authored
49 <script src="../build/Three.js"></script>
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
50
19d8261 @mrdoob More examples clean up.
authored
51 <script src="js/Detector.js"></script>
52 <script src="js/Stats.js"></script>
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
53
19d8261 @mrdoob More examples clean up.
authored
54 <script>
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
55
fef3c08 @mrdoob Changed build setup:
authored
56 if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
57
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
58 var statsEnabled = true;
59
60 var container, stats, loader;
61
495de75 @alteredq Added OrthoCamera.
alteredq authored
62 var camera, scene, renderer;
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
63
64 var mesh, zmesh, lightMesh, geometry;
65 var mesh1, mesh2;
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
66
49f14b8 @alteredq Refactored shadow maps to store shadow parameters and data in SpotLight.
alteredq authored
67 var spotLight, pointLight, ambientLight;
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
68
69 var mouseX = 0;
70 var mouseY = 0;
71
72 var windowHalfX = window.innerWidth / 2;
73 var windowHalfY = window.innerHeight / 2;
74
75 var r = 0.0;
76
77 document.addEventListener( 'mousemove', onDocumentMouseMove, false );
78
79 init();
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
80 animate();
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
81
82 function init() {
83
176d0f2 @mrdoob Merging with @alteredq's branch.
authored
84 container = document.createElement( 'div' );
85 document.body.appendChild( container );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
86
36b8839 @alteredq More fixing of runtime warnings in examples.
alteredq authored
87 scene = new THREE.Scene();
88
89 // CAMERA
90
064138d @alteredq Updated more examples. Got AnaglyphWebGLRenderer and CrosseyedWebGLRe…
alteredq authored
91 camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
92 camera.position.z = 1500;
36b8839 @alteredq More fixing of runtime warnings in examples.
alteredq authored
93 scene.add( camera );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
94
95 // LIGHTS
96
97 ambientLight = new THREE.AmbientLight( 0x111111 );
a940f05 @mrdoob Updated examples with the new `.add`/`.remove` methods.
authored
98 scene.add( ambientLight );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
99
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
100 pointLight = new THREE.PointLight( 0xff0000 );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
101 pointLight.position.z = 10000;
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
102 pointLight.distance = 4000;
a940f05 @mrdoob Updated examples with the new `.add`/`.remove` methods.
authored
103 scene.add( pointLight );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
104
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
105 pointLight2 = new THREE.PointLight( 0xff5500 );
106 pointLight2.position.z = 1000;
107 pointLight2.distance = 2000;
108 scene.add( pointLight2 );
109
110 pointLight3 = new THREE.PointLight( 0x0000ff );
111 pointLight3.position.x = -1000;
112 pointLight3.position.z = 1000;
113 pointLight3.distance = 2000;
114 scene.add( pointLight3 );
115
49f14b8 @alteredq Refactored shadow maps to store shadow parameters and data in SpotLight.
alteredq authored
116 spotLight = new THREE.SpotLight( 0xaaaaaa );
117 spotLight.position.set( 1000, 500, 1000 );
118 spotLight.castShadow = true;
119 spotLight.shadowCameraNear = 500;
120 spotLight.shadowCameraFov = 70;
121 spotLight.shadowBias = 0.001;
122 spotLight.shadowMapWidth = 1024;
123 spotLight.shadowMapHeight = 1024;
124 scene.add( spotLight );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
125
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
126 directionalLight2 = new THREE.DirectionalLight( 0xaaff33, 0 );
127 directionalLight2.position.set( -1, 1, 0.5 ).normalize();
128 //scene.add( directionalLight2 );
129
130 directionalLight3 = new THREE.DirectionalLight( 0xaaff33 );
131 directionalLight3.position.set( -1, 1, 0.5 ).normalize();
132 //scene.add( directionalLight3 );
133
134
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
135 // light representation
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
136
bfdb10a Updated all examples so they use the renamed geometry classes.
Mr.doob authored
137 var sphere = new THREE.SphereGeometry( 100, 16, 8 );
495de75 @alteredq Added OrthoCamera.
alteredq authored
138 lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
139 lightMesh.position = pointLight.position;
140 lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
141 //scene.add( lightMesh );
142
143 var path = "textures/cube/SwedishRoyalCastle/";
144 var format = '.jpg';
145 var urls = [
146 path + 'px' + format, path + 'nx' + format,
147 path + 'py' + format, path + 'ny' + format,
148 path + 'pz' + format, path + 'nz' + format
149 ];
150
151 var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
152
153 // common material parameters
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
154
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
155 var ambient = 0x050505, diffuse = 0x331100, specular = 0xffffff, shininess = 10, scale = 23;
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
156
157 // normal map shader
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
158
76e7ea3 @mrdoob Added namespace to all the objects that missed it (geometries, unifor…
authored
159 var shader = THREE.ShaderUtils.lib[ "normal" ];
160 var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
161
6e91de5 @alteredq Added diffuse map to normal map shader. Changed Lee Perry-Smith demo …
alteredq authored
162 uniforms[ "enableAO" ].value = true;
163 uniforms[ "enableDiffuse" ].value = false;
22bd108 @alteredq Added FlyCamera (thanks to James Baicoianu). Added specular map to no…
alteredq authored
164 uniforms[ "enableSpecular" ].value = false;
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
165 uniforms[ "enableReflection" ].value = true;
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
166
76e7ea3 @mrdoob Added namespace to all the objects that missed it (geometries, unifor…
authored
167 uniforms[ "tNormal" ].texture = THREE.ImageUtils.loadTexture( "textures/normal/ninja/normal.jpg" );
168 uniforms[ "tAO" ].texture = THREE.ImageUtils.loadTexture( "textures/normal/ninja/ao.jpg" );
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
169
76e7ea3 @mrdoob Added namespace to all the objects that missed it (geometries, unifor…
authored
170 uniforms[ "tDisplacement" ].texture = THREE.ImageUtils.loadTexture( "textures/normal/ninja/displacement.jpg" );
171 uniforms[ "uDisplacementBias" ].value = - 0.428408 * scale;
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
172 uniforms[ "uDisplacementScale" ].value = 2.436143 * scale;
495de75 @alteredq Added OrthoCamera.
alteredq authored
173
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
174 uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
175 uniforms[ "uSpecularColor" ].value.setHex( specular );
176 uniforms[ "uAmbientColor" ].value.setHex( ambient );
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
177
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
178 uniforms[ "uShininess" ].value = shininess;
179
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
180 uniforms[ "tCube" ].texture = reflectionCube;
181 uniforms[ "uReflectivity" ].value = 0.1;
182
fddef60 @alteredq Added linear color space handling to normal map shader.
alteredq authored
183 uniforms[ "uDiffuseColor" ].value.convertGammaToLinear();
184 uniforms[ "uSpecularColor" ].value.convertGammaToLinear();
185 uniforms[ "uAmbientColor" ].value.convertGammaToLinear();
186
187
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
188 var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, fog: false };
e298ac6 @alteredq Renamed MeshShaderMaterial => ShaderMaterial
alteredq authored
189 var material1 = new THREE.ShaderMaterial( parameters );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
190
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
191 var material2 = new THREE.MeshPhongMaterial( { color: diffuse, specular: specular, ambient: ambient, shininess: shininess, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.1 } );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
192
064138d @alteredq Updated more examples. Got AnaglyphWebGLRenderer and CrosseyedWebGLRe…
alteredq authored
193 //
194
071de36 @alteredq Updated Blender exporter to export new JSON format.
alteredq authored
195 loader = new THREE.BinaryLoader( true );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
196 document.body.appendChild( loader.statusDomElement );
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
197
6b151b5 @mrdoob Merging with @alteredq's experimental branches.
authored
198 loader.load( "obj/ninja/NinjaLo_bin.js", function( geometry ) { createScene( geometry, scale, material1, material2 ) } );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
199
064138d @alteredq Updated more examples. Got AnaglyphWebGLRenderer and CrosseyedWebGLRe…
alteredq authored
200 //
201
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
202 renderer = new THREE.WebGLRenderer( { maxLights: 8 } );
495de75 @alteredq Added OrthoCamera.
alteredq authored
203 renderer.setSize( window.innerWidth, window.innerHeight );
204 container.appendChild( renderer.domElement );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
205
064138d @alteredq Updated more examples. Got AnaglyphWebGLRenderer and CrosseyedWebGLRe…
alteredq authored
206 //
207
fddef60 @alteredq Added linear color space handling to normal map shader.
alteredq authored
208 renderer.gammaInput = true;
209 renderer.gammaOutput = true;
9451201 @alteredq Added workaround for ANGLE bug which was breaking shading when using …
alteredq authored
210 renderer.physicallyBasedShading = true;
fddef60 @alteredq Added linear color space handling to normal map shader.
alteredq authored
211
212 //
213
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
214 renderer.shadowMapEnabled = true;
215 renderer.shadowMapSoft = true;
216
217
218 //
219
220 var description = "normal + ao" + ( renderer.supportsVertexTextures() ? " + displacement + environment + shadow" : " + <strike>displacement</strike>" );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
221 document.getElementById( "description" ).innerHTML = description;
495de75 @alteredq Added OrthoCamera.
alteredq authored
222 document.getElementById( "vt" ).style.display = renderer.supportsVertexTextures() ? "none" : "block";
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
223
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
224 if ( statsEnabled ) {
225
226 stats = new Stats();
227 stats.domElement.style.position = 'absolute';
228 stats.domElement.style.top = '0px';
229 stats.domElement.style.zIndex = 100;
230 container.appendChild( stats.domElement );
231
232 }
233
234 }
235
236 function createScene( geometry, scale, material1, material2 ) {
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
237
3b6b3dc @alteredq Made more examples working.
alteredq authored
238 geometry.computeTangents();
76e7ea3 @mrdoob Added namespace to all the objects that missed it (geometries, unifor…
authored
239
77eed2e @mrdoob Removed most of SeceneUtils methods for simplicity reasons.
authored
240 mesh1 = new THREE.Mesh( geometry, material1 );
241 mesh1.position.x = - scale * 12;
495de75 @alteredq Added OrthoCamera.
alteredq authored
242 mesh1.scale.set( scale, scale, scale );
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
243 mesh1.castShadow = true;
244 mesh1.receiveShadow = true;
a940f05 @mrdoob Updated examples with the new `.add`/`.remove` methods.
authored
245 scene.add( mesh1 );
77eed2e @mrdoob Removed most of SeceneUtils methods for simplicity reasons.
authored
246
247 mesh2 = new THREE.Mesh( geometry, material2 );
248 mesh2.position.x = scale * 12;
495de75 @alteredq Added OrthoCamera.
alteredq authored
249 mesh2.scale.set( scale, scale, scale );
84ed183 @alteredq Added reflection to normal map shader.
alteredq authored
250 mesh2.castShadow = true;
251 mesh2.receiveShadow = true;
a940f05 @mrdoob Updated examples with the new `.add`/`.remove` methods.
authored
252 scene.add( mesh2 );
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
253
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
254 loader.statusDomElement.style.display = "none";
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
255
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
256 }
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
257
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
258 function onDocumentMouseMove(event) {
259
260 mouseX = ( event.clientX - windowHalfX ) * 10;
261 mouseY = ( event.clientY - windowHalfY ) * 10;
262
263 }
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
264
265 //
266
267 function animate() {
268
269 requestAnimationFrame( animate );
270
271 render();
272 if ( statsEnabled ) stats.update();
273
274 }
275
276 function render() {
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
277
278 var ry = mouseX * 0.0003, rx = mouseY * 0.0003;
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
279
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
280 if( mesh1 ) {
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
281
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
282 mesh1.rotation.y = ry;
283 mesh1.rotation.x = rx;
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
284
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
285 }
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
286
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
287 if( mesh2 ) {
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
288
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
289 mesh2.rotation.y = ry;
290 mesh2.rotation.x = rx;
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
291
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
292 }
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
293
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
294 lightMesh.position.x = 2500 * Math.cos( r );
295 lightMesh.position.z = 2500 * Math.sin( r );
296
297 r += 0.01;
298
495de75 @alteredq Added OrthoCamera.
alteredq authored
299 renderer.render( scene, camera );
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
300
301 }
9297fb9 @mrdoob All examples now use RequestAnimationFrame.js (pheww!)
authored
302
ac5276b @alteredq Added normal + ambient occlusion + displacement mapping demo.
alteredq authored
303
304 </script>
305
306 </body>
307 </html>
Something went wrong with that request. Please try again.