Babylon.js로 하늘 만들기

안녕하세요.야마유입니다.
https://www.babylonjs.com
브라우저의 실시간 3D 렌더링 엔진인 Babylonjs에서는 장면에 스카이박스를 넣는 간단한 방법을 소개한다.

예상도를 완성하다

Playground로 간단히 추가

https://playground.babylonjs.com/
Babylon.js에서 유저는 브라우저에서 스크립트를 자유롭게 정의하고 실시간으로 장면을 구축할 수 있습니다.이번에는 이곳에서 사용할 수 있는 Assets를 사용합니다.
Assets에서 액세스할 수 있는 텍스쳐와 메쉬, 문서에 기록된 대로 CC-BY4.0 라이센스에서 사용할 수 있습니다.모두GiitHub에서 공개합니다..
공백을 그리려면 여섯 개의 무늬가 모든 종이 상자에 분배되어야 한다.
https://doc.babylonjs.com/start/chap5/sky
이런 무늬는 때때로 큐브맵이라고도 부른다.찾으면 Babylon.js가 사용하지 않는 무늬도 사용할 수 있습니다. (playground에 공개되면 저작권에 주의하십시오.)
텍스쳐가 생성됩니다CubeTexture.
그리고 앞의 무늬를 StandardMaterial의reflectionTexture(반사용 무늬틀, 스카이박스로도 사용할 수 있다)에 건네준다.

실제 코드

// テクスチャ生成(prefix を指定すれば自動で6枚読んでくれる)
const skyTexture = new BABYLON.CubeTexture(Assets.skyboxes.skybox_nx_jpg.path.replace('_nx.jpg', ''), scene);

// マテリアル生成
const skyMaterial = new BABYLON.StandardMaterial("cube_mat", scene);
skyMaterial.reflectionTexture = skyTexture;
skyMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; // テクスチャを skybox 用にする
skyMaterial.disableLighting = true; // ライティングを無視する
skyMaterial.backFaceCulling = false; // 背面も表示する

// メッシュ生成
const skyMesh = BABYLON.MeshBuilder.CreateBox("cube_mesh", { size: 1000 }, scene);
skyMesh.infiniteDistance = true; // カメラからの距離に依存しないメッシュとみなす
skyMesh.material = skyMaterial;

https://playground.babylonjs.com/#UPAD6P

게임 라운드의 초기 요소에 상술한 형식을 더하다
장소Assets.skyboxes.skybox_nx_jpg를 바꾸면 다른 무늬를 사용할 수 있습니다.

현재 사용 가능한 Assets의 skybox

2022/05에서는 다음 텍스쳐를 지정할 수 있습니다.

Assets.skyboxes.skybox

Assets.skyboxes.skybox2

Assets.skyboxes.skybox3

Assets.skyboxes.skybox4

Assets.skyboxes.toySky

Assets.skyboxes.TropicalSunnyDay

SkyMaterial

Assets에 공개된 큐브맵 외에도 또 다른 npm 포장으로 나눠주는 특수 소재로 @babylonjs/materials를 사용하는 사람도 있다.바로 SkyMaterial입니다.playgroundBABYLON.SkyMaterial에서 사용할 수 있습니다.
SkyMaterial Skybox 동적 무결점 효과를 만들 수 있습니다.
이런 재료는 A Proactical Analythic Model for Daylight(일광에 대한 실제 분석 모델)에 기초한 것이다.첫 번째 실현은Simon Wallner, 개선은Martin Upitis, 마지막은Three이다.js에서 이루어졌습니다.
스카이박스는 대기의 상태를 고려해 하늘을 재현하고 설정하는 것이 과제다.다시 말하면 빛이 어떻게 입자에 의해 산란되는지 결정하는 것이다.
DeepL로 번역 + 부분 가필
https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat
이것은 아까 큐브맵과 달리 텍스쳐를 사용하지 않습니다.반면 머티리얼즈는 빛의 산란을 실시간으로 계산해 현실의 하늘과 같은 렌더링을 시뮬레이션한 카스타무사다다.

여기서 저는 간단히 Cubemap skybox와 SkyMaterial을 비교하는 playground를 만들었습니다.실제로 클릭하여 방문하세요!
상세한 실시방식은 모르지만 슬라이더를 통해 파라미터를 조정하고 태양의 위치를 이동하며 미산사와 레이리산사의 파라미터를 조절해 파란색의 정도를 바꿀 수 있다.너무 예쁜 하늘을 만들 수 있어서 추천해드려요.논리를 잘 쓰면 주야를 표현할 수 있다.