標籤：案例 解釋 字元 清除 支援 ref 傳遞 asc 代碼
一、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，感覺還不錯，努力吧少年
WebGL-入門
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
