<pc-scene>

<pc-scene>タグは、アプリケーションが描画するシーンを定義します。エンティティ階層のルートであり、その中のすべてに適用されるフォグ、露出、Gaussian splat、ライティング、重力の設定を持ちます。

使用法

<pc-app>の直接の子要素である必要があります。

属性

属性	タイプ	デフォルト	説明
`exposure`	Number	`"1"`	レンダリングされる画像全体の明るさの倍率。シーンが物理単位を使用している間は無視されます。物理単位はJavaScriptからエンジンのシーンの`physicalUnits`で有効にします
`fog`	Enum	`"none"`	フォグの種類：`"none"` \| `"linear"` \| `"exp"` \| `"exp2"`
`fog-color`	Color	`"0 0 0"`	スペース区切りのRGB値、16進数コード、または名前付きカラーとしてのフォグの色
`fog-density`	Number	`"0"`	指数フォグタイプの場合のフォグの密度
`fog-end`	Number	`"1000"`	線形フォグの終了距離
`fog-start`	Number	`"1"`	線形フォグの開始距離
`gsplat-lod-mode`	Enum	`"distance"`	ストリーミングされるGaussian splatのLODレベルを、スプラット予算の範囲内でどう選ぶか：`"error"` \| `"distance"`。レベルオブディテールを参照
`gsplat-splat-budget`	Number	`"1000000"`	シーン内のすべてのGaussian splatを合わせて描画するスプラット数の目標値。ストリーミングされるスプラットアセット間で配分されます。0以下の値はデフォルトとして扱われます
`gsplat-use-fog`	Boolean	`"true"`	シーンのフォグをGaussian splatに適用するかどうか
`gsplat-use-tonemap`	Boolean	`"true"`	カメラのトーンマッピングとシーンの`exposure`をGaussian splatに適用するかどうか。`"false"`にすると、スプラットは保存されている色のままレンダリングされます。これはすでに表示用に仕上がっているキャプチャに適しています。フォグは引き続き適用されます
`gravity`	Vector3	`"0 -9.81 0"`	「X Y Z」値としてリジッドボディに適用される重力
`lighting-max-lights`	Number	`"255"`	クラスターライティングが1フレームで使用するライトの最大数。エンジンはこの値を1からデバイスがサポートする最大値（最大65535）までの範囲に収め、上限を超えたライトはそのフレームから除外されます。255を超える値はライトグリッドのメモリを2倍にします

シーンはこれらの設定を、どのスクリプトのinitialize()よりも前に適用します。アプリケーションの起動時も、実行中のアプリケーションに<pc-scene>を挿入したときも同様なので、スクリプトは最初から要素の値を参照できます。アプリケーションとその物理を遅くしたり一時停止したりするタイムスケールは、<pc-app>の属性です。

イベント

<pc-scene>はすべてのエンティティ要素の祖先なので、エンティティでディスパッチされたポインターイベントはここを通ってバブリングします。ここに置いたリスナーは、シーン全体に対する委譲リスナーになります。ヒットしたエンティティはevent.targetで調べます:

document.querySelector('pc-scene').addEventListener('click', (event) => {
    console.log(`Clicked ${event.target.getAttribute('name')}`);
});

ここに置いたリスナーはイベントがディスパッチされるタイミングの判定に含まれるため、エンティティ自体にリスナーを置く必要はありません。押下と解放が異なる2つのトップレベルのエンティティ上で起きたクリックは、両者の最も近い共通の祖先である<pc-scene>自体がターゲットになります。シーンは、ポインターがそのエンティティ全体の上に移動したときと離れたときに、自分用のpointerenterとpointerleaveも受け取ります。そのため、たとえばシーン内の何かがポインターの下にある間はカーソルを変える、といった処理を1組のリスナーで実現できます。

例

リニアフォグの中へ消えていくボックスです。fog-color を変えたり (カメラの clear-color と揃えると定番の深度ヘイズ表現になります)、fog を "exp" にして fog-density を 0.15 にしたりしてみましょう:

ライブサンプル

<pc-app>
    <pc-scene fog="linear" fog-color="#4a5568" fog-start="2" fog-end="10">
        <pc-entity name="camera" position="0 1.5 4" rotation="-10 0 0">
            <pc-camera clear-color="#4a5568"></pc-camera>
        </pc-entity>
        <pc-entity name="light" rotation="45 30 0">
            <pc-light></pc-light>
        </pc-entity>
        <pc-entity name="box-1" position="-1 0.5 0">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="box-2" position="0 0.5 -3">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="box-3" position="1 0.5 -6">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="box-4" position="2 0.5 -9">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="ground" position="0 -0.5 -4" scale="10 1 20">
            <pc-render type="box"></pc-render>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScriptインターフェース

SceneElement APIを使用して、<pc-scene>要素をプログラムで作成および操作できます。

sceneプロパティは、フォグ、露出、スカイを設定するエンジンのSceneです。含まれているアプリケーションが作成されるまではnullなので、ページのコードから読み取る前に要素の準備完了を待ってください。

属性​

イベント​

例​

JavaScriptインターフェース​

関連項目​

属性

イベント

例

JavaScriptインターフェース

関連項目