Vertex Shader: คืออะไร หน้าที่ และหลักการทำงาน

Vertex Shader คืออะไร?

Vertex Shader คือขั้นตอนที่สามารถโปรแกรมได้ของไปป์ไลน์กราฟิกที่ประมวลผลแต่ละจุดยอดของโมเดล 3D เป็นรายบุคคล จุดยอด (vertex) คือจุดในปริภูมิสามมิติที่มีแอตทริบิวต์: พิกัด xyz, ปกติ, สี และพิกัดพื้นผิว UV

แตกต่างจากไปป์ไลน์ฟังก์ชันคงที่ (fixed-function pipeline) ซึ่งการแปลงดำเนินการตามอัลกอริทึมที่ตายตัว Vertex Shader ให้ผู้พัฒนาควบคุมการแปลงจุดยอดได้อย่างสมบูรณ์ ซึ่งช่วยให้สามารถใช้งาน แอนิเมชันเชิงกระบวนการ การเปลี่ยนรูปโมเดล การสกินโครงกระดูก และการแปลงทางคณิตศาสตร์ใดๆ ทางฝั่ง GPU

ตำแหน่งของ Vertex Shader ในไปป์ไลน์กราฟิก

ไปป์ไลน์กราฟิก OpenGL ES รวมลำดับขั้นตอนจากข้อมูลอินพุตไปจนถึงภาพสุดท้าย Vertex Shader อยู่หลังจากขั้นตอนการประกอบจุดยอด (vertex assembly) และก่อนขั้นตอนการแรสเตอร์ไรซ์ แต่ละจุดยอดที่ส่งจาก CPU ผ่านบัฟเฟอร์จุดยอดจะผ่าน Vertex Shader เพียงครั้งเดียว และผลลัพธ์จะถูกส่งต่อไปยังขั้นตอนถัดไปสำหรับการประกอบพรimitives

Vertex Shader ทำงานอย่างไร?

Vertex Shader รับแอตทริบิวต์จุดยอดจากบัฟเฟอร์จุดยอด (VBO) ผ่านตัวชี้แอตทริบิวต์จุดยอดที่กำหนดค่าในโค้ด CPU ผู้พัฒนาเขียนโค้ด shader ใน GLSL (OpenGL Shading Language) หรือภาษาที่เทียบเท่า ซึ่งไดรเวอร์ GPU จะคอมไพล์เป็นคำสั่งเครื่องสำหรับชิปเฉพาะ

ขั้นตอนการประมวลผลจุดยอด

สำหรับแต่ละจุดยอด Vertex Shader จะดำเนินการสามอย่างตามลำดับ: การอ่านแอตทริบิวต์อินพุต — การใช้การแปลงที่กำหนดโดยผู้พัฒนา — การเขียนผลลัพธ์ไปยังตัวแปรเอาต์พุต เอาต์พุตขั้นต่ำที่จำเป็นคือ ตำแหน่งจุดยอดในสเปซคลิป (gl_Position) ข้อมูลเอาต์พุตอื่นๆ ทั้งหมด (สี, ปกติ, พิกัดพื้นผิว) จะถูกประมาณค่าและส่งต่อไปยังขั้นตอนถัดไป — Fragment Shader

#version 300 es
in vec3 aPosition;
in vec2 aTexCoord;
uniform mat4 uMVP;
out vec2 vTexCoord;

void main() {
    gl_Position = uMVP * vec4(aPosition, 1.0);
    vTexCoord = aTexCoord;
}

งานหลักของ Vertex Shader

Vertex Shader แก้ปัญหางานต่างๆ มากมายของไปป์ไลน์กราฟิกที่เกี่ยวข้องกับการแปลงเรขาคณิต แต่ละงานดำเนินการผ่านการดำเนินการทางคณิตศาสตร์บนเวกเตอร์และเมทริกซ์ ซึ่งทำงานแบบขนานสำหรับจุดยอดนับพันพร้อมกัน

การแปลงพิกัดผ่าน MVP

งานพื้นฐานและทั่วไปที่สุดคือการคูณพิกัดจุดยอดด้วยเมทริกซ์ model, view และ projection (MVP) เมทริกซ์ MVP แปลงจุดยอดจากสเปซโมเดลท้องถิ่นไปยังสเปซคลิป (clip space) ซึ่งจากนั้นจะถูกทำให้เป็นมาตรฐานและแปลงเป็นพิกัดหน้าจอในขั้นตอนอัตโนมัติของไปป์ไลน์

แอนิเมชันโครงกระดูก (Skinning)

สำหรับตัวละครที่เคลื่อนไหว Vertex Shader จะใช้แอนิเมชันโครงกระดูก (skinning) แต่ละจุดยอดจะผูกติดกับกระดูกหลายชิ้นด้วยน้ำหนักที่กำหนด Vertex blending — ผลรวมถ่วงน้ำหนักของการแปลงจากกระดูกที่ผูกไว้ — ช่วยให้ผิวของตัวละครเปลี่ยนรูปได้อย่างราบรื่นเมื่อโครงกระดูกเคลื่อนที่

การเปลี่ยนรูปเรขาคณิตเชิงกระบวนการ

Vertex Shader สามารถปรับเปลี่ยนเรขาคณิตตามเวลาหรือพารามิเตอร์ uniform อื่นๆ โดยไม่ต้องให้ CPU มีส่วนร่วม Wave deformation, การเคลื่อนที่ด้วยสัญญาณรบกวน Perlin และเอฟเฟกต์ระลอกน้ำ — เอฟเฟกต์ทั้งหมดนี้ทำงานใน vertex shader โดยไม่ต้องโหลดเรขาคณิตจาก RAM ซ้ำ

Vertex Shader กับ Fragment Shader: ความแตกต่าง

แม้ว่า shader ทั้งสองประเภทจะเป็นขั้นตอนที่สามารถโปรแกรมได้ของไปป์ไลน์กราฟิก แต่ Vertex Shader และ Fragment Shader แก้ปัญหาที่แตกต่างกันโดยพื้นฐานและทำงานในขั้นตอนที่ต่างกันของการประมวลผลภาพ

ความแตกต่างหลักคือ ความถี่ในการเรียก Vertex Shader ถูกเรียกหนึ่งครั้งต่อจุดยอด ในขณะที่ Fragment Shader ถูกเรียกสำหรับแต่ละแฟรกเมนต์ (พิกเซล) ในฉากที่มีความละเอียดสูง จำนวนการเรียก Fragment Shader จะมากกว่าจำนวนการเรียก Vertex Shader เป็นพันเท่า ทำให้การปรับแต่ง pixel shader มีความสำคัญยิ่งขึ้น

ประสิทธิภาพและการปรับแต่ง Vertex Shader

ประสิทธิภาพของ Vertex Shader มีความสำคัญอย่างยิ่งสำหรับแอปพลิเคชันแบบเรียลไทม์ โดยเฉพาะในการพัฒนาแอปมือถือที่มีข้อจำกัดด้านการใช้พลังงาน ปัจจัยประสิทธิภาพหลักคือจำนวนจุดยอด ความซับซ้อนของโค้ด shader และแบนด์วิดท์หน่วยความจำ GPU

ปัจจัยที่ส่งผลต่อประสิทธิภาพ

• จำนวนจุดยอด — จำนวนจุดยอดที่ส่งไปยัง GPU ต่อเฟรม โมเดลที่มีรูปหลายเหลี่ยมนับล้านสร้างภาระสูงบน vertex shader
• ความซับซ้อนของ shader — จำนวนคำสั่งใน shader ลูปซ้อนและการแตกกิ่งแบบมีเงื่อนไข (divergence) ลดประสิทธิภาพแบบขนานของหน่วย SIMD
• แบนด์วิดท์ — ความเร็วในการอ่านข้อมูลจุดยอดจากหน่วยความจำวิดีโอ รูปแบบแอตทริบิวต์ (float32, float16, จำนวนเต็ม normalized) ส่งผลโดยตรงต่อปริมาณงาน

วิธีการปรับแต่ง Vertex Shader

เพื่อลดภาระบน Vertex Shader จะใช้วิธีการต่อไปนี้ Level of Detail (LOD) — การสลับไปใช้โมเดลเวอร์ชันที่ลดความซับซ้อนเมื่อกล้องเคลื่อนที่ออกจากวัตถุ Instancing — การวาดเรขาคณิตเดียวกันหลายครั้งด้วยเมทริกซ์การแปลงที่แตกต่างกันในการเรียกวาดครั้งเดียว (draw call)

// Vertex Shader ที่รองรับ instancing
in vec3 aPosition;
in mat4 aInstanceMatrix;
uniform mat4 uViewProjection;

void main() {
    vec4 worldPos = aInstanceMatrix * vec4(aPosition, 1.0);
    gl_Position = uViewProjection * worldPos;
}

ตัวอย่างโค้ด Vertex Shader

Vertex Shader ใน API กราฟิกต่างๆ มีตรรกะคล้ายกัน แต่มีไวยากรณ์และหลักการตั้งชื่อที่แตกต่างกัน มาดูการใช้งาน vertex shader พื้นฐานใน GLSL สำหรับ OpenGL ES 3.0 และใน Metal Shading Language สำหรับ iOS และ macOS

ตัวอย่าง GLSL สำหรับ OpenGL ES 3.0

#version 300 es
in vec4 position;
in vec3 normal;
in vec2 texcoord;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat3 normalMatrix;

out vec3 vNormal;
out vec2 vTexCoord;
out vec3 vPosition;

void main() {
    vec4 mvPosition = modelViewMatrix * position;
    vPosition = mvPosition.xyz;
    vNormal = normalMatrix * normal;
    vTexCoord = texcoord;
    gl_Position = projectionMatrix * mvPosition;
}

ตัวอย่าง Metal Shading Language

#include <metal_stdlib>
using namespace metal;

struct VertexIn {
    float3 position [[attribute(0)]];
    float3 normal   [[attribute(1)]];
};

struct VertexOut {
    float4 position [[position]];
    float3 worldNormal;
};

vertex VertexOut
vertexMain(VertexIn in [[stage_in]],
           constant float4x4& mvp [[buffer(1)]]) {
    VertexOut out;
    out.position = mvp * float4(in.position, 1.0);
    out.worldNormal = in.normal;
    return out;
}