Skip to content

Three.js r183: PostProcessing अब RenderPipeline बन गया

Three.js r183 18 फरवरी को रिलीज़ हुआ, और यह ज़्यादातर point releases के मुकाबले एक बड़ा architectural बदलाव है। सबसे बड़ी बात यह है कि PostProcessing का नाम बदलकर RenderPipeline कर दिया गया है। यह सिर्फ़ नाम बदलना नहीं है। यह दिखाता है कि कैसे यह class एक साधारण post-processing manager से बढ़कर एक पूरे pipeline system में बदल गई, जो कई rendering passes और history buffers संभालती है।

Three.js WebGPU और TSL shader node system का परिचय

RenderPipeline ने PostProcessing की जगह ली

नई RenderPipeline class खास तौर पर WebGPURenderer के लिए बनाई गई है। यह पूरे rendering pipeline का setup, post-processing effect chains संभालती है, और outputNode के ज़रिए final output तय करती है। outputColorTransform property default tone mapping और color space transformation को कंट्रोल करती है।

यह इसलिए मायने रखता है क्योंकि पुराना PostProcessing नाम भ्रामक था। volumetric lighting के लिए temporal anti-aliasing (TRAA) integration, temporal stability वाले screen space reflections, और HalfFloatType output buffers का इस्तेमाल करते हुए HDR pipeline support के साथ, यह class पहले से ही post-processing से कहीं ज़्यादा काम कर रही थी। नया नाम हकीकत से मेल खाता है।

Clock deprecated हुआ, Timer आया

Clock class अब deprecated है और इसकी जगह नई Timer class आई है। अगर आप अपने animation loops में Clock इस्तेमाल कर रहे हैं, तो migrate करना शुरू कर दें। नई Timer उसी time-tracking कामकाज के लिए एक साफ़-सुथरा API देती है।

BatchedMesh को per-instance कंट्रोल मिला

BatchedMesh में per-instance opacity और wireframe material support जुड़ गया। यह open world scenes और city builders के लिए एक अहम जोड़ है, जहाँ आपको अलग-अलग materials बनाए बिना individual instances को fade in और fade out करना होता है। इसका मतलब यह भी है कि आप debugging या stylistic effects के लिए खास instances पर चुनकर wireframe rendering लगा सकते हैं।

React Three Fiber के साथ Three.js में WebGPU post-processing

Material सुधार

MeshLambertMaterial और MeshPhongMaterial अब scene.environment image-based lighting (IBL) को support करते हैं। पहले ये सस्ते materials ambient lighting के लिए environment maps इस्तेमाल नहीं कर पाते थे, जिससे developers को महँगे MeshStandardMaterial की ओर जाना पड़ता था। अब आप जहाँ PBR accuracy की ज़रूरत न हो, वहाँ इन legacy materials के साथ IBL इस्तेमाल कर सकते हैं।

MeshPhysicalMaterial में rect area lights के लिए clearcoat support जुड़ गया। अगर आप area lights से रोशन car paint या चमकदार सतहें render कर रहे हैं, तो clearcoat layer अब सही ढंग से प्रतिक्रिया देती है।

Performance optimizations

Matrix4.decompose() अब determinant की गणना को cache करता है, और invert() को optimize किया गया है। कई objects वाले scenes में ये हर frame में हज़ारों बार कॉल होते हैं, इसलिए जमा होकर बचत काफ़ी हो जाती है।

TSL spec और clipSpace node

Three.js r183 एक औपचारिक TSL specification document (TSL.md) और एक नया clipSpace node लाता है। TSL (Three.js Shading Language) आपको JavaScript में shader code लिखने देता है, जो WebGPU के लिए WGSL या WebGL के लिए GLSL में compile होता है। नई spec node system के API को औपचारिक रूप देती है, जिससे third-party libraries के लिए इसके ऊपर निर्माण करना आसान हो जाता है।

clipSpace node TSL में clip-space coordinates तक सीधी पहुँच देता है, जो screen-space effects और custom projection techniques के लिए काम आता है।

References