webglFramework/Thirdparty/three.js-master/examples/webgl_postprocessing_dof2.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3         <head>
   4                 <title>three.js webgl - postprocessing - depth-of-field</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                                 background-color: #000000;
  10                                 margin: 0px;
  11                                 overflow: hidden;
  12                                 font-family:Monospace;
  13                                 font-size:13px;
  14                                 text-align:center;
  15                                 font-weight: bold;
  16                                 text-align:center;
  17                         }
  18
  19                         a {
  20                                 color:#0078ff;
  21                         }
  22
  23                         #info {
  24                                 color:#fff;
  25                                 position: relative;
  26                                 top: 0px;
  27                                 width: 100em;
  28                                 margin: 0 auto -2.1em;
  29                                 padding: 5px;
  30                                 z-index:100;
  31                         }
  32                 </style>
  33         </head>
  34 <!-- TODO
  35 Setup Number Focus Test Plates
  36 Use WEBGL Depth buffer support?
  37 -->
  38         <body>
  39                 <script src="../build/three.js"></script>
  40                 <script src="js/shaders/BokehShader2.js"></script>
  41
  42                 <script src="js/Detector.js"></script>
  43                 <script src="js/libs/stats.min.js"></script>
  44                 <script src='js/libs/dat.gui.min.js'></script>
  45
  46                 <div id="info">
  47                         <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl realistic depth-of-field bokeh example -
  48                         shader ported from <a href="http://blenderartists.org/forum/showthread.php?237488-GLSL-depth-of-field-with-bokeh-v2-4-(update)">Martins Upitis</a>
  49                 </div>
  50
  51                 <script>
  52
  53                         if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  54
  55                         var container, stats;
  56                         var camera, scene, renderer,
  57                                 material_depth;
  58
  59                         var windowHalfX = window.innerWidth / 2;
  60                         var windowHalfY = window.innerHeight / 2;
  61
  62                         var height = window.innerHeight;
  63
  64                         var postprocessing = { enabled  : true };
  65
  66                         var shaderSettings = {
  67                                 rings: 3,
  68                                 samples: 4
  69                         };
  70
  71                         var singleMaterial = false;
  72                         var mouse = new THREE.Vector2();
  73                         var raycaster = new THREE.Raycaster();
  74                         var distance = 100;
  75                         var target = new THREE.Vector3( 0, 20, -50 );
  76                         var effectController;
  77                         var planes = [];
  78                         var leaves = 100;
  79
  80                         init();
  81                         animate();
  82
  83                         function init() {
  84
  85                                 container = document.createElement( 'div' );
  86                                 document.body.appendChild( container );
  87
  88                                 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / height, 1, 3000 );
  89
  90                                 camera.position.y = 150;
  91                                 camera.position.z = 450;
  92
  93                                 scene = new THREE.Scene();
  94                                 scene.add( camera );
  95
  96                                 renderer = new THREE.WebGLRenderer( { antialias: false } );
  97                                 renderer.setPixelRatio( window.devicePixelRatio );
  98                                 renderer.setSize( window.innerWidth, height );
  99                                 //renderer.sortObjects = false;
 100                                 container.appendChild( renderer.domElement );
 101
 102                                 material_depth = new THREE.MeshDepthMaterial();
 103
 104                                 //
 105
 106                                 var r = "textures/cube/Bridge2/";
 107                                 var urls = [ r + "posx.jpg", r + "negx.jpg",
 108                                                          r + "posy.jpg", r + "negy.jpg",
 109                                                          r + "posz.jpg", r + "negz.jpg" ];
 110
 111                                 var textureCube = new THREE.CubeTextureLoader().load( urls );
 112                                 textureCube.format = THREE.RGBFormat;
 113
 114                                 // Skybox
 115
 116                                 var shader = THREE.ShaderLib[ "cube" ];
 117                                 shader.uniforms[ "tCube" ].value = textureCube;
 118
 119                                 var material = new THREE.ShaderMaterial( {
 120
 121                                         fragmentShader: shader.fragmentShader,
 122                                         vertexShader: shader.vertexShader,
 123                                         uniforms: shader.uniforms,
 124                                         depthWrite: false,
 125                                         side: THREE.BackSide
 126
 127                                 } );
 128
 129                                 mesh = new THREE.Mesh( new THREE.BoxGeometry( 1000, 1000, 1000 ), material );
 130                                 camera.add( mesh );
 131
 132
 133                                 // Focusing Floor
 134
 135                                 // var planeGeometry = new THREE.PlaneBufferGeometry( 500, 500, 1, 1 );
 136
 137                                 // var planeMat = new THREE.MeshPhongMaterial(
 138                                 //      {  map: texture }
 139                                 // );
 140                                 // var plane = new THREE.Mesh(planeGeometry, planeMat );
 141                                 // plane.rotation.x = - Math.PI / 2;
 142                                 // plane.position.y = - 5;
 143
 144                                 // scene.add(plane);
 145
 146                                 // Plane particles
 147                                 var planePiece = new THREE.PlaneBufferGeometry( 10, 10, 1, 1 );
 148
 149                                 var planeMat = new THREE.MeshPhongMaterial( {
 150                                                 color: 0xffffff * 0.4,
 151                                                 shininess: 0.5,
 152                                                 specular: 0xffffff,
 153                                                 envMap: textureCube,
 154                                                 side: THREE.DoubleSide
 155                                 } );
 156
 157                                 var rand = Math.random;
 158
 159                                 for (var i=0;i<leaves;i++) {
 160                                         var plane = new THREE.Mesh(planePiece, planeMat);
 161                                         plane.rotation.set(rand(), rand(), rand());
 162                                         plane.rotation.dx = rand() * 0.1;
 163                                         plane.rotation.dy = rand() * 0.1;
 164                                         plane.rotation.dz = rand() * 0.1;
 165
 166                                         plane.position.set(rand() * 150, 0 + rand() * 300, rand() * 150);
 167                                         plane.position.dx = (rand()  - 0.5 );
 168                                         plane.position.dz = (rand()  - 0.5 );
 169                                         scene.add(plane);
 170                                         planes.push(plane);
 171                                 }
 172
 173                                 // Adding Monkeys
 174
 175                                 var loader2 = new THREE.JSONLoader();
 176                                 loader2.load( 'obj/Suzanne.js', function ( geometry ) {
 177
 178                                         var material = new THREE.MeshPhongMaterial( {
 179                                                 color: 0xffffff,
 180                                                 specular:0xffffff,
 181                                                 envMap: textureCube,
 182                                                 combine: THREE.MultiplyOperation,
 183                                                 shininess: 50,
 184                                                 reflectivity: 1.0
 185                                         });
 186
 187                                         var monkeys = 20;
 188
 189                                         for ( var i = 0; i < monkeys; i ++ ) {
 190
 191                                                 var mesh = new THREE.Mesh( geometry, material );
 192                                                 mesh.scale.multiplyScalar(30);
 193
 194
 195                                                 mesh.position.z = Math.cos(i / monkeys * Math.PI * 2) * 200;
 196                                                 mesh.position.y = Math.sin(i / monkeys * Math.PI * 3) * 20;
 197                                                 mesh.position.x = Math.sin(i / monkeys * Math.PI * 2) * 200;
 198
 199                                                 mesh.rotation.x = Math.PI / 2;
 200                                                 mesh.rotation.z = -i / monkeys * Math.PI * 2;
 201
 202                                                 scene.add( mesh );
 203
 204                                         }
 205
 206                                 } );
 207
 208
 209
 210                                 // Add Balls
 211                                 var geometry = new THREE.SphereGeometry( 1, 20, 20 );
 212
 213                                 for ( var i = 0; i < 20; i ++ ) {
 214                                         // MeshPhongMaterial
 215                                         var ballmaterial = new THREE.MeshPhongMaterial( {
 216                                                 color: 0xffffff * Math.random(),
 217                                                 shininess: 0.5,
 218                                                 specular: 0xffffff ,
 219                                                 envMap: textureCube } );
 220
 221                                         var mesh = new THREE.Mesh( geometry, ballmaterial );
 222
 223                                         mesh.position.x = ( Math.random() - 0.5 ) * 200;
 224                                         mesh.position.y = Math.random() * 50;
 225                                         mesh.position.z = ( Math.random() - 0.5 )  * 200;
 226                                         mesh.scale.multiplyScalar( 10 );
 227                                         scene.add( mesh );
 228
 229                                 }
 230
 231
 232                                 // Lights
 233
 234                                 scene.add( new THREE.AmbientLight( 0x222222 ) );
 235
 236                                 var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
 237                                 directionalLight.position.set( 2, 1.2, 10 ).normalize();
 238                                 scene.add( directionalLight );
 239
 240                                 var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 241                                 directionalLight.position.set( -2, 1.2, -10 ).normalize();
 242                                 scene.add( directionalLight );
 243
 244
 245                                 initPostprocessing();
 246
 247                                 renderer.autoClear = false;
 248
 249                                 renderer.domElement.style.position = 'absolute';
 250                                 renderer.domElement.style.left = "0px";
 251
 252                                 stats = new Stats();
 253                                 container.appendChild( stats.dom );
 254
 255                                 document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 256                                 document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 257                                 document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 258
 259                                 effectController  = {
 260
 261                                         enabled: true,
 262                                         jsDepthCalculation: true,
 263                                         shaderFocus: false,
 264
 265                                         fstop: 2.2,
 266                                         maxblur: 1.0,
 267
 268                                         showFocus: false,
 269                                         focalDepth: 2.8,
 270                                         manualdof: false,
 271                                         vignetting: false,
 272                                         depthblur: false,
 273
 274                                         threshold: 0.5,
 275                                         gain: 2.0,
 276                                         bias: 0.5,
 277                                         fringe: 0.7,
 278
 279                                         focalLength: 35,
 280                                         noise: true,
 281                                         pentagon: false,
 282
 283                                         dithering: 0.0001
 284
 285                                 };
 286
 287                                 var matChanger = function( ) {
 288
 289                                         for (var e in effectController) {
 290                                                 if (e in postprocessing.bokeh_uniforms)
 291                                                 postprocessing.bokeh_uniforms[ e ].value = effectController[ e ];
 292                                         }
 293
 294                                         postprocessing.enabled = effectController.enabled;
 295                                         postprocessing.bokeh_uniforms[ 'znear' ].value = camera.near;
 296                                         postprocessing.bokeh_uniforms[ 'zfar' ].value = camera.far;
 297                                         camera.setFocalLength(effectController.focalLength);
 298
 299                                 };
 300
 301                                 var gui = new dat.GUI();
 302
 303                                 gui.add( effectController, "enabled" ).onChange( matChanger );
 304                                 gui.add( effectController, "jsDepthCalculation" ).onChange( matChanger );
 305                                 gui.add( effectController, "shaderFocus" ).onChange( matChanger );
 306                                 gui.add( effectController, "focalDepth", 0.0, 200.0 ).listen().onChange( matChanger );
 307
 308                                 gui.add( effectController, "fstop", 0.1, 22, 0.001 ).onChange( matChanger );
 309                                 gui.add( effectController, "maxblur", 0.0, 5.0, 0.025 ).onChange( matChanger );
 310
 311                                 gui.add( effectController, "showFocus" ).onChange( matChanger );
 312                                 gui.add( effectController, "manualdof" ).onChange( matChanger );
 313                                 gui.add( effectController, "vignetting" ).onChange( matChanger );
 314
 315                                 gui.add( effectController, "depthblur" ).onChange( matChanger );
 316
 317                                 gui.add( effectController, "threshold", 0, 1, 0.001 ).onChange( matChanger );
 318                                 gui.add( effectController, "gain", 0, 100, 0.001 ).onChange( matChanger );
 319                                 gui.add( effectController, "bias", 0,3, 0.001 ).onChange( matChanger );
 320                                 gui.add( effectController, "fringe", 0, 5, 0.001 ).onChange( matChanger );
 321
 322                                 gui.add( effectController, "focalLength", 16, 80, 0.001 ).onChange( matChanger );
 323
 324                                 gui.add( effectController, "noise" ).onChange( matChanger );
 325
 326                                 gui.add( effectController, "dithering", 0, 0.001, 0.0001 ).onChange( matChanger );
 327
 328                                 gui.add( effectController, "pentagon" ).onChange( matChanger );
 329
 330                                 gui.add( shaderSettings, "rings", 1, 8).step(1).onChange( shaderUpdate );
 331                                 gui.add( shaderSettings, "samples", 1, 13).step(1).onChange( shaderUpdate );
 332
 333                                 matChanger();
 334
 335                                 window.addEventListener( 'resize', onWindowResize, false );
 336
 337                         }
 338
 339                         function onWindowResize() {
 340
 341                                 camera.aspect = window.innerWidth / window.innerHeight;
 342                                 camera.updateProjectionMatrix();
 343
 344                                 renderer.setSize( window.innerWidth, window.innerHeight );
 345
 346                         }
 347
 348                         function onDocumentMouseMove( event ) {
 349
 350                                 mouse.x = ( event.clientX - windowHalfX ) / windowHalfX;
 351                                 mouse.y = - ( event.clientY - windowHalfY ) / windowHalfY;
 352
 353                                 postprocessing.bokeh_uniforms[ 'focusCoords' ].value.set(event.clientX / window.innerWidth, 1-(event.clientY / window.innerHeight));
 354
 355                         }
 356
 357                         function onDocumentTouchStart( event ) {
 358
 359                                 if ( event.touches.length == 1 ) {
 360
 361                                         event.preventDefault();
 362
 363                                         mouse.x = ( event.touches[ 0 ].pageX - windowHalfX ) / windowHalfX;
 364                                         mouse.y = - ( event.touches[ 0 ].pageY - windowHalfY ) / windowHalfY;
 365
 366                                 }
 367                         }
 368
 369                         function onDocumentTouchMove( event ) {
 370
 371                                 if ( event.touches.length == 1 ) {
 372
 373                                         event.preventDefault();
 374
 375                                         mouse.x = ( event.touches[ 0 ].pageX - windowHalfX ) / windowHalfX;
 376                                         mouse.y = - ( event.touches[ 0 ].pageY - windowHalfY ) / windowHalfY;
 377
 378                                 }
 379
 380                         }
 381
 382                         function initPostprocessing() {
 383
 384                                 postprocessing.scene = new THREE.Scene();
 385
 386                                 postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
 387                                 postprocessing.camera.position.z = 100;
 388
 389                                 postprocessing.scene.add( postprocessing.camera );
 390
 391                                 var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
 392                                 postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
 393                                 postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
 394
 395
 396
 397                                 var bokeh_shader = THREE.BokehShader;
 398
 399                                 postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
 400
 401                                 postprocessing.bokeh_uniforms[ "tColor" ].value = postprocessing.rtTextureColor.texture;
 402                                 postprocessing.bokeh_uniforms[ "tDepth" ].value = postprocessing.rtTextureDepth.texture;
 403
 404                                 postprocessing.bokeh_uniforms[ "textureWidth" ].value = window.innerWidth;
 405
 406                                 postprocessing.bokeh_uniforms[ "textureHeight" ].value = height;
 407
 408                                 postprocessing.materialBokeh = new THREE.ShaderMaterial( {
 409
 410                                         uniforms: postprocessing.bokeh_uniforms,
 411                                         vertexShader: bokeh_shader.vertexShader,
 412                                         fragmentShader: bokeh_shader.fragmentShader,
 413                                         defines: {
 414                                                 RINGS: shaderSettings.rings,
 415                                                 SAMPLES: shaderSettings.samples
 416                                         }
 417
 418                                 } );
 419
 420                                 postprocessing.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
 421                                 postprocessing.quad.position.z = - 500;
 422                                 postprocessing.scene.add( postprocessing.quad );
 423
 424                         }
 425
 426                         function shaderUpdate() {
 427                                 postprocessing.materialBokeh.defines.RINGS = shaderSettings.rings;
 428                                 postprocessing.materialBokeh.defines.SAMPLES = shaderSettings.samples;
 429
 430                                 postprocessing.materialBokeh.needsUpdate = true;
 431
 432                         }
 433
 434                         function animate() {
 435
 436                                 requestAnimationFrame( animate, renderer.domElement );
 437
 438                                 render();
 439                                 stats.update();
 440
 441                         }
 442
 443                         function linearize(depth) {
 444                                 var zfar = camera.far;
 445                                 var znear = camera.near;
 446                                 return -zfar * znear / (depth * (zfar - znear) - zfar);
 447                         }
 448
 449
 450                         function smoothstep(near, far, depth) {
 451                                 var x = saturate( (depth - near) / (far - near));
 452                                 return x * x * (3- 2*x);
 453                         }
 454
 455                         function saturate(x) {
 456                                 return Math.max(0, Math.min(1, x));
 457                         }
 458
 459                         function render() {
 460
 461                                 var time = Date.now() * 0.00015;
 462
 463                                 camera.position.x = Math.cos(time) * 400;
 464                                 camera.position.z = Math.sin(time) * 500;
 465                                 camera.position.y = Math.sin(time / 1.4) * 100;
 466
 467                                 camera.lookAt( target );
 468
 469                                 camera.updateMatrixWorld();
 470
 471                                 if ( effectController.jsDepthCalculation ) {
 472
 473                                         raycaster.setFromCamera( mouse, camera );
 474
 475                                         var intersects = raycaster.intersectObjects( scene.children, true );
 476
 477
 478                                         if ( intersects.length > 0 ) {
 479
 480                                                 var targetDistance = intersects[ 0 ].distance;
 481
 482                                                 distance += (targetDistance - distance) * 0.03;
 483
 484                                                 var sdistance = smoothstep(camera.near, camera.far, distance);
 485
 486                                                 var ldistance = linearize(1 -  sdistance);
 487
 488                                                 // (Math.random() < 0.1) && console.log('moo', targetDistance, distance, ldistance);
 489
 490                                                 postprocessing.bokeh_uniforms[ 'focalDepth' ].value = ldistance;
 491
 492                                                 effectController['focalDepth'] = ldistance;
 493
 494                                         }
 495
 496                                 }
 497
 498                                 for (var i=0;i<leaves;i++) {
 499                                         var plane = planes[i];
 500                                         plane.rotation.x += plane.rotation.dx;
 501                                         plane.rotation.y += plane.rotation.dy;
 502                                         plane.rotation.z += plane.rotation.dz;
 503                                         plane.position.y -= 2;
 504                                         plane.position.x += plane.position.dx;
 505                                         plane.position.z += plane.position.dz;
 506                                         if (plane.position.y < 0) plane.position.y += 300;
 507                                 }
 508
 509
 510                                 if ( postprocessing.enabled ) {
 511
 512                                         renderer.clear();
 513
 514                                         // Render scene into texture
 515
 516                                         scene.overrideMaterial = null;
 517                                         renderer.render( scene, camera, postprocessing.rtTextureColor, true );
 518
 519                                         // Render depth into texture
 520
 521                                         scene.overrideMaterial = material_depth;
 522                                         renderer.render( scene, camera, postprocessing.rtTextureDepth, true );
 523
 524                                         // Render bokeh composite
 525
 526                                         renderer.render( postprocessing.scene, postprocessing.camera );
 527
 528
 529                                 } else {
 530
 531                                         scene.overrideMaterial = null;
 532
 533                                         renderer.clear();
 534                                         renderer.render( scene, camera );
 535
 536                                 }
 537
 538                         }
 539
 540
 541                 </script>
 542         </body>
 543 </html>