<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - materials - normal map [Lee Perry-Smith]</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { background:#000; color:#fff; padding:0; margin:0; font-weight: bold; overflow:hidden; } a { color: #ffffff; } #info { position: absolute; top: 0px; width: 100%; color: #ffffff; padding: 5px; font-family:Monospace; font-size:13px; text-align:center; z-index:1000; } #oldie { background:rgb(200,100,0) !important; color:#fff; } #vt { display:none } #vt, #vt a { color:orange; } .code { } </style> </head> <body> <div id="info"> <a href="http://threejs.org" target="_blank">three.js</a> - webgl normalmap demo. <a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head. <div id="vt">displacement mapping needs vertex textures (GPU with Shader Model 3.0)<br/> on Windows use <span class="code">Chrome --use-gl=desktop</span> or Firefox 4<br/> please star this <a href="http://code.google.com/p/chromium/issues/detail?id=52497">Chrome issue</a> to get ANGLE support </div> </div> <script src="../build/three.min.js"></script> <script src="js/Detector.js"></script> <script src="js/libs/stats.min.js"></script> <script src="js/shaders/BleachBypassShader.js"></script> <script src="js/shaders/ColorCorrectionShader.js"></script> <script src="js/shaders/CopyShader.js"></script> <script src="js/shaders/FXAAShader.js"></script> <script src="js/postprocessing/EffectComposer.js"></script> <script src="js/postprocessing/RenderPass.js"></script> <script src="js/postprocessing/ShaderPass.js"></script> <script src="js/postprocessing/MaskPass.js"></script> <script> if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var statsEnabled = true; var container, stats, loader; var camera, scene, renderer; var mesh, zmesh, lightMesh, geometry; var mesh1; var directionalLight, pointLight, ambientLight; var mouseX = 0; var mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; var composer, effectFXAA; init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1200; scene = new THREE.Scene(); // LIGHTS ambientLight = new THREE.AmbientLight( 0x444444 ); scene.add( ambientLight ); pointLight = new THREE.PointLight( 0xffffff, 1.25, 1000 ); pointLight.position.set( 0, 0, 600 ); scene.add( pointLight ); directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 1, -0.5, -1 ); scene.add( directionalLight ); var material = new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x222222, shininess: 35, map: THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" ), specularMap: THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-SPEC.jpg" ), normalMap: THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ), normalScale: new THREE.Vector2( 0.8, 0.8 ), wrapRGB: new THREE.Vector3( 0.575, 0.5, 0.5 ), wrapAround: true } ); loader = new THREE.JSONLoader( true ); document.body.appendChild( loader.statusDomElement ); loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) { createScene( geometry, 100, material ) } ); renderer = new THREE.WebGLRenderer( { antialias: false } ); renderer.setClearColor( 0x111111 ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); // renderer.gammaInput = true; renderer.gammaOutput = true; // if ( statsEnabled ) { stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; stats.domElement.style.zIndex = 100; container.appendChild( stats.domElement ); } // COMPOSER renderer.autoClear = false; var renderModel = new THREE.RenderPass( scene, camera ); var effectBleach = new THREE.ShaderPass( THREE.BleachBypassShader ); var effectColor = new THREE.ShaderPass( THREE.ColorCorrectionShader ); effectFXAA = new THREE.ShaderPass( THREE.FXAAShader ); effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight ); effectBleach.uniforms[ 'opacity' ].value = 0.4; effectColor.uniforms[ 'powRGB' ].value.set( 1.4, 1.45, 1.45 ); effectColor.uniforms[ 'mulRGB' ].value.set( 1.1, 1.1, 1.1 ); effectFXAA.renderToScreen = true; composer = new THREE.EffectComposer( renderer ); composer.addPass( renderModel ); composer.addPass( effectBleach ); composer.addPass( effectColor ); composer.addPass( effectFXAA ); // EVENTS document.addEventListener( 'mousemove', onDocumentMouseMove, false ); window.addEventListener( 'resize', onWindowResize, false ); } function createScene( geometry, scale, material ) { geometry.computeTangents(); mesh1 = new THREE.Mesh( geometry, material ); mesh1.position.y = - 50; mesh1.scale.x = mesh1.scale.y = mesh1.scale.z = scale; scene.add( mesh1 ); loader.statusDomElement.style.display = "none"; } // function onWindowResize( event ) { SCREEN_WIDTH = window.innerWidth; SCREEN_HEIGHT = window.innerHeight; renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT; camera.updateProjectionMatrix(); composer.reset(); effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT ); } function onDocumentMouseMove(event) { mouseX = ( event.clientX - windowHalfX ) * 10; mouseY = ( event.clientY - windowHalfY ) * 10; } // function animate() { requestAnimationFrame( animate ); render(); if ( statsEnabled ) stats.update(); } function render() { var ry = mouseX * 0.0003, rx = mouseY * 0.0003; if( mesh1 ) { mesh1.rotation.y = ry; mesh1.rotation.x = rx; } //renderer.render( scene, camera ); composer.render(); } </script> </body> </html>