एडवांस्ड थ्री.जेएस: शेडर मैटेरियल्स और पोस्ट-प्रोसेसिंग

ऑनलाइन थ्री.जेएस के साथ काम करने के मूल में काफी कुछ परिचय हैं, लेकिन आप कई उन्नत विषयों पर सामग्री की कमी को देख सकते हैं। और इनमें से एक विषय तीन आयामी मॉडल के साथ शेड्स और दृश्यों का संयोजन है। कई नौसिखिए डेवलपर्स की नजर में, ये अलग-अलग दुनिया से असंगत चीजें हैं। आज, एक "प्लाज्मा क्षेत्र" के एक सरल उदाहरण के साथ, हम देखेंगे कि ShaderMaterial क्या है और इसके साथ क्या खाया जाता है, क्या प्रभाव प्रभाव होता है, और एक गाया दृश्य के लिए पोस्ट-प्रोसेसिंग करना कितना तेज़ है।

यह माना जाता है कि पाठक थ्री.जेएस के साथ काम करने की मूल बातें से परिचित है और समझता है कि शेड कैसे काम करते हैं। यदि आपने पहले इसका सामना नहीं किया है, तो मैं इसे पहले पढ़ने की सलाह देता हूं:

• लेआउट के लिए Shader प्रोग्रामिंग का परिचय
• रंगों में वोरोनोई मोज़ेक और ज्यामितीय मास्क लागू करें
• सबसे छोटे के लिए तीन.js पर तीन आयामी उत्पाद प्रस्तुतियों

लेकिन चलिए शुरू करते हैं ...

ShaderMaterial - यह क्या है?

हमने पहले ही देखा है कि एक सपाट बनावट का उपयोग कैसे किया जाता है और इसे तीन-आयामी ऑब्जेक्ट पर कैसे बढ़ाया जाता है। चूंकि यह बनावट एक साधारण तस्वीर थी। जब हमने टुकड़े टुकड़े के लेखन की जांच की, तो वहां भी सब कुछ सपाट था। तो: यदि हम एक फ्लैट चित्र बनाने के लिए एक shader का उपयोग कर सकते हैं, तो बनावट के रूप में इसका उपयोग क्यों नहीं करते हैं?

यह इस विचार है जो shader सामग्री के लिए आधार बनाता है। तीन-आयामी वस्तु के लिए सामग्री बनाते समय, हम इसके लिए एक बनावट के बजाय शेड का संकेत देते हैं। अपने मूल रूप में, यह कुछ इस तरह दिखता है:

const shaderMaterial = new THREE.ShaderMaterial({ uniforms: { // ... }, vertexShader: '...', fragmentShader: '...' }); 

सामग्री की बनावट बनाने के लिए टुकड़े टुकड़े करने वाले का उपयोग किया जाएगा, और आप निश्चित रूप से, पूछेंगे कि शीर्ष कतरन क्या करेगा? क्या वह फिर से समन्वय का एक भोज करेंगे? हां, हम इस सरल विकल्प के साथ शुरू करेंगे, लेकिन हम तीन आयामी ऑब्जेक्ट के प्रत्येक शीर्ष के लिए एक ऑफसेट या अन्य जोड़तोड़ भी कर सकते हैं - अब विमान पर कोई प्रतिबंध नहीं है। लेकिन एक उदाहरण के साथ यह सब देखना बेहतर है। शब्दों में, थोड़ा समझा जाता है। एक दृश्य बनाएं और केंद्र में एक गोला बनाएं।

क्षेत्र के लिए एक सामग्री के रूप में, हम ShaderMaterial का उपयोग करेंगे:

 const geometry = new THREE.SphereBufferGeometry(30, 64, 64); const shaderMaterial = new THREE.ShaderMaterial({ uniforms: { // . . . }, vertexShader: document.getElementById('sphere-vertex-shader').textContent, fragmentShader: document.getElementById('sphere-fragment-shader').textContent }); const sphere = new THREE.Mesh(geometry, shaderMaterial); SCENE.add(sphere); 

शीर्ष shader तटस्थ हो जाएगा:

 void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } 

ध्यान दें कि तीन.js अपने समान चर को पार करते हैं। हमें कुछ करना नहीं है, वे निहित हैं। अपने आप में, उनके पास सभी प्रकार के मैट्रीज़ हैं, जिनमें से हमारे पास पहले से ही जेएस से पहुंच है, साथ ही साथ कैमरे की स्थिति भी है। कल्पना कीजिए कि shaders की शुरुआत में खुद कुछ डाला जाता है:

 // = object.matrixWorld uniform mat4 modelMatrix; // = camera.matrixWorldInverse * object.matrixWorld uniform mat4 modelViewMatrix; // = camera.projectionMatrix uniform mat4 projectionMatrix; // = camera.matrixWorldInverse uniform mat4 viewMatrix; // = inverse transpose of modelViewMatrix uniform mat3 normalMatrix; // = camera position in world space uniform vec3 cameraPosition; 

इसके अलावा, कई विशेषता वेरिएबल को वर्टिशर शेडर में पास किया जाता है:

 attribute vec3 position; attribute vec3 normal; attribute vec2 uv; 

नामों से यह स्पष्ट है कि यह क्या है - वर्तमान शीर्ष की स्थिति, इस बिंदु पर सतह के लिए सामान्य और बनावट पर निर्देशांक है जो शिखर के अनुरूप है।

परंपरागत रूप से, अंतरिक्ष में निर्देशांक को (x, y, z) के रूप में नामित किया जाता है, और बनावट विमान पर (u, v) के रूप में समन्वयित किया जाता है। इसलिए चर का नाम। आप अक्सर विभिन्न उदाहरणों में उनसे मिलेंगे। सिद्धांत रूप में, हमें उनके साथ काम करने के लिए इन निर्देशांकों को टुकड़े करने वाले को स्थानांतरित करना होगा। हम कर लेंगे।

 varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } 

एक शुरुआत के लिए, टुकड़ा shader कुछ इस तरह होना चाहिए:

 #define EPSILON 0.02 varying vec2 vUv; void main() { if ((fract(vUv.x * 10.0) < EPSILON) || (fract(vUv.y * 10.0) < EPSILON)) { gl_FragColor = vec4(vec3(0.0), 1.0); } else { gl_FragColor = vec4(1.0); } } 

बस एक जाल बनाओ। यदि आप थोड़ा सोचते हैं, तो हवाई जहाज पर यह सिर्फ चौराहों का एक ग्रिड होगा, लेकिन जब से हम इसे एक गोले पर सुपरइम्पोज करते हैं, यह विकृत हो जाता है, एक ग्लोब में बदल जाता है। विकिपीडिया पर एक अच्छी तस्वीर है जो बता रही है कि:

यही है, टुकड़े टुकड़े की छाया में हम एक सपाट बनावट बनाते हैं, जैसा कि इस चित्रण में केंद्र में है, और तीन.जेएस फिर इसे गोले पर खींचता है। बहुत सहज है।

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

ठीक है, आप इसके बारे में क्या कर सकते हैं?

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

हमारे उदाहरण में, हम एक क्षेत्र को कवर करने वाली आग बनाएंगे। दो गोले होंगे - एक साधारण (अंदर), और दूसरा शेडर सामग्री से (बाहर, एक बड़े दायरे के साथ)। एक और गोले को जोड़ने से कोई टिप्पणी नहीं होगी।

सबसे पहले, हमारी सामग्री में शेड के लिए एक समान चर के रूप में समय जोड़ें। बिना समय के कहीं नहीं। हमने इसे पहले ही शुद्ध जेएस में कर दिया था, लेकिन थ्री.जेएस में यह उतना ही सरल है। शेडर्स में समय को uTime कहते हैं, और TIME वैरिएबल में संग्रहीत किया जाता है:

 function updateUniforms() { SCENE.traverse((child) => { if (child instanceof THREE.Mesh && child.material.type === 'ShaderMaterial') { child.material.uniforms.uTime.value = TIME; child.material.needsUpdate = true; } }); } 

हम हर कॉल को चेतन फ़ंक्शन के साथ अपडेट करते हैं:

 function animate() { requestAnimationFrame(animate); TIME += 0.005; updateUniforms(); render(); } 

आग

आग पैदा करना अनिवार्य रूप से एक परिदृश्य उत्पन्न करने के समान है, लेकिन ऊंचाइयों के बजाय, रंग। या पारदर्शिता, जैसा कि हमारे मामले में है।

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

 uniform float uTime; varying vec2 vUv; float rand(vec2); float noise(vec2); void main() { vec2 position1 = vec2(vUv.x * 4.0, vUv.y - uTime); vec2 position2 = vec2(vUv.x * 4.0, vUv.y - uTime * 2.0); vec2 position3 = vec2(vUv.x * 4.0, vUv.y - uTime * 3.0); float color = ( noise(position1 * 5.0) + noise(position2 * 10.0) + noise(position3 * 15.0)) / 3.0; gl_FragColor = vec4(0.0, 0.0, 0.0, color - smoothstep(0.1, 1.3, vUv.y)); } float rand(vec2 seed) { return fract(sin(dot(seed, vec2(12.9898,78.233))) * 43758.5453123); } float noise(vec2 position) { vec2 blockPosition = floor(position); float topLeftValue = rand(blockPosition); float topRightValue = rand(blockPosition + vec2(1.0, 0.0)); float bottomLeftValue = rand(blockPosition + vec2(0.0, 1.0)); float bottomRightValue = rand(blockPosition + vec2(1.0, 1.0)); vec2 computedValue = smoothstep(0.0, 1.0, fract(position)); return mix(topLeftValue, topRightValue, computedValue.x) + (bottomLeftValue - topLeftValue) * computedValue.y * (1.0 - computedValue.x) + (bottomRightValue - topRightValue) * computedValue.x * computedValue.y; } 

ताकि लौ पूरे क्षेत्र को कवर न करे, हम चौथे रंग पैरामीटर के साथ खेलते हैं - पारदर्शिता - और इसे y समन्वय में बाँधते हैं। हमारे मामले में, यह विकल्प बहुत सुविधाजनक है। अधिक सामान्य शब्दों में, हम शोर के लिए पारदर्शिता के साथ एक ढाल लागू करते हैं।

कई बार इनकी तरह, यह स्मूथस्टेप फ़ंक्शन को याद रखने के लिए उपयोगी है।

सामान्य तौर पर, शेड का उपयोग करके आग पैदा करने का ऐसा तरीका एक क्लासिक है। आप अक्सर उनसे विभिन्न स्थानों पर मिलेंगे। जादू की संख्या के साथ खेलना उपयोगी होगा - वे यादृच्छिक रूप से उदाहरण में सेट होते हैं, और प्लाज्मा कैसा दिखेगा, यह उन पर निर्भर करता है।

आग को और अधिक रोचक बनाने के लिए, आइए हम शीर्ष पर जाएं और थोड़ा सा छायाकार ...

अंतरिक्ष में लौ को थोड़ा "पीसा" कैसे बनाया जाए? शुरुआती लोगों के लिए, यह प्रश्न इसकी सरलता के बावजूद, बड़ी कठिनाइयों का कारण बन सकता है। मैंने इस मुद्दे को हल करने के लिए बहुत ही जटिल दृष्टिकोण देखा, लेकिन संक्षेप में - हमें "इसके केंद्र से" लाइनों के किनारे पर कोने को आसानी से स्थानांतरित करने की आवश्यकता है। To और fro, to और fro। तीन.js पहले ही हमें शीर्ष और सामान्य की वर्तमान स्थिति से गुजार चुके हैं - हम उनका उपयोग करेंगे। "आगे और पीछे" के लिए कुछ सीमित फ़ंक्शन फिट होंगे, उदाहरण के लिए, एक साइन। आप बेशक प्रयोग कर सकते हैं, लेकिन साइन डिफ़ॉल्ट विकल्प है।

पता नहीं क्या-क्या लेना - देना है। बेहतर अभी तक, विभिन्न आवृत्तियों के साथ साइन का योग।

हम निर्देशांक को सामान्य से प्राप्त मान में बदल देते हैं और पहले से ज्ञात सूत्र के अनुसार पुनर्गणना करते हैं।

 uniform float uTime; varying vec2 vUv; void main() { vUv = uv; vec3 delta = normal * sin(position.x * position.y * uTime / 10.0); vec3 newPosition = position + delta; gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); } 

जो हमें मिलता है वह अब काफी क्षेत्र नहीं है। यह ... मुझे यह भी पता नहीं है कि इसका कोई नाम है या नहीं। लेकिन, फिर से, बाधाओं के साथ खेलने के लिए मत भूलना - वे बहुत प्रभावित करते हैं। इस तरह के प्रभाव पैदा करते समय, अक्सर परीक्षण और त्रुटि के द्वारा कुछ का चयन किया जाता है और अपने आप में "गणितीय अंतर्ज्ञान" विकसित करने के लिए बहुत उपयोगी होता है - अधिक या कम कल्पना करने की क्षमता कि कोई फ़ंक्शन कैसे व्यवहार करता है, यह किस चर पर निर्भर करता है।

इस स्तर पर, हमारे पास एक दिलचस्प, लेकिन थोड़ी अनाड़ी छवि है। तो पहले, हम पोस्ट-प्रोसेसिंग पर एक नज़र डालते हैं, और फिर एक जीवित उदाहरण पर चलते हैं।

पोस्ट प्रोसेसिंग

प्रदान की गई थ्री.जेएस छवि के साथ कुछ करने की क्षमता बहुत उपयोगी चीज है, जबकि कई पाठों की श्रृंखला में अवांछनीय रूप से भुला दिया जाता है। तकनीकी रूप से, इसे निम्नानुसार कार्यान्वित किया जाता है: रेंडर ने हमें जो छवि दी है, वह इफ़ेक्ट कॉमपोज़र (जब तक यह एक ब्लैक बॉक्स है) को भेजी जाती है, जो अपने आप में कुछ को शर्मसार करती है और अंतिम छवि को कैनवास पर प्रदर्शित करती है। यही है, रेंडरर के बाद, एक और मॉड्यूल जोड़ा जाता है। हम इस संगीतकार के मापदंडों को स्थानांतरित करते हैं - प्राप्त छवि के साथ क्या करना है। ऐसे एक पैरामीटर को पास कहा जाता है। एक अर्थ में, संगीतकार कुछ गुल की तरह काम करता है - यह कुछ भी नहीं करता है, हम इसे प्लगइन्स देते हैं जो पहले से ही काम करते हैं। शायद ऐसा कहना पूरी तरह से सही नहीं है, लेकिन विचार स्पष्ट होना चाहिए।

जो कुछ हम आगे उपयोग करेंगे, वह तीन.js की मूल संरचना में शामिल नहीं है, इसलिए हम खुद पर निर्भरता की कुछ निर्भरता और निर्भरता को जोड़ते हैं:

 <script src='https://unpkg.com/three@0.99.0/examples/js/postprocessing/EffectComposer.js'></script> <script src='https://unpkg.com/three@0.99.0/examples/js/postprocessing/RenderPass.js'></script> <script src='https://unpkg.com/three@0.99.0/examples/js/postprocessing/ShaderPass.js'></script> <script src='https://unpkg.com/three@0.99.0/examples/js/shaders/CopyShader.js'></script> <script src='https://unpkg.com/three@0.99.0/examples/js/shaders/LuminosityHighPassShader.js'></script> <script src='https://unpkg.com/three@0.99.0/examples/js/postprocessing/UnrealBloomPass.js'></script> 

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

इसके मूल रूप में, संगीतकार इस तरह बनाया गया है:

 COMPOSER = new THREE.EffectComposer(RENDERER); COMPOSER.setSize(window.innerWidth, window.innerHeight); const renderPass = new THREE.RenderPass(SCENE, CAMERA); renderPass.renderToScreen = true; COMPOSER.addPass(renderPass); 

रेंडरपास वास्तव में कुछ नया नहीं करता है। यह सिर्फ एक नियमित रेंडरर से जो हम प्राप्त करते थे, उसे प्रस्तुत करता है। वास्तव में, यदि आप RenderPass के स्रोत कोड को देखते हैं, तो आप वहां मानक रेंडरर पा सकते हैं। चूंकि अब प्रतिपादन वहां हो रहा है, हमें रेंडरर को अपनी स्क्रिप्ट में कंपोजर से बदलना होगा:

 function render() { // RENDERER.render(SCENE, CAMERA); COMPOSER.render(SCENE, CAMERA); } 

पहली पास के रूप में RenderPass का उपयोग करने वाला यह तरीका इम्पैक्ट कॉमपोजर के साथ काम करते समय मानक अभ्यास है। आमतौर पर हमें पहले दृश्य की एक प्रदत्त छवि प्राप्त करने की आवश्यकता होती है, फिर उसके साथ कुछ करने की।

तीन.js से उदाहरणों में, पोस्टप्रोसेसिंग अनुभाग में, आप UnrealBloomPass नामक एक चीज़ पा सकते हैं। यह अवास्तविक इंजन से एक पोर्ट की गई स्क्रिप्ट है। यह थोड़ा चमक जोड़ता है जिसका उपयोग अधिक सुंदर प्रकाश व्यवस्था बनाने के लिए किया जा सकता है। अक्सर यह छवि सुधारने का पहला कदम होगा।

 const bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 1, 0.1); bloomPass.renderToScreen = true; COMPOSER.addPass(bloomPass); 

कृपया ध्यान दें: रेंडरटूटस्क्रीन विकल्प केवल अंतिम पास के लिए सेट किया गया है जिसे हमने संगीतकार को दिया था।

लेकिन आइए पहले ही देखें कि इस ब्लोमपैस ने हमें किस तरह की चमक प्रदान की है और यह किस तरह से फिट बैठता है:

सहमत हूँ, यह सिर्फ एक क्षेत्र और एक सामान्य प्रकाश स्रोत की तुलना में बहुत अधिक दिलचस्प है, क्योंकि वे आमतौर पर तीन.js पर प्रारंभिक पाठ में दिखाए जाते हैं।

लेकिन हम और भी आगे बढ़ेंगे ...

अधिक छायादार भगवान के लिए!

यह कंसोल.लॉग का उपयोग करने और संगीतकार की संरचना को देखने के लिए बहुत उपयोगी है। इसमें, आप रेंडरटार्ग 1, रेंडरटार्गेट 2, आदि नामों के साथ कुछ तत्व पा सकते हैं, जहां संख्याएं पास किए गए सूचकांक के सूचकांकों के अनुरूप हैं। और फिर यह स्पष्ट हो जाता है कि EffectComposer को क्यों कहा जाता है। यह एसवीजी में फिल्टर के सिद्धांत पर काम करता है। याद रखें, क्या आप दूसरों में कुछ फिल्टर करने के परिणाम का उपयोग कर सकते हैं? यहाँ एक ही बात है - आप प्रभावों को जोड़ सकते हैं।

तीन.js वस्तुओं और कई अन्य पुस्तकालयों की आंतरिक संरचना को समझने के लिए कंसोल.लॉग का उपयोग करना बहुत उपयोगी है। बेहतर क्या है यह समझने के लिए अधिक बार इस दृष्टिकोण का उपयोग करें।

एक और पास जोड़ें। इस बार यह ShaderPass होगा।

 const shader = { uniforms: { uRender: { value: COMPOSER.renderTarget2 }, uTime: { value: TIME } }, vertexShader: document.getElementById('postprocessing-vertex-shader').textContent, fragmentShader: document.getElementById('postprocessing-fragment-shader').textContent }; const shaderPass = new THREE.ShaderPass(shader); shaderPass.renderToScreen = true; COMPOSER.addPass(shaderPass); 

RenderTarget2 में पिछले पास का परिणाम होता है - ब्लूमोमपास (यह एक पंक्ति में दूसरा था), हम इसे एक बनावट के रूप में उपयोग करते हैं (यह अनिवार्य रूप से एक फ्लैट रेंडर की गई छवि है) और इसे नए शैडर के लिए एक समान चर के रूप में पास करते हैं।

संभवतः यह सभी जादू को तोड़ने और साकार करने के लायक है ...

इसके बाद, एक सिंपल वर्टेक्स शेडर बनाएं। ज्यादातर मामलों में, इस स्तर पर, हमें लंबों के साथ कुछ भी करने की आवश्यकता नहीं है, हम केवल निर्देशांक (यू, वी) को टुकड़े करने वाले को पास करते हैं:

 varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } 

और टुकड़े में हम अपने स्वाद और रंग के लिए मज़ेदार हो सकते हैं। उदाहरण के लिए, हम एक हल्का गड़बड़ प्रभाव जोड़ सकते हैं, सब कुछ काला और सफेद बना सकते हैं और चमक / विपरीत के साथ खेल सकते हैं:

 uniform sampler2D uRender; uniform float uTime; varying vec2 vUv; float rand(vec2); void main() { float randomValue = rand(vec2(floor(vUv.y * 7.0), uTime / 1.0)); vec4 color; if (randomValue < 0.02) { color = texture2D(uRender, vec2(vUv.x + randomValue - 0.01, vUv.y)); } else { color = texture2D(uRender, vUv); } float lightness = (color.r + color.g + color.b) / 3.0; color.rgb = vec3(smoothstep(0.02, 0.7, lightness)); gl_FragColor = color; } float rand(vec2 seed) { return fract(sin(dot(seed, vec2(12.9898,78.233))) * 43758.5453123); } 

आइए देखें परिणाम:

जैसा कि आप देख सकते हैं, फ़िल्टर को गोले पर लगाया गया था। यह अभी भी तीन आयामी है, कुछ भी नहीं टूटा है, लेकिन कैनवास पर हमारे पास एक संसाधित छवि है।

निष्कर्ष

थ्रीजेज में शडर सामग्री और पोस्ट-प्रोसेसिंग दो छोटे हैं, लेकिन बहुत शक्तिशाली उपकरण हैं जो निश्चित रूप से उपयोग करने लायक हैं। उनके उपयोग के लिए बहुत सारे विकल्प हैं - सब कुछ आपकी कल्पना से सीमित है। यहां तक ​​कि उनकी मदद से सबसे सरल दृश्यों को मान्यता से परे बदला जा सकता है।