light

ライトコンポーネントは、エンティティを光源として定義します。ライトは、shader: flatでフラットシェーディングモデルを指定していないすべてのマテリアルに影響します。ライトは計算量が多いので、シーン内のライトの数を制限する必要があることに注意してください。

<a-entity light="color: #AFA; intensity: 1.5" position="-1 1 0"></a-entity>

デフォルトでは、A-Frameのシーンには、デフォルトの照明、環境光と指向性光が注入されています。これらのデフォルトの照明は、data-aframe-default-light属性でDOMに表示されます。ライトを追加した時点で、A-Frameは、シーンからデフォルトのライトを削除します。

<!-- Default lighting injected by A-Frame. -->
<a-entity light="type: ambient; color: #BBB"></a-entity>
<a-entity light="type: directional; color: #FFF; intensity: 0.6" position="-0.5 1 1"></a-entity>

他のライトを追加することなく、手動でデフォルトを無効にする場合。

<a-scene light="defaultLightsEnabled: false">
  <!-- ... -->
</a-scene>

# プロパティ

すべてのライトタイプで、いくつかの基本的なプロパティをサポートしています。

Property	概要	デフォルト値
type	`ambient` 環境光源, `directional` 指向性光源, `hemisphere`半球型の光源 , `point` ポイントライト, `spot`スポットライト, `probe` プローブ光のいずれか.	directional
color	光源の色	#fff
intensity	光源の強さ	1.0

# 光源タイプ

照明の種類によって、さまざまな特性があります。それぞれのタイプについて、その特性や、どのような場合に適しているかなどを解説していきます。

# Ambient　環境光源

Ambient Light 環境光源は、シーン内のすべてのエンティティにグローバルに影響します。色と強度のプロパティが環境光源を定義します。また、位置、回転、およびスケールは、環境光源に影響を与えません。

影の部分が完全に黒くならないように、また間接照明を模倣するために、何らかの環境光源を用意することをお勧めします。

<a-entity light="type: ambient; color: #CCC"></a-entity>

# Directional　指向性光源

指向性光源とは、太陽のように、無限に遠いところにある光源が、ある特定の方向から光を放つようなものです。したがって、絶対位置はエンティティに照射される光の強さに影響を与えません。そこで、positionコンポーネントで方向を指定します。

以下の例では、左上から45度の角度で輝く光源を作成しています。ベクトルだけが重要なので、position="-100 100 0" と position="-1 1 0" は同じであることに注意してください。

<a-entity light="type: directional; color: #EEE; intensity: 0.5" position="-1 1 0"></a-entity>

指向性ライトの方向は、それがターゲットとする子エンティティを作成することで、その方向で指定することができます。以下の例では、Z軸を下に向けています。

<a-light type="directional" position="0 0 0" rotation="-90 0 0" target="#directionaltarget">
  <a-entity id="directionaltarget" position="0 0 -1"></a-entity>
</a-light>

指向性ライトは、シーンにリアルタイムの影を加えるのに最も効率的なタイプです。

# Hemisphere　半球光源

半球光源は、環境光源のようなものですが、上からの光（color）と下からの光（groundColor）の2種類の色があります。これは、2つの異なる照明色があるシーン（例えば、灰色の空の下にある草原など）に便利です。

<a-entity light="type: hemisphere; color: #33C; groundColor: #3C3; intensity: 2"></a-entity>

Property	概要	デフォルト値
color	上からの光源色	#fff
groundColor	下からの光源色	#fff

# Point　ポイントライト

ポイントライトは指向性光源とは異なり、全方位に照射され、その位置や距離によって素材に影響を与えます。ポイントライトは電球のようなものです。電球が対象物に近づけば近づくほど、対象物はより大きく照らされます。

<a-entity light="type: point; intensity: 0.75; distance: 50; decay: 2"
          position="0 10 10"></a-entity>

Property	概要	デフォルト値
decay	光の距離に沿って減衰する量。	1.0
distance	強度が0になる距離です。距離が0の場合、点光源は距離による減衰はありません。	0.0

# Spot　スポットライト

スポットライトは、その位置や距離によって素材に影響を与えるという意味ではポイントライトと同じですが、スポットライトは全方位ではありません。バットシグナル (opens new window)のように、主に一方向に光を当てるものです。

<a-entity light="type: spot; angle: 45"></a-entity>

Property	概要	デフォルト値
angle	スポットライトの方向から見た最大範囲（度数）。	60
decay	光の距離に沿って減衰する量。	1.0
distance	強度が 0 になる距離。`distance`が 0 の場合、点光源は距離とともに減衰しません。	0.0
penumbra	スポットライトの円錐形範囲の中で、周縁部により減衰する割合。	0.0
target	スポットライトが指し示す要素。nullを設定するとスポットライトは方向によって変換され、Z軸を指すようになります。	null

# Probe　プローブライト

プローブライトは、特定の光源や方向を持たず、すべてを均等に照らすという点で、環境光源に似ています。

しかし、異なる点は、球面調和に基づいて、各アングルを異なる色にすることです。この球面調和は、キューブマップを解析することで生成されます。キューブマップは球面調和を生成するためにのみ使用されるため、高解像度である必要はありません。

Property	概要	デフォルト値
intensity	提供される照明量	1
envMap	ロードされた正方形マップ	null

Example:

<a-assets>
  <a-cubemap id="pisa">
  <img src="https://threejs.org/examples/textures/cube/pisa/px.png">
  <img src="https://threejs.org/examples/textures/cube/pisa/nx.png">
  <img src="https://threejs.org/examples/textures/cube/pisa/py.png">
  <img src="https://threejs.org/examples/textures/cube/pisa/ny.png">
  <img src="https://threejs.org/examples/textures/cube/pisa/pz.png">
  <img src="https://threejs.org/examples/textures/cube/pisa/nz.png">
  </a-cubemap>
</a-assets>

<a-light type="probe" envMap="#pisa"></a-light>

# 影を制御する

A-Frameは、リアルタイムシャドウレンダリングに対応しています。適切な設定を行うことで、オブジェクト（動いているオブジェクトと静止しているオブジェクトの両方で）は影を落とし、シーンに深みとリアリズムを加えます。影には多くのプロパティがあるため、A-Frame Inspector を使って影を設定すると非常に便利です。

シャドウをサポートするライトタイプ（pointポイント、spotスポット、directionalディレクショナル）には、追加のプロパティがあります。

Property	光源のタイプ	概要	デフォルト値
castShadow		この照明がシーンに影を落とすかどうか。	false
shadowBias		表面が影になっているかどうかを判断する際のオフセット深度。ここでの小さな調整（+/-0.0001のオーダー）は、影のアーティファクトを減らすことができます。
0
shadowCameraBottom	`directional`	方向性シャドウカメラフレームの底面。	-5
shadowCameraFar		シャドウカメラの遠距離平面。	500
shadowCameraFov	`point`, `spot`	point, spot シャドウカメラの FOV。	50
shadowCameraLeft	`directional`	方向影画像の左平面	-5
shadowCameraNear		方向影画像の近い方の平面	0.5
shadowCameraRight	`directional`	方向影画像の右平面	5
shadowCameraTop	`directional`	方向影画像の上平面	5
shadowCameraVisible		シャドーカメラの位置とフラストレーションを視覚的に表示します。これは、影を投影するために使用される、シーンのライトのビューです。
false
shadowMapHeight		シャドウマップの垂直解像度。シャドウマップが大きいほど鮮明な影が表示されますが、その分パフォーマンスが低下します。	512
shadowMapWidth		シャドウマップの水平解像度。	512

# リアルタイムの影を追加する

注：リアルタイムシャドウはパフォーマンスのオーバーヘッドを増加させます。シーン内のオブジェクトが静止している場合、または特にモバイルデバイス用に最適化する場合、リアルなシャドウを実現する他のテクニック、例えば、アセットをA-Frameにインポートする前に光と影の情報をテクスチャにベイク（焼き付ける）することを意識してください。

1. 少なくとも1つは光源を作成し castShadow: trueと設定します。3つの光源タイプ(point, spot, and directional)がサポートしています。このうち、directional 光源は最高のパフォーマンスを出します。環境光源と影をつけた指向性光源を組み合わせるのが取り掛かりとしてよいでしょう

<a-scene>
  <a-entity light="type: ambient; intensity: 0.5;"></a-entity>
  <a-entity light="type: directional;
                   castShadow: true;
                   intensity: 0.4;
                   shadowCameraVisible: true;"
            position="-5 3 1.5"></a-entity>
</a-scene>

上の例では、指向性ライトの強度を環境光よりも低くして、影を少し柔らかくしています。shadowCameraVisible: true を追加すると、デバッグのための視覚的な補助として、カメラの視界の外にあるオブジェクトは影を落としたり受け取ったりすることができません。

2. シャドーコンポーネント 影を受け取るべきシーン内のオブジェクトを設定します。

<a-gltf-model src="tree.gltf" shadow="cast: true"></a-gltf-model>
<a-circle id="ground" radius="10" rotation="-90 0 0" shadow="receive: true"></a-circle>

3. シャドーカメラを調整する 指向性光源の影のカメラ位置とフラストレーション（shadowCameraTop, shadowCameraRight、 ...）を、シーンをしっかりと包むように調整します。フラストレーションが小さすぎると、影が欠けたり、部分的に切り取られたりします。フラストレーションが大きすぎると、影が粗くなったり、ピクセル化されたりします。シャドウマップのサイズ (shadowMapHeight: 512、shadowMapWidth: 512) は、影が計算される解像度を決定するため、影カメラのサイズをシーンの周りにぴったり合わせることで、この解像度とデバイス性能を最大限に活用することができます。
4. 再調整 影の見た目、シーンの幅オプション、光源全体への影響はシーンのシャドーシステムを設定して再調整できます。

# シャドーシステムのプロパティ

これらのグローバルオプションはシーン全体に影響し、<a-scene>ルート要素のシャドーシステムを使用して設定されます。

<a-scene shadow="type: pcfsoft">
  <!-- ... -->
</a-scene>

Property	概要	デフォルト値
type	シャドウマップの種類 (`basic`, `pcf`, `pcfsoft`) を定義し、外観と性能の特性を変えます。	`pcf`

← layer line →

# プロパティ

# 光源タイプ

# Ambient 環境光源

# Directional 指向性光源

# Hemisphere 半球光源

# Point ポイントライト

# Spot スポットライト

# Probe プローブライト