2018-02-10

Three.js drawMode プリミティブタイプ

この記事は、webgl-jp Slack内の情報を元に構成されています。

webgl-jp.slack

three.jsの描画モードの変更についてなのですが、meshクラスのdrawModeで変更できるみたいです。

どのプリミティブを使うかっていう話？（Triangle か Points かみたいの）

プリミティブの話です。

Mesh ごとに指定するんですね。

何も指定しないと、デフォルト(TrianglesDrawMode： gl.TRIANGLES)になって、別のものを指定すると、それに変わります。

一覧

TrianglesDrawMode： gl.TRIANGLES

TriangleStripDrawMode： gl.TRIANGLE_STRIP

TriangleFanDrawMode： gl.TRIANGLE_FAN

コードの例

var mesh = new THREE.Mesh( geometry, material );
mesh.drawMode = THREE.TrianglesDrawMode;

2018-02-08

Three.js UVで割れる表現

この記事は、webgl-jp Slack内の情報を元に構成されています。

webgl-jp.slack

f:id:webgl:20180208193119j:plain

three.jsで一枚の画像が複数のポリゴンに分かれてバラバラになるようなエフェクトを作れますか。ガラスが割れる感じの。

割れるアニメーションが毎回同じで良いのであれば、Blenderとかでそういうアニメーションモデルを作ってしまって、Three.js形式で出力してThree.jsで再生するのが確実でしょうね。

ただ、シェーダーで類似の表現ができなくもないかもしれません。あまり大規模な破壊表現はできないと思いますが。

やりたいこととしては、ランダムに生成されるポリゴンにテクスチャを貼れるかってことですね。

UVをうまいこと使えば。

テクスチャはないですが物体破壊の公式サンプルはこちら。

https://threejs.org/examples/#webgl_physics_convex_break

2018-02-07

Three.js CSG ConstructiveSolidGeometry

この記事は、webgl-jp Slack内の情報を元に構成されています。

webgl-jp.slack

ThreeCSG.js という Constructive Solid Geometry ライブラリがあるのですが、

使用しようとすると、球体の表面がカクカク（フラットシェーディング）になってしまうようです。

スムースシェーディングにする方法をご存じの方、いらっしゃいますか？

Three.jsにフラット/スムーズを切り替えるフラグがあったような。

var seaMaterial = new THREE.MeshPhongMaterial({
       //shading: THREE.FlatShading
       shading: THREE.SmoothShading,
       map: seaTexture,
       shininess: 0
   });

どうやら、そのオプションを指定してもダメな感じでした。

FlatとSmoothを指定したときって、内部的にどのような処理がされてるんですかね。

ネイティブのOpenGLなら、APIでフラットとスムースを切り替えられるんですが、

ラスタライザの設定に当たるはずです。

ちなみに、Babylon.js の CSG ライブラリだと、Smooth な感じでした。

描画結果だけ見ると、これシェーディングというか、そういう法線なんじゃないの？

という感じに見えます。

調べてみましたが、CSGをかますと、それまで共通だった頂点が分離さるようになっているようです。

現状、ThreeCSG ライブラリの仕様のようですね。

2018-02-06

WebGL GPUに計算させる

この記事は、webgl-jp Slack内の情報を元に構成されています。

webgl-jp.slack

質問

gpu.js

を見つけたのですが、GPUに計算させるにはどういった方法が思いつきますか？

回答

よくあるのは、テクスチャを２つ用意して、画面を覆う四角ポリゴンを描画して、双方のテクスチャをピンポンして計算するアプローチです。

WebGLを利用する前提の話であれば、GPUに計算させる＝シェーダにやらせる、ということなので、

１．フレームバッファを生成し板ポリを描画

２．この板ポリの描画の際に走るフラグメントシェーダで何かしらの計算をする

３．計算した結果はフレームバッファに書き出されるので

４．別のプロセスでその値を読みだして使う

ふたつのプロセスで順番にフレームバッファに書き込み、読み出し、というふうに繰り返し処理することになる。

2018-02-06

WebGL 月食を表現負のライティング

この記事は、webgl-jp Slack内の情報を元に構成されています。

webgl-jp.slack

WebGLで月食を表現する際に考えられる方法。

テストで作成

月食の仕組みは、レイリー散乱によるもの。

http://web.canon.jp/technology/kids/mystery/m_01_10.html

影なので、デプスシャドウを使用するか。

しかし、Three.jsで影の輪郭をぼかせるのだろうか（ソフトシャドウ）。

よりつきつめると、散乱現象も加わる。

参考になりそうな記事

https://liginc.co.jp/355670

シャドウマッピングの試み

投影（射影）テクスチャマッピング技法が使えるかもしれない。

または、逆の発想でマイナスの明るさを持つ点光源とかで負のライティングをしてやる。

雲のテクスチャを重ねて表示

マイナスの明るさを持つ点光源とかで負のライティング

SpotLight の intensity（光の強さ）をマイナスにすることで黒いライトが作れるよう。