轻量级WebGL库lightgl样例

#Computer Graphics

All modern displays are raster-based. A raster is a 2D matrix of pixels. In computer graphics, graphics or bitmap image is a dot matrix data structure that represents a generally rectangular grid of pixels (points of color), viewable via a monitor, paper, or other display medium[1]. A pixel has two properties: a color and a position. Color is expressed in RGB (Red-Green-Blue) components. The position is expressed in terms of (x, y) coordinates. The origin (0, 0) is located at the top-left corner, with x-axis pointing right and y-axis pointing down[2].

The color values of the pixels are stored in a special part of graphics memory called frame buffer. The GPU writes the color value into the frame buffer. The display reads the color values from the frame buffer row-by-row, from left-to-right, top-to-bottom, and puts each of the values onto the screen. This is known as raster-scan. The display refreshes its screen several dozen times per second, typically 60Hz for LCD monitors and higher for CRT tubes. This is known as the refresh rate[2].

Graphics Rendering Pipeline

Rendering is the process of producing image on the display from model description.The 3D Graphics Rendering Pipeline accepts data of 3D model in terms of vertices of primitives (such as point, line, triangle and quad), and produces the color-value for the pixels for the display. It consists of the following stages:

1. Vertex Processing: Process and transform individual vertices.
2. Rasterization: Convert primitives (connected vertices, e.g. line, triangle) into a set of fragments. A fragment can be treated as a pixel in 3D spaces, which is aligned with the pixel grid, with attributes such as position, color, normal and texture.
3. Fragment Processing: Process individual fragments.
4. Output Merging: Combine the fragments of all primitives (in 3D space) into 2D color-pixel for the display.

In modern GPUs, the vertex processing stage and fragment processing stage are programmable. You can write programs, known as vertex shader and fragment shader to perform your custom transform for vertices and fragments. The shader programs are written in C-like high level languages such as GLSL (OpenGL Shading Language), HLSL (High-Level Shading Language for Microsoft Direct3D), or Cg (C for Graphics by NVIDIA)[2].

On the other hand, the rasterization and output merging stages are not programmable, but configurable - via configuration commands issued to the GPU[2].

#OpenGL

Open Graphics Library (OpenGL) is the premier environment for developing portable, interactive 2D and 3D graphics applications[3]. It provides a cross-language, cross-platform application programming interface (API) for rendering 2D and 3