drawArrays()

void drawArrays(enum mode, int first, long count)

• mode ? 在WebGL中，模型采用原始類型繪制。使用模式，程序員不得不選擇通過WebGL提供的原始類型。該選項的可能值為 ? gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, 和 gl.TRIANGLES.

• first ? 此選項指定啟用數(shù)組開始元素。它不能是負值。

• count ? 此選項指定要呈現(xiàn)的元素數(shù)。

示例

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 3);

它會產(chǎn)生一個三角形，如下所示。

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5, 0.0,-0.5, 0.25,0.5, 0.5,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 6);

這會產(chǎn)生一種連續(xù)的三角形，如下所示。

drawElements()

void drawElements(enum mode, long count, enum type, long offset)

• mode ? WebGL模型使用的是原始類型繪制。使用模式，程序員必須選擇WebGL提供的原始類型之一。對于此選項可能值的列表是- l.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, 和 gl.TRIANGLES.

• count ? 此選項指定待渲染的元素數(shù)量。

• type ? 此選項指定必須是UNSIGNED_BYTE或UNSIGNED_SHORT索引的數(shù)據(jù)類型。

• offset ? 此選項指定渲染起點。它通常是第一個元素(0)。

示例

var vertices =[-0.5,-0.5,0.0,-0.25,0.5,0.0,0.0,-0.5,0.0]; 
var indices =[0,1,2]; 
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

它會產(chǎn)生下面的輸出 -

var vertices =[-0.5,-0.5,0.0,-0.25,0.5,0.0,0.0,-0.5,0.0,0.25,0.5,0.0,0.5,-0.5,0.0]; 
var indices =[0,1,2,2,3,4]; 
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

它會產(chǎn)生下面的輸出 -

所需的操作

清除Canvas

gl.clearColor(0.5, 0.5, .5, 1);

啟用深度測試

gl.enable(gl.DEPTH_TEST); 

清除顏色緩沖區(qū)位

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

設置瀏覽端口

gl.viewport(0,0,canvas.width,canvas.height);