Introduction to OpenGL/WebGL

• This is the industry standard 2D graphics package
  • Cross language
  • Cross platform
  • Cross hardware
• It is designed to work with specialized graphics hardware (GPU) to achieve hardware accelerated rendering.
• 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, ...
  • This is heavily dependent on the CPU to do the drawing.
  • It has a heavy network cost in transferring data from CPU to GPU
• 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.
  • 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.
• 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.
    • 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
    • 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
    • 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
  •