वेबग्ल प्रोजेक्शन मैपिंग/क्वाड वारिंग/कोने पिन

Question

मैं स्क्रीन पिक्सेल से संबंधित मनमाने ढंग से स्थितियों में कोनों के साथ एक आयताकार बनावट को मैप करना चाहता हूं। कुछ drawQuad(x1,y1, x2,y2, x3,y3, x4,y4) की तरह कुछ। क्या WebGL के साथ ऐसा करने का कोई डेमो है?

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

मुझे क्वार्ट्ज संगीतकार में an explanation with a GLSL vertex shader मिला।

---

अद्यतन

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

Answer 1

मैं दृढ़ता से "सीखना WebGL" से पढ़ ट्यूटोरियल सुझाव देते हैं।

क्वाड के प्रत्येक चरम के लिए आप इसे "यूवी निर्देशांक" भेजते हैं। यूवी निर्देशांक vec2 डेटा हैं जो बताते हैं कि बनावट का कौन सा हिस्सा वर्टेक्स से बंधे हैं।

तो उदाहरण के लिए, (0,0) यूवी बनावट के ऊपरी बाएं कोने का प्रतिनिधित्व करता है, जबकि (0.3, 0.4) बनावट की स्थिति का प्रतिनिधित्व करता है जो बनावट की 30% चौड़ाई और 40% ऊंचाइयों के अनुरूप होता है।

GLSL शेडर में, वहाँ एक विशेष समारोह है - texture2D, और यहाँ उपयोग है:

uniform sampler2D uTexture; 
varying vec2 vUV; 
void main() 
    vec4 color_from_texture = texture2D (uTexture, vUV); 
    gl_FragColor = color_from_texture; 
} 

इस नमूने बनावट कहा जाता है, और आप texture2D कार्यप्रणाली को कॉल करके कुछ की स्थिति में बनावट से डेटा पढ़ने।

तो चौकोर के लिए, शिखरों में पदों (x1, y1), (x2, y1), (x1, y2), (x2, y2) और उनके संबंधित यूवी निर्देशांक (0.0, 0.0), (1.0 , 0,0), (0.0, 1.0), (1.0, 1.0)। ध्यान दें कि हमने यूवी निर्देशांक को पूरी तरह से एक बिंदु से दूसरे में परिभाषित करके बनावट को कैसे बनाया।

वर्टेक्स शेडर कुछ इस तरह दिखेगा:

attribute vec2 aUV; 
attribute vec2 aVertexPos; 
varying vec2 vUV; 
void main() { 
    vUV = aUv; 
    gl_Position = vec4(aVertexPos, 1.0); // maybe modelViewMatrix * projMatrix * vec4(aVertexPos, 1.0) 
} 

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

ध्यान से इस पढ़ें, और उसके बाद, ट्रैक्टर बनाने आसान होना चाहिए: http://learningwebgl.com/blog/?p=507

आशा इस मदद करता है।

• • •  

लाइव उदाहरण: http://abstract-algorithm.com/quad.html