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
Post a Comment