Cesiumエッセイ:テーパ描画(下)

0.はじめに
前回Cesiumエッセイで紹介したテーパの描き方は正確ではなく、camera.debugShowを使用して実際のテーパと私たちが計算したテーパの姿勢の誤差を調べることができます.本稿では、正しいテーパの描き方を簡単に紹介し、2点に基づいてテーパの姿勢を計算する方法を重点的に説明します.筆者のビジュアルドメイン解析は成功しており,ShadowMapを用いてShadowMapShaderを修正すれば実現できる(ソースコードでGLSLを修正してシャドウシェーディング効果を変更する必要がある)が,後続の生産環境では後期処理技術を用いて機能を独立させる必要がある.
GIF.gif
1.2点からカメラの射向を計算する
SandCastleの2点から計算した放射線の例を参考に、

let spotLightCamera = new Cesium.Camera(window.app.viewer.scene);
let direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(this.secondPos, this.firstPos, new Cesium.Cartesian3()), new Cesium.Cartesian3());
spotLightCamera.position = this.firstPos;//firstPos     
spotLightCamera.direction=direction;//direction        

2.テーパ描画部
テーパ描画コードはCesiumソースコードのCamera debug show部分から参照

let scratchRight = new Cesium.Cartesian3();
let scratchRotation = new Cesium.Matrix3();
var scratchOrientation = new Cesium.Quaternion();
let position = spotLightCamera.positionWC;
let direction = spotLightCamera.directionWC;
let up = spotLightCamera.upWC;
let right = spotLightCamera.rightWC;
right = Cesium.Cartesian3.negate(right, scratchRight);

let rotation = scratchRotation;
Cesium.Matrix3.setColumn(rotation, 0, right, rotation);
Cesium.Matrix3.setColumn(rotation, 1, up, rotation);
Cesium.Matrix3.setColumn(rotation, 2, direction, rotation);
//      
let orientation = Cesium.Quaternion.fromRotationMatrix(rotation, scratchOrientation);
//       
let instanceOutline = new Cesium.GeometryInstance({
                geometry: new Cesium.FrustumOutlineGeometry({
                    frustum: spotLightCamera.frustum,
                    origin: this.firstPos,
                    orientation: orientation
                }),
                id: "pri" + window.app.viewer.scene.primitives.length + 1,
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 1.0, 0.0, 1.0)),
                    show: new Cesium.ShowGeometryInstanceAttribute(true)
                }
            });
//    
let newPrimitive = window.app.viewer.scene.primitives.add(new Cesium.Primitive({
                geometryInstances: instanceOutline,
                appearance: new Cesium.PerInstanceColorAppearance()
            }));

ところで、上記のコードの前に、テーパの関連パラメータを修正することを忘れないでください(修正しないとデフォルトパラメータで描かれたテーパが空を突破します)、前のエッセイに関連パラメータの説明がありました.

spotLightCamera.frustum.near=1;
spotLightCamera.frustum.far=100;

上記の方法に加えて、DebugCameraPrimitiveエンティティを直接使用してテーパを描くこともできますが、欠点は、エンティティがnearパラメータとfarパラメータを変更するのに不便なようです.
3.まとめ
Cesiumにおけるモデルの並進,スケーリング,回転はModelMatrixという行列パラメータによって実現され,行列演算を習得することは三次元世界の理解に役立つ.