Safari 27, model öğesini iPhone ve Mac'e getiriyor, WebGPU'ya kırpma düzlemleri kazandırıyor
Safari 27; iOS 27, iPadOS 27 ve macOS 27 ile birlikte 14 Eylül'de yayımlandı. Apple ayrıca sürümü macOS Sequoia ve Tahoe için bağımsız bir güncelleme olarak da sunuyor. WebKit ekibi, özellik özetini üç gün sonra yayımladı. Ekibin hesabına göre sürüm, hazirandaki beta duyurusunda açıklanan 58 yeni özellik ve 525 düzeltmeden daha fazlasını, yani 83 yeni özellik ve 844 düzeltmeyi içeriyor. Bu özelliklerden üçü, tarayıcıda 3D görüntü oluşturan herkes için önem taşıyor. WebKit: Safari 27.0 özellikleri.
Apple'ın WWDC oturumundan, visionOS 27 üzerinde Safari'yi çevreleyen bir web sitesine ait 3D ortam. Görsel: Apple.
Model öğesi başlıktan çıkıyor
HTML <model> öğesi, bir 3D dosyasını tıpkı video ekler gibi sayfaya yerleştirmenin bir yolu olarak visionOS'te doğdu. Safari 27 bu öğeyi iOS, iPadOS ve macOS'e getiriyor. Öğeyi bir USDZ veya glTF dosyasına yönlendirebilir ya da videolarda yaptığınız gibi <source> alt öğeleriyle her iki biçimi de listeleyebilirsiniz. Tarayıcı yükleme ve görüntüleme işlemlerini üstlenirken kullanıcı da sizin bir görüntü oluşturucu yazmanıza gerek kalmadan nesneyi döndürebilir. environmentmap niteliği, aydınlatma için bir HDR dosyası alır. Aynı öğe visionOS 27'de daha da ileri gidiyor: Bir site, model olarak sürükleyici bir ortam sunabiliyor ve tek bir JavaScript çağrısıyla tüm tarayıcı penceresini bu ortamla çevreleyebiliyor. Yukarıdaki görseldeki sinema da bu şekilde oluşturuldu. Bu sürüm ayrıca model öğelerine CSS dynamic-range-limit özelliğini ekleyerek bir sayfanın, modelin ne kadar HDR ek aralığı kullanabileceğini belirlemesini sağlıyor. İlk uygulamadaki iki hata da düzeltildi: entityTransform özelliğinin düzgün çalışmaması ve model oynatıcısı yeniden yüklendikten sonra hareketlerle etkileşimin bozulması.
İşaretleme: iki kaynak biçimi, bir HDR ortam haritası ve onunla aydınlatılan bir çaydanlık. Görsel: Apple.
Mac, iPad ve iPhone'da görüntülenen tek bir 3D dosya. Görsel: Apple / WebKit.
Bunu, "3D görüntüleyiciler artık tarayıcıya yerleşik" şeklinde yorumlamak cazip gelebilir ve ürün fotoğrafları için bu yaklaşık olarak doğrudur. Ancak oyunlar için değildir. Model öğesi bir modeli gösterir. Oyun döngünüzü, fizik sisteminizi veya gölgelendiricilerinizi çalıştırmaz ve yalnızca Safari'de bulunur. Chrome ve Firefox henüz bu öğeyi sunmadığı için ona bağımlı bir sayfa, pratikte zaten yazacak olduğunuz WebGL veya WebGPU görüntüleyicisi olan bir yedek çözüme ihtiyaç duyar.
WGSL'de kırpma düzlemleri
Oyun motorları için daha kullanışlı olan değişiklik ise daha sessiz geldi. Safari 27, WGSL'deki yerleşik clip_distances özelliğini destekliyor. Bu özellik, bir köşe gölgelendiricisinin kendi kırpma düzlemlerini tanımlamasına ve geometrinin rasterleştirmeden önce atılmasına olanak tanıyor. Düzlemsel yansımalar, portal görüntüleme, kesit görünümleri ve su yüzeylerinin tümü bundan yararlanıyor. Şimdiye kadar Safari'de buna ihtiyaç duyan bir WebGPU uygulaması, parça gölgelendiricisinde discard kullanarak bunu taklit etmek zorundaydı. Bu da zaten en pahalı olan geçişlerde dolgu hızı maliyeti yaratıyordu.
Canvas, WebGL ve renk yönetimli diğer API'ler ayrıca önceden tanımlanmış iki renk uzayına kavuşuyor: srgb-linear ve display-p3-linear. Kendi ton eşlemenizi yapıyorsanız veya HDR içeriği bir canvas üzerinde birleştiriyorsanız artık tarayıcıya doğrusal ışık verisi verebilir ve veriyi kendiniz sRGB'ye kodlayıp bu süreçte hassasiyet kaybetmek yerine aktarım işlevini tarayıcıya bırakabilirsiniz.
Apple'ın bu sürümle ilgili WWDC oturumu, model öğesini ve diğer WebKit değişikliklerini ayrıntılı olarak anlatıyor.
Bunun bizi ilgilendirmesinin nedeni
Motorumuz, tarayıcı desteklediğinde WebGPU, desteklemediğinde ise WebGL ile görüntü oluşturuyor. WebGPU geçen yıl Safari'ye geldiğinden beri en tedirgin şekilde test ettiğimiz tarayıcı Safari oldu. Kırpma düzlemleri eksiklerden biriydi. Su yansımaları tam da bir kırpma düzlemine ihtiyaç duyan geçişlerdir. WebGPU'da şimdiye kadarki seçenekler, eğik bir izdüşüm matrisi veya parça gölgelendiricisinde discard kullanmaktı. İkinci seçenek, dolgu hızının tüm bütçeyi belirlediği telefonlarda bu bütçeyi tüketir. Safari 27, kullanıcılardan tarayıcı değiştirmelerini isteyemediğimiz tek platformda bu boşluğu kapatıyor; çünkü iOS'teki her tarayıcının altında Safari çalışıyor.
Doğrusal renk uzayları daha az görünür bir şekilde yardımcı oluyor. HDR çıktısı, Godot 4.7 sürümünün öne çıkan özelliklerinden biriydi ve doğrusal görüntü hedefinden ekrana giden yol web'deki sorunlu kısım oldu. Canvas'ın doğrusal veriyi doğrudan kabul etmesi, oyun motorlarının şu anda elle gerçekleştirdiği bir dönüşümü ortadan kaldırıyor.
Model öğesini, iyi olduğu iş için, yani bir sayfada tek bir varlığı göstermek amacıyla kullanacağız. GLB görüntüleyicimiz ve varlık kütüphanemiz, her tarayıcıda çalışan çözüm bu olduğu için three.js görüntü oluşturucusunu kullanmaya devam edecek. Ancak hızlı önizleme senaryosu için yerel bir Safari yoluna sahip olmak faydalı. Bunların herhangi biri sizin için önemli hâle gelmeden önce kendi tarayıcınızın neleri desteklediğini kontrol etmek istiyorsanız WebGL ve WebGPU denetleyicisi size sonucu gösterecek. WebGPU ve WebGL oyunları karşılaştırma rehberi ise aralarındaki farkın neden göründüğünden daha büyük olduğunu açıklıyor.