Three.js: पोस्ट-प्रोसेसिंग और इफेक्ट्स (Post-Processing and Effects)

इस ट्यूटोरियल में, हम Three.js के साथ पोस्ट-प्रोसेसिंग और इफेक्ट्स (Post-Processing and Effects) पर ध्यान केंद्रित करेंगे। पोस्ट-प्रोसेसिंग तकनीकें आपके 3D सीन को और भी अधिक यथार्थवादी और आकर्षक बनाने में मदद करती हैं। इस गाइड में, हम विभिन्न इफेक्ट्स जैसे ब्लूम, मोशन ब्लर, और गॉड रेज़ को लागू करने के तरीके सीखेंगे, जो आपके 3D प्रोजेक्ट्स को एक नया आयाम देंगे। यदि आप अपने सीन को और अधिक प्रभावशाली बनाना चाहते हैं, तो यह ट्यूटोरियल आपके लिए है।

पोस्ट-प्रोसेसिंग का परिचय (Introduction to Post-Processing)

पोस्ट-प्रोसेसिंग (Post-Processing) 3D ग्राफिक्स रेंडरिंग में एक महत्वपूर्ण तकनीक है, जिसका उपयोग आपके सीन को और भी अधिक यथार्थवादी, आकर्षक, और सिनेमाई बनाने के लिए किया जाता है। पोस्ट-प्रोसेसिंग इफेक्ट्स को रेंडरिंग के बाद सीन पर लागू किया जाता है, जिससे आप विभिन्न विज़ुअल इफेक्ट्स, जैसे कि ब्लूम, मोशन ब्लर, गॉड रेज़, और विगनेटिंग को जोड़ सकते हैं। Three.js में पोस्ट-प्रोसेसिंग का उपयोग करने से आप अपने 3D प्रोजेक्ट्स को एक नया आयाम दे सकते हैं और उन्हें अधिक पेशेवर और प्रभावशाली बना सकते हैं।

पोस्ट-प्रोसेसिंग के लाभ (Benefits of Post-Processing)

पोस्ट-प्रोसेसिंग आपको निम्नलिखित लाभ प्रदान करता है:

• सिनेमाई प्रभाव: आप अपने 3D सीन में सिनेमाई इफेक्ट्स जोड़ सकते हैं, जो उपयोगकर्ता के अनुभव को बेहतर बनाते हैं।
• रेंडरिंग में सुधार: पोस्ट-प्रोसेसिंग इफेक्ट्स का उपयोग करके आप रेंडरिंग की क्वालिटी को बढ़ा सकते हैं, जैसे कि इमेज को शार्प करना या शैडोज़ को स्मूद करना।
• विज़ुअल स्टाइलिंग: आप अपने सीन के विज़ुअल स्टाइल को कस्टमाइज़ कर सकते हैं, जिससे यह अधिक यूनिक और आकर्षक दिखता है।

Three.js में पोस्ट-प्रोसेसिंग का उपयोग (Using Post-Processing in Three.js)

Three.js में पोस्ट-प्रोसेसिंग इफेक्ट्स को लागू करने के लिए EffectComposer, RenderPass, और विभिन्न इफेक्ट्स जैसे कि BloomPass, FilmPass, और UnrealBloomPass का उपयोग किया जाता है।

उदाहरण: बेसिक पोस्ट-प्रोसेसिंग सेटअप

// EffectComposer का निर्माण करें
const composer = new THREE.EffectComposer(renderer);

// RenderPass जोड़ें
const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

// BloomPass जोड़ें
const bloomPass = new THREE.BloomPass(1.25);
composer.addPass(bloomPass);

// Animation loop में composer को रेंडर करें
function animate() {
    requestAnimationFrame(animate);
    composer.render();
}

animate();

प्रमुख पोस्ट-प्रोसेसिंग इफेक्ट्स (Key Post-Processing Effects)

• Bloom: इमेज के ब्राइट हिस्सों के आसपास एक हल्की चमक जोड़ता है।
• Motion Blur: ऑब्जेक्ट्स की मूवमेंट के आधार पर धुंधलापन जोड़ता है।
• God Rays: लाइट सोर्स से निकलने वाली रेज़ का प्रभाव जोड़ता है।
• Vignette: इमेज के किनारों को हल्का या गहरा करके केंद्र पर ध्यान केंद्रित करता है।

Bloom, Depth of Field, Motion Blur इफेक्ट्स लागू करना

Three.js में Bloom, Depth of Field, और Motion Blur जैसे पोस्ट-प्रोसेसिंग इफेक्ट्स का उपयोग करके आप अपने 3D सीन को और अधिक सिनेमाई और यथार्थवादी बना सकते हैं। ये इफेक्ट्स आपके सीन को एक नया आयाम देते हैं और उपयोगकर्ता अनुभव को बेहतर बनाते हैं। इस सेक्शन में, हम इन इफेक्ट्स को Three.js में लागू करने के तरीके पर चर्चा करेंगे।

1. Bloom इफेक्ट लागू करना (Applying Bloom Effect)

Bloom इफेक्ट आपके सीन के ब्राइट हिस्सों के चारों ओर एक हल्की चमक जोड़ता है, जिससे सीन को एक ग्लोइंग और सॉफ्ट लुक मिलता है। Three.js में Bloom इफेक्ट को लागू करने के लिए UnrealBloomPass का उपयोग किया जाता है।

उदाहरण:

// EffectComposer का निर्माण करें
const composer = new THREE.EffectComposer(renderer);

// RenderPass जोड़ें
const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

// UnrealBloomPass जोड़ें
const bloomPass = new THREE.UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    1.5, // strength
    0.4, // radius
    0.85 // threshold
);
composer.addPass(bloomPass);

// Animation loop में composer को रेंडर करें
function animate() {
    requestAnimationFrame(animate);
    composer.render();
}

animate();

Bloom इफेक्ट के मुख्य पैरामीटर्स:

• Strength: Bloom की ताकत को नियंत्रित करता है।
• Radius: Bloom की रेडियस को नियंत्रित करता है।
• Threshold: Bloom इफेक्ट को कब शुरू करना चाहिए, इसे नियंत्रित करता है।

2. Depth of Field इफेक्ट लागू करना (Applying Depth of Field Effect)

Depth of Field (DoF) इफेक्ट आपके सीन में एक विशिष्ट दूरी पर फोकस करता है और उसके आगे या पीछे की वस्तुओं को धुंधला कर देता है। Three.js में इसे लागू करने के लिए BokehPass का उपयोग किया जाता है।

उदाहरण:

// BokehPass के लिए शेडर सेटअप
const bokehPass = new THREE.BokehPass(scene, camera, {
    focus: 1.0, // फोकस दूरी
    aperture: 0.025, // एपर्चर साइज
    maxblur: 1.0, // अधिकतम ब्लर
    width: window.innerWidth,
    height: window.innerHeight
});
composer.addPass(bokehPass);

// Animation loop में composer को रेंडर करें
function animate() {
    requestAnimationFrame(animate);
    composer.render();
}

animate();

Depth of Field इफेक्ट के मुख्य पैरामीटर्स:

• Focus: कैमरे से फोकस दूरी को निर्धारित करता है।
• Aperture: ब्लर की मात्रा को नियंत्रित करता है।
• Maxblur: अधिकतम ब्लर की तीव्रता को नियंत्रित करता है।

3. Motion Blur इफेक्ट लागू करना (Applying Motion Blur Effect)

Motion Blur इफेक्ट ऑब्जेक्ट्स की मूवमेंट के आधार पर धुंधलापन जोड़ता है, जिससे सीन में गति और गति का आभास होता है। Three.js में Motion Blur इफेक्ट को लागू करने के लिए GlitchPass का उपयोग किया जा सकता है, लेकिन अधिक जटिल Motion Blur इफेक्ट्स के लिए कस्टम शेडर्स की आवश्यकता होती है।

उदाहरण:

// GlitchPass का निर्माण करें (सिंपल Motion Blur के लिए)
const glitchPass = new THREE.GlitchPass();
composer.addPass(glitchPass);

// Animation loop में composer को रेंडर करें
function animate() {
    requestAnimationFrame(animate);
    composer.render();
}

animate();

Motion Blur इफेक्ट के मुख्य पैरामीटर्स:

• Delay: इफेक्ट में देरी को नियंत्रित करता है।
• Strength: Motion Blur की तीव्रता को नियंत्रित करता है।

Composer और पासेस (Composer and Passes)

Three.js में Composer और Passes का उपयोग करके आप अपने 3D सीन पर पोस्ट-प्रोसेसिंग इफेक्ट्स को लागू कर सकते हैं। Composer आपको विभिन्न पासेस को एक श्रृंखला में जोड़ने की अनुमति देता है, जिससे आप सीन पर कई इफेक्ट्स को एक साथ लागू कर सकते हैं। यह प्रक्रिया आपको अपने 3D सीन को अधिक यथार्थवादी, सिनेमाई, और प्रभावशाली बनाने में मदद करती है।

1. Composer का परिचय (Introduction to Composer)

EffectComposer Three.js का एक महत्वपूर्ण हिस्सा है, जिसका उपयोग पोस्ट-प्रोसेसिंग इफेक्ट्स को लागू करने के लिए किया जाता है। Composer का उपयोग करके आप कई इफेक्ट्स को एक क्रम में जोड़ सकते हैं और उन्हें एक साथ रेंडर कर सकते हैं। यह प्रक्रिया आपको जटिल और विविध विज़ुअल इफेक्ट्स बनाने की अनुमति देती है।

Composer सेटअप का उदाहरण:

// EffectComposer का निर्माण करें
const composer = new THREE.EffectComposer(renderer);

// RenderPass जोड़ें (यह मूल सीन को रेंडर करता है)
const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

2. पासेस का परिचय (Introduction to Passes)

Passes वह चरण होते हैं जिनके माध्यम से सीन को रेंडर किया जाता है। प्रत्येक पास सीन पर एक विशिष्ट इफेक्ट लागू करता है। आप इन पासेस को क्रम में जोड़ सकते हैं, जिससे सीन पर एकाधिक इफेक्ट्स को एक साथ लागू किया जा सकता है।

प्रमुख Passes:

• RenderPass: सीन और कैमरे से बेसिक रेंडरिंग करता है।
• BloomPass: सीन के ब्राइट हिस्सों के चारों ओर ग्लोइंग इफेक्ट जोड़ता है।
• BokehPass: Depth of Field इफेक्ट्स को लागू करता है, जिससे फोकस और ब्लरिंग का इफेक्ट मिलता है।
• FilmPass: सीन पर विगनेटिंग, स्कैनलाइन्स, और अन्य सिनेमाई इफेक्ट्स जोड़ता है।
• GlitchPass: सीन में ग्लिच और मोशन ब्लर इफेक्ट्स जोड़ता है।

3. Composer और Passes के साथ काम करना (Working with Composer and Passes)

Composer का उपयोग करने के लिए, सबसे पहले आपको इसे सेटअप करना होता है और फिर आवश्यक पासेस को जोड़ना होता है। प्रत्येक पास एक विशेष इफेक्ट लागू करता है, और आप इन पासेस को जोड़कर अपने सीन में विभिन्न इफेक्ट्स उत्पन्न कर सकते हैं।

उदाहरण: BloomPass और FilmPass जोड़ना

// EffectComposer का निर्माण करें
const composer = new THREE.EffectComposer(renderer);

// RenderPass जोड़ें
const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

// BloomPass जोड़ें
const bloomPass = new THREE.UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    1.5, // strength
    0.4, // radius
    0.85 // threshold
);
composer.addPass(bloomPass);

// FilmPass जोड़ें
const filmPass = new THREE.FilmPass(
    0.35, // noise intensity
    0.025, // scanline intensity
    648, // scanline count
    false // grayscale
);
composer.addPass(filmPass);

// Animation loop में composer को रेंडर करें
function animate() {
    requestAnimationFrame(animate);
    composer.render();
}

animate();

4. Composer के साथ कस्टम Passes का उपयोग (Using Custom Passes with Composer)

Composer के साथ आप कस्टम Passes भी बना सकते हैं। कस्टम Passes का उपयोग करके आप अपने 3D सीन पर विशिष्ट इफेक्ट्स लागू कर सकते हैं, जिन्हें आप स्वयं डिज़ाइन कर सकते हैं।

उदाहरण: कस्टम पास का निर्माण

class CustomPass extends THREE.Pass {
    constructor() {
        super();
        this.uniforms = {
            time: { value: 1.0 },
            resolution: { value: new THREE.Vector2() }
        };
        this.material = new THREE.ShaderMaterial({
            uniforms: this.uniforms,
            vertexShader: vertexShaderSource,
            fragmentShader: fragmentShaderSource
        });
    }

    render(renderer, writeBuffer, readBuffer) {
        this.uniforms.time.value += 0.05;
        renderer.setRenderTarget(this.renderToScreen ? null : writeBuffer);
        renderer.clear();
        renderer.render(this.scene, this.camera);
    }
}

// कस्टम पास जोड़ें
const customPass = new CustomPass();
composer.addPass(customPass);