table of Contents
1 Introduction
Recent studies WebGL, read "WebGL Programming Guide" This book, in conjunction with their professional knowledge to write a series of tutorials. Before when looking at OpenGL / WebGL always feel OpenGL / WebGL look at the time to understand, but hard to actually use them, always feeling across the middle of a lot of things. Now a roadside learn while writing, I would understand this is actually the middle of the missing sum up, practice; to write out this process, not only to help others, but also to help themselves.
Now this series of articles also written a lot, write a summary of what directory, easy to access, after adding a new article will be updated. This series of tutorials Deep knowledge is progressive, later associated. Examples also became more complex, and ultimately complete example of a terrain rendering:
2. Directory
1. WebGL Easy Tutorial (a): The first example of a simple
overview of the purpose of this tutorial, wrote the first example of WebGL.
2. WebGL Easy Tutorial (): transmitting data to the shader
improved example of drawing a point, about the problem in the WebGL shader (Shader) data transmission.
3. WebGL Easy Tutorial (III): to draw a triangle (buffer object)
by drawing a triangle of a specific example, the use of WebGL of explain buffer objects (buffer object) in the.
4. the WebGL Easy Tutorial (IV): Color
by plotting an example of the color triangle, varying variables introduced, the process of data transmission between the vertex shader and fragment shader: apex assembly and rasterization.
5. The the WebGL Easy Tutorial (V): graph transformation (model, view, projective transformation)
explained in detail the OpenGL \ WebGL graph transformation process on rendering of the scene, and its deduced graphics transformation matrix. Including model transformation, view transformation, and projective transformation.
6. The the WebGL Easy Tutorial (f): The first three-dimensional example (using the projective transformation model view)
by using the projective transformation model view, a first exemplary truly complete three-dimensional scene: displaying a set of triangles from far and near.
7. The the WebGL Easy Tutorial (VII): to draw a rectangular body
with an example of a rectangular bounding box drawn further understanding of the projective transformation model view.
8. WebGL Easy Tutorial (VIII): three-dimensional scene interactive
knowledge-based tutorial before realized example of a three-dimensional view of the scene: rotate and zoom scene is achieved by the mouse.
9. WebGL Easy Tutorial (IX): integrated example: Draw terrain
knowledge comprehensive WebGL to achieve a draw examples of a topographic map.
10. WebGL Easy Tutorial (X): Light
teaches the principles of light generated by WebGL, and has made a real case.
11. (xi) WebGL Easy Tutorial: Texture
WebGL instance of the use of textures: a real affixed to terrain textures.
12. The the WebGL Easy Tutorial (XII): and bounding sphere projection
to projection transformation model view is provided by surrounding the ball, shows an appropriate rendering position.
13. The WebGL Easy Tutorial (XIII): frame buffer objects (off-screen rendering)
are discussed in detail in the frame buffer to achieve WebGL technology.
14. A WebGL Easy Tutorial (XIV): shadow
details ShadowMap WebGL algorithm generated shadows.
3. Resource
Its code has been uploaded to GitHub: address . Personal opinion will inevitably be omissions, welcome to exchange with each other.