CS 4621: Lecture 1

WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0 [...]

• Cross platform. It runs on Windows, Mac, Linux, Android, iOS, etc.
• Web. It is for writing web applications; in other words, programs that run in web browsers. There are also a lot of browsers supporting it. You can find out which browsers support WebGL in this web page.
• Low level. It talks to the GPU to do its job.
• API. It's a library. It provides commands that you are supposed to compose to do the job you want done yourself.

• Stands for "Open Graphics Library."
• A low-level API for 2D/3D rendering with the GPU.
• It is cross-platform.
• Main atlernative: DirectX, Vulkan

• OpenGL for Embedded Systems
• Subset of OpenGL API for use with smartphones, tablets, and video game consoles.
• Game oriented.
• History
  • 2003: OpenGL ES 1.0 (Android, Sybian, Playstation 3)
  • 2007: OpenGL ES 2.0 (Android 2.0, iOS 5, WebGL, etc)
  • 2012: OpenGL ES 3.0 (Android 4.3, iOS 7, WebGL 2, etc)

• Use Javascript to program in the browser.
• Use OpenGL Shading Language (GLSL) to program shaders.

• You should know how to write HTML and Javascript.
• If you don't, we suggest taking a MOOC or two about them. We recommend this one by Johns Hopkins University.
• If you have taken CS 2300 or CS 3300, you're good to go!
• You should have a good handle on programming in general.
  • CS 2110 is a formal prerequisite.
  • CS 3110 is highly recommended. (Javascript has a lot of functional flavor to it.)
• You should know linear algebra.

• Teach you how to use WebGL to write interactive graphics systems for the web.
• Have you develop such a system by yourself.
  • Write most code from scratch.
  • No help from framework code from other people.
  • Key to success = ability to come up with good abstractions.

• For the first 7 weeks, lectures + 3 individual programming assignments.
• For the rest of the courses, some lectures + time for a final project (groupwork).

• We will use Chrome as the standard web browser for the course.
  • Lectures will be conducted in Chrome.
  • Assignments and final projects will be evaluated in Chrome.
• Use any IDE you want.
  • I personally use JetBrains WebStorm.
  • Smart text editors (Vim, Emacs, Sublime Text, Visual Studio Code, etc) are more than enough.
• Lecture notes and assigments are distributed through Github.
  • So, you should know how to use Git.
• When dealing with content files, we will use NodeJS to run a simple web server to serve those files.
• We will also make heavy use of jQuery and jQuery UI.

• Submit the root directory of your assigment/project as a ZIP file.
• We'll unzip and run a web server on the extracted directory.
• Your code should run without modification when the web page is served through the web server.
• This means you can code in any language you want (i.e. TypeScript, CoffeeScript, etc) as long as you compile your code to Javascript, and the compiled code runs in Chrome.

• We require people to pose a proposal they want to do by March 24 on CMS. We'll publish it on the course's web page.
• All groups (which can be incompletely formed) must give a short presentation on the projects they intend to do on March 31.
• Groups must be formed by April 14.

• Milestone presentation on April 28
  • This is to encourage you to take time to work on the project early.
  • What have you done?
  • Have you changed your goal? If so, how?
  • What difficulty have you faced so far?
• Final presentation in the final week.
  • Tell us again what your project is about.
  • Demo your system.

• Object order or rasterization

  for each object in the scene {
      for each pixel in the image {
          if (object affects pixel) {
              do something
          }
      }
  }
  

• Ray order or ray tracing

  for each pixel in the image{
       for each object in the scene {
          if (object affects pixel) {
              do something
          }
      }
  }
  

• Input: Vertices and connections among them + other types of data (texture, etc.)
• Output: Pixels on the framebuffer.

• Buffer = "a region of physical memory used to temporarily store data " (according Wikipedia).
  • In our context, a buffer mostly resides in the GPU.
• Framebuffer = a buffer that holds the image that is displyaed on the monitor.

• Vertex = a point. Can have attributes.
• Position
• Texture coordinates
• Normal vector
• etc.
• Primitive = a geometric shape specified by a collection of vertex.
  • Point = 1 vertex
  • Line = 2 vertices
  • Triangle = 3 vertices (This is the most important primitive.)
  • Quad = 4 vertices
  This is what we mean by "vertex connectivity."
• Rasterization = the process of turning vertex+primitive data small pieces, each of size equal to a pixel.
• Fragment = a potential pixel, resulted from rasterization.
• Raster operations = processing fragments+framebuffer to decide what gets written to the framebuffer
• Depth test
• Blending
• Stencil test
• etc.
• A vertex shader transform vertices into clip space.
  • We will learn about clip space later in CS 4620.
• A fragment shader process info about fragments and output a color or decide to discard the fragment.
• A "program" is a collection of shaders. In WebGL, you must have a vertex shader and a fragment shader.