three.js - ThreeJS object outlines and masking -
i have problem masking in three.js.
i want have outline around object , did using tutorial
http://www.codeproject.com/articles/8499/generating-outlines-in-opengl
i wrote code;
renderer.autoclear = false; ... renderer.render(scene, camera); ... var gl = this.world.renderer.domelement.getcontext('webgl') || this.world.renderer.domelement.getcontext('experimental-webgl'); gl.clearstencil(0); gl.clear(gl.stencil_buffer_bit); gl.enable(gl.stencil_test); gl.stencilfunc(gl.always, 1, 1); gl.stencilop(gl.keep, gl.replace, gl.replace); gl.colormask(0, 0, 0, 0); renderer.render(scenemask, camera); gl.colormask(1, 1, 1, 1); gl.stencilfunc(gl.notequal, 1, 1); gl.stencilop(gl.keep, gl.replace, gl.replace); renderer.render(sceneoutlines, camera); gl.disable(gl.stencil_test);
and works charm.
but want have outline more thicker. on windows, web browsers using angle , directx can render thicker lines.
(i know can use scaled object vertex normals, in way create outline thicker in places , thiner in other)
then got idea, blur outline.
i found tutorial
(this not http link)://stemkoski.blogspot.com/2013/03/using-shaders-and-selective-glow.html
and add maskpass before rendering scene objects blured. happend then? nothing.
i inverting mask , disabling buffer clear mask , render passes in overall dont know im doing.
this jsfiddle example made.
it looks outline works im using additive shader , green cube (that should work outline) added red cube (that should receive outline). possible use three.js masking in way red cube have green blured outline? or mayby there other way same effect using not three.js methods?
p.s. matter of life , death it's not joke.
when working on animation required me include star-wars-like lasers - helped in end: http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html
especially example: http://demo.bkcore.com/threejs/webgl_tron_iso.html
Comments
Post a Comment