지난 몇 년 동안 우리는 WebGPU용 Babylon.js 엔진의 새 버전을 작성해 왔습니다. 차세대 Web 3D가 Chrome 102~103에서 WebGPU 1.0을 출시할 예정이어서 기대감이 날로 높아지고 있습니다. 이 블로그 게시물에서는 이 새로운 Babylon.js WebGPU 엔진에 대한 간략한 개요를 제공하고 웹에서 3D 상거래 경험에 가져올 수 있는 몇 가지 성능 개선 사항을 살펴보겠습니다.
권장 사항: NSDT Designer를 사용하여 프로그래밍 가능한 3D 장면을 빠르게 구축
1. Babylon.js의 WebGPU 엔진
이 여정은 2019년 포리스트 데모의 렌더링 패키지를 사용한 첫 번째 실험으로 시작되었습니다. Babylon.js는 설계상 불가지론적이며 이전 버전과의 호환성이 중요하므로 처음부터 구현 시 사용자를 위한 코드 변경이 없거나 최소화되도록 설계되었습니다.
대부분의 엔진은 2020년에 포팅되었습니다(렌더 타겟, 후처리, 그림자, 압축 텍스처, 스텐실 버퍼, 효과 레이어 등). 2021년에는 컴퓨트 셰이더 및 렌더링 패키지에서 지원하는 빠른 경로 및 기타 최적화와 같은 새로운 기능을 구현하기 시작하세요. WebGL+WebGPU 모임 데모에서 자세한 내용을 확인할 수 있습니다.
- 새로운 기능: 컴퓨트 셰이더
Compute Shader는 WebGPU가 제공하는 주력 기능 중 하나입니다. 그래픽이 아닌 병렬 처리(예: 블러링, 컴퓨터 비전, 시뮬레이션)는 이제 최신 기술입니다. 자세한 내용과 데모는 이 설명서 페이지를 확인하세요.
- 새로운 기능: 빠른 경로
WebGPU의 또 다른 약속은 JavaScript의 그래픽 리소스에 대한 저수준 제어를 제공하므로 고성능 3D 그래픽을 가능하게 하는 것입니다. 렌더링 패키지를 사용하여 새로운 Babylon 엔진에서 여러 수준의 최적화가 구현되었습니다. 스냅샷 기록은 한 프레임 동안 그리기 호출을 기록하고 모든 후속 프레임에서 재생하는 가장 빠른 모드입니다. 전자 상거래와 같은 대부분의 정적 시나리오(파이프라인 변경 없음)에 적합하며 최대 10배의 성능 향상을 가져올 수 있습니다.
2. WebGPU 기반 3D 비즈니스룸 시연
온라인 쇼핑에서 3D의 사용은 종종 고객이 집에서 제품을 발견하고 맞춤화할 수 있는 가장 좋은 방법이기 때문에 지난 몇 년 동안 가속화되었습니다. 실시간 렌더링에서도 3D 개체가 더욱 사실적이 됨에 따라 성능을 유지하면서 개체로 가득 찬 가상 방을 조립하는 것은 개발자와 3D 아티스트에게 절충안입니다. 이 블로그 게시물에서는 첫 번째 WebGPU 데모를 빌드하여 WebGPU가 어떻게 성능을 향상시키고(이 경우 10배) 3D 비즈니스 시나리오의 한계를 뛰어넘는지 보여주려고 합니다.
첫 번째 단계.
WebGPU 엔진을 사용하려면 플레이그라운드로 이동하세요. 브라우저가 WebGPU 엔진(현재 WebGPU 플래그가 활성화된 Chrome/Edge Canary)에서 지원하는 경우 드롭다운을 통해 WebGL에서 WebGPU로 전환할 수 있습니다. 오른쪽 상단 모서리.
Playground가 없으면 엔진 생성만 업데이트하면 됩니다(WebGPU의 초기화는 비동기식임).
//WebGL Engine creation
const engine = new BABYLON.Engine(canvas);
//WebGPU Engine creation
const engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();
3D 방 데모.
Polygon Runway에 대한 훌륭한 튜토리얼을 사용하여 Blender에 간단한 방을 만들었습니다. 방에 장비가 갖춰지면 PBR 확장과 KTX2를 시연하기 위해 3D Commerce 작업 그룹에서 사용하는 Khronos glTF 및 일부 glTF 샘플 개체를 추가했습니다. WebGPU가 가져올 수 있는 개선 사항을 보여주는 것이 목표였기 때문에 무거운 것을 선택했습니다. 개발 중에 WebGL에서 WebGPU로 즉시 전환할 수 있다는 것은 매우 유용합니다!
스냅샷 녹화 - 고속 모드.
다음 단계는 스냅샷 녹화 기능을 사용하여 장면을 최적화하는 것입니다. 몇 줄의 코드만 필요합니다.
const setSnapshotMode = (mode) => {
switch(mode) {
case "disabled":
engine.snapshotRendering = false;
break;
case "standard":
engine.snapshotRenderingMode = BABYLON.Constants.SNAPSHOTRENDERING_STANDARD;
engine.snapshotRendering = true;
break;
case "fast":
engine.snapshotRenderingMode = BABYLON.Constants.SNAPSHOTRENDERING_FAST;
engine.snapshotRendering = true;
break;
}
};
팬과 춤추는 로봇 모델은 스냅샷 기록의 빠른 모드에서 더 이상 움직이지 않습니다. 이를 수정하기 위해 문서의 마지막 예("Animation Bones")에서 설명한 것처럼 나는 단순히 sculpture.prepare 메서드를 호출하여 스켈레톤을 렌더링하는 데 필요한 모든 자산을 빌드했는지 확인했습니다. 이 스냅샷 고속 모드는 대부분의 정적 장면에서만 작동하고(파이프라인 변경 없음) 스냅샷을 업데이트할 수 있습니다(인스턴스에 메시를 추가할 때).
return new Promise((resolve) => {
scene.executeWhenReady(() => {
engine.snapshotRendering = false;
scene.onBeforeRenderObservable.add(() => {
//Build all resources required to render skeletons
scene.skeletons.forEach((skeleton) => skeleton.prepare());
});
resolve(scene);
engine.hideLoadingUI();
const gui = makeGUI(IsWebGPUMode, scene, sceneInstrumentation);
});
});
그게 다야! 나는 실제로 놀이터에서 코딩하는 것보다 3D 장면을 만들고 설정하는 데 훨씬 더 많은 시간을 소비하지만, 아마도 그것은 내가 3D 아티스트가 되는 것과는 거리가 멀기 때문일 것입니다. 물론 이것은 WebGPU의 초기 단계에 불과하지만, 이것이 여러분이 관심을 갖고 사용해 보시길 바랍니다.
3. 결론
WebGPU에 대해 자세히 알아볼 수 있는 몇 가지 유용한 링크:
- Babylon.js의 WebGPU 버전에 대한 전체 문서
- 피드백을 제공하고 도움을 받을 수 있는 포럼
- Babylon.js WebGPU 내부, 구현을 자세히 살펴보고 기여
마지막으로 Babylon.js에서 대부분의 WebGPU 구현의 배후에 있는 영웅인 Alexis(일명 Egveni)에게 큰 감사를 드립니다.
원본 링크: WebGPU 3D 전자상거래 실험—BimAnt