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 atlernatives: DirectX, Vulkan, Metal

• 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, there are many online references available.
  • The Modern Javascript Tutoral (a free online resource for learning Javascript from scratch)
  • HTML, CSS, and Javascipt for Web Developers (MOOC offered by Johns Hopkins University)
  • W3Schools (a free online reference)
• 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 some linear algebra (small matrices, vector operations)

• We will teach you how to use WebGL to write interactive graphics systems for the web.
• We will have you develop such a system by yourself.
  • You will write most code from scratch.
  • We will not distribute any frameworks.
  • The key to success is the ability to come up with good abstractions.

• For the first half of the semester, there will be lectures and 3 programming assignments.
• For the rest of the semester, there will be some lectures, plus time for the 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.
  • JetBrains WebStorm is a popular IDE for Javascript development.
  • Smart text editors (Vim, Emacs, Sublime Text, Visual Studio Code, etc) are more than enough.
• We highly recommend using Git to manage your code.
• When dealing with content files, we will use Python to run a simple web server.
• For Python 2: python -m SimpleHTTPServer
• For Python 3: python -m http.server
• 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.

• You may form a group on your own. If you do, we will require your group to submit a project proposal mid-semester.
• Otherwise, you will submit a short abstract instead. We will group students by topic, and then your group will submit a fleshed-out proposal

• Milestone presentation (late April)
  • Tell us the goal of your project.
  • Show us what you have done so far.
  • Have you changed your goal? If so, how?
  • What difficulties have you faced so far?
  • What's left to do?
• Final presentation (last week of class, or final exam period)
  • Tell us again what your project is about.
  • Demo your system.
  • What difficulties did you face? How did you solve them?
  • How did each group member contribute to the final product?

• 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 displayed 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.