3

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 では、Angle と DirectX を使用する Web ブラウザーで、より太い線をレンダリングできます。

(頂点法線によってスケーリングされたオブジェクトを使用できることは知っていますが、この方法では、アウトラインをいくつかの場所で太くし、他の場所で薄くします)

それから、輪郭をぼかすというアイデアを思いつきました。

このチュートリアルを見つけました

(これは http リンクではありません)://stemkoski.blogspot.com/2013/03/using-shaders-and-selective-glow.html

ぼかしられるオブジェクトを含むシーンをレンダリングする前に、MaskPass を追加します。それから何が起こったのですか?何もない。

マスクを反転し、マスク パスとレンダー パスのバッファ クリアを無効にしていますが、全体として何をしているのかわかりません。

これは、私が作成したいくつかの例を含む jsFiddle です。

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

アウトラインが機能しているように見えますが、加算シェーダーを使用しており、緑の立方体 (アウトラインとして機能する必要があります) が赤の立方体 (アウトラインを受け取る必要があります) に追加されます。赤い立方体が緑のぼやけた輪郭を持つように Three.js マスキングを使用することは可能ですか? または、Three.js メソッド以外を使用して同じ効果を得る方法が他にあるのでしょうか?

PS これは死活問題なので冗談ではありません。

4

1 に答える 1