Safari 27, iPhone과 Mac에 model 요소를 도입하고 WebGPU 클립 평면 지원
Safari 27은 iOS 27, iPadOS 27, macOS 27과 함께 9월 14일 출시되었으며, Apple은 macOS Sequoia와 Tahoe용 독립 실행형 업데이트로도 제공합니다. WebKit 팀은 사흘 뒤 주요 기능을 정리해 공개했습니다. 팀의 집계에 따르면 이번 릴리스에는 83개의 새로운 기능과 844개의 수정 사항이 포함되었습니다. 6월 베타에서 발표했던 58개 기능과 525개 수정 사항보다 늘어난 수치입니다. 이 가운데 세 가지 기능은 브라우저에서 3D를 렌더링하는 사람이라면 누구에게나 중요합니다. WebKit: Safari 27.0의 기능.
Apple의 WWDC 세션에서 공개된, visionOS 27의 Safari를 감싸는 웹사이트 자체 3D 환경. 이미지: Apple.
헤드셋을 벗어난 model 요소
HTML <model> 요소는 동영상을 페이지에 넣는 것처럼 3D 파일을 삽입하는 방법으로 visionOS에서 처음 등장했습니다. Safari 27에서는 이를 iOS, iPadOS, macOS로 확대합니다. USDZ 또는 glTF 파일을 지정하거나 동영상에서와 마찬가지로 <source> 자식 요소를 사용해 두 형식을 모두 나열하면, 브라우저가 로딩과 표시를 처리하며 사용자는 별도의 렌더러를 작성하지 않아도 객체를 회전할 수 있습니다. environmentmap 속성에는 조명용 HDR 파일을 지정할 수 있습니다. visionOS 27에서는 같은 요소가 한 단계 더 나아갑니다. 사이트가 모델 형태로 몰입형 환경을 제공하고 JavaScript 호출 한 번으로 브라우저 창 전체를 그 환경으로 감쌀 수 있습니다. 위 이미지의 극장도 이 방식으로 구현되었습니다. 이번 릴리스에는 model 요소를 위한 CSS dynamic-range-limit 속성도 추가되어, 페이지가 모델에 허용할 HDR 헤드룸을 결정할 수 있습니다. 또한 첫 구현에 있던 두 가지 버그, 즉 entityTransform이 제대로 동작하지 않던 문제와 모델 플레이어를 다시 로드한 뒤 제스처 상호작용이 중단되던 문제도 수정되었습니다.
마크업: 두 가지 소스 형식, HDR 환경 맵, 그리고 그 환경 맵의 조명을 받는 찻주전자. 이미지: Apple.
하나의 3D 파일을 Mac, iPad, iPhone에서 렌더링합니다. 이미지: Apple / WebKit.
이를 두고 “이제 브라우저에 3D 뷰어가 내장되었다”고 해석하고 싶을 수 있으며, 제품 사진에 관해서는 대체로 맞는 말입니다. 하지만 게임에는 해당하지 않습니다. model 요소는 모델을 보여줄 뿐입니다. 게임 루프나 물리 연산, 셰이더를 실행하지 않으며 Safari에만 존재합니다. Chrome과 Firefox는 아직 이를 지원하지 않으므로, model 요소에 의존하는 페이지에는 대체 수단이 필요합니다. 실질적으로는 어차피 직접 작성했을 WebGL 또는 WebGPU 뷰어가 필요하다는 뜻입니다.
WGSL의 클립 평면
엔진에 더 유용한 변화는 조용히 추가되었습니다. Safari 27은 WGSL의 clip_distances 내장 기능을 지원합니다. 이를 사용하면 버텍스 셰이더가 자체 클립 평면을 정의하고 래스터화 전에 지오메트리를 제거할 수 있습니다. 평면 반사, 포털 렌더링, 절개 뷰, 수면은 모두 이 기능을 많이 활용합니다. 지금까지 Safari의 WebGPU 앱에서 이 기능이 필요하다면 프래그먼트 셰이더의 discard로 흉내 내야 했는데, 이는 이미 가장 비용이 많이 드는 패스에서 필레이트를 추가로 소모합니다.
Canvas, WebGL을 비롯한 색상 관리 API에는 srgb-linear와 display-p3-linear라는 두 가지 사전 정의 색 공간도 추가됩니다. 자체 톤 매핑을 수행하거나 HDR 콘텐츠를 캔버스에 합성하는 경우, 이제 선형광 데이터를 브라우저에 전달하고 전달 함수를 브라우저가 처리하게 할 수 있습니다. 직접 sRGB로 인코딩하면서 정밀도를 잃을 필요가 없습니다.
이번 릴리스에 관한 Apple의 WWDC 세션에서는 model 요소와 그 밖의 WebKit 변경 사항을 자세히 설명합니다.
이 변화가 우리에게 중요한 이유
우리 엔진은 브라우저가 지원하는 경우 WebGPU로, 그렇지 않은 경우 WebGL로 렌더링합니다. 지난해 Safari에 WebGPU가 도입된 이후 Safari는 우리가 가장 긴장하며 테스트해 온 브라우저였습니다. 클립 평면은 그동안 빠져 있던 기능 중 하나였습니다. 수면 반사는 바로 이 기능이 필요한 렌더링 패스이며, 지금까지 WebGPU에서는 비대칭 투영 행렬을 사용하거나 프래그먼트 셰이더에서 discard를 수행해야 했습니다. 후자는 특히 필레이트가 전체 성능 예산을 좌우하는 휴대폰에서 필레이트를 소모합니다. Safari 27은 사용자에게 브라우저를 바꾸라고 할 수 없는 유일한 플랫폼에서 이 격차를 해소합니다. iOS에서는 모든 브라우저가 내부적으로 Safari를 사용하기 때문입니다.
선형 색 공간은 눈에 덜 띄는 방식으로 도움이 됩니다. HDR 출력은 Godot 4.7의 대표 기능 중 하나였으며, 선형 렌더 타깃에서 화면으로 이어지는 경로는 웹에서 까다로운 부분이었습니다. 캔버스가 선형 데이터를 직접 받을 수 있게 되면서 현재 엔진이 수동으로 수행하는 변환 하나를 제거할 수 있습니다.
model 요소는 페이지에서 단일 에셋을 보여주는 용도처럼 잘하는 일에 활용할 예정입니다. GLB 뷰어와 에셋 라이브러리는 모든 브라우저에서 작동해야 하므로 three.js 렌더러를 계속 사용하지만, 빠르게 미리 보는 용도를 위한 Safari 네이티브 경로도 충분히 가치가 있습니다. 이런 기능이 자신에게 중요한지 판단하기 전에 현재 브라우저의 지원 여부를 확인하려면 WebGL 및 WebGPU 검사기를 사용하세요. WebGPU와 WebGL 비교 가이드에서는 둘의 차이가 생각보다 큰 이유를 설명합니다.