How to add a bokehShader in three.js -


i shader in example https://threejsdoc.appspot.com/doc/three.js/examples/webgl_postprocessing_dof.html add bokeh effect scene. unable work. there seems no errors when checked in console. here code (main.js). have included shaderextras.js example , added in index.html

$(document).ready(function(){      pposx = window.innerwidth/2;     pposy = window.innerheight/2;      var scene = new three.scene();     var camera = new three.perspectivecamera(70, window.innerwidth/window.innerheight, 0.1, 10000 );     camera.lookat(scene.position);      camera.position.x = 0;     camera.position.y = 0;     camera.position.z = 5;      var renderer = new three.webglrenderer({ antialias: true });     renderer.setsize( window.innerwidth, window.innerheight );     renderer.setclearcolor( 0xffffff );      $("body").append(renderer.domelement);      var directionallight = new three.directionallight( 0xffffff, 0.7 );     directionallight.position.set( 0, 0, -4 );     directionallight.rotation.x = (math.pi/180)*180;     directionallight.rotation.y = (math.pi/180)*180;      var directionallight1 = new three.directionallight( 0xffffff, 0.7 );     directionallight1.position.set( 0, 0, 4 );      var directionallight2 = new three.directionallight( 0xffffff, 0.7 );     directionallight2.position.set( -3, 0, 0 );      var directionallight3 = new three.directionallight( 0xffffff, 0.7 );     directionallight3.position.set( 3, 0, 0 );      scene.add( directionallight, directionallight1, directionallight2, directionallight3 );      material1 = new three.meshphongmaterial( { color: 0xff00ff, specular: 0xff00ff, shininess: -3, shading: three.flatshading, side: three.frontside } );      ge = [];     for(j=0;j<100;j++){         ge[j] = new three.boxgeometry( 1, 1, 1 );         ge[j] = new three.mesh( ge[j], material1 );         ge[j].position.z = -50 + j*2;         scene.add( ge[j] );     }      $(document).mousemove(function(e){         pposx = e.clientx;         pposy = e.clienty;     });      function initpostprocessing() {                  postprocessing.scene = new three.scene();                  postprocessing.camera = new three.orthographiccamera( window.innerwidth / - 2, window.innerwidth / 2,  window.innerheight / 2, window.innerheight / - 2, -100, 100 );                 postprocessing.camera.position.z = 5;                  var pars = { minfilter: three.linearfilter, magfilter: three.linearfilter, format: three.rgbformat };                 postprocessing.rttexturedepth = new three.webglrendertarget( window.innerwidth, window.innerheight, pars );                 postprocessing.rttexturecolor = new three.webglrendertarget( window.innerwidth, window.innerheight, pars );                  var bokeh_shader = three.shaderextras[ "bokeh" ];                  postprocessing.bokeh_uniforms = three.uniformsutils.clone( bokeh_shader.uniforms );                  postprocessing.bokeh_uniforms[ "focus" ].value = 1;                 postprocessing.bokeh_uniforms[ "aperture" ].value = 0.2;                 postprocessing.bokeh_uniforms[ "maxblur" ].value = 3;                  postprocessing.bokeh_uniforms[ "tcolor" ].texture = postprocessing.rttexturecolor;                 postprocessing.bokeh_uniforms[ "tdepth" ].texture = postprocessing.rttexturedepth;                 postprocessing.bokeh_uniforms[ "focus" ].value = 0.1;                 postprocessing.bokeh_uniforms[ "aspect" ].value = window.innerwidth / window.innerheight;                  postprocessing.materialbokeh = new three.shadermaterial( {                      uniforms: postprocessing.bokeh_uniforms,                     vertexshader: bokeh_shader.vertexshader,                     fragmentshader: bokeh_shader.fragmentshader                  } );                  postprocessing.quad = new three.mesh( new three.planegeometry( window.innerwidth, window.innerheight ), postprocessing.materialbokeh );                 postprocessing.quad.position.z = -1;                 postprocessing.scene.add( postprocessing.quad );              }      function render() {         requestanimationframe( render );          camera.rotation.y = (math.pi/180)*((pposx - (window.innerwidth/2))/1000*180);          camera.position.x = (5*math.sin((math.pi/180)*((pposx - (window.innerwidth/2))/1000*180)));         camera.position.y = (pposy - (window.innerheight/2))/100;         camera.position.z = (5*math.cos((math.pi/180)*((pposx - (window.innerwidth/2))/1000*180)));          renderer.render(scene, camera);     };     var postprocessing = { enabled  : true };     initpostprocessing();     render();     }); 

please, make cubes appear blured helpful.


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

firemonkey - How do I make a beep sound in Android using Delphi and the API? -