Hello Triangle

• OpenGL graphics pipeline can be divided into two large parts:

  • First: transforms your 3D coordinates into 2D coordinates
  • Second: transforms the 2D coordinates into actual coloured pixels

  ⭐ Graphics pipeline takes a set of 3D coordinates as input and transforms these to coloured 2D pixels on your screne. Describes the sequence of steps used to transform 3D models into a 2D image on a screen

→ Multi-thread process

1. Vertex Shader: takes a single vertex as input & transforms 3D coordinates into different 3D coordinates and vertex shader allows us to do some basic processing on the vertex attributes

   → Vertex shader is called once per vertex

   → Each vertex of a 3D model needs to be transformed from local object coordinates to world coordinates (using the Model matrix), then to camera view coordinates (using the View matrix), and finally to clip coordinates (using the Projection matrix)

2. Primitive Assembly: takes all the vertices as input from vertex shader & form a primitive and assemble all the points → by connecting all the points (i.e. form a triangle ← GL_TRIANGLES)

3. Geometry Shader: has the ability to generate other shapes by emitting new vertices form new (or other) primitive(s). (i.e. generates a second triangle out of the given shape)

4. Rasterization Stage: maps the resulting primitive(s) to the corresponding pixels on the final screen, resulting in fragments for the fragment shader to use

5. Fragment Shader: main purpose is to calculate the final colour of a pixel, this step is where all the advanced OpenGL effects occur (like applying texture, using normals to compute lighting, shadows, colour of the light and so on) → store output into FrameBuffer

   → Fragment shader is called once per pixel

   A fragment in OpenGL is all the data required for OpenGL to render a single pixel.

6. Alpha Test & Blending: checks the corresponding depth value and uses those to check if the resulting fragment is in front or behind other objects. Also checks for alpha & blends objects

   → so even if a pixel output colour is calculated in the fragment shader, the final pixel colour could still be something entirely different when rendering multiple triangles

More on OpenGL Rendering Pipeline

https://www.youtube.com/watch?v=kpA5X6eI6fM

| Vertex Specification | where we setup on the CPU our geometry

→ geometry data (i.e. 3D positions of the vertices) → attributes (i.e. texture, normal) | | --- | --- | | Vertex Shader* | Execute on each vertex, positioning that vertex | | Tessellation | (optional) Get more details on the scene → break into smaller pieces | | Geometry Shader | (optional) Generate more shapes | | Vertex Post-Processing | | | Primitive Assembly | Assembling the final geometry | | Rasterization | Determine which pixels actually get filled in | | Fragment Shader | Execute on each fragment → determine the color of each pixel that we rasterized | | Per-Sample Operations | - clipping

• depth testing |

Shader: programmable part of our pipeline ← feature of Modern OpenGL, that we can write program on our GPU to control the graphics pipeline

WebGL Fundamentals

WebGL Fundamentals

• Vertex Shader's job is to compute vertex positions

  → based on the positions the function outputs OpenGL/WebGL can then rasterize various kinds of primitives including points, lines, or triangles