Three.js r184 में HTMLTexture आया: लाइव DOM एक 3D सतह के रूप में
Three.js r184 इस हफ़्ते रिलीज़ हुआ। सबसे बड़ी बात है एक नया HTMLTexture class, जिससे आप Three.js को किसी भी लाइव HTML element की ओर इशारा करके उसे एक mesh पर texture के रूप में इस्तेमाल कर सकते हैं। Buttons क्लिक होते रहते हैं, inputs पर focus होता रहता है, CSS animations चलते रहते हैं, और browser accessibility और IME को वैसे ही संभालता है जैसे हमेशा करता है।
HTML-in-Canvas API का Chrome का आधिकारिक वॉकथ्रू, जो Three.js HTMLTexture को सपोर्ट करता है
HTMLTexture, एक पैराग्राफ में
HTMLTexture Chrome 146 के HTML-in-Canvas API को रैप करता है। आप इसे एक DOM element देते हैं। Three.js canvas पर layoutsubtree सेट करता है, element को renderer के DOM में पैरेंट करता है, और उसके rasterized आउटपुट को एक THREE.Texture में प्रोजेक्ट करता है, जिसे आप WebGL 2 या WebGPU पर किसी भी material से sample कर सकते हैं। आधिकारिक उदाहरण (webgl_materials_texture_html और webgpu_materials_texture_html) में फ़ॉर्मैट किया हुआ text, images, SVG, एक काम करता हुआ input, और एक button शामिल हैं।
व्यवहार में इसका मतलब है कि React components, design system widgets, video players, charts, या पूरे embedded pages एक Three.js scene के अंदर किसी घुमावदार स्क्रीन, billboard, या UI panel पर बैठ सकते हैं, और इसके लिए वह पुराना "canvas में rasterize करो, फिर interactivity भूल जाओ" वाला समझौता नहीं करना पड़ता।
एक पेच
यह फ़ीचर सिर्फ़ वहीं चालू होता है जहाँ नीचे का API मौजूद हो। अभी यह Chromium 146 और उससे ऊपर पर है, जहाँ chrome://flags/#canvas-draw-element flag चालू हो, मतलब प्रोडक्शन sites को अब भी एक fallback चाहिए। PR ने रास्ता खुला रखा है, क्योंकि API न होने पर HTMLTexture शालीनता से फ़ेल होता है, लेकिन क्लाइंट्स से पूरी तरह interactive Three.js dashboard का वादा करने से पहले आप feature-detect करना चाहेंगे।
Safari और Firefox ने कोई समयसीमा नहीं बताई है। यह देखते हुए कि WebGPU खुद 2025 के आख़िर में ही तीनों browsers में baseline तक पहुँचा है, HTML-in-Canvas भी शायद ऐसा ही दो साल का सफ़र तय करेगा।
Three.js रैपर आने से पहले HTML-in-Canvas का एक कम्युनिटी डेमो
दूसरा पहलू: शून्य per-frame allocations
कम चमकीला लेकिन शायद ज़्यादा अहम बदलाव renderer के hot path में है। r184 से पहले, 60 FPS पर 1,000 meshes रेंडर करने से हर सेकंड 240,000 से 500,000 बेकार objects allocate हो सकते थे। फिर हर लंबे चलने वाले scene पर garbage collector को इन सबसे निपटना पड़ता था। r184 core render loop पर इन allocations को ख़त्म कर देता है। लंबी चलने वाली WebXR sessions, घनी construction viewers, और कोई भी scene जो पहले 30 सेकंड से आगे जीता है, उसे मुफ़्त में frame-time का असली फ़ायदा मिलता है।
छोटी बातें जो बताने लायक हैं
AnimationAction अब बनते समय interpolant settings बनाए रखता है, इसलिए timeScale को उलटने पर अब झटका नहीं लगता। AudioLoader अब loading manager से race नहीं करता। जब colors सेट न हों, तब BatchedMesh और InstancedMesh getColorAt से throw करना बंद कर देते हैं। Deprecated WebGL instancing render paths हमेशा के लिए हट गए हैं। उदाहरणों में एक SSGI ball pool, 3D Tiles loader पर volumetric clouds, और roller-coaster कैमरा पर banking जुड़े हैं।
हम इसके साथ क्या करेंगे
Cinevva के लिए सबसे दिलचस्प इस्तेमाल reels player और creator tools के लिए on-canvas UI है। अभी हम HTML को Three.js के ऊपर composite करते हैं। HTMLTexture के साथ, chat overlay, asset browser, और prompt input सभी keyboard navigation खोए बिना scene के अंदर geometry पर रह सकते हैं। जैसे ही यह API Chrome stable में बिना flag के आता है, हम एक feature-flagged वैरिएंट जोड़ देंगे।