Question

我在Three.js中遇到屏蔽问题。

我想围绕对象概述，我使用本教程

http://www.codeproject.com/Articles/8499/Generating-Outlines-in-OpenGL

我写了这段代码;

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);

它就像一个魅力。

但我希望轮廓更加厚实。在Windows上，使用角度和DirectX的Web浏览器，所以我可以渲染更粗的线条。

（我知道我可以通过顶点法线使用缩放对象，但是这样我会在某些地方创建更粗的轮廓而在其他地方创建更细的轮廓）

然后我明白了这个想法，模糊了大纲。

我找到了这个教程

（这不是http链接）：// stemkoski.blogspot.com/2013/03/using-shaders-and-selective-glow.html

我在使用将被模糊的对象渲染场景之前添加MaskPass。那么发生了什么？什么都没有。

我反转蒙版并禁用缓冲区清除蒙版和渲染过程但总的来说我不知道我在做什么。

这是我做过的一些例子的jsFiddle。

http://jsfiddle.net/9MtGR/15/

它看起来像轮廓工作但我使用添加着色器和绿色立方体（应该作为轮廓）添加到红色立方体（应该接收轮廓）。是否有可能使用Three.js掩盖红色立方体将具有绿色模糊轮廓的方式？或者mayby还有其他方法可以使用Three.js方法获得相同的效果吗？

P.S。这是一个生死攸关的问题，所以这不是一个玩笑。

Answer 1

当我正在制作一些需要我加入类似星球大战的激光的动画时 - 到底有什么帮助：http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html

特别是这个例子：http://demo.bkcore.com/threejs/webgl_tron_iso.html

三个JS对象概述和屏蔽

1 个答案: