वेबजीएल बनाम ओपनजीएल में शेडर्स?

Question

मैं वेबजीएल और विशेष रूप से तीन.जेएस में उपयोग करने के लिए शेडर्स का उपयोग करना चाहता हूं। क्या जीएलएसएल का एक विशिष्ट संस्करण है कि WebGL और three.js का उपयोग करता है?

Answer 1

WebGL shaders GLSL ES 1.017 कल्पना

https://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf

कि कई मायनों में डेस्कटॉप ओपन से अलग है का पालन करें। एक यह जीएलएसएल ईएस का 1.0 संस्करण है जहां जीएलएसएल (संस्करण नहीं) के संस्करण 4.2 पर डेस्कटॉप जीएल के रूप में

वेबजीएल जीएलएसएल के बीच एक बड़ा अंतर और इंटरनेट पर शेडर्स के बारे में कई लेख हैं ओपनजीएल ईएस 2.0 में कोई निश्चित फ़ंक्शन पाइपलाइन नहीं है और इसलिए WebGL में कोई निश्चित फ़ंक्शन पाइपलाइन नहीं है।

फिक्स्ड फ़ंक्शन पाइपलाइन ओपनजीएल 1.0 से छोड़ी गई है जहां आप glLight और glVertex और glNormal जैसे कमांड का उपयोग करेंगे। और फिर आपके शेडर्स को उस डेटा को संदर्भित करने के लिए एक तरीका चाहिए। ओपनजीएल ईएस और वेबजीएल में जो कुछ भी चला गया है क्योंकि सब कुछ एक शेडर उपयोगकर्ता के लिए 100% है। सभी वेबजीएल आपको अपने इनपुट (विशेषताओं, वर्दी) को परिभाषित करने देता है और जो भी आप चाहते हैं उन्हें नाम दें।

WebGL2 shaders GLSL ES 3.00 कल्पना

https://www.khronos.org/registry/OpenGL/specs/es/3.0/es_spec_3.0.pdf

Three.js के रूप में पालन करें, Three.js एक 3 डी इंजन है और मानक आदानों, नाम, और अन्य सुविधाओं के अपने स्वयं के सेट प्रदान करता है, जब यह एक शेडर उत्पन्न करता है। कुछ विवरणों के लिए See the docs। The uniforms and attributes provided by default are documented here। आप look at the source या check out an example भी कर सकते हैं।

थ्री.जेएस भी RawShaderMaterial नामक कुछ प्रदान करता है जो किसी भी पूर्वनिर्धारित चीजों को स्पष्ट रूप से नहीं जोड़ता है, इस मामले में आप मानक वेबजीएल जीएलएसएल लिखते हैं।

आप तीन.जेएस के मानक विशेषताओं और वर्दी here पा सकते हैं।

जीएलएसएल सीखने के लिए एक जगह के रूप में मुझे वास्तव में कोई सुझाव नहीं है। यह वास्तव में प्रोग्रामिंग के साथ आपके अनुभव के स्तर पर निर्भर करता है और आप कैसे सीखना पसंद करते हैं। मैं मैनुअल पढ़ने से बेहतर उदाहरण देखकर सीखता हूं। शायद कोई और कुछ लिंक जोड़ सकता है।

Shaders as a concept are pretty simple। आप शेडर्स की एक जोड़ी बनाते हैं, उन्हें इनपुट के साथ सेट अप करते हैं, gl.drawArrays या gl.drawElements को कॉल करें और गिनती में पास करें। आपके कशेरुक शेडर को गिनती के समय कहा जाएगा और gl_Position सेट करने की आवश्यकता है। प्रत्येक 1 से 3 बार इसे वेबजीएल कहा जाता है, फिर एक बिंदु, रेखा या त्रिकोण खींचा जाएगा। ऐसा करने के लिए यह आपके पिक्सेल को प्रत्येक पिक्सेल के लिए पूछेगा कि वह उस पिक्सेल को किस रंग को आकर्षित करने के बारे में है। टुकड़े टुकड़े को gl_FragColor सेट करने की आवश्यकता है। शेडर्स को attributes, uniforms, textures और varyings से डेटा प्राप्त होता है। attributes प्रति कशेरुक डेटा हैं। वे अपने डेटा को बफर से खींचते हैं, आपके वर्टेक्स शेडर के प्रति पुनरावृत्ति प्रति डेटा डेटा का एक टुकड़ा। Uniforms शेडर चलाने से पहले वैश्विक चर सेट करने की तरह हैं। आप varying के साथ एक कशेरुक शेडर से डेटा को पास कर सकते हैं। उस डेटा को या विविधता से अलग किया जाएगा;) एक आदिम (त्रिभुज) के प्रत्येक चरम के लिए निर्धारित मूल्यों के बीच खंड के रूप में प्रत्येक पिक्सेल के लिए रंग प्रदान करने के लिए कहा जाता है।

रचनात्मक रूप से शेडर को डेटा की आपूर्ति करने के लिए आप पर निर्भर है और gl_Position और gl_FragColor सेट करने के लिए रचनात्मक रूप से उस डेटा का उपयोग करें।मुझे उदाहरण देखने से अधिकतर विचार मिलते हैं।

GLSL ही सुंदर सीधे आगे है। कुछ प्रकार int, float, vec2, vec3, vec4, mat2, mat3, mat4 हैं। वे ऑपरेटर +, -, *, / आदि का जवाब देते हैं। कुछ कार्यों में निर्मित हैं।

आप WebGL Reference Card के अंतिम 2 पृष्ठों पर सभी GLSL जानकारी का एक संक्षिप्त संस्करण पा सकते हैं।

कि मेरे लिए काफी था। वह और working programs पर देख रहा है।

सबसे अधिक भाषाओं बनाम मेरे लिए एक दिलचस्प बात यह है vec खेतों और swizzling के लिए समानार्थी शब्द था। उदाहरण

vec4 v = vec4(1.0, 2.0, 3.0, 4.0); 

के लिए एक vec4 आप x,y,z,w या s,t,u,v या r,g,b,a या सरणी शैली का उपयोग v के विभिन्न घटकों को संदर्भित कर सकते। इसलिए उदाहरण के

के लिए

float red = v.r; // OR 
float red = v.x; // same thing OR 
float red = v.s; // same thing OR 
float red = v[0]; // same thing 

दूसरी बात आप कर सकते हैं एक प्रकार का शराबी

vec4 color = v.bgra; // swap red and blue 
vec4 bw = v.ggga; // make a monotone color just green & keep alpha 

है और तुम भी उप-घटक

vec2 just_xy = v.xy;