Go through some presentations that describes overview of OpenGL Graphics e.g

OpenGLES – Graphics Programming in Android (Disclosure: My talk at GDG conference)

At highlevel, this is how graphics pipeline works

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 , 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

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

optionally if you want to learn Lighting in detail, watch video by Barbara Hecker

It covers different lighting models.

Texture MappingLearn some basic texture mapping here

Page on Csusb

Optionally you can also dive into advanced texture mapping –

Advanced Texture-Mapping

BlendingThe 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

BOOKSI 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

VIDEOSwatch courses like Online Graphics (Berkeley CS 184) Videos or NPTEL

Watching few videos in Computer Graphics Series by Dr. Sukhendu das

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 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 OpenGLESOpenGLES 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 RESOURCESThough OpenGL doesn't care about the modeling tools, its good to understand the overview how this is done. Just take a quick glance at Page 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)