babylon.js ステップ7　ライティング - はりうすブログ (のすけのメモ)

f:id:hollywis:20200620154902j:plain

babylon.js ステップ7　ライティングです。

3D表現はライティングが無いと始まりません。

ライディングの無い空間はただの暗黒です。

暗黒の空間に一条の光として、ライトを設置します。

ライトと言っても、太陽のような環境光もあります。

いきましょう！

ライトの種類

4種類のライトあります

ポイントライト(Point Light)
指向性ライト(Directional Light)
スポットライト(Spot LIghe)
半球ライト(HemiLight)

ポイントライト/点光源(Point Light)

ポイントライトは、ワールドスペース内の一意のポイント(点)にから発光されるライトです。

光はこのポイントからあらゆる方向に放出されます。

ポイントライトの分かりやすい例は、裸電球です。

ちょっと上(y軸を多め)に置くとメッシュ全体を照らせます。

var light = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(1, 10, 1), scene);

例はこちら
https://www.babylonjs-playground.com/#20OAV9

指向性ライト/平行光源(Directional Light)

指向性ライト/平行光源は、方向によって定義される特殊な光です。

光は、指定された方向のあらゆる場所から放出され、無限の範囲を持ちます。

指向性ライトの例としては、太陽からの十分に遠い惑星があったとして

その惑星に対して、並行な光が降り注ぐと思うのですが、そんな感じです。

下方向に光を当てると、オブジェクトの上部が明るくなります。

var light = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -1, 0), scene);

例はこちら
https://www.babylonjs-playground.com/#20OAV9#1

スポットライト(Spot LIghe)

スポットライトは、単一の点から一方向に円錐状に放出されます。

方向、角度、および指数を設定出来ます。

値は、位置、照らす方向で光の円錐を定義します。

照射角は、ラジアンで、スポットライトの円錐ビームのサイズ（照明のフィールド）を定義し、

指数は、距離（距離）に伴う光の減衰の速度を定義します。

// new BABYLON.SpotLight(名前, 位置, 照らす方向, 照射角, 光の減衰, scene);
var light = new BABYLON.SpotLight("spotLight", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), Math.PI / 3, 2, scene);

例はこちら
https://www.babylonjs-playground.com/#20OAV9#3

半球ライト(HemiLight)

半球ライトは、環境光をシミュレートします。

半球の光は、通常は上空に向かう方向によって定義されます。

ただし、次に説明する色の設定をすることで、より完全な効果が得られる。

var light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), scene);

例はこちら
https://www.babylonjs-playground.com/#20OAV9#5

色の設定

色に影響を与えるライトには、3つのプロパティがあります。

拡散反射光(diffuse )・・・ベースの反射光 4種類のライトすべてに適用

鏡面反射光(specular)・・・ハイライト 4種類のライトすべてに適用

地面光(groundColor)・・・地面からの反射光。半球ライトにのみ適用

地面光(groundColor)の例はこちら

地面からの反射光が緑だと想定して、gtoundColorが適用されています

https://www.babylonjs-playground.com/#20OAV9#6

ライトのオン、オフ、または調光

これでオフ

light.setEnabled(false);

これでオン

light.setEnabled(true);

intensityを設定することで調光できる

light0.intensity = 0.5;
light1.intensity = 2.4;

ポイントライトとスポットライトの場合、rangeプロパティを使用してライトが到達する距離を設定できます

light.range = 100;

ライティングへのテクスチャの適用

テクスチャへ拡散色を定義するとよい（拡散はオブジェクトに基本色を与えます）。

拡散色の例としては、大聖堂内部の光の効果をシミュレートする場合、ステンドグラスを通過する様々な光は色がついて地面に投影されます。

これは、プロジェクターからの光やなどの光の効果にも当てはまります。

これを再現するためには、SpotLightを用いて、projectionTextureプロパティを適用します。

f:id:hollywis:20200620154802p:plain

var spotLight = new BABYLON.SpotLight("spot02", new BABYLON.Vector3(30, 40, 30),
        new BABYLON.Vector3(-1, -2, -1), 1.1, 16, scene);
spotLight.projectionTexture = new BABYLON.Texture("textures/stainedGlass.png", scene);