teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

動作条件を追記しました。

2019/09/23 20:16

投稿

MistletoeNaoko
MistletoeNaoko

スコア15

title CHANGED
@@ -1,1 +1,1 @@
1
- Three.jsにおいて複数Rendererがある時のClippingの挙
1
+ Three.jsにおいて複数Rendererで適切にclippingを作させたい
body CHANGED
@@ -1,10 +1,12 @@
1
- Three.jsで複数rendererで、一つのsceneを複数のカメラで描画する時に、local clippingが正しく動作しないことについて伺いたく投稿させていただきました。
1
+ Three.jsで複数rendererで、一つのsceneを複数のカメラで描画する時に、clippingが正しく動作しないことについて伺いたく投稿させていただきました。
2
2
  clippingPlaneを`THREE.Vector3(0, 0, -1)`に設定して、オブジェクトの手前側を描画しないようにしています。カメラはOrbitControlsで動かせるようになっています。以下にgifの動作イメージを添付しました。z軸方向負側を描画しないようにしたいだけなので、OrbitControlsでカメラをまわりこませてもz軸方向正側は描画していて欲しいのです。rendererが一つの時はこのように想定する通りに動作しています。
3
3
  ![正しい動作イメージ](c6818f4c921e177a99f03d3422155b7f.gif)
4
4
  しかし、rendererを増やすと以下のgifのように、カメラの位置が動くと正しくclippingされません。白い軸状のものや円形の線はきちんとclippingされているようですので、チューブだけの問題のようです。カメラをチューブ状のオブジェクトの真横に移動させると手前側が全て見えなくなってしまうので、イメージとしては、clipping planeが固定されているような感じです。
5
5
  ![誤った描画](f91cf69cb709ce92faeb132597d783c3.gif)
6
6
  ![カメラを真横に移動させたイメージ](7970c6b2f878b569b6ca5e4e2bb649c0.png)
7
+ なぜrendererを増やすとこのような動作になるのか検討もつきません。
8
+ 【追記】clippingは二個目のrendererの方では正しく動作しているようです。
7
- ぜrendererを増やすとこのような動作になるのか検討もつきません。なお、rendererを増やしたのはmulti viewsを実現したかったからです。multi viewsのコードはthree.jsのサンプルを参考にいたしました。
9
+ なお、rendererを増やしたのはmulti viewsを実現したかったからです。multi viewsのコードはthree.jsのサンプルを参考にいたしました。
8
10
  [Multi views](https://threejs.org/examples/#webgl_multiple_views)
9
11
  チューブに関してはシェーダーで色を決めたりclippingしたりしています。シェーダーにおけるclippingに関してはこちらを参考にいたしました。
10
12
  [Add clipping to THREE.ShaderMaterial](https://stackoverflow.com/questions/42532545/add-clipping-to-three-shadermaterial)