OpenGL ES 2.0: การตั้งค่าการฉาย 2D


15

บทความนี้อธิบายโดยทั่วไปวิธีการวาดกราฟิค OpenGL 2D ที่คมชัดโดยใช้ฟังก์ชั่นฟังก์ชั่นคงที่

เนื่องจาก OpenGL ES 2.0 มีฟังก์ชั่น ES 1.x บางฟังก์ชั่นไม่สามารถใช้งานได้ (เช่น: glOrtho ()) การทำงานของพวกเขาจะต้องถูกแทนที่ใน Fragment / Vertex shaders

คำถามของฉันคือวิธีการตั้งค่าการฉายภาพ 2D ต่อไปนี้ในฟังก์ชั่นไปป์ไลน์ที่ตั้งโปรแกรมได้?

const XSize = 640, YSize = 480
glMatrixMode (GL_PROJECTION)
glLoadIdentity ();
glOrtho (0, XSize, YSize, 0, 0, 1)
glMatrixMode (GL_MODELVIEW)

วิธีการกำหนดค่า Fragment และ Vertex shaders เพื่อทดแทนฟังก์ชั่นการตั้งค่าการฉาย 2D แบบคงที่ที่กล่าวมาทั้งหมด?

คำตอบ:


12

ในเอ็นจิน OpenGL ES 2.X ของฉันฉันคำนวณเมทริกซ์ MVP (การฉายแบบจำลองมุมมอง) บน CPU Side และฉีดในส่วนที่ยอด

การฉายฉากเป็น4 * 4 เมทริกซ์ เมื่อฉันมี MVP ฉันฉีดมันลงในส่วนยอดด้วย:

 mMvpLoc = getUniformLocation("uMvp");
 glUniformMatrix4fv(mMvpLoc, 1, false, mMvp.pointer());

mMvp คือเมทริกซ์ของฉัน 4 * 4 ที่ด้าน CPU getUniformLocation สามารถทำได้เพียงครั้งเดียวหลังจากที่คุณโหลดโปรแกรม shader

ตัวอย่างของจุดสุดยอด shader:

uniform mat4    uMvp;
attribute vec3 aPosition;
varying vec4 vColor;

void main() {
   vec4 position = vec4(aPosition.xyz, 1.);
   gl_Position = uMvp * position;
}

gl_Position เป็นตัวแปรที่กำหนดไว้ล่วงหน้าพิเศษ มันจะต้องมีตำแหน่งของจุดสุดยอด

ตัวอย่างของ shader ส่วน สำหรับแต่ละจุดที่จะวาดต้องคำนวณ "gl_FragColor" สีสุดท้าย:

#ifdef GL_ES
precision highp float;
#endif

void main(void)
{
   gl_FragColor = vColor;
}

โปรแกรมนี้วาดรูปสามเหลี่ยมที่มีการปรับสีให้เรียบสำหรับจุดสุดยอดแต่ละจุด

เพื่อการสอนที่ดีขึ้นให้ดูเอกสารที่ยอดเยี่ยมนี้


สวัสดีเอลลิสนี่เป็นคำตอบที่ยอดเยี่ยมและสมบูรณ์แบบ ขอบคุณมาก. ความนับถือ.
Bunkai.Satori

9

จาก glOrtho doc ด้วยค่าที่ถูกแทนที่:

         2
    ------------       0              0             -1
       XSize
                       2
        0         ------------        0              1
                   - Ysize
        0              0              -2            -1
        0              0              0              1

เก็บเมทริกซ์นี้ในรูปแบบเดียวกันจากนั้นคุณสามารถใช้มัน (เช่นผลิตภัณฑ์ M. v) กับตำแหน่งจุดยอดที่คุณเข้ามา


เรียน Bahbar ขอขอบคุณสำหรับคำตอบ ดังนั้นโดยทั่วไปไม่มีอะไรแตกต่างกันใน ES2.0 เพียงแค่สร้าง glOrtho () แทนเมทริกซ์ด้วยตนเอง
Bunkai.Satori

@ Bunkai.Satori: ปกติแล้วมีอีกเล็กน้อยที่ GL จะอัปโหลดคอมโพสิตของมุมมองแบบจำลองและการฉายภาพให้เหมือนกัน
Bahbar
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.