webgl_materials_cubemap_dynamic.html 28 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - materials - dynamic cube reflection</title>
  5. <meta charset="utf-8">
  6. <style>
  7. body {
  8. background: #000;
  9. color: #333;
  10. padding: 0;
  11. margin: 0;
  12. overflow: hidden;
  13. font-family: georgia;
  14. font-size:1em;
  15. text-align: center;
  16. }
  17. a { color: white }
  18. #info { position: absolute; top: 10px; width: 100%; }
  19. #container { position: absolute; top: 0px; }
  20. #footer { position: absolute; bottom: 10px; width: 100%; }
  21. .h { color: skyblue }
  22. .c { display: inline; margin-left: 1em }
  23. #stats { position: absolute; top:0; left: 0 }
  24. #stats #fps { background: transparent !important }
  25. #stats #fps #fpsText { color: #888 !important }
  26. #stats #fps #fpsGraph { display: none }
  27. </style>
  28. </head>
  29. <body>
  30. <div id="container"></div>
  31. <div id="info">
  32. <a href="http://threejs.org" target="_blank">three.js</a> - webgl dynamic cube reflection demo -
  33. veyron by <a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a> -
  34. gallardo by <a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1711" target="_blank">machman_3d</a>
  35. </div>
  36. <div id="footer">
  37. cars control: <span class="h">WASD</span> / <span class="h">arrows</span>
  38. <div class="c">cameras: <span class="h">1</span> / <span class="h">2</span> / <span class="h">3</span> / <span class="h">4</span>
  39. / <span class="h">5</span> / <span class="h">6</span>
  40. </div>
  41. <div class="c">
  42. day / night: <span class="h">n</span>
  43. </div>
  44. <div class="c">
  45. motion blur: <span class="h">b</span>
  46. </div>
  47. </div>
  48. <script src="../build/three.min.js"></script>
  49. <script src="js/loaders/BinaryLoader.js"></script>
  50. <script src="js/shaders/BleachBypassShader.js"></script>
  51. <script src="js/shaders/BlendShader.js"></script>
  52. <script src="js/shaders/ConvolutionShader.js"></script>
  53. <script src="js/shaders/CopyShader.js"></script>
  54. <script src="js/shaders/FXAAShader.js"></script>
  55. <script src="js/shaders/HorizontalTiltShiftShader.js"></script>
  56. <script src="js/shaders/VerticalTiltShiftShader.js"></script>
  57. <script src="js/shaders/TriangleBlurShader.js"></script>
  58. <script src="js/shaders/VignetteShader.js"></script>
  59. <script src="js/postprocessing/EffectComposer.js"></script>
  60. <script src="js/postprocessing/RenderPass.js"></script>
  61. <script src="js/postprocessing/BloomPass.js"></script>
  62. <script src="js/postprocessing/ShaderPass.js"></script>
  63. <script src="js/postprocessing/MaskPass.js"></script>
  64. <script src="js/postprocessing/SavePass.js"></script>
  65. <script src="js/Car.js"></script>
  66. <script src="js/Detector.js"></script>
  67. <script src="js/libs/stats.min.js"></script>
  68. <script>
  69. if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  70. var FOLLOW_CAMERA = false;
  71. var SCREEN_WIDTH = window.innerWidth;
  72. var SCREEN_HEIGHT = window.innerHeight;
  73. var SHADOW_MAP_WIDTH = 1024, SHADOW_MAP_HEIGHT = 1024;
  74. var container, stats;
  75. var camera, cameraTarget, scene, renderer;
  76. var renderTarget;
  77. var spotLight, ambientLight;
  78. var cubeCamera;
  79. var clock = new THREE.Clock();
  80. var controlsGallardo = {
  81. moveForward: false,
  82. moveBackward: false,
  83. moveLeft: false,
  84. moveRight: false
  85. };
  86. var controlsVeyron = {
  87. moveForward: false,
  88. moveBackward: false,
  89. moveLeft: false,
  90. moveRight: false
  91. };
  92. var mlib;
  93. var gallardo, veyron, currentCar;
  94. var effectDirt, hblur, vblur, effectBloom, effectKeep, effectBlend, effectFXAA;
  95. var config = {
  96. "veyron" : { r: 0.5, model: null, backCam: new THREE.Vector3( 550, 100, -1000 ) },
  97. "gallardo" : { r: 0.35, model: null, backCam: new THREE.Vector3( 550, 0, -1500 ) }
  98. };
  99. var flareA, flareB;
  100. var sprites = [];
  101. var ground, groundBasic;
  102. var blur = false;
  103. var v = 0.9, vdir = 1;
  104. init();
  105. animate();
  106. function init() {
  107. container = document.getElementById( 'container' );
  108. camera = new THREE.PerspectiveCamera( 18, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
  109. camera.position.set( 3000, 0, 3000 );
  110. cameraTarget = new THREE.Vector3();
  111. scene = new THREE.Scene();
  112. scene.fog = new THREE.Fog( 0xffffff, 3000, 10000 );
  113. scene.fog.color.setHSL( 0.51, 0.6, 0.6 );
  114. createScene();
  115. // LIGHTS
  116. ambientLight = new THREE.AmbientLight( 0x555555 );
  117. scene.add( ambientLight );
  118. spotLight = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI/2, 1 );
  119. spotLight.position.set( 0, 1800, 1500 );
  120. spotLight.target.position.set( 0, 0, 0 );
  121. spotLight.castShadow = true;
  122. spotLight.shadowCameraNear = 100;
  123. spotLight.shadowCameraFar = camera.far;
  124. spotLight.shadowCameraFov = 50;
  125. spotLight.shadowBias = -0.00125;
  126. spotLight.shadowDarkness = 0.5;
  127. spotLight.shadowMapWidth = SHADOW_MAP_WIDTH;
  128. spotLight.shadowMapHeight = SHADOW_MAP_HEIGHT;
  129. scene.add( spotLight );
  130. directionalLight2 = new THREE.PointLight( 0xff9900, 0.25 );
  131. directionalLight2.position.set( 0.5, -1, 0.5 );
  132. //directionalLight2.position.normalize();
  133. //scene.add( directionalLight2 );
  134. // RENDERER
  135. renderer = new THREE.WebGLRenderer( { antialias: false } );
  136. renderer.setClearColor( scene.fog.color, 1 );
  137. renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  138. container.appendChild( renderer.domElement );
  139. // SHADOW
  140. renderer.shadowMapCullFace = THREE.CullFaceBack;
  141. renderer.shadowMapEnabled = true;
  142. // STATS
  143. stats = new Stats();
  144. container.appendChild( stats.domElement );
  145. // CUBE CAMERA
  146. cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
  147. scene.add( cubeCamera );
  148. // MATERIALS
  149. var cubeTarget = cubeCamera.renderTarget;
  150. mlib = {
  151. body: [],
  152. "Chrome": new THREE.MeshLambertMaterial( { color: 0xffffff, ambient: 0xffffff, envMap: cubeTarget } ),
  153. "Dark chrome": new THREE.MeshLambertMaterial( { color: 0x444444, ambient: 0x444444, envMap: cubeTarget } ),
  154. "Black rough": new THREE.MeshLambertMaterial( { color: 0x050505, ambient: 0x050505 } ),
  155. "Dark glass": new THREE.MeshLambertMaterial( { color: 0x101020, ambient: 0x101020, envMap: cubeTarget, opacity: 0.5, transparent: true } ),
  156. "Orange glass": new THREE.MeshLambertMaterial( { color: 0xffbb00, ambient: 0xffbb00, opacity: 0.5, transparent: true } ),
  157. "Red glass": new THREE.MeshLambertMaterial( { color: 0xff0000, ambient: 0xff0000, opacity: 0.5, transparent: true } ),
  158. "Black metal": new THREE.MeshLambertMaterial( { color: 0x222222, ambient: 0x222222, envMap: cubeTarget, combine: THREE.MultiplyOperation } ),
  159. "Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, ambient: 0xff6600, envMap: cubeTarget, combine: THREE.MultiplyOperation } )
  160. }
  161. mlib.body.push( [ "Orange", new THREE.MeshLambertMaterial( { color: 0x883300, ambient: 0x883300, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
  162. mlib.body.push( [ "Blue", new THREE.MeshLambertMaterial( { color: 0x113355, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
  163. mlib.body.push( [ "Red", new THREE.MeshLambertMaterial( { color: 0x660000, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
  164. mlib.body.push( [ "Black", new THREE.MeshLambertMaterial( { color: 0x000000, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
  165. mlib.body.push( [ "White", new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
  166. mlib.body.push( [ "Carmine", new THREE.MeshPhongMaterial( { color: 0x770000, specular: 0xffaaaa, envMap: cubeTarget, combine: THREE.MultiplyOperation } ) ] );
  167. mlib.body.push( [ "Gold", new THREE.MeshPhongMaterial( { color: 0xaa9944, specular: 0xbbaa99, shininess: 50, envMap: cubeTarget, combine: THREE.MultiplyOperation } ) ] );
  168. mlib.body.push( [ "Bronze", new THREE.MeshPhongMaterial( { color: 0x150505, specular: 0xee6600, shininess: 10, envMap: cubeTarget, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
  169. mlib.body.push( [ "Chrome", new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, envMap: cubeTarget, combine: THREE.MultiplyOperation } ) ] );
  170. // FLARES
  171. flareA = THREE.ImageUtils.loadTexture( "textures/lensflare2.jpg" );
  172. flareB = THREE.ImageUtils.loadTexture( "textures/lensflare0.png" );
  173. // CARS - VEYRON
  174. veyron = new THREE.Car();
  175. veyron.modelScale = 3;
  176. veyron.backWheelOffset = 2;
  177. veyron.callback = function( object ) {
  178. addCar( object, -300, -215, 0, 0 );
  179. setMaterialsVeyron( object );
  180. var sa = 2, sb = 5;
  181. var params = {
  182. "a" : { map: flareA, useScreenCoordinates: false, color: 0xffffff, blending: THREE.AdditiveBlending },
  183. "b" : { map: flareB, useScreenCoordinates: false, color: 0xffffff, blending: THREE.AdditiveBlending },
  184. "ar" : { map: flareA, useScreenCoordinates: false, color: 0xff0000, blending: THREE.AdditiveBlending },
  185. "br" : { map: flareB, useScreenCoordinates: false, color: 0xff0000, blending: THREE.AdditiveBlending }
  186. };
  187. var flares = [
  188. // front
  189. [ "a", sa, [ 47, 38, 120 ] ], [ "a", sa, [ 40, 38, 120 ] ], [ "a", sa, [ 32, 38, 122 ] ],
  190. [ "b", sb, [ 47, 38, 120 ] ], [ "b", sb, [ 40, 38, 120 ] ], [ "b", sb, [ 32, 38, 122 ] ],
  191. [ "a", sa, [ -47, 38, 120 ] ], [ "a", sa, [ -40, 38, 120 ] ], [ "a", sa, [ -32, 38, 122 ] ],
  192. [ "b", sb, [ -47, 38, 120 ] ], [ "b", sb, [ -40, 38, 120 ] ], [ "b", sb, [ -32, 38, 122 ] ],
  193. // back
  194. [ "ar", sa, [ 22, 50, -123 ] ], [ "ar", sa, [ 32, 49, -123 ] ],
  195. [ "br", sb, [ 22, 50, -123 ] ], [ "br", sb, [ 32, 49, -123 ] ],
  196. [ "ar", sa, [ -22, 50, -123 ] ], [ "ar", sa, [ -32, 49, -123 ] ],
  197. [ "br", sb, [ -22, 50, -123 ] ], [ "br", sb, [ -32, 49, -123 ] ],
  198. ];
  199. for ( var i = 0; i < flares.length; i ++ ) {
  200. var p = params[ flares[ i ][ 0 ] ];
  201. var s = flares[ i ][ 1 ];
  202. var x = flares[ i ][ 2 ][ 0 ];
  203. var y = flares[ i ][ 2 ][ 1 ];
  204. var z = flares[ i ][ 2 ][ 2 ];
  205. var material = new THREE.SpriteMaterial( p );
  206. var sprite = new THREE.Sprite( material );
  207. var spriteWidth = 128;
  208. var spriteHeight = 128;
  209. sprite.scale.set( s * spriteWidth, s * spriteHeight, s );
  210. sprite.position.set( x, y, z );
  211. object.bodyMesh.add( sprite );
  212. sprites.push( sprite );
  213. }
  214. };
  215. veyron.loadPartsBinary( "obj/veyron/parts/veyron_body_bin.js", "obj/veyron/parts/veyron_wheel_bin.js" );
  216. // CARS - GALLARDO
  217. gallardo = new THREE.Car();
  218. gallardo.modelScale = 2;
  219. gallardo.backWheelOffset = 45;
  220. gallardo.callback = function( object ) {
  221. addCar( object, 300, -110, 0, -110 );
  222. setMaterialsGallardo( object );
  223. var sa = 2, sb = 5;
  224. var params = {
  225. "a" : { map: flareA, useScreenCoordinates: false, color: 0xffffff, blending: THREE.AdditiveBlending },
  226. "b" : { map: flareB, useScreenCoordinates: false, color: 0xffffff, blending: THREE.AdditiveBlending },
  227. "ar" : { map: flareA, useScreenCoordinates: false, color: 0xff0000, blending: THREE.AdditiveBlending },
  228. "br" : { map: flareB, useScreenCoordinates: false, color: 0xff0000, blending: THREE.AdditiveBlending }
  229. };
  230. var flares = [
  231. // front
  232. [ "a", sa, [ 70, 10, 160 ] ], [ "a", sa, [ 66, -1, 175 ] ], [ "a", sa, [ 66, -1, 165 ] ],
  233. [ "b", sb, [ 70, 10, 160 ] ], [ "b", sb, [ 66, -1, 175 ] ], [ "b", sb, [ 66, -1, 165 ] ],
  234. [ "a", sa, [ -70, 10, 160 ] ], [ "a", sa, [ -66, -1, 175 ] ], [ "a", sa, [ -66, -1, 165 ] ],
  235. [ "b", sb, [ -70, 10, 160 ] ], [ "b", sb, [ -66, -1, 175 ] ], [ "b", sb, [ -66, -1, 165 ] ],
  236. // back
  237. [ "ar", sa, [ 61, 19, -185 ] ], [ "ar", sa, [ 55, 19, -185 ] ],
  238. [ "br", sb, [ 61, 19, -185 ] ], [ "br", sb, [ 55, 19, -185 ] ],
  239. [ "ar", sa, [ -61, 19, -185 ] ], [ "ar", sa, [ -55, 19, -185 ] ],
  240. [ "br", sb, [ -61, 19, -185 ] ], [ "br", sb, [ -55, 19, -185 ] ],
  241. ];
  242. for ( var i = 0; i < flares.length; i ++ ) {
  243. var p = params[ flares[ i ][ 0 ] ];
  244. var s = flares[ i ][ 1 ];
  245. var x = flares[ i ][ 2 ][ 0 ];
  246. var y = flares[ i ][ 2 ][ 1 ];
  247. var z = flares[ i ][ 2 ][ 2 ];
  248. var material = new THREE.SpriteMaterial( p );
  249. var sprite = new THREE.Sprite( material );
  250. var spriteWidth = 128;
  251. var spriteHeight = 128;
  252. sprite.scale.set( s * spriteWidth, s * spriteHeight, s );
  253. sprite.position.set( x, y, z );
  254. object.bodyMesh.add( sprite );
  255. sprites.push( sprite );
  256. }
  257. };
  258. gallardo.loadPartsBinary( "obj/gallardo/parts/gallardo_body_bin.js", "obj/gallardo/parts/gallardo_wheel_bin.js" );
  259. //
  260. config[ "gallardo" ].model = gallardo;
  261. config[ "veyron" ].model = veyron;
  262. currentCar = gallardo;
  263. // EVENTS
  264. document.addEventListener( 'keydown', onKeyDown, false );
  265. document.addEventListener( 'keyup', onKeyUp, false );
  266. window.addEventListener( 'resize', onWindowResize, false );
  267. // POSTPROCESSING
  268. renderer.autoClear = false;
  269. var renderTargetParameters = {
  270. minFilter: THREE.LinearFilter,
  271. magFilter: THREE.LinearFilter,
  272. format: THREE.RGBFormat,
  273. stencilBuffer: false
  274. };
  275. renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );
  276. effectSave = new THREE.SavePass( new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters ) );
  277. effectBlend = new THREE.ShaderPass( THREE.BlendShader, "tDiffuse1" );
  278. effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
  279. var effectVignette = new THREE.ShaderPass( THREE.VignetteShader );
  280. var effectBleach = new THREE.ShaderPass( THREE.BleachBypassShader );
  281. effectBloom = new THREE.BloomPass( 0.75 );
  282. effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );
  283. // tilt shift
  284. hblur = new THREE.ShaderPass( THREE.HorizontalTiltShiftShader );
  285. vblur = new THREE.ShaderPass( THREE.VerticalTiltShiftShader );
  286. var bluriness = 7;
  287. hblur.uniforms[ 'h' ].value = bluriness / SCREEN_WIDTH;
  288. vblur.uniforms[ 'v' ].value = bluriness / SCREEN_HEIGHT;
  289. if ( FOLLOW_CAMERA ) {
  290. if ( currentCar == gallardo ) {
  291. hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = rMap[ "gallardo" ];
  292. } else if ( currentCar == veyron ) {
  293. hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = rMap[ "veyron" ];
  294. }
  295. } else {
  296. hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = 0.35;
  297. }
  298. effectVignette.uniforms[ "offset" ].value = 1.05;
  299. effectVignette.uniforms[ "darkness" ].value = 1.5;
  300. // motion blur
  301. effectBlend.uniforms[ 'tDiffuse2' ].value = effectSave.renderTarget;
  302. effectBlend.uniforms[ 'mixRatio' ].value = 0.65;
  303. var renderModel = new THREE.RenderPass( scene, camera );
  304. effectVignette.renderToScreen = true;
  305. composer = new THREE.EffectComposer( renderer, renderTarget );
  306. composer.addPass( renderModel );
  307. composer.addPass( effectFXAA );
  308. composer.addPass( effectBlend );
  309. composer.addPass( effectSave );
  310. composer.addPass( effectBloom );
  311. composer.addPass( effectBleach );
  312. composer.addPass( hblur );
  313. composer.addPass( vblur );
  314. composer.addPass( effectVignette );
  315. }
  316. //
  317. function setSpritesOpacity( opacity ) {
  318. for ( var i = 0; i < sprites.length; i ++ ) {
  319. sprites[ i ].material.opacity = opacity;
  320. }
  321. }
  322. //
  323. function createScene() {
  324. // GROUND
  325. var texture = THREE.ImageUtils.loadTexture( "textures/cube/Park3Med/ny.jpg" );
  326. texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  327. texture.repeat.set( 50, 50 );
  328. groundBasic = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texture } );
  329. groundBasic.color.setHSL( 0.1, 0.9, 0.7 );
  330. ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 50000, 50000 ), groundBasic );
  331. ground.position.y = - 215;
  332. ground.rotation.x = - Math.PI / 2;
  333. scene.add( ground );
  334. ground.castShadow = false;
  335. ground.receiveShadow = true;
  336. // OBJECTS
  337. var cylinderGeometry = new THREE.CylinderGeometry( 2, 50, 1000, 32 );
  338. var sphereGeometry = new THREE.SphereGeometry( 100, 32, 16 );
  339. var sy1 = -500 + 38;
  340. var sy2 = -88;
  341. addObject( cylinderGeometry, 0xff0000, 1500, 250, 0, sy1 );
  342. addObject( cylinderGeometry, 0xffaa00, -1500, 250, 0, sy1 );
  343. addObject( cylinderGeometry, 0x00ff00, 0, 250, 1500, sy1 );
  344. addObject( cylinderGeometry, 0x00ffaa, 0, 250, -1500, sy1 );
  345. addObject( sphereGeometry, 0xff0000, 1500, -125, 200, sy2 );
  346. addObject( sphereGeometry, 0xffaa00, -1500, -125, 200, sy2 );
  347. addObject( sphereGeometry, 0x00ff00, 200, -125, 1500, sy2 );
  348. addObject( sphereGeometry, 0x00ffaa, 200, -125, -1500, sy2 );
  349. }
  350. //
  351. var canvas = document.createElement( 'canvas' );
  352. canvas.width = 128;
  353. canvas.height = 128;
  354. var context = canvas.getContext( '2d' );
  355. var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
  356. gradient.addColorStop( 0.1, 'rgba(0,0,0,1)' );
  357. gradient.addColorStop( 1, 'rgba(0,0,0,0)' );
  358. context.fillStyle = gradient;
  359. context.fillRect( 0, 0, canvas.width, canvas.height );
  360. //
  361. var shadowTexture = new THREE.Texture( canvas );
  362. shadowTexture.needsUpdate = true;
  363. var shadowPlane = new THREE.PlaneBufferGeometry( 400, 400 );
  364. var shadowMaterial = new THREE.MeshBasicMaterial( {
  365. opacity: 0.35, transparent: true, map: shadowTexture,
  366. polygonOffset: false, polygonOffsetFactor: -0.5, polygonOffsetUnits: 1
  367. } );
  368. function addObject( geometry, color, x, y, z, sy ) {
  369. var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: color, ambient: color } ) );
  370. object.position.set( x, y, z );
  371. object.castShadow = true;
  372. object.receiveShadow = true;
  373. scene.add( object );
  374. var shadow = new THREE.Mesh( shadowPlane, shadowMaterial );
  375. shadow.position.y = sy;
  376. shadow.rotation.x = - Math.PI / 2;
  377. object.add( shadow );
  378. }
  379. //
  380. function generateDropShadowTexture( object, width, height, bluriness ) {
  381. var renderTargetParameters = {
  382. minFilter: THREE.LinearMipmapLinearFilter,
  383. magFilter: THREE.LinearFilter,
  384. format: THREE.RGBAFormat,
  385. stencilBuffer: false
  386. };
  387. var shadowTarget = new THREE.WebGLRenderTarget( width, height, renderTargetParameters );
  388. var shadowMaterial = new THREE.MeshBasicMaterial( { color: 0x000000 } );
  389. var shadowGeometry = object.geometry.clone();
  390. var shadowObject = new THREE.Mesh( shadowGeometry, shadowMaterial );
  391. var shadowScene = new THREE.Scene();
  392. shadowScene.add( shadowObject );
  393. shadowObject.geometry.computeBoundingBox();
  394. var bb = shadowObject.geometry.boundingBox;
  395. var dimensions = new THREE.Vector3();
  396. dimensions.subVectors( bb.max, bb.min );
  397. var margin = 0.15,
  398. width = dimensions.z,
  399. height = dimensions.x,
  400. depth = dimensions.y,
  401. left = bb.min.z - margin * width,
  402. right = bb.max.z + margin * width,
  403. top = bb.max.x + margin * height,
  404. bottom = bb.min.x - margin * height,
  405. near = bb.max.y + margin * depth,
  406. far = bb.min.y - margin * depth;
  407. var topCamera = new THREE.OrthographicCamera( left, right, top, bottom, near, far );
  408. topCamera.position.y = bb.max.y;
  409. topCamera.lookAt( shadowScene.position );
  410. shadowScene.add( topCamera );
  411. var renderShadow = new THREE.RenderPass( shadowScene, topCamera );
  412. var blurShader = THREE.TriangleBlurShader;
  413. var effectBlurX = new THREE.ShaderPass( blurShader, 'texture' );
  414. var effectBlurY = new THREE.ShaderPass( blurShader, 'texture' );
  415. renderShadow.clearColor = new THREE.Color( 0x000000 );
  416. renderShadow.clearAlpha = 0;
  417. var blurAmountX = bluriness / width;
  418. var blurAmountY = bluriness / height;
  419. effectBlurX.uniforms[ 'delta' ].value = new THREE.Vector2( blurAmountX, 0 );
  420. effectBlurY.uniforms[ 'delta' ].value = new THREE.Vector2( 0, blurAmountY );
  421. var shadowComposer = new THREE.EffectComposer( renderer, shadowTarget );
  422. shadowComposer.addPass( renderShadow );
  423. shadowComposer.addPass( effectBlurX );
  424. shadowComposer.addPass( effectBlurY );
  425. renderer.clear();
  426. shadowComposer.render( 0.1 );
  427. return shadowTarget;
  428. }
  429. //
  430. function addCar( object, x, y, z, s ) {
  431. object.root.position.set( x, y, z );
  432. scene.add( object.root );
  433. object.enableShadows( true );
  434. if ( FOLLOW_CAMERA && object == currentCar ) {
  435. object.root.add( camera );
  436. camera.position.set( 350, 500, 2200 );
  437. //camera.position.set( 0, 3000, -500 );
  438. cameraTarget.z = 500;
  439. cameraTarget.y = 150;
  440. camera.lookAt( cameraTarget );
  441. }
  442. var shadowTexture = generateDropShadowTexture( object.bodyMesh, 64, 32, 15 );
  443. object.bodyMesh.geometry.computeBoundingBox();
  444. var bb = object.bodyMesh.geometry.boundingBox;
  445. var ss = object.modelScale * 1.1;
  446. var shadowWidth = ss * ( bb.max.z - bb.min.z );
  447. var shadowHeight = 1.25 * ss * ( bb.max.x - bb.min.x );
  448. var shadowPlane = new THREE.PlaneBufferGeometry( shadowWidth, shadowHeight );
  449. var shadowMaterial = new THREE.MeshBasicMaterial( {
  450. color: 0xffffff, opacity: 0.5, transparent: true, map: shadowTexture,
  451. polygonOffset: false, polygonOffsetFactor: -0.5, polygonOffsetUnits: 1
  452. } );
  453. var shadow = new THREE.Mesh( shadowPlane, shadowMaterial );
  454. shadow.position.y = s + 10;
  455. shadow.rotation.x = - Math.PI / 2;
  456. shadow.rotation.z = Math.PI / 2;
  457. object.root.add( shadow );
  458. }
  459. //
  460. function setCurrentCar( car, cameraType ) {
  461. var oldCar = currentCar;
  462. currentCar = config[ car ].model;
  463. if ( cameraType == "front" || cameraType == "back" ) {
  464. hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = config[ car ].r;
  465. FOLLOW_CAMERA = true;
  466. oldCar.root.remove( camera );
  467. currentCar.root.add( camera );
  468. if ( cameraType == "front" ) {
  469. camera.position.set( 350, 500, 2200 );
  470. } else if ( cameraType == "back" ) {
  471. camera.position.copy( config[ car ].backCam );
  472. }
  473. cameraTarget.set( 0, 150, 500 );
  474. } else {
  475. FOLLOW_CAMERA = false;
  476. oldCar.root.remove( camera );
  477. camera.position.set( 2000, 0, 2000 );
  478. cameraTarget.set( 0, 0, 0 );
  479. spotLight.position.set( 0, 1800, 1500 );
  480. hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = 0.35;
  481. }
  482. }
  483. //
  484. function onWindowResize( event ) {
  485. SCREEN_WIDTH = window.innerWidth;
  486. SCREEN_HEIGHT = window.innerHeight;
  487. camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
  488. camera.updateProjectionMatrix();
  489. renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  490. composer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  491. hblur.uniforms[ 'h' ].value = 10.75 / SCREEN_WIDTH;
  492. vblur.uniforms[ 'v' ].value = 10.75 / SCREEN_HEIGHT;
  493. effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );
  494. }
  495. //
  496. function onKeyDown ( event ) {
  497. switch( event.keyCode ) {
  498. case 38: /*up*/ controlsGallardo.moveForward = true; break;
  499. case 87: /*W*/ controlsVeyron.moveForward = true; break;
  500. case 40: /*down*/controlsGallardo.moveBackward = true; break;
  501. case 83: /*S*/ controlsVeyron.moveBackward = true; break;
  502. case 37: /*left*/controlsGallardo.moveLeft = true; break;
  503. case 65: /*A*/ controlsVeyron.moveLeft = true; break;
  504. case 39: /*right*/controlsGallardo.moveRight = true; break;
  505. case 68: /*D*/ controlsVeyron.moveRight = true; break;
  506. case 49: /*1*/ setCurrentCar( "gallardo", "center" ); break;
  507. case 50: /*2*/ setCurrentCar( "veyron", "center" ); break;
  508. case 51: /*3*/ setCurrentCar( "gallardo", "front" ); break;
  509. case 52: /*4*/ setCurrentCar( "veyron", "front" ); break;
  510. case 53: /*5*/ setCurrentCar( "gallardo", "back" ); break;
  511. case 54: /*6*/ setCurrentCar( "veyron", "back" ); break;
  512. case 78: /*N*/ vdir *= -1; break;
  513. case 66: /*B*/ blur = !blur; break;
  514. }
  515. };
  516. function onKeyUp ( event ) {
  517. switch( event.keyCode ) {
  518. case 38: /*up*/controlsGallardo.moveForward = false; break;
  519. case 87: /*W*/ controlsVeyron.moveForward = false; break;
  520. case 40: /*down*/controlsGallardo.moveBackward = false; break;
  521. case 83: /*S*/ controlsVeyron.moveBackward = false; break;
  522. case 37: /*left*/controlsGallardo.moveLeft = false; break;
  523. case 65: /*A*/ controlsVeyron.moveLeft = false; break;
  524. case 39: /*right*/controlsGallardo.moveRight = false; break;
  525. case 68: /*D*/ controlsVeyron.moveRight = false; break;
  526. }
  527. };
  528. //
  529. function setMaterialsGallardo( car ) {
  530. // BODY
  531. var materials = car.bodyMaterials;
  532. materials[ 0 ] = mlib.body[ 0 ][ 1 ]; // body
  533. materials[ 1 ] = mlib[ "Dark chrome" ]; // front under lights, back
  534. // WHEELS
  535. materials = car.wheelMaterials;
  536. materials[ 0 ] = mlib[ "Chrome" ]; // insides
  537. materials[ 1 ] = mlib[ "Black rough" ]; // tire
  538. }
  539. function setMaterialsVeyron( car ) {
  540. // 0 - top, front center, back sides
  541. // 1 - front sides
  542. // 2 - engine
  543. // 3 - small chrome things
  544. // 4 - backlights
  545. // 5 - back signals
  546. // 6 - bottom, interior
  547. // 7 - windshield
  548. // BODY
  549. var materials = car.bodyMaterials;
  550. materials[ 0 ] = mlib[ "Black metal" ]; // top, front center, back sides
  551. materials[ 1 ] = mlib[ "Chrome" ]; // front sides
  552. materials[ 2 ] = mlib[ "Chrome" ]; // engine
  553. materials[ 3 ] = mlib[ "Dark chrome" ]; // small chrome things
  554. materials[ 4 ] = mlib[ "Red glass" ]; // backlights
  555. materials[ 5 ] = mlib[ "Orange glass" ]; // back signals
  556. materials[ 6 ] = mlib[ "Black rough" ]; // bottom, interior
  557. materials[ 7 ] = mlib[ "Dark glass" ]; // windshield
  558. // WHEELS
  559. materials = car.wheelMaterials;
  560. materials[ 0 ] = mlib[ "Chrome" ]; // insides
  561. materials[ 1 ] = mlib[ "Black rough" ]; // tire
  562. }
  563. //
  564. function animate() {
  565. requestAnimationFrame( animate );
  566. render();
  567. stats.update();
  568. }
  569. function render() {
  570. var delta = clock.getDelta();
  571. // day / night
  572. v = THREE.Math.clamp( v + 0.5 * delta * vdir, 0.1, 0.9 );
  573. scene.fog.color.setHSL( 0.51, 0.5, v * 0.75 );
  574. renderer.setClearColor( scene.fog.color, 1 );
  575. var vnorm = ( v - 0.05 ) / ( 0.9 - 0.05 );
  576. if ( vnorm < 0.3 ) {
  577. setSpritesOpacity( 1 - v / 0.3 );
  578. } else {
  579. setSpritesOpacity( 0 );
  580. }
  581. if ( veyron.loaded ) {
  582. veyron.bodyMaterials[ 1 ] = mlib[ "Chrome" ];
  583. veyron.bodyMaterials[ 2 ] = mlib[ "Chrome" ];
  584. veyron.wheelMaterials[ 0 ] = mlib[ "Chrome" ];
  585. }
  586. if ( gallardo.loaded ) {
  587. gallardo.wheelMaterials[ 0 ] = mlib[ "Chrome" ];
  588. }
  589. effectBloom.copyUniforms[ "opacity" ].value = THREE.Math.mapLinear( vnorm, 0, 1, 1, 0.75 );
  590. ambientLight.color.setHSL( 0, 0, THREE.Math.mapLinear( vnorm, 0, 1, 0.1, 0.3 ) );
  591. groundBasic.color.setHSL( 0.1, 0.5, THREE.Math.mapLinear( vnorm, 0, 1, 0.4, 0.65 ) );
  592. // blur
  593. if ( blur ) {
  594. effectSave.enabled = true;
  595. effectBlend.enabled = true;
  596. } else {
  597. effectSave.enabled = false;
  598. effectBlend.enabled = false;
  599. }
  600. // update car model
  601. veyron.updateCarModel( delta, controlsVeyron );
  602. gallardo.updateCarModel( delta, controlsGallardo );
  603. // update camera
  604. if ( ! FOLLOW_CAMERA ) {
  605. cameraTarget.x = currentCar.root.position.x;
  606. cameraTarget.z = currentCar.root.position.z;
  607. } else {
  608. spotLight.position.x = currentCar.root.position.x - 500;
  609. spotLight.position.z = currentCar.root.position.z - 500;
  610. }
  611. // update shadows
  612. spotLight.target.position.x = currentCar.root.position.x;
  613. spotLight.target.position.z = currentCar.root.position.z;
  614. // render cube map
  615. var updateCubemap = true;
  616. if ( updateCubemap ) {
  617. veyron.setVisible( false );
  618. gallardo.setVisible( false );
  619. cubeCamera.position.copy( currentCar.root.position );
  620. renderer.autoClear = true;
  621. cubeCamera.updateCubeMap( renderer, scene );
  622. veyron.setVisible( true );
  623. gallardo.setVisible( true );
  624. }
  625. // render scene
  626. renderer.autoClear = false;
  627. renderer.shadowMapEnabled = true;
  628. camera.lookAt( cameraTarget );
  629. renderer.setRenderTarget( null );
  630. renderer.clear();
  631. composer.render( 0.1 );
  632. renderer.shadowMapEnabled = false;
  633. }
  634. </script>
  635. </body>
  636. </html>