360

Graphics Pipline

WebGL Primitives

  1. GL_POINTS
    Each vertex is rendered as a single point. No connections between points.
    Example: A scatter plot.

  2. GL_LINES
    Vertices are paired up to form individual straight-line segments.
    Example: Two vertices form one line, four vertices form two lines.

  3. GL_LINE_STRIP
    Vertices are connected in sequence to form a continuous polyline.
    Example: A line that passes through multiple points without breaks.

  4. GL_LINE_LOOP
    Similar to GL_LINE_STRIP, but the last vertex is connected back to the first, forming a closed loop.

  5. GL_TRIANGLES
    Every three consecutive vertices form an independent triangle.
    Example: For six vertices, two triangles are rendered.

  6. GL_TRIANGLE_STRIP
    A series of connected triangles, where each new vertex after the first two forms a new triangle with the previous two vertices.
    Example: Efficient for rendering long strips of triangles.

  7. GL_TRIANGLE_FAN
    A set of triangles sharing a common center vertex (first vertex). Each subsequent vertex, combined with the center and the previous vertex, forms a new triangle.
    Example: Useful for circular or fan-shaped surfaces.

Pasted image 20250110193902.png

Pasted image 20250110194016.png

WebGL Program = Vertex Shader + Fragment Shader

Pasted image 20250110195705.png

Pasted image 20250110195756.png

Pasted image 20250110195808.png

Pasted image 20250110195816.png

Pasted image 20250110201841.png
Pasted image 20250110202345.png

Viewing pipline

Pasted image 20250110210351.png

Pasted image 20250110211330.png

Pasted image 20250110211459.png

Pasted image 20250110211549.png Pasted image 20250110211616.png

Pasted image 20250110224853.png

Rasterization

Point sampling

Bresenham lines (midpoint alg.)

Pasted image 20250110225141.png

Pasted image 20250110233339.png
Texture Maping
Shadows
SceneGraph
Animations