WebGL几何体

2024-03-02 15:25| 来源: 网络整理| 查看: 265

图形对象由其中在GPU上运行的着色器程序来创建。几何信息传递到使用缓冲区对象着色器程序。定义所需的几何体使用顶点所绘的2D或3D模型被称为网格。在网格的每个面被称为多边形和多边形是由3个或更多的顶点组成。要绘制模型在WebGL中渲染，必须定义使用 JavaScript 数组的顶点和索引。举例来说，如果我们想创建一个三角形的位于坐标{(5,5)，(5,5)，(-5，-5)}如图所示，图中，那么可以创建一个数组的顶点- var vertices = [ 0.5,0.5, //Vertex 1 0.5,-0.5, //Vertex 2 -0.5,-0.5, //Vertex 3 ]; 同样，可以创建一个数组的索引。指数为上述三角形索引将是[0，1，2]，可以定义为 - var indices = [ 0,1,2 ] 为了更好地理解索引，考虑更多复杂的模型，如正方形。我们可以代表一个正方形为一组的两个三角形。如果(0,3,1)和(3,1,2)是用两个三角形，我们打算绘制一个正方形，那么索引将被定义为 - var indices = [0,3,1,3,1,2];

注意 −

对于绘图图元，WebGL 提供了以下两种方法 -

drawArrays() − 当使用这种方法，我们通过原语使用JavaScript数组的顶点。

drawElements() − 当使用这种方法，我们通过这两个顶点和原语使用JavaScript数组的索引。

缓冲区对象缓冲对象是由WebGL的提供了一个机制，用于指示分配到系统中的存储器区域。在这些缓冲区对象，可以存储要绘制模型的数据，对应的顶点，索引，颜色等。使用这些缓冲区对象，可以通过它的属性变量中的一个传递多个数据的着色器程序(顶点着色器)。由于这些缓冲对象驻留在GPU存储器，它们可以被直接呈现，这反过来又提高了性能。为了处理几何形状，有两种类型的缓冲区的对象。他们是-

顶点缓冲区对象 (VBO) − 它保持所述图形模型，要被渲染的每个顶点的数据。我们使用顶点缓冲对象中的WebGL存储和处理关于顶点诸如顶点坐标，法线，色彩，纹理坐标数据。

索引缓冲区对象(IBO) − 它保持所述图形模型的索引(索引数据)，这是要被渲染的。

限定所需的几何形状和它们存储在JavaScript数组，需要将这些阵列传递给对象缓冲器，数据将被传递到着色器程序。下面的步骤是在缓冲器要遵循数据存储。创建一个空的缓冲区。绑定相应的数组对象为空缓冲区。传递数据(顶点/索引)使用类型数组的一个缓冲区。取消绑定缓存(可选)。

注−

WebGL提供了一种特殊类型数组称为类型数组来传输数据元素，如索引顶点和纹理。这些类型的数组存储大量数据并处理它们在本地二进制格式，这将产生更好的性能。使用WebGL类型数组是Int8Array，Uint8Array，Int16Array，Uint16Array，Int32Array，UInt32Array，Float32Array和Float64Array。通常，用于存储顶点数据，我们用Float32Array; 要存储索引数据，我们使用Uint16Array。可以创建类型数组就像使用new关键字JavaScript数组。现在，让我们来了解步骤存储在缓冲区的数据 - 创建缓冲区要创建一个空的缓冲区对象，WebGL提供了一个名为createBuffer()的方法。该方法如果创建成功，返回一个新创建的缓冲区对象; 否则返回失败的情况下一个 null 值。 WebGL操作为状态机。一旦缓冲器被创建，任何后续缓冲操作将在当前缓冲器被执行，直到我们解除绑定它。使用下面的代码来创建缓冲区 - var vertex_buffer = gl.createBuffer();

注 − gl 是参考变量的当前的 WebGL 的上下文。

绑定缓冲创建一个空的缓冲区对象后，需要一个合适的数组缓冲区(目标)绑定到它。 WebGL提供)用于此目的称为bindBuffer() 方法。语法

bindBuffer()方法的语法如下 −

void bindBuffer (enum target, Object buffer) 这个方法有两个参数，它们将在下面讨论。

target − 第一变量是一个枚举值，表示我们要绑定到空缓冲器的缓冲的类型。有两个预定义枚举值作为该参数选项。他们是-

ARRAY_BUFFER 表示顶点的数据。

ELEMENT_ARRAY_BUFFER 表示索引数据。

Object buffer − 第二个是参考变量，在上一步中创建的缓冲区对象。参考变量可以是一个索引缓存对象或顶点缓冲对象。

示例下面的代码片段展示了如何使用 bindBuffer()方法。 //vertex buffer var vertex_buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); //Index buffer var Index_Buffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer); 数据传递到缓冲区下一步骤是将数据(顶点/索引)传送给缓冲器。截至目前数据是一个数组的形式在传递到缓冲区之前，我们需要把它包在WebGL的一个类型数组。 WebGL提供用于此目的的 bufferData()方法。语法 bufferData()方法的语法如下 - void bufferData (enum target, Object data, enum usage) 这个方法接受三个参数，它们将在下面讨论 -

target − 第一个参数是一个枚举值，表示我们使用了数组中缓冲的类型。它们可以是ARRAY_BUFFER或ELEMENT_ARRAY_BUFFER。

Object data − 第二个参数是包含数据写入到缓冲对象的对象的值。在这里，我们使用类型数组来传递数据。

Usage − 该方法的第三个参数是一个枚举变量，来指定如何使用缓冲区对象的数据(存储的数据)来绘制形状。有三种选择此参数如下表所示。

gl.STATIC_DRAW − 数据将指定一次，多次使用。

gl.STREAM_DRAW − 数据将指定一次，使用几次。

gl.DYNAMIC_DRAW − 数据将被重复指定和多次使用。

示例下面的代码片段展示了如何使用bufferData()方法。假设顶点和指数分别保持在顶点和索引数据的数组。 //vertex buffer gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); //Index buffer gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 取消绑定缓冲区建议解除绑定缓存使用后。它可以通过使一个零值代替缓冲对象来完成，如下所示。 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); WebGL提供以下方法来执行缓冲区操作 - S.No. 方法及说明 1

void bindBuffer (enum target, Object buffer)

target − ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER

void bufferData(enum target, long size, enum usage)

target − ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER

usage − STATIC_DRAW, STREAM_DRAW, DYNAMIC_DRAW

void bufferData (enum target, Object data, enum usage)

target and usage − Same as for bufferData above

void bufferSubData(enum target, long offset, Object data)

target − ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER

5 Object createBuffer() 6 void deleteBuffer(Object buffer) 7

any getBufferParameter(enum target, enum pname)

target − ARRAY_BUFFER, ELEMENT_ ARRAY_BUFFER

pname − BUFFER_SIZE, BUFFER_USAGE

8 bool isBuffer(Object buffer)

【本文地址】

WebGL几何体

WebGL几何体

今日新闻

推荐新闻