webgl_shading_physical.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - physically based shading</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <style>
  8. body {
  9. color: #fff;
  10. font-family: Monospace;
  11. font-size: 13px;
  12. text-align: center;
  13. font-weight: bold;
  14. background-color: #000;
  15. margin: 0px;
  16. overflow: hidden;
  17. }
  18. #info {
  19. position: absolute;
  20. width: 100%;
  21. text-align: center;
  22. padding: 5px;
  23. }
  24. a { color: skyblue; }
  25. #stats #fps { background: transparent !important }
  26. #stats #fps #fpsText { color: #444 !important }
  27. #stats #fps #fpsGraph { display: none }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="info">
  32. <a href="http://threejs.org" target="_blank">three.js</a> - webgl physically based shading testbed
  33. </div>
  34. <script src="../build/three.min.js"></script>
  35. <script src="js/controls/TrackballControls.js"></script>
  36. <script src="js/AnimationClipCreator.js"></script>
  37. <script src="js/Detector.js"></script>
  38. <script src="js/libs/stats.min.js"></script>
  39. <script src="js/libs/tween.min.js"></script>
  40. <script src='js/libs/dat.gui.min.js'></script>
  41. <script>
  42. var DAY = 0;
  43. var container, stats;
  44. var camera, scene, renderer;
  45. var mesh, geometry;
  46. var cubeCamera;
  47. var sunLight, pointLight, ambientLight;
  48. var mixer;
  49. var parameters, tweenDay, tweenNight;
  50. var clock = new THREE.Clock();
  51. var gui, shadowCameraHelper, shadowConfig = {
  52. shadowCameraVisible: false,
  53. shadowCameraNear: 750,
  54. shadowCameraFar: 4000,
  55. shadowCameraFov: 30,
  56. shadowBias: -0.0002
  57. };
  58. var lightingConfig = {
  59. daylight: false
  60. }
  61. init();
  62. animate();
  63. function init() {
  64. container = document.createElement( 'div' );
  65. document.body.appendChild( container );
  66. // CAMERA
  67. camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 2, 10000 );
  68. camera.position.set( 500, 400, 1200 );
  69. // SCENE
  70. scene = new THREE.Scene();
  71. scene.fog = new THREE.Fog( 0x00aaff, 1000, 10000 );
  72. // CUBE CAMERA
  73. cubeCamera = new THREE.CubeCamera( 1, 10000, 128 );
  74. // TEXTURES
  75. var textureSquares = new THREE.TextureLoader().load( "textures/patterns/bright_squares256.png" );
  76. textureSquares.repeat.set( 50, 50 );
  77. textureSquares.wrapS = textureSquares.wrapT = THREE.RepeatWrapping;
  78. textureSquares.magFilter = THREE.NearestFilter;
  79. textureSquares.format = THREE.RGBFormat;
  80. var textureNoiseColor = new THREE.TextureLoader().load( "textures/disturb.jpg" );
  81. textureNoiseColor.repeat.set( 1, 1 );
  82. textureNoiseColor.wrapS = textureNoiseColor.wrapT = THREE.RepeatWrapping;
  83. textureNoiseColor.format = THREE.RGBFormat;
  84. var textureLava = new THREE.TextureLoader().load( "textures/lava/lavatile.jpg" );
  85. textureLava.repeat.set( 6, 2 );
  86. textureLava.wrapS = textureLava.wrapT = THREE.RepeatWrapping;
  87. textureLava.format = THREE.RGBFormat;
  88. //
  89. var path = "textures/cube/SwedishRoyalCastle/";
  90. var format = '.jpg';
  91. var urls = [
  92. path + 'px' + format, path + 'nx' + format,
  93. path + 'py' + format, path + 'ny' + format,
  94. path + 'pz' + format, path + 'nz' + format
  95. ];
  96. var reflectionCube = new THREE.CubeTextureLoader().load( urls );
  97. // GROUND
  98. var groundMaterial = new THREE.MeshPhongMaterial( {
  99. shininess: 80,
  100. color: 0xffffff,
  101. specular: 0xffffff,
  102. map: textureSquares
  103. } );
  104. var planeGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
  105. var ground = new THREE.Mesh( planeGeometry, groundMaterial );
  106. ground.position.set( 0, 0, 0 );
  107. ground.rotation.x = - Math.PI / 2;
  108. ground.scale.set( 1000, 1000, 1000 );
  109. ground.receiveShadow = true;
  110. scene.add( ground );
  111. // MATERIALS
  112. var materialLambert = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, map: textureNoiseColor } );
  113. var materialPhong = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, map: textureLava } );
  114. var materialPhongCube = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, envMap: cubeCamera.renderTarget } );
  115. // OBJECTS
  116. var sphereGeometry = new THREE.SphereGeometry( 100, 64, 32 );
  117. var torusGeometry = new THREE.TorusGeometry( 240, 60, 32, 64 );
  118. var cubeGeometry = new THREE.BoxGeometry( 150, 150, 150 );
  119. addObject( torusGeometry, materialPhong, 0, 100, 0, 0 );
  120. addObject( cubeGeometry, materialLambert, 350, 75, 300, 0 );
  121. mesh = addObject( sphereGeometry, materialPhongCube, 350, 100, -350, 0 );
  122. mesh.add( cubeCamera );
  123. function addObjectColor( geometry, color, x, y, z, ry ) {
  124. var material = new THREE.MeshPhongMaterial( { color: 0xffffff } );
  125. return addObject( geometry, material, x, y, z, ry );
  126. }
  127. function addObject( geometry, material, x, y, z, ry ) {
  128. var tmpMesh = new THREE.Mesh( geometry, material );
  129. tmpMesh.material.color.offsetHSL( 0.1, -0.1, 0 );
  130. tmpMesh.position.set( x, y, z );
  131. tmpMesh.rotation.y = ry;
  132. tmpMesh.castShadow = true;
  133. tmpMesh.receiveShadow = true;
  134. scene.add( tmpMesh );
  135. return tmpMesh;
  136. }
  137. var bigCube = new THREE.BoxGeometry( 50, 500, 50 );
  138. var midCube = new THREE.BoxGeometry( 50, 200, 50 );
  139. var smallCube = new THREE.BoxGeometry( 100, 100, 100 );
  140. addObjectColor( bigCube, 0xff0000, -500, 250, 0, 0 );
  141. addObjectColor( smallCube, 0xff0000, -500, 50, -150, 0 );
  142. addObjectColor( midCube, 0x00ff00, 500, 100, 0, 0 );
  143. addObjectColor( smallCube, 0x00ff00, 500, 50, -150, 0 );
  144. addObjectColor( midCube, 0x0000ff, 0, 100, -500, 0 );
  145. addObjectColor( smallCube, 0x0000ff, -150, 50, -500, 0 );
  146. addObjectColor( midCube, 0xff00ff, 0, 100, 500, 0 );
  147. addObjectColor( smallCube, 0xff00ff, -150, 50, 500, 0 );
  148. addObjectColor( new THREE.BoxGeometry( 500, 10, 10 ), 0xffff00, 0, 600, 0, Math.PI/4 );
  149. addObjectColor( new THREE.BoxGeometry( 250, 10, 10 ), 0xffff00, 0, 600, 0, 0 );
  150. addObjectColor( new THREE.SphereGeometry( 100, 32, 26 ), 0xffffff, -300, 100, 300, 0 );
  151. // MORPHS
  152. var loader = new THREE.JSONLoader();
  153. loader.load( "models/animated/sittingBox.js", function( geometry ) {
  154. var morphMaterial = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0xff9900, shininess: 50, morphTargets: true, side: THREE.DoubleSide, shading: THREE.FlatShading } );
  155. var mesh = new THREE.Mesh( geometry, morphMaterial );
  156. mixer = new THREE.AnimationMixer( mesh );
  157. mixer.clipAction( geometry.animations[0] ).setDuration( 10 ).play();
  158. var s = 200;
  159. mesh.scale.set( s, s, s );
  160. //morph.duration = 8000;
  161. //morph.mirroredLoop = true;
  162. mesh.castShadow = true;
  163. mesh.receiveShadow = true;
  164. scene.add( mesh );
  165. } );
  166. // LIGHTS
  167. var sunIntensity = 0.3,
  168. pointIntensity = 1,
  169. pointColor = 0xffaa00;
  170. if ( DAY ) {
  171. sunIntensity = 1;
  172. pointIntensity = 0.5;
  173. pointColor = 0xffffff;
  174. }
  175. ambientLight = new THREE.AmbientLight( 0x3f2806 );
  176. scene.add( ambientLight );
  177. pointLight = new THREE.PointLight( 0xffaa00, pointIntensity, 5000 );
  178. pointLight.position.set( 0, 0, 0 );
  179. scene.add( pointLight );
  180. sunLight = new THREE.SpotLight( 0xffffff, sunIntensity, 0, Math.PI/2, 1 );
  181. sunLight.position.set( 1000, 2000, 1000 );
  182. sunLight.castShadow = true;
  183. sunLight.shadow.bias = shadowConfig.shadowBias;
  184. sunLight.shadow.camera.far = shadowConfig.shadowCameraFar;
  185. sunLight.shadow.camera.near = shadowConfig.shadowCameraNear;
  186. sunLight.shadow.camera.fov = shadowConfig.shadowCameraFov;
  187. scene.add( sunLight );
  188. // SHADOW CAMERA HELPER
  189. shadowCameraHelper = new THREE.CameraHelper( sunLight.shadow.camera );
  190. shadowCameraHelper.visible = shadowConfig.shadowCameraVisible;
  191. scene.add( shadowCameraHelper );
  192. // RENDERER
  193. renderer = new THREE.WebGLRenderer( { antialias: true } );
  194. renderer.setClearColor( scene.fog.color );
  195. renderer.setPixelRatio( window.devicePixelRatio );
  196. renderer.setSize( window.innerWidth, window.innerHeight );
  197. container.appendChild( renderer.domElement );
  198. //
  199. renderer.shadowMap.enabled = true;
  200. renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  201. //
  202. renderer.gammaInput = true;
  203. renderer.gammaOutput = true;
  204. //
  205. controls = new THREE.TrackballControls( camera, renderer.domElement );
  206. controls.target.set( 0, 120, 0 );
  207. controls.rotateSpeed = 1.0;
  208. controls.zoomSpeed = 1.2;
  209. controls.panSpeed = 0.8;
  210. controls.noZoom = false;
  211. controls.noPan = false;
  212. controls.staticMoving = true;
  213. controls.dynamicDampingFactor = 0.15;
  214. controls.keys = [ 65, 83, 68 ];
  215. // STATS
  216. stats = new Stats();
  217. container.appendChild( stats.domElement );
  218. // EVENTS
  219. window.addEventListener( 'resize', onWindowResize, false );
  220. // TWEEN
  221. parameters = { control: 0 };
  222. tweenDay = new TWEEN.Tween( parameters ).to( { control: 1 }, 1000 ).easing( TWEEN.Easing.Exponential.Out );
  223. tweenNight = new TWEEN.Tween( parameters ).to( { control: 0 }, 1000 ).easing( TWEEN.Easing.Exponential.Out );
  224. // GUI
  225. gui = new dat.GUI( { width: 400 } );
  226. // SHADOW
  227. var shadowGUI = gui.addFolder( "Shadow" );
  228. shadowGUI.add( shadowConfig, 'shadowCameraVisible' ).onChange( function() {
  229. shadowCameraHelper.visible = shadowConfig.shadowCameraVisible;
  230. });
  231. shadowGUI.add( shadowConfig, 'shadowCameraNear', 1, 1500 ).onChange( function() {
  232. sunLight.shadow.camera.near = shadowConfig.shadowCameraNear;
  233. sunLight.shadow.camera.updateProjectionMatrix();
  234. shadowCameraHelper.update();
  235. });
  236. shadowGUI.add( shadowConfig, 'shadowCameraFar', 1501, 5000 ).onChange( function() {
  237. sunLight.shadow.camera.far = shadowConfig.shadowCameraFar;
  238. sunLight.shadow.camera.updateProjectionMatrix();
  239. shadowCameraHelper.update();
  240. });
  241. shadowGUI.add( shadowConfig, 'shadowCameraFov', 1, 120 ).onChange( function() {
  242. sunLight.shadow.camera.fov = shadowConfig.shadowCameraFov;
  243. sunLight.shadow.camera.updateProjectionMatrix();
  244. shadowCameraHelper.update();
  245. });
  246. shadowGUI.add( shadowConfig, 'shadowBias', -0.01, 0.01 ).onChange( function() {
  247. sunLight.shadow.bias = shadowConfig.shadowBias;
  248. });
  249. shadowGUI.open();
  250. // LIGHTING
  251. var lightingGUI = gui.addFolder( "Lighting" );
  252. lightingGUI.add( lightingConfig, 'daylight' ).onChange( function() {
  253. // change between day and night
  254. if( lightingConfig.daylight === true ) {
  255. tweenNight.stop();
  256. tweenDay.start();
  257. } else {
  258. tweenDay.stop();
  259. tweenNight.start();
  260. };
  261. });
  262. lightingGUI.open();
  263. }
  264. //
  265. function onWindowResize( event ) {
  266. camera.aspect = window.innerWidth / window.innerHeight;
  267. camera.updateProjectionMatrix();
  268. renderer.setSize( window.innerWidth, window.innerHeight );
  269. controls.handleResize();
  270. }
  271. //
  272. function animate() {
  273. requestAnimationFrame( animate );
  274. render();
  275. stats.update();
  276. }
  277. function render() {
  278. // update
  279. var delta = clock.getDelta();
  280. TWEEN.update();
  281. controls.update();
  282. if ( mixer ) {
  283. mixer.update( delta );
  284. }
  285. scene.fog.color.setHSL( 0.63, 0.05, parameters.control );
  286. renderer.setClearColor( scene.fog.color );
  287. sunLight.intensity = parameters.control * 0.7 + 0.3;
  288. pointLight.intensity = - parameters.control * 0.5 + 1;
  289. pointLight.color.setHSL( 0.1, 0.75, parameters.control * 0.5 + 0.5 );
  290. // render cube map
  291. mesh.visible = false;
  292. cubeCamera.updateCubeMap( renderer, scene );
  293. mesh.visible = true;
  294. // render scene
  295. renderer.render( scene, camera );
  296. }
  297. </script>
  298. </body>
  299. </html>