Babylon.js에서 PBR(Physically Based Rendering) 처리 방법 [문서 및 번역 +α】
개시하다
Babylon.js는 브라우저에서 실시간으로 실행되는 3D 렌더링 프레임 중 하나입니다.OSS이기 때문에 누구나 무료로 이용할 수 있다.
이 글은 Introduction to Physically Based Rendering, Babylon을 참고했다.다음은 js에서 PBR의 사용 방법을 소개합니다.
이 보도에서
PBR(Pohysically Based Rendering) 목표
PBR(Physically Based Rendering)의 목표는 현실의 Lighting을 시뮬레이션하는 것입니다.
PBR은 기술의 총칭이지 특정 기술을 강제로 선택하는 것이 아니다.
예를 들면, 너에게 아래의 물건을 줄 수 있다.
이 자료에는 현대 PBR에 필요한 모든 기능이 담겨 있다.이 글은 PBR을 시작할 수 있는 두 개의 미리 설정된 간이 버전을 살펴본다.
PBRMaterial을 이용한 시위 행진은 베이비론이다.js 사이트에서 볼 수 있습니다.
다음 두 개의 Material이 준비되어 있습니다.
Metallic roughness convention(여기 추천)
Specular glossiness convention(링크 끊김으로 향후 조사)
PBRMetallicRoughnessMaterial
이 Material은 5개의 값을 기준으로 합니다.
baseColor/baseTexture
baseColor는 metalness의 값에 따라 두 가지 해석이 있습니다.
metallic
material의 metalic 스칼라 값을 지정합니다.또한 metallic texture의 값을 지정하는 데도 사용할 수 있습니다.
roughness
material의roughness의 스칼라 값을 지정합니다.metal Texture의 roughness 값을 지정하는 데도 사용할 수 있습니다.
metallicRoughnessTexture
두 값을 포함하는 Texture를 사용하여 정밀도를 유지할 수 있습니다.RGB의
채널 R에 Ambient occlussion을 저장할 수도 있습니다.
environmentTexture
환경 텍스쳐를 나타냅니다.
Babylon Standard Material과 차별화 및 간단한 설정 방법
인스턴스 생성
var pbr = new BABYLON.PBRMetallicRoughnessMaterial("pbr", scene);
sphere.material = pbr;
pbr.baseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
pbr.metallic = 0;
pbr.roughness = 1.0;
반사할 때 메탈릭을 1로 설정하고 거친 정도를 0으로 설정합니다.
환경 매핑을 추가하여 반사 활용
var pbr = new BABYLON.PBRMetallicRoughnessMaterial("pbr", scene);
pbr.baseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
pbr.metallic = 1.0;
pbr.roughness = 0;
pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(
"/textures/environment.dds",
scene
);
메탈릭 RoughnessTexture를 지정하여 대상의 금속감과 거칠음을 더욱 정확하게 표현할 수도 있다.
pbr.baseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
pbr.metallic = 1.0; // set to 1 to only use it from the metallicRoughnessTexture
pbr.roughness = 1.0; // set to 1 to only use it from the metallicRoughnessTexture
pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(
"/textures/environment.dds",
scene
);
pbr.metallicRoughnessTexture = new BABYLON.Texture("/textures/mr.jpg", scene);
결과 여기.
PBRSpecularGlossinessMaterial
Material에는 5개의 값이 있습니다.
var pbr = new BABYLON.PBRSpecularGlossinessMaterial("pbr", scene);
pbr.diffuseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
pbr.specularColor = new BABYLON.Color3(1.0, 0.766, 0.336);
pbr.glossiness = 0./images/babylon/;
pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(
"/textures/environment.dds",
scene
);
var pbr = new BABYLON.PBRMetallicRoughnessMaterial("pbr", scene);
pbr.baseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
pbr.metallic = 1.0;
pbr.roughness = 0./images/babylon/;
pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(
"/textures/environment.dds",
scene
);
var pbr = new BABYLON.PBRMetallicRoughnessMaterial("pbr", scene);
pbr.diffuseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
pbr.specularColor = new BABYLON.Color3(1.0, 1.0, 1.0);
pbr.glossiness = 1.0;
pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(
"/textures/environment.dds",
scene
);
pbr.specularGlossinessTexture = new BABYLON.Texture("/textures/sg.png", scene);
이 결과는여기.
Light 설정
다이내믹 라이트(Dynamic light)는 PBR 설정에서 중요한 요소다.
조명 없이 환경도를 사용하여 장면을 비출 수도 있고 렌더링 효과를 높이기 위해 라이트를 추가할 수도 있습니다.
빛의 강도에 관하여 물리학의 개념에 따르다
기본적으로 라이트의 강도는 광원으로부터 역제곱을 사용하여 계산됩니다.
그렇긴 하지만 우선 PBR이 하이 다이내믹 레인지(HDR)를 사용하는 방법을 살펴보자.
총결산
이 글은 Introduction to Physically Based Rendering, Babylon을 참고했다.js에서 PBR의 사용 방법을 소개했다.
앞으로는 베이비론이다.저는 js의 가능성에 대해 발굴하고 싶습니다. 잘 부탁드립니다.
Reference
이 문제에 관하여(Babylon.js에서 PBR(Physically Based Rendering) 처리 방법 [문서 및 번역 +α】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/iwaken71/articles/babylonjs-pbr텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
