Chapter 30

5-02: 頭上の空 (Skies Above)

ちょまど (千代田まどか)
ちょまど (千代田まどか)
2022.05.01に更新

このページの原文: https://doc.babylonjs.com/start/chap5/sky

☁ 5-02: 頭上の空 (Skies Above)

大きな skybox cube の内側に 6 つの適切な画像を適用することで、空の様子をシミュレートすることができます。
(画像は 3D オブジェクトよりもはるかに簡単かつ高速にレンダリングできます。空のほかに、遠くの風景にも適していますね。)

🈳 CubeTexture

Skybox の画像は通常 CubeTexture で読み込まれます。

コンストラクタ:

new BABYLON.CubeTexture("textures/skybox", scene);

CubeTexture のコンストラクタは、ベースの URL (rootUrl) を受け取り、
そのベース URL の後ろに
"_px.jpg", "_nx.jpg", "_py.jpg", "_ny.jpg", "_pz.jpg", "_nz.jpg" の続く画像を認識します。
それぞれ、+x, -x, +y, -y, +z, -z に面する画像として処理されます。

CubeTexture

仮に skybox という名称にしたなら、以下の 6 つの名前の画像をそれぞれ準備する必要があります:

px nx
skybox_px.jpg skybox_nx.jpg
py ny
skybox_py.jpg skybox_ny.jpg
pz nz
skybox_pz.jpg skybox_nz.jpg

🔍 コードの解説

const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:150}, scene);
const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;

// ↓ skybox がリフレクションマップ (反射マップ) (後述) でない場合でも、
//   CubeTexture は ReflectionTexture を使用して適用する必要があります。
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
// ↓ coordinatesMode を SKYBOX_MODE に設定すると、
//   反射をシミュレートするのではなく、テクスチャを直接キューブ上にペイントします。
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;

Reflections and Refractions ドキュメント

https://doc.babylonjs.com/divingDeeper/materials/using/reflectionTexture

coordinatesMode ドキュメント

https://doc.babylonjs.com/typedoc/classes/babylon.texture#coordinatesmode

また、カメラが地面の下に行かないように調整 (制限) します。

camera.upperBetaLimit = Math.PI / 2.2;

https://playground.babylonjs.com/#KBS9I5#88

👍 Playground 触って確認

https://twitter.com/chomado/status/1520424658038038528

↑ ぜひツイート内の動画を再生して見てください👀(gif アニメなので音声ありません)

👀 参考記事

Class CubeTexture ドキュメント

https://doc.babylonjs.com/typedoc/classes/babylon.cubetexture

🌲 次は

今回、空をいい感じに作ったので、次の村改善タスクとして、木をいくつか育ててみましょう。