table of Contents
1 Overview
I have to say that the three-dimensional graphics rendering technology upgrading so fast, OpenGL not had time to learn a lot of information has been a bit behind the times. NeHe's tutorial as well as "OpenGL Programming Guide" before using the seventh edition (ie Little Red Book) are very good, but they are all from the start with a fixed line; and now the technology is already very programmable pipeline common base technology. Later, I also read "OpenGL Programming Guide" Eighth Edition (white paper), from the beginning of this tutorial is programmable pipeline (shaders) I start to see when I felt no basis for rendering front, it is very obscure , far better than Little Red Book and easy to understand. Ashamed to say that I have failed many times the entry.
This is exactly the reason I wrote this tutorial, hope summary of really useful knowledge from complex data in (of course, hoping to help you). I think WebGL is learning OpenGL series of three-dimensional graphics rendering good technical entry point. WebGL is an OpenGL version of the browser, is basically considered a subset of OpenGL, WebGL can be retained without culling technology, it must be three-dimensional graphics rendering technology of the essence. We are here to strongly recommend "WebGL Programming Guide" This book, I summed up this tutorial is the basis of the book above.
When learning OpenGL / WebGL, I also feel a lot of information was cited examples are often too simple, really understand at a glance, but not when the actual problem encountered is often solved. I still think that to solve the problem in practice, which helps improve the understanding of knowledge. I just recently in the study GIS in terrain rendering, then I draw step by step through an example of the terrain, to sum up the knowledge of WebGL. If you do not understand these terms GIS does not matter, I just need to know the ultimate goal here is to draw an earth elevation model that contains a set of XYZ coordinates of the point, expressed the situation terrain.
2. Example: plotted point
WebGL program steps in writing with writing Web front-end program is the same, consists of two parts HTML and JavaScript, debugging through a browser.
1) HelloPoint1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draw a point (1)</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="HelloPoint1.js"></script>
</body>
</html>This is a very simple piece of HTML from the actual performance, it is to create a canvas <canvas>. <canvas> is a drawing of a label incorporated HTML5, any pattern can be drawn on the canvas. It was drawn by WebGL <canvas> element.
In addition, through this code <script> tag introduces several external JS file. Several of JS file lib directory is some common components (from "WebGL Programming Guide" source code), you can not worry about the specific implementation; the last imported HelloPoint1.js what we write rendering module. And it HelloPoint1.js onload event defined in the <body> tag in the binding properties of the main () function.
2) HelloPoint1.js
// 顶点着色器程序
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;\n' + // Set the point size
'}\n';
// 片元着色器程序
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
'}\n';
function main() {
// 获取 <canvas> 元素
var canvas = document.getElementById('webgl');
// 获取WebGL渲染上下文
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// 初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// 指定清空<canvas>的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
}The main contents of this JS code is the aforementioned main function, once successfully loaded HTML browser, this script will be executed. In the main function mainly at steps:
(1) Preparations
document.getElementById ( 'webgl'): Document Object Model DOM function, to obtain <canvas> element of the HTML page.
getWebGLContext (canvas): Gets WebGL rendering context, save in gl variable. Because different browsers get quite the same function, the function provided by the component cuon-utils to unify behavior.
(2) Shader
initShaders: Initialization shader.
We must first know what a shader. If you only learn through fixed lines or other two-dimensional graphics components (such as GDI), will be very confused what shader is, why use shaders. For example, in the fixed line, draw point is drawPoint, draw the line on drawLine. In WebGL, the drawing working is mainly decomposed into vertex shader and fragment shader the two steps.
JS After starting the program, is drawn into the first working vertex shader, the vertex described characteristics (e.g., position, color, etc.), three-dimensional space is the point of the vertex in the vertex shader, such as the three vertices of a triangle; and then proceeds to piece shader, pixel-by-sheet processing element (such as lighting, shading, shutter) in the fragment shader. Finally, the fragment passed to the color buffer, for display. The rendering process is as follows:
This process is a process similar to the flow of water, so this process is called rendering pipeline (Pipeline). And this process is that we need to control programming, such as the viewer changes viewing angle need to control in the vertex shader; requires changing light color in fragment shader deregulated like; therefore, this process is programmable pipeline. By shader programs, three-dimensional image rendering even more flexible and powerful.
In initShaders () function, passing in the string VSHADER_SOURCE JS and FSHADER_SOURCE predefined. Incidentally, the shader program is embedded in a string running to the JS file. This function is also cuon-utils component provides, after calling to tell WebGL shader system has been created and can be used at any time.
(3) a vertex shader
Vertex shader is defined as follows:
// 顶点着色器程序
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;\n' + // Set the point size
'}\n';As mentioned earlier the vertex shader program is a program embedded in JS, so although the string is passed, but in fact essentially shader Description Language (GLSL: OpenGL Shading Language). Since it is a language will have their own functions and variables defined. main () function is defined in the shader program for each entry. In the main function, the coordinates of the vertices is assigned to the variable gl_Position built, the size of the built-in point is assigned to the variable gl_PointSize.
Note gl_Position here is to be assigned, otherwise the shader does not work properly. Type of assignment is vec4, which is a four-vector. In general, only we need to describe three-dimensional vector point on it, but homogeneous coordinates requires four components in many cases. Homogeneous coordinates (x, y, z, w) is equivalent to the three-dimensional coordinates (x / w, y / w, z / w). So if the fourth component is 1, then it is an ordinary three-dimensional coordinates; if the fourth component is 0, it means infinity point.
(4) fragment shader
Fragment shader is defined as follows:
// 片元着色器程序
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
'}\n';As the same vertex shader, fragment shader color point is assigned to the variable gl_FragColor, gl_FragColor fragment shader is only built-in variables, controlling final color pixels on the screen.
(5) empty the buffer
gl.clearColor (): Set clear background colors.
gl.clear (gl.COLOR_BUFFER_BIT): Clear the color buffer.
(6) drawing operation
gl.drawArrays (gl.POINTS, 0, 1) : to draw a point.
Vertex shader only specify the vertex drawn, also need to specify the vertices in the end in a point, a line or into the surface, gl.drawArrays () is such a function, the system should be drawn here to tell WebGL a point.
3. Results
The final result of the operation is very simple, open HelloPoint1.html in Chrome, the page displays a window to draw a point:
4. Reference
Originally part of the code and illustrations from "WebGL Programming Guide," the source link: https://share.weiyun.com/5VjlUKo , password: sw0x2x. Follow-up will continue to update the contents of this shared directory.