WebGLとThree.jsで丸みのある太い線を描く

Question

WebGLとthree.jsを使い始めたばかりです。 私は実際には、コーナーとエンディングを丸めた太い線を作成したいと思います。 （例えば、画像を参照）

残念ながら、私は、まずLineBasicMaterialのこのlinecapプロパティが実際に動作しないことがわかります。 Three.js LineBasicMaterial

私はチューブを使用して考えるように始めたが、その後、私は、私はまだラウンドキャップを得ないだろうと思い...

誰かが、私は上の写真でラインを作成することができますどのように任意のアイデアを持っていますか？必ずしもthree.jsで作成する必要はありませんが、WebGLが必要です。 （私はさらにこの行をアニメーション化したい...）

ありがとうございました。

乾杯

Answer 1

3D体積ラインを描画するカップルの方法があります。 1つは、シェーダで頂点拡張を行うことです。これは、コメント内のリンクが行うことです。より多くの資料が必要な場合の別の1つがあります：http://codeflow.org/entries/2012/aug/05/webgl-rendering-of-solid-trails/

残念ながら、線分を直接見たときに視覚的なアーチファクトがあります。ここでデモを確認してください：http://codeflow.org/webgl/trails/www/。シーンを回転させると、カメラに直面している線分の一部が急に回転することに気づくでしょう。それは、より少ないノイズの多いテクスチャbtwで、より悪く見えます。これがうまくいけば、おそらくこれが好ましいオプションです。

第2の選択肢は、各線分ごとにカプセルメッシュを動的に生成することです。それについてはそれほど言いませんが、それは単純で、やや非効率的な方法です。

第3のオプションは、シェーダで限定された種類のレイトレーシングを行うことです。線分と影付きの部分との間の距離を計算し、それを使って適切な色を決定することができます。これはlinkです。ジオメトリシェーダは現在webglではサポートされていませんが、javascriptを介して境界線立方体を生成することを妨げるものは何もありません。ああ、柔らかい線が必要な場合は、おそらくblend_minmax拡張が必要です。おそらく最も困難なセットアップ方法ですが、他の2つの方法と比較して、あらゆる角度で見ることができ、非常にカスタマイズ可能です。