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 ライブラリの仕様のようですね。