Introduction to Graphics programming
I presented a talk at Google Developer Group,Bangalore on basics of Android Graphics. The following are the slides from the talk. Kindly read this post in conjunction with the slides
OpenGLES — Graphics Programming in Android
At highlevel, the graphics pipeline works as follows
1) Geometry of the 3D Model is described .
2) The geometry is divided into triangles. Transformations are applied to the model (i.e triangles of the model) are called Model Transforms
3) We have a virtual camera corresponding to eye. The transformation applied on the camera are called View Transforms
4) To give a 3D effect, perspective projection is applied which converts the 3D model to 2D space. These are called Projection Transforms
5) Model View Projection Transformations transform the objects and put them into screen space. These are described by MVP matrices
6) Rasterize the triangles to get the pixels( they are called fragments till you get to the final stage)
7) Fragments are shaded. It can be as simple as using interpolated color or complex (Apply lighting and texturing to get realism)
8) Fragments are combined(blended) to get a single pixel. The combination can be any arbitary operation like blending or as simple as displaying the closest pixel to the observer . This blending phase combine the fragments generated by (possibly several primitives that overlapped and compute final color
Learn more about the Graphics pipeline from OpenGL Basics
Now you must realize at a very highlevel, we do the following
1. Transformation — Transform the geometry to Screen space
2. Rasterization — Rasterize the pixels(or fragments)
3. Applying Lighting and Texturing
4. Blend the fragments to single color.
5. Shaders are user defined code used to customize the pipeline
We will expand on each of these section in details
Transformation
Watch few introductory videos e.g , http://www.youtube.com/watch?v=CytbiJqIucA this video from Samsung gives overview of the transformations
Become familiar with the transformations going on at high level (these are model, view and projection transformations). Also be familiar with terms like View Frustum . Some basic math will help in knowing what is going on Diary of a Graphics Programmer. Optionally if you like to know more details and the math GLSL Programming/Vertex Transformations
Now start reading articles
An intro to modern OpenGL. Table of Contents
Page on Ntu
Page on Ntu
OpenGL
The Basic Graphics Pipeline
RASTERIZATION
Rasterization is simply the process of finding which pixels are lying inside the triangle. We can say that we are just coloring the triangles. If the color attributes at the vertices are same we can uniformly color the region. Otherwise the attributes at the vertices must be interpolated. See a demo of interpolated triangle in openGL
LIGHTING & TEXTURING
Recall that rasterizer just interpolates the color. For most applications this is sufficient, but in presence of light we need more sophisticated models. The effect of light is captued using Shading equations. The simplest lighting is Flat Shading. There are advanced mathematical models like Phong/Gourard.
Get Overview of Lighting from http://www.youtube.com/watch?v=gFZqzVQrw84
optionally if you want to learn Lighting in detail, watch video by Barbara Hecker http://www.youtube.com/watch?v=s6BQ2ByN--k
It covers different lighting models.
Texture Mapping Learn some basic texture mapping here
Page on Csusb
Optionally you can also dive into advanced texture mapping —
Advanced Texture-Mapping
BLENGING
The blending phase combine the fragments generated by (possibly several primitives that overlapped and compute final color
Learn about different blending modes here
Shader Effects: Blend Modes
We also need to remove parts of those surfaces that are partially obscured by other surfaces. These are called hidden surfaces. Hidden Surface Removal. This is done using Depth buffer
SHADERS
Read how the fixed functionality of the pipeline is replaced using shaders
GLSL Tutorial
Shader Examples
BOOKS
I found book by Peter Shirely to be very good for learning the concepts of computer graphics. Most books dive into the details without giving the motivation. Shirley gives good background of the concepts.
Fundamentals of Computer Graphics: Peter Shirley, Michael Ashikhmin, Steve Marschner: 9781568814698: Amazon.com: Books
VIDEOS
Courses l Online Graphics (Berkeley CS 184) Videos or NPTEL Computer Graphics Series by Dr. Sukhendu das
http://www.youtube.com/watch?v=lTN7bDyHrfE
and also few related videos in the play list
Subscribe to youtube channel Computer graphics. Most of the videos are general and not informative like lectures. But they are motivating This video (http://www.youtube.com/watch?v=4BISSS3MCNA) is also very general, but may interest if you are into game programming
DEMOS
Watch demos of how things work. There are lot of demos that let you change for e.g the model view projection matrices , lighting parameters. One of the best demos is from Nate Robbins. Get Nate Robbin’s OpenGL demos and change the parameters and see how it affects the rendering.
Have OpenGL Programming as reference. There seems to be hundreds of OpenGL calls. Its easy to learn if you break down to categories. This page has nicely summarized them OpenGL Quick Reference Guide
Ideally you should install some framework on your local system, but if you want quick web demo, use
Web Demos
The Lessons | Learning WebGL
WebGL Shader Lab — Coded Structure
Lesson 0: Getting started with WebGL or other frameworks
Online WebGL GLSL Shader editor
PRACTICE — OpenGL using GLUT / FreeGLUT
OpenGL Step by Step has some exercises. Try few of them. Install GLUT
Page on Ntu helps in installing glut. Try Some Keyboard and Mouse Handling
Mouse event handling source code in OpenGL. Try some animation e.g Moving ball. Apply Texture using
OpenGL Programming/Intermediate/Textures
Get the OpenGL code running with Shaders. Watch this for reference.Page on Csusb. Write you own Fragment shader to draw circle
Fragment Shader Introduction. Write your own shader for lighting using
WebGL Lesson 13 — per-fragment lighting and multiple programs
PRACTICE OpenGLES
OpenGLES is a subset of OpenGL. It deprecates few functions like glBegin/glEnd which is used to describe geometry. Get OpenGLES samples working on Android
Android Lesson One: Getting Started.
In OpenGLES, geometry is specified using Vertex Buffers. Learn more about it hereChapter 5. Objects in Depth .Try advanced stuff on android also e.g Android Lesson Four: Introducing Basic Texturing
iPhone users
OpenGL ES From the Ground Up, Part 2: A Look at Simple Drawing
All about OpenGL ES 2.x — (part 2/3)
OpenGL ES Programming Guide for iOS
ADDTIONAL RESOURCES Though OpenGL doesn’t care about the modeling tools, its good to understand the overview how this is done. Just take a quick glance atPage on Cssb
You can dive into math if you are interestedPage on Essentialmath. Homogeneous Coordinates are used to represent vertices
If you want an indepth knowledge read A trip through the Graphics Pipeline 2011, part 1 and other parts
And watch in depth lectures by John Owens (UCDavis)
(this one is on Pipeline overview, but also others on Rasterization etc)
