CS424 Notes, 18 Jan 2012

• Welcome to CPSC 424 Computer Graphics
• Please read the course handout!
• What is Computer Graphics?
  • It's all about coloring pixels!
  • Can be divided into two basic kinds: "Painting" versus "Drawing"
  • Painting programs (such as MacPaint, Photoshop, Gimp)
    • In a painting program, the computer remembers only the color of each individual pixel. (This is because of layers: Each layer is an image. The layers are conceptually stacked up one on top of another, with transparent or translucent regions so that the layers beneath can show through. Layers can be individually edited. Within each layer, the computer only remembers the color of each pixel.)
    • "Objects" in the picture are in the eye of the beholder. If there is a house in the picture, the computer doesn't know that there is a house there.
    • If you draw a house in front of the tree (not in different layers) and then erase the house, the tree is not revealed. It's gone -- the house pixels replaced the tree pixels when the house was drawn, and the data for the tree was lost.
  • Drawing programs (such as MacDraw, Illustrator, Inkskape)
    • The program maintains a data structure with information about objects in a scene.
    • Objects can be selected and edited. They can for example be moved around, resized, or rotated. Their colors can be changed. Etc.
    • The image is produced by traversing the data structure and drawing each of the objects that it describes. This is called rendering.
    • (Note: MacPaint and MacDraw were programs that came with the original Apple Macintosh computer.)
  • 3D Graphics
    • The most common type is similar to drawing programs: Information about a three-dimensional scene is stored in a database called a scene graph. The image is rendered from this information. (There is also something similar to painting programs, using "voxels" instead of pixels.)
    • 3D Graphics = geometry + transformations + materials + textures + lighting + viewing
    • geometry (geometric modeling): Objects are reduced to basic shapes such as line segments and triangles.
    • transformations: Objects are scaled, rotated, and translated to place them into the scene.
    • materials: properties such as color, shininess, transparency.
    • textures: images and other effects applied to a surface.
    • lighting: the effects of light sources in the scene, illuminating the objects and making them visible.
    • viewing (projection): simulates a "camera", projecting a 3D scene to a 2D image.
    • There is also animation: producing a sequence of images in which aspects of the scene change over time. Computing the changes can use physics to make the changes look realistic. Computer animation [and game] frameworks use a physics engine to do the physics.
• OpenGL
  • Low-level API for 3D graphics. (Very low-level!) Widely supported.
  • After some stagnation, the API has gone through a lot of development and new versions in the last few years.
  • Originally, it had a "fixed-function rendering pipeline" that implemented certain features with a lot of configuration options but no flexibility beyond what was already there. The fixed pipeline became pretty complicated, culminating in Open GL 1.5.
  • OpenGL 2.0 introduced a programmable pipeline where programmers could write their own programs to be executed at certain points in the pipeline. The programs are called shaders, and they are written in their own language, the OpenGL Shader Language, GLSL. There have been several versions of GLSL.
  • The most recent version of OpenGL, 4.0, removes the parts of the fixed-function pipeline and moves them to an optional "extension" (which will probably continue to be there on desktop versions of OpenGL.
  • OpenGL ES is OpenGL for "embedded systems" such as tablets and mobile phones, which probably have less-capable graphics cards. OpenGL ES 1.0 was based on OpenGL 1.5. OpenGL ES 2.0 is based on OpenGL 2.0, but completely removes the fixed-function pipeline. Shader programming is mandatory for OpenGL ES 2.0! The shader programming language for OpenGL ES 2.0 is GLSL ES 1.0, and it is based on GLSL 2.0.
• WebGL
  • Basically OpenGL ES 2.0 for the Web, but with some changes.
  • A JavaScript API, with GLSL 1.0 as the shader language.
  • Implemented in recent versions of Firefox, Chrome, Safari, and maybe Opera. Not implemented in Internet Explorer and might not be. (Note for Safari: Turn on "Enable WebGL" in the "Developer" menu to make WebGL run.)
  • The WebGL Version 1.0 specification was released in March 2011, but might not be fully implemented in current browsers.
  • Uses the HTML5 <canvas> element, which also has its own separate 2D graphics API.
  • Higher-level 3D graphics frameworks that use WebGL are available, but we won't use them in at least the first part of the course.