Safari 27 menghadirkan elemen model ke iPhone dan Mac, serta memberikan bidang pemotong untuk WebGPU
Safari 27 dirilis pada 14 September bersama iOS 27, iPadOS 27, dan macOS 27, dan Apple juga menawarkannya sebagai pembaruan mandiri untuk macOS Sequoia dan Tahoe. Tim WebKit menerbitkan rangkuman fiturnya tiga hari kemudian. Menurut perhitungan mereka, rilis ini membawa 83 fitur baru dan 844 perbaikan, naik dari 58 fitur dan 525 perbaikan yang mereka umumkan saat versi beta bulan Juni. Tiga di antaranya penting bagi siapa pun yang merender 3D di browser. WebKit: fitur-fitur Safari 27.0.
Lingkungan 3D milik situs web yang menyelimuti Safari di visionOS 27, dari sesi WWDC Apple. Gambar: Apple.
Elemen model tidak lagi terbatas pada headset
Elemen HTML <model> bermula di visionOS sebagai cara untuk memasukkan berkas 3D ke halaman semudah memasukkan video. Safari 27 membawanya ke iOS, iPadOS, dan macOS. Anda mengarahkannya ke berkas USDZ atau glTF, atau mencantumkan keduanya dengan elemen turunan <source> seperti pada video, lalu browser menangani pemuatan dan tampilannya, sementara pengguna dapat memutar objek tanpa Anda harus menulis renderer. Atribut environmentmap menerima berkas HDR untuk pencahayaan. Di visionOS 27, elemen yang sama melangkah lebih jauh: sebuah situs dapat menyediakan lingkungan imersif sebagai model dan, dengan satu pemanggilan JavaScript, menyelimuti seluruh jendela browser dengannya, seperti itulah teater pada gambar di atas dihadirkan. Rilis ini juga menambahkan properti CSS dynamic-range-limit pada elemen model, sehingga halaman dapat menentukan seberapa besar ruang HDR yang boleh digunakan model, serta memperbaiki dua bug pada implementasi pertama: entityTransform yang tidak berfungsi semestinya dan interaksi gestur yang rusak setelah pemutar model dimuat ulang.
Markup-nya: dua format sumber, peta lingkungan HDR, dan sebuah teko yang diterangi olehnya. Gambar: Apple.
Satu berkas 3D dirender di Mac, iPad, dan iPhone. Gambar: Apple / WebKit.
Mudah untuk menafsirkan ini sebagai "penampil 3D kini sudah terintegrasi ke dalam browser", dan untuk foto produk, anggapan itu kurang lebih benar. Namun, tidak demikian untuk game. Elemen model hanya menampilkan sebuah model. Elemen ini tidak menjalankan game loop, fisika, atau shader Anda, dan hanya tersedia di Safari. Chrome dan Firefox belum menyediakannya, jadi halaman yang bergantung padanya memerlukan fallback yang, dalam praktiknya, adalah penampil WebGL atau WebGPU yang tetap harus Anda buat.
Bidang pemotong di WGSL
Perubahan yang lebih berguna bagi engine hadir tanpa banyak sorotan. Safari 27 mendukung built-in clip_distances di WGSL, yang memungkinkan vertex shader menentukan bidang pemotongnya sendiri dan membuang geometri sebelum rasterisasi. Refleksi planar, rendering portal, tampilan potongan, dan permukaan air semuanya mengandalkan fitur ini. Hingga sekarang, aplikasi WebGPU yang membutuhkannya di Safari harus menyiasatinya di fragment shader dengan operasi discard, yang menghabiskan fill rate justru pada pass yang sudah paling mahal.
Canvas, WebGL, dan API lain yang dikelola warnanya juga mendapatkan dua ruang warna bawaan, srgb-linear dan display-p3-linear. Jika Anda melakukan tone mapping sendiri atau mengomposisikan konten HDR ke dalam canvas, kini Anda dapat memberikan data cahaya linear kepada browser dan membiarkannya menangani fungsi transfer, alih-alih melakukan encoding ke sRGB sendiri dan kehilangan presisi dalam prosesnya.
Sesi WWDC Apple mengenai rilis ini membahas elemen model dan perubahan WebKit lainnya.
Mengapa ini berdampak pada kami
Engine kami merender dengan WebGPU jika browser mendukungnya dan dengan WebGL jika tidak, dan Safari menjadi browser yang paling kami uji dengan waspada sejak WebGPU hadir di sana tahun lalu. Bidang pemotong adalah salah satu kekurangannya. Refleksi air merupakan jenis pass yang benar-benar membutuhkannya, dan hingga kini pilihan di WebGPU hanyalah matriks proyeksi oblik atau operasi discard di fragment shader, yang menghabiskan fill rate di ponsel, tempat fill rate merupakan keseluruhan anggaran performa. Safari 27 menutup celah itu pada satu-satunya platform tempat kami tidak bisa meminta pengguna beralih browser, karena di iOS setiap browser pada dasarnya menggunakan Safari.
Ruang warna linear membantu dengan cara yang tidak terlalu terlihat. Output HDR merupakan salah satu fitur utama di Godot 4.7, dan jalur dari target render linear menuju layar selama ini menjadi bagian yang merepotkan di web. Kemampuan canvas untuk menerima data linear secara langsung menghilangkan satu konversi yang saat ini dilakukan engine secara manual.
Kami akan menggunakan elemen model untuk kegunaan yang paling sesuai, yaitu menampilkan satu aset pada sebuah halaman. Penampil GLB dan pustaka aset kami akan tetap menggunakan renderer three.js karena itulah yang berfungsi di setiap browser, tetapi jalur native Safari untuk kebutuhan pratinjau cepat tetap layak disediakan. Jika Anda ingin memeriksa apa yang didukung browser Anda sebelum semua ini relevan bagi Anda, pemeriksa WebGL dan WebGPU akan memberi tahu Anda, sementara panduan WebGPU versus WebGL menjelaskan mengapa perbedaannya lebih besar daripada kedengarannya.