Introduction to OpenGL/WebGL

This is the industry standard 3D graphics package
- Cross language
- Cross platform
- Cross hardware
It is designed to work with specialized graphics hardware (GPU) to achieve hardware accelerated rendering.
- The GPU has multiple Processing Elements or cores.
- Each core is a lightweight partial cpu.
  - Common
    - PC
    - Control Unit
    - Instruction Register
  - Individual
    - ALU
    - Register File
    - Memory
  - This is called SIMD - Single Instruction Multiple Data
    - One of four types of computers
    - SISD -single instruction single data - traditional
    - MIMD - multiple instruction multiple data - multiprocessor
    - MISD - unicorn ridden by leprechaun.
- As you have probably figured out, in graphics we run the same program over and over again on different data.
  - Transform, scale, ... project from 3 space to 2 space.
  - Generate points on a line.
  - And many others.
- This fits really well in the SIMD model.
- And the GPU takes care of scheduling what runs at any given time.
  - So the PEs can be run in thread groups.
- Single Program Multiple Data, SPMD.
It is a graphics API or Application Programming Interface.
There are two basic epochs
- Pre 2.0 - CPU intensive rendering
  - you will find this code out there, it is a dead end.
- 2.0 and beyond - GPU based rendering
  - Generally includes programs to be run on the GPU
Before 2.0 nearly everything was done in immediate mode
- Like the HTML5 canvas, client calls directly generate the graphics commands to draw an object
  - A series of lines, strokes, ...
  - ```
  while (running){
      ClearScreen();
      Line(0,0, 100,100);
      Line(100,100, 100,0);
      Line(100,0, 0 , 0);
      // other stuff
  } 
```
- Note the CPU makes the calls to draw line each cycle for each line.
- This is heavily dependent on the CPU to do the drawing.
- It has a heavy bus/network cost in transferring data from CPU to GPU
  - The point data is stored on the CPU.
  - It must be transferred to the GPU each loop.
WebGL
- A javascript API
- A lightweight version of OpenGL
- Supports most of OpenGL
GLSL
- OpenGL Shading Language
- This is a C like language for implementing programs to run on a GPU.
  - Vectors and matrices are built in types.
  - But matrices are column major, not row major.
  - Types are restricted.
  - NO compiler coercion.
- This is supported by OpenGL, OpenGL ES, and WebGL
- But slight differences across the languages
A newer standard Vulkan is an attempt to modernize and unify all of the *GL family.
- Watch, if you do graphics, things will change again.
- WebGPU will replace WebGL
Retained Mode is the alternative
- The CPU generates a list of objects to be drawn and transfers them to the GPU
- It then asks the GPU to render these objects.
- The CPU will generate updates to the objects, but does not need to re-transmit the data to the GPU, only the updates.
- ```
SendToGPU(line, 0, 0, 100, 100)
SendToGPU(line, 100, 1000, 100, 0)
SendToGPU(line, 100, 0, 0, 0)
while(running) {
    TellGPUToExecute();
    // other stuff
} 
```
Arbitrary graphics pipeline
- Data (primitives) are generated by the Application
  - Along with updates to the environment (transformations)
  - And to the objects (changes in data and attributes)
- Geometric transformation are applied to the data
  - This includes translate, rotate, ...
  - Colors can be computed and applied (but probably not in complex applications)
  - But also projection from 3d to 2d
  - Items are clipped
  - Hidden surfaces might be removed here.
  - And points are converted to device coordinates
  - In general :
    - Multiple modeling coordinates (model coordinates)
    - World coordinates
    - Viewing coordinates
    - Normalized Device Coordinates
    - Device coordinates
  - At device coordinates, a new set of 2d primitives are processed
- Rasterization
  - The process of taking low level 2d primitives and converting them to pixels.
  - Color is usually applied here.
  - Triangles are converted to lines.
  - Lines are converted to pixels. (Bresenham's)
  - A version of hidden surface removal can be done here as well.
The OpenGL graphics pipeline
- Vertex Specification
  - Primitives are specified in the program running on the CPU and sent to the GPU as a buffer object
  - This is a location in memory on the GPU that contains the data.
  - We provide a template for how to interpret this memory.
  - This is typically done Once at the beginning of processing, but perhaps other times as well.
  - Attributes are set at this time as well.
- Vertex Shader
  - This is a programmable stage of the pipeline that runs on the GPU
  - Geometric transformations
  - Responsible for changing 3d coordinates into 2D coordinates.
  - But the projection (ie division by 1/p (x, y, z, p) is not done.
  - A program in GLSL that operates on a single vertex.
  - But is called MANY times (once per vertex)
  - It runs in isolation (no knowledge of other vertexes)
  - Can produce other data to send through the pipeline
- Tessellation (Not in WebGL)
  - A programmable stage of the pipeline that runs on the GPU after the vertex shader.
  - This can break primitives into smaller primitives
  - This is not supported in WebGL so we will not discuss this in detail.
- Geometry Shader (Not in WebGL)
  - A GPU stage, programmable
  - Takes a primitive and outputs one or more primitives.
  - Remove ore tessellate primitives further.
  - This is not supported in WebGL so we will not discuss this in detail.
- Vertex Post-Processing
  - Non-programmable stage
  - Clipping occurs here.
  - Returning to Homogeneous coordinates (ie perspective divide) takes place here.
  - Transformation to viewport (output window) occurs here as well.
    - ie we go from NDC to DC
- Primitive Assembly
  - Non-programmable.
  - Vertexes are once again turned into primitives
  - Face culling occurs here.
- Rasterization
  - Non-programmable
  - Primitives are turned into fragments
  - Fragments are the pixels more or less.
- Fragment Shader
  - Programmable GPU stage
  - Are the fragments visible
  - Computation of color on a per-fragment basis
  - Each fragment is input.
  - The color of the fragment and depth is output
  - Or discard is called.
- Per-Sample Operations
  - Fixed GPU stage
  - Depth test
WebGL has a simpler pipeline
- But this might more useful