メインコンテンツまでスキップ

カメラ

カメラはシーンを画面にレンダリングします。カメラは CameraComponent がアタッチされた単なるエンティティであり、シーンはそのエンティティの位置と向きからレンダリングされます。そのため、他のエンティティと同じように、エンティティを移動・回転させることでカメラの向きを変えられます。カメラはローカルの負のZ軸方向を向いています。

何かを表示するには、シーンに少なくとも1つの有効なカメラが必要です。さらに、カメラでは多くのことを制御できます。3Dシーンを2D画像にマッピングする投影、最終的な色を決定づけるトーンマッピング、そして分割画面・オーバーレイ・レンダーターゲットへの描画のために複数のカメラでビューを合成する方法などです。

カメラの作成​

// Cameraコンポーネントを持つエンティティを作成する
const camera = new pc.Entity('Camera');
camera.addComponent('camera', {
    clearColor: new pc.Color(0.3, 0.3, 0.7)
});
app.root.addChild(camera);

// エンティティを変換してカメラの向きを定める
camera.setPosition(0, 5, 10);
camera.lookAt(0, 0, 0);

レンダーターゲットのクリア​

カメラはシーンをレンダリングする前に、レンダーターゲットをクリアします。何をどの色でクリアするかは制御できます:

camera.camera.clearColor = new pc.Color(0, 0, 0);

camera.camera.clearColorBuffer = true;   // カラーバッファをクリア（デフォルト: true）
camera.camera.clearDepthBuffer = true;   // 深度バッファをクリア（デフォルト: true）
camera.camera.clearStencilBuffer = true; // ステンシルバッファをクリア（デフォルト: true）

シーンにスカイボックスがある場合、クリアカラーは完全に覆われます。クリアフラグの無効化は、複数のカメラを重ねて描画する際に役立ちます。詳細は複数のカメラを参照してください。

このセクションの内容​

  • 投影 — 透視投影と正投影、視野角、クリップ面とフラスタムカリング。
  • トーンマッピングと露出 — HDRのシーンライティングをディスプレイにマッピングし、必要に応じて物理ベースの露出を制御します。
  • 複数のカメラ — 優先度、ビューポート、レイヤー、レンダーターゲットでビューを合成します。
  • カメラコントロール — エンジン付属のスクリプトで、オービット・フライ・一人称のナビゲーションを追加します。
  • スクリーン座標とワールド座標 — 2Dスクリーン位置と3Dワールド位置を相互に変換します。
  • Scene Picker — スクリーン座標の下にあるオブジェクトを正確に選択します。
  • Depthレイヤー — シーンのカラーバッファと深度バッファにシェーダーからアクセスします。

さらに先へ​

  • ポストプロセッシング — ブルーム、被写界深度、SSAO、TAA、ビネットなどはカメラごとに適用されます。ポストエフェクトを参照してください。
  • ARとVR — カメラは startXr() で没入型WebXRセッションを開始できます。XRセクションを参照してください。
  • カメラごとのフォグ — fog でシーンのフォグ設定を個々のカメラで上書きできます。
  • カスタム投影 — calculateProjection と calculateTransform のコールバックを指定すると、斜投影や平面反射などの高度なエフェクトを実現できます。
  • チュートリアル — Camera Following a Path と Orbit Camera を試してみてください。