WebGL
使用戶 繪制和渲染3D圖形
使用戶 通過頁面與三維圖形交互
技術(shù)棧： HTML、HTML5玩焰、JavaScript东臀、GLSL ES語言
手動(dòng)繪制圖形
<body>
<canvas
id="cvs"
width="200"
height="200"
style="border: solid 1px gray">
瀏覽器不支持canvas
</canvas>
<script type="text/javascript">
// 獲取畫布元素
var cvs = document.getElementById('cvs')
// 獲取元素的上下文環(huán)境對(duì)象
var context = cvs.getContext('webgl')
// 設(shè)置繪制圖形填充顏色，rgb诅愚，最大值是1
context.clearColor(0.8, 0, 0, 1)
// 調(diào)用緩存中值填充圖形
context.clear(context.COLOR_BUFFER_BIT)
</script>
</body>
WebGL坐標(biāo)系統(tǒng)
畫布中心為原點(diǎn)表蝙，向四周擴(kuò)散
著色器
著色器是程序（使用OpenGL ES Shading Language語言編寫的程序）
著色器記錄像素點(diǎn)的 位置 和 顏色
著色器由 頂點(diǎn)著色器 和 片段著色器 組成
著色器繪制WebGL圖形
//獲取畫布元素
var cvs=document.getElementById("cvs");
//獲取到元素的上下文環(huán)境對(duì)象
var gl=cvs.getContext('webgl');
//頂點(diǎn)著色器變量
var VSHADER_SOURCE =
'void main() {' +
//定義點(diǎn)的坐標(biāo)并轉(zhuǎn)換成變量保存
'gl_Position = vec4(0.0, 0.0, 0.0, 1.0); ' +
//設(shè)置縮放距離的直徑
'gl_PointSize = 10.0; '+
'} ';
//片段著色器變量
var FSHADER_SOURCE =
'void main() {' +
//設(shè)置圖形像素的顏色并保存
'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
'}';
//新建一個(gè)用于裝頂點(diǎn)字符串的著色器對(duì)象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加載保存好的頂點(diǎn)代碼字符串變量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//編譯頂點(diǎn)著色器
gl.compileShader(vertShader);
//新建一個(gè)用于裝片段字符串的著色器對(duì)象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加載保存好的片段代碼字符串變量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//編譯片段著色器
gl.compileShader(fragShader);
//新建一個(gè)程序
var shaderProgram = gl.createProgram();
//分別附加兩個(gè)已編譯好的著色器對(duì)象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//鏈接兩個(gè)附件加好的著色器程序
gl.linkProgram(shaderProgram);
//開啟程序的使用
gl.useProgram(shaderProgram);
//繪制指定位置的圖形
gl.drawArrays(gl.POINTS, 0, 1);
繪制三角形
//獲取畫布元素
var cvs=document.getElementById("cvs");
//獲取到元素的上下文環(huán)境對(duì)象
var gl=cvs.getContext('webgl');
//頂點(diǎn)著色器變量
var VSHADER_SOURCE =
// 使用存儲(chǔ)限定符定義一個(gè)接受頂點(diǎn)坐標(biāo)的變量
'attribute vec4 a_Position;' +
'void main() {' +
//定義點(diǎn)的坐標(biāo)并轉(zhuǎn)換成變量保存
'gl_Position = a_Position; ' +
'} ';
//片段著色器變量
var FSHADER_SOURCE =
'void main() {' +
//設(shè)置圖形像素的顏色并保存
'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
'}';
//新建一個(gè)用于裝頂點(diǎn)字符串的著色器對(duì)象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加載保存好的頂點(diǎn)代碼字符串變量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//編譯頂點(diǎn)著色器
gl.compileShader(vertShader);
//新建一個(gè)用于裝片段字符串的著色器對(duì)象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加載保存好的片段代碼字符串變量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//編譯片段著色器
gl.compileShader(fragShader);
//新建一個(gè)程序
var shaderProgram = gl.createProgram();
//分別附加兩個(gè)已編譯好的著色器對(duì)象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//鏈接兩個(gè)附件加好的著色器程序
gl.linkProgram(shaderProgram);
//開啟程序的使用
gl.useProgram(shaderProgram);
// 定義一個(gè)類型數(shù)組保存頂點(diǎn)坐標(biāo)值
// 數(shù)字對(duì)應(yīng)三角形三個(gè)點(diǎn)的坐標(biāo)
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
])
// 創(chuàng)建緩存對(duì)象
var vertexBuffer = gl.createBuffer()
// 說明緩存對(duì)象保存的類型
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 寫入坐標(biāo)數(shù)據(jù)
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 獲取到頂點(diǎn)著色器中變量
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
// 將坐標(biāo)值賦值給變量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 開啟變量值的使用
gl.enableVertexAttribArray(a_Position)
//繪制指定位置的圖形
gl.drawArrays(gl.TRIANGLES, 0, 3);
webGL動(dòng)畫
平移三角形
uniform類型變量
用于保存和傳輸一致的數(shù)據(jù)拴测，頂點(diǎn)著色器和片段著色器都可用。
//獲取畫布元素
var cvs=document.getElementById("cvs");
//獲取到元素的上下文環(huán)境對(duì)象
var gl=cvs.getContext('webgl');
//頂點(diǎn)著色器變量
var VSHADER_SOURCE =
// 使用存儲(chǔ)限定符定義一個(gè)接受頂點(diǎn)坐標(biāo)的變量
'attribute vec4 a_Position;' +
// 使用存儲(chǔ)限定符定義一個(gè)接受一致偏移量的變量
'uniform vec4 u_Translation;' +
'void main() {' +
//定義點(diǎn)的坐標(biāo)并轉(zhuǎn)換成變量保存
'gl_Position = a_Position + u_Translation; ' +
'} ';
//片段著色器變量
var FSHADER_SOURCE =
'void main() {' +
//設(shè)置圖形像素的顏色并保存
'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
'}';
//新建一個(gè)用于裝頂點(diǎn)字符串的著色器對(duì)象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加載保存好的頂點(diǎn)代碼字符串變量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//編譯頂點(diǎn)著色器
gl.compileShader(vertShader);
//新建一個(gè)用于裝片段字符串的著色器對(duì)象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加載保存好的片段代碼字符串變量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//編譯片段著色器
gl.compileShader(fragShader);
//新建一個(gè)程序
var shaderProgram = gl.createProgram();
//分別附加兩個(gè)已編譯好的著色器對(duì)象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//鏈接兩個(gè)附件加好的著色器程序
gl.linkProgram(shaderProgram);
//開啟程序的使用
gl.useProgram(shaderProgram);
// 定義一個(gè)類型數(shù)組保存頂點(diǎn)坐標(biāo)值
// 數(shù)字對(duì)應(yīng)三角形三個(gè)點(diǎn)的坐標(biāo)
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
])
// 創(chuàng)建緩存對(duì)象
var vertexBuffer = gl.createBuffer()
// 說明緩存對(duì)象保存的類型
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 寫入坐標(biāo)數(shù)據(jù)
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 獲取到頂點(diǎn)著色器中變量
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
// 將坐標(biāo)值賦值給變量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 開啟變量值的使用
gl.enableVertexAttribArray(a_Position)
// 定義各個(gè)坐標(biāo)點(diǎn)的統(tǒng)一偏移量
var Tx = 0.3, Ty = 0.5, Tz = 0.0;
// 獲取頂點(diǎn)著色器中uniform變量
var u_Translation = gl.getUniformLocation(shaderProgram, 'u_Translation')
// 將多個(gè)偏移量賦值給uniform變量
gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0)
//繪制指定位置的圖形
gl.drawArrays(gl.TRIANGLES, 0, 3);
旋轉(zhuǎn)三角形
//獲取畫布元素
var cvs=document.getElementById("cvs");
//獲取到元素的上下文環(huán)境對(duì)象
var gl=cvs.getContext('webgl');
//頂點(diǎn)著色器變量
var VSHADER_SOURCE =
// 使用存儲(chǔ)限定符定義一個(gè)接受頂點(diǎn)坐標(biāo)的變量
'attribute vec4 a_Position;' +
'uniform float u_CosB, u_SinB;' +
'void main() {' +
// 定義點(diǎn)的坐標(biāo)并轉(zhuǎn)換成變量保存
// w無實(shí)際意義府蛇，就是為了配合傳參
'gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;' +
'gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;' +
'gl_Position.z= a_Position.z;'+
'gl_Position.w = 1.0;' +
'} ';
//片段著色器變量
var FSHADER_SOURCE =
'void main() {' +
//設(shè)置圖形像素的顏色并保存
'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
'}';
//新建一個(gè)用于裝頂點(diǎn)字符串的著色器對(duì)象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加載保存好的頂點(diǎn)代碼字符串變量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//編譯頂點(diǎn)著色器
gl.compileShader(vertShader);
//新建一個(gè)用于裝片段字符串的著色器對(duì)象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加載保存好的片段代碼字符串變量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//編譯片段著色器
gl.compileShader(fragShader);
//新建一個(gè)程序
var shaderProgram = gl.createProgram();
//分別附加兩個(gè)已編譯好的著色器對(duì)象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//鏈接兩個(gè)附件加好的著色器程序
gl.linkProgram(shaderProgram);
//開啟程序的使用
gl.useProgram(shaderProgram);
// 定義一個(gè)類型數(shù)組保存頂點(diǎn)坐標(biāo)值
// 數(shù)字對(duì)應(yīng)三角形三個(gè)點(diǎn)的坐標(biāo)
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
])
// 創(chuàng)建緩存對(duì)象
var vertexBuffer = gl.createBuffer()
// 說明緩存對(duì)象保存的類型
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 寫入坐標(biāo)數(shù)據(jù)
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 獲取到頂點(diǎn)著色器中變量
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
// 將坐標(biāo)值賦值給變量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 開啟變量值的使用
gl.enableVertexAttribArray(a_Position)
// 設(shè)置需要旋轉(zhuǎn)的角度
var ANGLE = 40.0;
// 將角度轉(zhuǎn)換為弧度
var radian = Math.PI * ANGLE / 180.0;
// 計(jì)算正弦和余弦的值
var CosB = Math.cos(radian)
var SinB = Math.sin(radian)
// 從頂點(diǎn)著色器取出
var u_CosB = gl.getUniformLocation(shaderProgram, 'u_CosB')
var u_SinB = gl.getUniformLocation(shaderProgram, 'u_SinB')
// 將保存好的函數(shù)賦值給變量
gl.uniform1f(u_CosB, CosB)
gl.uniform1f(u_SinB, SinB)
//繪制指定位置的圖形
gl.drawArrays(gl.TRIANGLES, 0, 3);
縮放三角形
//獲取畫布元素
var cvs=document.getElementById("cvs");
//獲取到元素的上下文環(huán)境對(duì)象
var gl=cvs.getContext('webgl');
//頂點(diǎn)著色器變量
var VSHADER_SOURCE =
// 使用存儲(chǔ)限定符定義一個(gè)接受頂點(diǎn)坐標(biāo)的變量
'attribute vec4 a_Position;' +
'uniform mat4 u_xfomMatrix;' +
'void main() {' +
//定義點(diǎn)的坐標(biāo)并轉(zhuǎn)換成變量保存
'gl_Position = a_Position * u_xfomMatrix; ' +
'} ';
//片段著色器變量
var FSHADER_SOURCE =
'void main() {' +
//設(shè)置圖形像素的顏色并保存
'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
'}';
//新建一個(gè)用于裝頂點(diǎn)字符串的著色器對(duì)象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加載保存好的頂點(diǎn)代碼字符串變量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//編譯頂點(diǎn)著色器
gl.compileShader(vertShader);
//新建一個(gè)用于裝片段字符串的著色器對(duì)象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加載保存好的片段代碼字符串變量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//編譯片段著色器
gl.compileShader(fragShader);
//新建一個(gè)程序
var shaderProgram = gl.createProgram();
//分別附加兩個(gè)已編譯好的著色器對(duì)象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//鏈接兩個(gè)附件加好的著色器程序
gl.linkProgram(shaderProgram);
//開啟程序的使用
gl.useProgram(shaderProgram);
// 定義一個(gè)類型數(shù)組保存頂點(diǎn)坐標(biāo)值
// 數(shù)字對(duì)應(yīng)三角形三個(gè)點(diǎn)的坐標(biāo)
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
])
// 創(chuàng)建緩存對(duì)象
var vertexBuffer = gl.createBuffer()
// 說明緩存對(duì)象保存的類型
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 寫入坐標(biāo)數(shù)據(jù)
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 獲取到頂點(diǎn)著色器中變量
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
// 將坐標(biāo)值賦值給變量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 開啟變量值的使用
gl.enableVertexAttribArray(a_Position)
// 設(shè)置縮放的距離
var Sx = 1.5; Sy = 1.5; Sz = 1.0;
// 定義矩陣
var xformMatrix = new Float32Array([
Sx, 0.0, 0.0, 0.0,
0.0, Sy, 0.0, 0.0,
0.0, 0.0, Sz, 0.0,
0.0, 0.0, 0.0, 1.0
]);
// 獲取到頂點(diǎn)著色器中矩陣變量
var u_xfomMatrix = gl.getUniformLocation(shaderProgram, 'u_xfomMatrix');
// 將設(shè)置的值賦值給變量
gl.uniformMatrix4fv(u_xfomMatrix, false, xformMatrix)
//繪制指定位置的圖形
gl.drawArrays(gl.TRIANGLES, 0, 3);
動(dòng)畫
//獲取畫布元素
var cvs=document.getElementById("cvs");
//獲取到元素的上下文環(huán)境對(duì)象
var gl=cvs.getContext('webgl');
//頂點(diǎn)著色器變量
var VSHADER_SOURCE =
// 使用存儲(chǔ)限定符定義一個(gè)接受頂點(diǎn)坐標(biāo)的變量
'attribute vec4 a_Position;' +
'uniform float u_CosB, u_SinB;' +
'void main() {' +
// 定義點(diǎn)的坐標(biāo)并轉(zhuǎn)換成變量保存
// w無實(shí)際意義集索，就是為了配合傳參
'gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;' +
'gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;' +
'gl_Position.z= a_Position.z;'+
'gl_Position.w = 1.0;' +
'} ';
//片段著色器變量
var FSHADER_SOURCE =
'void main() {' +
//設(shè)置圖形像素的顏色并保存
'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
'}';
//新建一個(gè)用于裝頂點(diǎn)字符串的著色器對(duì)象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加載保存好的頂點(diǎn)代碼字符串變量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//編譯頂點(diǎn)著色器
gl.compileShader(vertShader);
//新建一個(gè)用于裝片段字符串的著色器對(duì)象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加載保存好的片段代碼字符串變量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//編譯片段著色器
gl.compileShader(fragShader);
//新建一個(gè)程序
var shaderProgram = gl.createProgram();
//分別附加兩個(gè)已編譯好的著色器對(duì)象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//鏈接兩個(gè)附件加好的著色器程序
gl.linkProgram(shaderProgram);
//開啟程序的使用
gl.useProgram(shaderProgram);
// 定義一個(gè)類型數(shù)組保存頂點(diǎn)坐標(biāo)值
// 數(shù)字對(duì)應(yīng)三角形三個(gè)點(diǎn)的坐標(biāo)
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
])
// 創(chuàng)建緩存對(duì)象
var vertexBuffer = gl.createBuffer()
// 說明緩存對(duì)象保存的類型
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 寫入坐標(biāo)數(shù)據(jù)
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 獲取到頂點(diǎn)著色器中變量
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
// 將坐標(biāo)值賦值給變量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 開啟變量值的使用
gl.enableVertexAttribArray(a_Position)
// 設(shè)置需要旋轉(zhuǎn)的角度
var ANGLE = 40.0;
function draw(ANGLE) {
// 將角度轉(zhuǎn)換為弧度
var radian = Math.PI * ANGLE / 180.0;
// 計(jì)算正弦和余弦的值
var CosB = Math.cos(radian)
var SinB = Math.sin(radian)
// 從頂點(diǎn)著色器取出
var u_CosB = gl.getUniformLocation(shaderProgram, 'u_CosB')
var u_SinB = gl.getUniformLocation(shaderProgram, 'u_SinB')
// 將保存好的函數(shù)賦值給變量
gl.uniform1f(u_CosB, CosB)
gl.uniform1f(u_SinB, SinB)
gl.clear(gl.COLOR_BUFFER_BIT);
//繪制指定位置的圖形
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
// 計(jì)算每秒繪制的角度
// 旋轉(zhuǎn)前時(shí)間
var cur_time = Date.now();
// 旋轉(zhuǎn)角度
var ANGLE_STEP = -80.0;
// 初始角度
var ANGLE_INIT = 30.0;
// 執(zhí)行角度
var ANGLE_ACT = 0.0;
function animate(c1, a1, a2) {
// 計(jì)算距離上次調(diào)用經(jīng)過的時(shí)間
var act_time = Date.now();
// 得到這次調(diào)用和上次調(diào)用的時(shí)間間隔
var dif_time = act_time - c1;
c1 = act_time;
var ANGLE_NEW = a1 + a2 * (dif_time / 10000.0);
// 返回一個(gè)始終小于360的角度
return ANGLE_NEW %= 360;
}
function tick() {
// 獲取每次旋轉(zhuǎn)的角度
ANGLE_ACT = animate(cur_time, ANGLE_INIT, ANGLE_STEP);
draw(ANGLE_ACT);
// setInterval(tick, 100)
window.requestAnimationFrame(tick);
}
tick();
顏色
所有的顏色是片段著色器繪制的
繪制多頂點(diǎn)顏色的三角形
//獲取畫布元素
var cvs=document.getElementById("cvs");
//獲取到元素的上下文環(huán)境對(duì)象
var gl=cvs.getContext('webgl');
//頂點(diǎn)著色器變量
var VSHADER_SOURCE =
//使用存儲(chǔ)限定符定義一個(gè)接受頂點(diǎn)坐標(biāo)的變量
'attribute vec4 a_Position;'+
'attribute vec4 a_Color;'+
'varying vec4 v_Color;'+
'void main() {' +
//定義點(diǎn)的坐標(biāo)并轉(zhuǎn)換成變量保存
'gl_Position = a_Position; ' +
'v_Color = a_Color; ' +
'} ';
//片段著色器變量
var FSHADER_SOURCE =
'precision mediump float;'+
'varying vec4 v_Color;'+
'void main() {' +
//設(shè)置圖形像素的顏色并保存
'gl_FragColor = v_Color ;' +
'}';
//新建一個(gè)用于裝頂點(diǎn)字符串的著色器對(duì)象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加載保存好的頂點(diǎn)代碼字符串變量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//編譯頂點(diǎn)著色器
gl.compileShader(vertShader);
//新建一個(gè)用于裝片段字符串的著色器對(duì)象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加載保存好的片段代碼字符串變量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//編譯片段著色器
gl.compileShader(fragShader);
//新建一個(gè)程序
var shaderProgram = gl.createProgram();
//分別附加兩個(gè)已編譯好的著色器對(duì)象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//鏈接兩個(gè)附件加好的著色器程序
gl.linkProgram(shaderProgram);
//開啟程序的使用
gl.useProgram(shaderProgram);
// 定義一個(gè)類型數(shù)組保存頂點(diǎn)坐標(biāo)值
// 數(shù)字對(duì)應(yīng)三角形三個(gè)點(diǎn)的坐標(biāo)
var vertices = new Float32Array([
// x y r g b
0.0, 0.5, 1.0, 0.0, 0.0,
-0.5, -0.5, 0.0, 1.0, 0.0,
0.5, -0.5, 0.0, 0.0, 1.0,
])
// 創(chuàng)建緩存對(duì)象
var vertexBuffer = gl.createBuffer()
// 說明緩存對(duì)象保存的類型
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 寫入坐標(biāo)數(shù)據(jù)
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 獲取到數(shù)組中單個(gè)元素的字節(jié)數(shù)
var FSIZE = vertices.BYTES_PER_ELEMENT;
// 獲取到頂點(diǎn)著色器中變量
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');
// 將坐標(biāo)值賦值給變量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*5, 0);
// 開啟變量值的使用
gl.enableVertexAttribArray(a_Position);
// 獲取到頂點(diǎn)著色器中變量
var a_Color = gl.getAttribLocation(shaderProgram, 'a_Color');
// 將坐標(biāo)值賦值給變量
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE*5, FSIZE*2);
// 開啟變量值的使用
gl.enableVertexAttribArray(a_Color);
//繪制指定位置的圖形
gl.drawArrays(gl.TRIANGLES, 0, 3);
