一、WebGL和傳統網頁的區別：
普通網頁組成成分：HTML、JavaScript；
WebGL網頁組成成分：HTML5、JavaScript和GLSL ES(着色器語言 OpenGL ES)；
二、WebGL采用H5中的<canvas>元素來定義繪圖區域，然后通過JavaScript內嵌GLSL ES在canvas中繪制三維圖形。
canvas可以同時支持二維圖形和三維圖形，它不直接提供繪圖方法，而是提供一種叫上下文(context)機制來繪制圖形，
2.1使用canvas繪制二維空間步驟：
2.1.1創建HTML5 canvas
<canvas id="canvas" width="200px" height="200px"></canvas>
2.1.2獲取畫布 canvas 的 ID和畫布的上下文
//獲取canvas元素 var canvas = document.getElementById('canvas'); //獲取繪制二維上下文 var ctx = canvas.getContext('2d');
2.1.3通過上下文提供的方法進行繪制。
屬性和方法參考：http://www.w3school.com.cn/tags/html_ref_canvas.asp
例如：
ctx.fillStyle ='rgba(255,0,0,1.0)';//設置填充色為紅色 ctx.fillRect(0,0,200,200);//使用填充色填充為矩形
2.2使用canvas繪制webgl步驟：
2.2.1創建HTML5 canvas（同上）
2.2.2獲取畫布 canvas 的 ID（同上）
2.2.3獲取WebGL
//獲取webgl上下文 var gl = canvas.getContext('webgl');
解釋：為了得到 WebGLRenderingContext 對象(或圖形的WebGL上下文對象或只在WebGL的情況下)，調用當前 HTMLCanvasElement 的getContext()方法。getContext()的語法如下 ：
canvas.getContext(contextType, contextAttributes);
通過"webgl"字符串或"experimental-webgl" 作為 contentType。contextAttributes參數是可選的。 (雖然在進行這一步，請確保您的瀏覽器實現了WebGL 1.0版本(OpenGL ES 2.0))。其中WebGL的參數 ContextAttributes 不是強制性的。此參數提供接受布爾值，如下面列出各種選項
| Alpha | 如果它的值是 true，它提供了一個alpha緩沖區到畫布上。默認情況下，它的值是 true |
| depth | 如果它的值是true，會得到一個繪圖的緩沖區，其中包含至少16位的深度緩沖。默認情況下，它的值是true |
| stencil | 如果它的值是true，會得到一個繪圖的緩沖區，其中包含至少8位的模板緩存。默認情況下，它的值是false |
| antialias | 如果它的值是true，會得到一個繪圖緩沖區，執行抗鋸齒。默認情況下，它的值是true |
| premultipliedAlpha | 如果它的值是true，會得到一個繪圖緩沖區，其中包含的顏色與預乘alpha。默認情況下它的值是true |
| preserveDrawingBuffer | 如果它的值是true，緩沖區將不會被清零，直到被清除或由作者改寫將保留它們的值。默認情況下，它的值是false |
例如：
//帶參數的webgl上下文 var gl = canvas.getContext('webgl', { antialias: false, stencil: true });
2.2.4編譯着色器
着色器參考：http://www.yiibai.com/webgl/webgl_shaders.html
2.2.4.1存儲着色器（頂點着色器和片段着色器）以頂點着色器為例
var VSHADER_SOURCE =
"void main() { " +
//設置坐標
"gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
//設置尺寸
"gl_PointSize = 10.0; " +
"} ";
2.2.4.2編譯着色器，有三步
(1)創建Shader對象
Object createShader (enum type)
如觀察到的語法，該方法接受預定義的枚舉值作為參數。我們有兩種選擇這一點 ：gl.VERTEX_SHADER創建頂點着色器 ， gl.FRAGMENT_SHADER 創建片段着色器。
//例如：創建定點着色器 var vertShader = gl.createShader(gl.VERTEX_SHADER);
(2)將寫好的着色器附加到Shader上
oid shaderSource(Object shader, string source)
其中：shader − 必須創建Shader對象傳遞作為一個參數，Source − 必須以字符串格式傳入着色器程序代碼。
(3)編譯程序
compileShader(Object shader)
此方法接受着色器程序對象作為參數。創建着色器程序對象之后，附加源代碼，將對象傳遞給該方法
2.2.5合並程序
(1)創建一個程序對象
createProgram();
(2)附加着色器
attachShader(Object program, Object shader);
其中：Program − 通過創建空的程序對象作為一個參數,Shader − 傳遞的着色器編譯程序中的一個(頂點着色器，片段着色器)
(3)鏈接着色器
linkProgram(shaderProgram);
(4)使用程序
useProgram(shaderProgram);
案例：
var shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertShader); gl.linkProgram(shaderProgram); gl.useProgram(shaderProgram);
2.2.6繪制圖像
gl.drawArrays(gl.POINTS, 0, 1);
三、完整代碼
html代碼
<!DOCTYPE html> <html> <head> <meta lang="en"> <meta charset="UTF-8"> <title>WebGL study</title> <link href="style/style.css"> <script type="text/javascript" src="js/js.js"></script> </head> <body> <canvas id="canvas" width="200px" height="200px"></canvas> </body> </html>
javascript代碼：
/**
* Created by houbingshuai on 2016/12/3.
*/
window.onload = function () {
//頂點着色器程序
var VSHADER_SOURCE =
"void main() {" +
//設置坐標
"gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
//設置尺寸
"gl_PointSize = 10.0; " +
"} ";
//片元着色器
var FSHADER_SOURCE =
"void main() {" +
//設置顏色
"gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
"}";
//獲取canvas元素
var canvas = document.getElementById('canvas');
//獲取繪制二維上下文
var gl = canvas.getContext('webgl');
if (!gl) {
console.log("Failed");
return;
}
//編譯着色器
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, VSHADER_SOURCE);
gl.compileShader(vertShader);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, FSHADER_SOURCE);
gl.compileShader(fragShader);
//合並程序
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
//繪制一個點
gl.drawArrays(gl.POINTS, 0, 1);
}
總結：初識webgl，感覺還不錯，努力吧少年