上一节:
下一节:

  WebGL - 绘制模型

  • 简述

    将缓冲区与着色器相关联后，最后一步是绘制所需的图元。WebGL 提供了drawArrays()和drawElements()两种方法来绘制模型。

  • 绘制数组()

    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 - 此选项指定启用数组中的起始元素。它不能是负值。
    • count - 此选项指定要呈现的元素数。
    如果您使用drawArrays()方法绘制模型，则 WebGL 在渲染形状时会按照定义顶点坐标的顺序创建几何图形。

    例子

    如果要使用drawArray()方法绘制单个三角形，则必须传递三个顶点并调用drawArrays()方法，如下所示。 
    
var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 3);
    它将产生一个三角形，如下所示。
    三角形
    假设你想绘制连续的三角形，那么你必须在顶点缓冲区中按顺序传递接下来的三个顶点，并提到要渲染的元素数为 6。 
    
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);
    它将产生一个连续的三角形，如下所示。
    三角形 1

  • 绘制元素()

    drawElements()是用于使用顶点和索引绘制模型的方法。其语法如下 - 
    
void drawElements(enum mode, long count, enum type, long offset)
    该方法采用以下四个参数 -
    • mode - WebGL 模型是使用原始类型绘制的。使用模式，程序员必须选择 WebGL 提供的原始类型之一。此选项的可能值列表是 - gl.POINTS、gl.LINE_STRIP、gl.LINE_LOOP、gl.LINES、gl.TRIANGLE_STRIP、gl.TRIANGLE_FAN 和 gl.TRIANGLES。
    • count - 此选项指定要呈现的元素数。
    • type - 此选项指定必须为 UNSIGNED_BYTE 或 UNSIGNED_SHORT 的索引的数据类型。
    • offset - 此选项指定渲染的起点。它通常是第一个元素 (0)。
    如果使用drawElements()方法绘制模型，则索引缓冲区对象也应与顶点缓冲区对象一起创建。如果使用此方法，顶点数据将被处理一次并使用索引中提到的次数。

    例子

    如果要使用索引绘制单个三角形，则需要将索引与顶点一起传递并调用drawElements()方法，如下所示。 
    
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);
    它将产生以下输出 -
    三角形
    如果您想使用drawElements()方法绘制传染三角形，只需添加其他顶点并提及其余顶点的索引即可。 
    
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);
    它将产生以下输出 -
    三角形 1

  • 所需操作

    在绘制图元之前，您需要执行一些操作，这些操作将在下面进行说明。

    清除画布

    首先，您应该使用clearColor()方法清除画布。您可以将所需颜色的 RGBA 值作为参数传递给此方法。然后 WebGL 清除画布并用指定的颜色填充它。因此，您可以使用此方法来设置背景颜色。
    看看下面的例子。这里我们传递灰色的 RGBA 值。 
    
gl.clearColor(0.5, 0.5, .5, 1);

    启用深度测试

    使用enable()方法启用深度测试，如下所示。 
    
gl.enable(gl.DEPTH_TEST);

    清除颜色缓冲位

    使用clear()方法清除颜色和深度缓冲区，如下所示。 
    
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    设置视口

    视口表示一个矩形可视区域，其中包含绘图缓冲区的渲染结果。您可以使用viewport()方法设置视口的尺寸。在以下代码中，视口尺寸设置为画布尺寸。 
    
gl.viewport(0,0,canvas.width,canvas.height);
上一节:
下一节: