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

<pc-light>

<pc-light>タグは、ライトコンポーネントを定義するために使用されます。

使用法
  • <pc-entity> の直接の子である必要があります。

属性​

属性タイプデフォルト説明
cascade-blendNumber"0"各シャドウカスケードを次のカスケードへブレンドする割合。0（ブレンドなし）から1。num-cascadesが1より大きいdirectionalライトで使用されます
cascade-distributionNumber"0.5"カメラの視錐台をカスケード間で分割する方法。0（等間隔）から1（対数的で、カメラ近傍に解像度を集中）。num-cascadesが1より大きいdirectionalライトで使用されます
cast-shadowsBoolean"false"ライトが影を落とすかどうか
colorColor"1 1 1"スペース区切りのRGB値、16進数コード、または名前付き色としてのライトの色
enabledBoolean"true"コンポーネントの有効状態
inner-cone-angleNumber"40"内側コーン角度（度単位、スポットライト用）
intensityNumber"1"ライトの強度乗数
normal-offset-biasNumber"0"シャドウレンダリング用の法線オフセットバイアス
num-cascadesNumber"1"シャドウカスケードの数。1（カスケードなし）から4の整数。directionalライトで使用されます
outer-cone-angleNumber"45"外側コーン角度（度単位、スポットライト用）
penumbra-falloffNumber"1"PCSSシャドウの半影減衰率
penumbra-sizeNumber"1"PCSSシャドウの半影サイズ
rangeNumber"10"ライトの有効距離
shadow-biasNumber"0.05"影の深度バイアス
shadow-blocker-samplesNumber"16"PCSSシャドウブロッカーのサンプル数
shadow-distanceNumber"40"シャドウレンダリングの最大距離
shadow-intensityNumber"1"影の強度乗数
shadow-resolutionNumber"1024"シャドウマップの解像度
shadow-samplesNumber"16"PCSSシャドウのサンプル数
shadow-typeEnum"pcf3-32f"影のフィルタリング: "pcf1-16f" | "pcf1-32f" | "pcf3-16f" | "pcf3-32f" | "pcf5-16f" | "pcf5-32f" | "vsm-16f" | "vsm-32f" | "pcss-32f"
typeEnum"directional"ライトのタイプ: "directional" | "omni" | "spot"
vsm-biasNumber"0.0025"バリアンスシャドウマップのバイアス
vsm-blur-sizeNumber"11"バリアンスシャドウマップのぼかしサイズ（1〜25）

ここでのデフォルト値はすべてエンジン自身のものです。そのため、属性を省略した<pc-light>は、エンジンが自ら構築したライトとまったく同じようにレンダリングされます。これが特に重要なのはシャドウ調整用の属性です。小さなシーンで見栄えよく見せる値をあらかじめ設定するのではなく、意図的に未調整のままにしてあります。影を有効にして何かがおかしいと感じたら、shadow-biasやnormal-offset-biasは自分で調整することになります。

シャドウカスケード​

1枚のシャドウマップを遠くまでの視界に引き伸ばすと解像度が足りなくなります。カメラ近くの影はブロック状になり、遠くの影は粗いままです。カスケードはカメラの視錐台をいくつかのスライスに分割し、それぞれに専用のシャドウマップを与えるため、ディテールがカメラに追従します。これはdirectionalライトにのみ適用され、明示的に指定するまで無効です。

<pc-entity name="sun" rotation="45 30 0">
    <pc-light cast-shadows
              num-cascades="4"
              cascade-distribution="0.7"
              cascade-blend="0.1"
              shadow-distance="200"
              shadow-resolution="2048"></pc-light>
</pc-entity>

3つの属性はそれぞれ異なる役割を持ち、num-cascadesが1より大きい場合にのみ他の2つが効いてきます。

属性制御する内容
num-cascadesスライスの数（1〜4）。多いほどスライスごとのディテールは増えますが、その分シャドウの描画パスが増えます
cascade-distribution分割位置。0（等間隔）から1（カメラ寄りに密集）。手前の影にディテールが必要なら上げ、遠方のスライスが不足して見えるなら下げます
cascade-blend各スライスを次のスライスへクロスフェードさせる量（0〜1）。小さな値でスライスの継ぎ目を隠せますが、大きすぎると重なり部分に解像度を無駄に使います

全体の範囲は依然としてshadow-distanceが決めます。これがカスケードで分割される距離なので、距離を上げずにカスケード数だけ増やしても、同じ近距離範囲をさらに細分するだけです。shadow-resolutionは共有の予算ではなく、カスケードごとの値です。

Shadow Cascadesのサンプルは、カスケードが必要になるほど長い砂漠の堤道で3つの属性すべてを操作でき、レンダラーが導出する分割距離もプロットします。エンジンにはカスケードのデバッグビューがなく、それがないとcascade-distributionのスライダーは何も効いていないように見えるため、一見の価値があります。

例​

ライトの color、intensity、type の値を編集して、シーンが更新される様子を確認してみましょう:

ライブサンプル
<pc-app>
    <pc-scene>
        <pc-entity name="camera" position="0 2.5 5" rotation="-15 0 0">
            <pc-camera clear-color="#1d1f2b"></pc-camera>
        </pc-entity>
        <!-- 下向きに照らす暖色のスポットライト (スポットライトはY軸負方向を向きます) -->
        <pc-entity name="spot-light" position="-2 4 0">
            <pc-light type="spot" color="#ffb47a" intensity="5" outer-cone-angle="35" cast-shadows normal-offset-bias="0.05" shadow-bias="0.2"></pc-light>
        </pc-entity>
        <!-- 形状の間に置いた寒色のオムニライト -->
        <pc-entity name="omni-light" position="2 2 1">
            <pc-light type="omni" color="#7ab8ff" intensity="2.5" range="10"></pc-light>
        </pc-entity>
        <!-- 照らされる形状 -->
        <pc-entity name="ground" position="0 -0.5 0" scale="10 1 10">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="sphere" position="-2 0.5 0">
            <pc-render type="sphere"></pc-render>
        </pc-entity>
        <pc-entity name="box" position="2 0.5 0" rotation="0 30 0">
            <pc-render type="box"></pc-render>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScriptインターフェース​

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