Safari 27 iPhone और Mac पर मॉडल एलिमेंट लाता है और WebGPU को क्लिप प्लेन देता है
Safari 27 को 14 सितंबर को iOS 27, iPadOS 27 और macOS 27 के साथ जारी किया गया, और Apple इसे macOS Sequoia और Tahoe के लिए एक अलग अपडेट के रूप में भी उपलब्ध कराता है। WebKit टीम ने तीन दिन बाद इसके फीचरों का विवरण प्रकाशित किया। उनकी गणना के अनुसार, इस रिलीज़ में 83 नए फीचर और 844 सुधार हैं, जबकि जून बीटा के समय उन्होंने 58 फीचर और 525 सुधारों की घोषणा की थी। इनमें से तीन फीचर ब्राउज़र में 3D रेंडर करने वाले हर व्यक्ति के लिए महत्वपूर्ण हैं। WebKit: Safari 27.0 के फीचर।
Apple के WWDC सत्र से लिया गया दृश्य, जिसमें visionOS 27 पर Safari के चारों ओर वेबसाइट का अपना 3D परिवेश है। चित्र: Apple।
मॉडल एलिमेंट हेडसेट से बाहर आया
HTML <model> एलिमेंट की शुरुआत visionOS पर किसी 3D फ़ाइल को पेज में ठीक उसी तरह जोड़ने के तरीके के रूप में हुई थी, जैसे आप कोई वीडियो जोड़ते हैं। Safari 27 इसे iOS, iPadOS और macOS पर लाता है। आप इसे किसी USDZ या glTF फ़ाइल की ओर इंगित करते हैं, या वीडियो की तरह <source> चाइल्ड एलिमेंट का उपयोग करके दोनों को सूचीबद्ध करते हैं; ब्राउज़र लोडिंग और डिस्प्ले संभालता है और उपयोगकर्ता आपके द्वारा कोई रेंडरर लिखे बिना ऑब्जेक्ट को घुमा सकता है। environmentmap एट्रिब्यूट प्रकाश व्यवस्था के लिए HDR फ़ाइल लेता है। visionOS 27 पर यही एलिमेंट और आगे जाता है: कोई साइट मॉडल के रूप में इमर्सिव परिवेश उपलब्ध करा सकती है और JavaScript की एक कॉल से पूरी ब्राउज़र विंडो को उससे घेर सकती है—ऊपर के चित्र में थिएटर इसी तरह बनाया गया था। यह रिलीज़ मॉडल एलिमेंट में CSS प्रॉपर्टी dynamic-range-limit भी जोड़ती है, ताकि कोई पेज तय कर सके कि मॉडल कितनी HDR हेडरूम इस्तेमाल कर सकता है। साथ ही, पहले इम्प्लीमेंटेशन की दो बग भी ठीक की गई हैं: entityTransform का सही व्यवहार न करना और मॉडल प्लेयर रीलोड होने के बाद जेस्चर इंटरैक्शन का टूट जाना।
मार्कअप: दो स्रोत फ़ॉर्मेट, एक HDR एनवायरनमेंट मैप और उससे रोशन की गई चायदानी। चित्र: Apple।
Mac, iPad और iPhone पर रेंडर होती एक ही 3D फ़ाइल। चित्र: Apple / WebKit।
इसे देखकर यह मान लेना आसान है कि "3D व्यूअर अब ब्राउज़र में ही बने हुए हैं," और उत्पाद की तस्वीरों के लिए यह मोटे तौर पर सही भी है। लेकिन गेम के लिए ऐसा नहीं है। मॉडल एलिमेंट केवल एक मॉडल दिखाता है। यह आपके गेम लूप, फ़िज़िक्स या शेडर नहीं चलाता और यह केवल Safari में मौजूद है। Chrome और Firefox ने इसे जारी नहीं किया है, इसलिए इस पर निर्भर किसी पेज को ऐसे फ़ॉलबैक की आवश्यकता होगी जो व्यवहार में वही WebGL या WebGPU व्यूअर है जिसे आपको वैसे भी लिखना पड़ता।
WGSL में क्लिप प्लेन
इंजन के लिए अधिक उपयोगी बदलाव कम चर्चा में है। Safari 27, WGSL में बिल्ट-इन clip_distances का समर्थन करता है, जिससे वर्टेक्स शेडर अपने क्लिप प्लेन परिभाषित कर सकता है और रैस्टराइज़ेशन से पहले ज्योमेट्री को हटा सकता है। प्लेनर रिफ्लेक्शन, पोर्टल रेंडरिंग, कटअवे व्यू और पानी की सतहें—सभी इस पर निर्भर करते हैं। अब तक Safari पर जिस WebGPU ऐप को इसकी आवश्यकता होती थी, उसे फ़्रैगमेंट शेडर में discard के जरिए इसकी नकल करनी पड़ती थी, जिससे ठीक उन्हीं पास में फ़िल रेट खर्च होता है जो पहले से ही सबसे महँगे होते हैं।
Canvas, WebGL और दूसरे कलर-मैनेज्ड API को भी दो पूर्वनिर्धारित कलर स्पेस, srgb-linear और display-p3-linear, मिले हैं। यदि आप अपनी टोन मैपिंग स्वयं करते हैं या HDR सामग्री को कैनवस में कंपोज़िट करते हैं, तो अब आप ब्राउज़र को लीनियर-लाइट डेटा दे सकते हैं और उसे ट्रांसफ़र फ़ंक्शन संभालने दे सकते हैं, बजाय स्वयं sRGB में एन्कोड करने और इस प्रक्रिया में प्रिसीजन खोने के।
इस रिलीज़ पर Apple का WWDC सत्र मॉडल एलिमेंट और WebKit के बाकी बदलावों का विवरण देता है।
इसका हम पर क्या प्रभाव पड़ता है
हमारा इंजन जहाँ ब्राउज़र में WebGPU उपलब्ध है वहाँ उससे और जहाँ नहीं है वहाँ WebGL से रेंडर करता है। पिछले साल Safari में WebGPU आने के बाद से वही ब्राउज़र रहा है जिस पर हम सबसे अधिक सतर्कता से परीक्षण करते हैं। क्लिप प्लेन इसकी कमियों में से एक थे। पानी के रिफ्लेक्शन ठीक ऐसा पास है जिसे क्लिप प्लेन चाहिए, और WebGPU पर अब तक विकल्प या तो ऑब्लिक प्रोजेक्शन मैट्रिक्स था या फ़्रैगमेंट शेडर में discard, जो फ़ोन पर फ़िल रेट खर्च करता है—जहाँ फ़िल रेट ही पूरा बजट होता है। Safari 27 उस एक प्लेटफ़ॉर्म पर यह कमी दूर करता है जहाँ हम लोगों से ब्राउज़र बदलने को नहीं कह सकते, क्योंकि iOS पर हर ब्राउज़र के नीचे Safari ही चलता है।
लीनियर कलर स्पेस कम दिखाई देने वाले तरीके से मदद करते हैं। HDR आउटपुट Godot 4.7 के प्रमुख फीचरों में से एक था, और लीनियर रेंडर टार्गेट से स्क्रीन तक का रास्ता वेब पर सबसे असुविधाजनक हिस्सा रहा है। कैनवस द्वारा सीधे लीनियर डेटा स्वीकार करने से वह एक कन्वर्ज़न हट जाता है जिसे इंजन अभी हाथ से करते हैं।
मॉडल एलिमेंट का उपयोग हम उसी काम के लिए करेंगे जिसमें यह अच्छा है—किसी पेज पर एक अकेला एसेट दिखाना। हमारा GLB व्यूअर और एसेट लाइब्रेरी अपना three.js रेंडरर बनाए रखेंगे, क्योंकि हर ब्राउज़र में वही काम करता है, लेकिन क्विक-लुक उपयोग के लिए मूल Safari पाथ होना उपयोगी है। यदि आप यह जाँचना चाहते हैं कि इनमें से कुछ भी आपके लिए मायने रखने से पहले आपका अपना ब्राउज़र किसका समर्थन करता है, तो WebGL और WebGPU चेकर आपको बताएगा, और WebGPU बनाम WebGL गाइड समझाती है कि यह अंतर जितना सुनाई देता है, उससे कहीं बड़ा क्यों है।