Three.js: एडवांस्ड मैटेरियल्स और शेडर्स (Advanced Materials and Shaders)

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

MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial

Three.js में 3D ऑब्जेक्ट्स की सतह को कस्टमाइज़ करने के लिए विभिन्न प्रकार के मैटेरियल्स का उपयोग किया जाता है। MeshBasicMaterial, MeshLambertMaterial, और MeshPhongMaterial तीन प्रमुख मैटेरियल्स हैं, जिनका उपयोग आपके 3D सीन में अलग-अलग प्रकार की लाइटिंग और शैडोज़ के साथ इंटरैक्शन करने के लिए किया जाता है। आइए इन तीनों मैटेरियल्स के बारे में विस्तार से समझें।

1. MeshBasicMaterial

MeshBasicMaterial सबसे सरल मैटेरियल है, जो लाइटिंग के प्रति प्रतिक्रिया नहीं करता है। यह केवल ऑब्जेक्ट की सतह पर एक बेसिक रंग, टेक्सचर, या इमेज प्रदर्शित करता है। इस मैटेरियल का उपयोग तब किया जाता है जब आपको लाइटिंग और शैडोज़ की आवश्यकता नहीं होती, जैसे कि UI एलिमेंट्स, बैकग्राउंड्स, या टेक्सचर मैप्स।

विशेषताएँ:

• लाइटिंग पर प्रतिक्रिया नहीं करता: लाइटिंग के प्रभाव से स्वतंत्र।
• स्मूद रेंडरिंग: बेसिक रंग और टेक्सचर प्रदर्शित करता है।
• उपयोग: सरल ग्राफिक्स, यूआई एलिमेंट्स, या सीन के बैकग्राउंड के लिए।

उदाहरण:

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
scene.add(cube);

2. MeshLambertMaterial

MeshLambertMaterial लाइटिंग के प्रति प्रतिक्रिया करता है और डिफ्यूज़ शैडोज़ उत्पन्न करता है। यह लाइटिंग का सॉफ़्ट और रियलिस्टिक प्रभाव उत्पन्न करता है, लेकिन इसमें स्पेकुलर हाइलाइट्स (चमकदार स्पॉट्स) शामिल नहीं होते हैं। इसका उपयोग तब किया जाता है जब आपको सीन में लाइटिंग के साथ बेसिक यथार्थता प्रदान करनी हो।

विशेषताएँ:

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

उदाहरण:

const material = new THREE.MeshLambertMaterial({ color: 0x0000ff });
const sphere = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), material);
scene.add(sphere);

3. MeshPhongMaterial

MeshPhongMaterial लाइटिंग के साथ अधिक जटिल और यथार्थवादी प्रभाव उत्पन्न करता है। इसमें डिफ्यूज़ लाइटिंग के साथ-साथ स्पेकुलर हाइलाइट्स भी शामिल होते हैं, जो मेटलिक या चमकदार सतहों के लिए आदर्श हैं। यह मैटेरियल उच्च-गुणवत्ता वाले रेंडरिंग के लिए उपयोग किया जाता है, जहाँ आपको चमक और रिफ्लेक्शन की आवश्यकता होती है।

विशेषताएँ:

• डिफ्यूज़ और स्पेकुलर लाइटिंग: सॉफ़्ट शैडोज़ और चमकदार स्पॉट्स।
• हाई-परफॉर्मेंस: लाइटिंग के प्रति विस्तृत प्रतिक्रिया, उच्च प्रदर्शन की मांग।
• उपयोग: मेटलिक सतहें, ग्लॉसी ऑब्जेक्ट्स, और हाई-फिडेलिटी रेंडरिंग।

उदाहरण:

const material = new THREE.MeshPhongMaterial({
    color: 0xff0000,
    shininess: 100 // चमकदार सतह के लिए शाइनीनेस सेट करें
});
const cylinder = new THREE.Mesh(new THREE.CylinderGeometry(1, 1, 2, 32), material);
scene.add(cylinder);

शेडर का परिचय (Introduction to Shaders)

शेडर (Shaders) ग्राफिक्स प्रोग्रामिंग का एक महत्वपूर्ण हिस्सा हैं, जिनका उपयोग 3D ग्राफिक्स को रेंडर करने के लिए किया जाता है। शेडर्स छोटे प्रोग्राम होते हैं, जो GPU (Graphics Processing Unit) पर चलते हैं और 3D ऑब्जेक्ट्स की सतह पर लाइटिंग, रंग, और अन्य प्रभाव उत्पन्न करने के लिए जिम्मेदार होते हैं। Three.js में शेडर्स का उपयोग करके आप अपने 3D सीन को और अधिक यथार्थवादी और कस्टमाइज़्ड बना सकते हैं।

शेडर्स के प्रकार (Types of Shaders)

Three.js में दो मुख्य प्रकार के शेडर्स का उपयोग किया जाता है:

1. वर्टेक्स शेडर (Vertex Shader):
   • वर्टेक्स शेडर 3D मॉडल के प्रत्येक वर्टेक्स (Vertex) पर काम करता है। यह वर्टेक्स की स्थिति को प्रोसेस करता है और उसे स्क्रीन पर सही स्थान पर प्रस्तुत करने के लिए जिम्मेदार होता है। वर्टेक्स शेडर का उपयोग 3D मॉडल की ज्योमेट्री में बदलाव करने के लिए भी किया जा सकता है।
   • उदाहरण: एक वर्टेक्स शेडर का उपयोग करके आप किसी ऑब्जेक्ट की सतह को वेव या डिस्टॉर्शन इफेक्ट्स के साथ बना सकते हैं।
2. फ्रैगमेंट शेडर (Fragment Shader):
   • फ्रैगमेंट शेडर प्रत्येक पिक्सल पर काम करता है और यह निर्धारित करता है कि प्रत्येक पिक्सल का रंग क्या होगा। फ्रैगमेंट शेडर का उपयोग लाइटिंग, टेक्सचरिंग, और अन्य विज़ुअल इफेक्ट्स उत्पन्न करने के लिए किया जाता है।
   • उदाहरण: फ्रैगमेंट शेडर का उपयोग मेटलिक, ग्लॉसी, या ट्रांसपेरेंट प्रभाव उत्पन्न करने के लिए किया जा सकता है।

GLSL और शेडर प्रोग्रामिंग (GLSL and Shader Programming)

शेडर प्रोग्रामिंग के लिए GLSL (OpenGL Shading Language) का उपयोग किया जाता है। यह एक उच्च-स्तरीय प्रोग्रामिंग भाषा है, जिसे विशेष रूप से शेडर्स लिखने के लिए डिज़ाइन किया गया है। Three.js में कस्टम शेडर्स लिखने के लिए आप GLSL का उपयोग कर सकते हैं और उन्हें ShaderMaterial के माध्यम से लागू कर सकते हैं।

उदाहरण: कस्टम वर्टेक्स और फ्रैगमेंट शेडर

const vertexShader = `
    varying vec3 vNormal;
    void main() {
        vNormal = normalize(normalMatrix * normal);
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;

const fragmentShader = `
    varying vec3 vNormal;
    void main() {
        float intensity = dot(vNormal, vec3(0.0, 0.0, 1.0));
        gl_FragColor = vec4(0.5, 0.5, 1.0, 1.0) * intensity;
    }
`;

const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});

const sphere = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), material);
scene.add(sphere);

शेडर्स का उपयोग क्यों करें? (Why Use Shaders?)

शेडर्स का उपयोग करके आप साधारण मैटेरियल्स की तुलना में अधिक जटिल और कस्टमाइज़्ड इफेक्ट्स बना सकते हैं। शेडर्स आपको निम्नलिखित चीज़ों में सक्षम बनाते हैं:

• कस्टम लाइटिंग मॉडल: आप अपनी लाइटिंग गणनाओं को कस्टमाइज़ कर सकते हैं।
• डायनामिक इफेक्ट्स: वर्टेक्स शेडर का उपयोग करके आप सतहों पर वेव, डिस्टॉर्शन, या अन्य डायनामिक इफेक्ट्स बना सकते हैं।
• सटीक नियंत्रण: प्रत्येक पिक्सल और वर्टेक्स पर सटीक नियंत्रण प्रदान करता है, जिससे आप अनूठे विज़ुअल इफेक्ट्स बना सकते हैं।

शेडर्स के साथ काम करने की चुनौतियाँ (Challenges of Working with Shaders)

शेडर प्रोग्रामिंग शक्तिशाली है, लेकिन यह चुनौतीपूर्ण भी हो सकता है, खासकर यदि आप ग्राफिक्स प्रोग्रामिंग में नए हैं। आपको निम्नलिखित बातों का ध्यान रखना चाहिए:

• प्रदर्शन: जटिल शेडर्स को ध्यान से ऑप्टिमाइज़ करना आवश्यक है, क्योंकि वे GPU पर चलते हैं और बहुत अधिक गणना की मांग कर सकते हैं।
• जीएलएसएल का ज्ञान: शेडर्स को प्रभावी ढंग से लिखने के लिए GLSL में कुशलता जरूरी है।
• डिबगिंग: शेडर्स को डिबग करना मुश्किल हो सकता है, क्योंकि वे GPU पर चलते हैं और तुरंत आउटपुट नहीं देते।

कस्टम शेडर्स (Custom Shaders) लिखना

Three.js में कस्टम शेडर्स लिखना आपको 3D सीन में अद्वितीय और जटिल विज़ुअल इफेक्ट्स बनाने की शक्ति देता है। कस्टम शेडर्स लिखने के लिए GLSL (OpenGL Shading Language) का उपयोग किया जाता है, जो आपको वर्टेक्स और फ्रैगमेंट स्तर पर ग्राफिक्स को नियंत्रित करने की अनुमति देता है। इस सेक्शन में, हम कस्टम शेडर्स लिखने के बेसिक्स और उन्हें Three.js में लागू करने के तरीकों पर चर्चा करेंगे।

कस्टम शेडर्स के लिए आवश्यक तत्व (Key Components for Custom Shaders)

1. वर्टेक्स शेडर (Vertex Shader):
   • वर्टेक्स शेडर 3D मॉडल के प्रत्येक वर्टेक्स की पोज़िशन को प्रोसेस करता है। यह शेडर 3D स्पेस में वर्टेक्स की स्थिति निर्धारित करता है और अन्य गणनाओं जैसे कि नॉर्मल्स, टेक्सचर कोऑर्डिनेट्स आदि को फ्रैगमेंट शेडर में पास करता है।
2. फ्रैगमेंट शेडर (Fragment Shader):
   • फ्रैगमेंट शेडर प्रत्येक पिक्सल का रंग निर्धारित करता है। इसमें लाइटिंग, टेक्सचरिंग, और अन्य विज़ुअल इफेक्ट्स को कस्टमाइज़ करने की क्षमता होती है।
3. ShaderMaterial:
   • Three.js में कस्टम शेडर्स को लागू करने के लिए ShaderMaterial का उपयोग किया जाता है। यह मैटेरियल आपके द्वारा लिखे गए वर्टेक्स और फ्रैगमेंट शेडर्स को सीन में लागू करता है।

कस्टम शेडर लिखने का उदाहरण (Example of Writing a Custom Shader)

नीचे दिए गए उदाहरण में हम एक कस्टम शेडर लिखेंगे जो एक सरल लाइटिंग मॉडल का उपयोग करता है और सीन में एक स्फीयर को रेंडर करता है।

1. वर्टेक्स शेडर (Vertex Shader):

const vertexShader = `
    varying vec3 vNormal;
    
    void main() {
        vNormal = normalize(normalMatrix * normal); // वर्टेक्स नॉर्मल को फ्रैगमेंट शेडर में पास करें
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); // वर्टेक्स की पोज़िशन
    }
`;

2. फ्रैगमेंट शेडर (Fragment Shader):

const fragmentShader = `
    varying vec3 vNormal;
    
    void main() {
        float intensity = dot(vNormal, vec3(0.0, 0.0, 1.0)); // लाइटिंग की गणना करें
        vec3 color = vec3(0.5, 0.2, 1.0) * intensity; // रंग और लाइटिंग का मिश्रण
        gl_FragColor = vec4(color, 1.0); // अंतिम रंग आउटपुट
    }
`;

3. ShaderMaterial का उपयोग (Using ShaderMaterial):

const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});

const sphere = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), material);
scene.add(sphere);

कस्टम शेडर्स के साथ इंटरैक्टिविटी (Adding Interactivity with Custom Shaders)

आप कस्टम शेडर्स के साथ इंटरैक्टिविटी भी जोड़ सकते हैं, जैसे कि समय (time), माउस पोज़िशन, या अन्य यूनिफॉर्म्स का उपयोग करके विज़ुअल इफेक्ट्स को नियंत्रित करना।

1. समय आधारित एनिमेशन (Time-based Animation):

const vertexShader = `
    uniform float uTime; // समय यूनिफॉर्म
    varying vec3 vNormal;
    
    void main() {
        vNormal = normalize(normalMatrix * normal);
        vec3 pos = position + normal * sin(uTime + position.x * 10.0) * 0.1; // समय आधारित वेव इफेक्ट
        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
    }
`;

const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms: {
        uTime: { value: 0.0 } // समय यूनिफॉर्म इनिशियलाइज़ेशन
    }
});

function animate() {
    material.uniforms.uTime.value += 0.05; // समय को अपडेट करें
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();

कस्टम शेडर्स के साथ यूनिफॉर्म्स (Using Uniforms with Custom Shaders)

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

उदाहरण:

const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms: {
        uLightPosition: { value: new THREE.Vector3(10, 10, 10) } // लाइट पोज़िशन यूनिफॉर्म
    }
});

कस्टम शेडर्स का उपयोग करने के लाभ (Benefits of Using Custom Shaders)

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