WebGL 绘制和变换

1.使用缓冲区对象向顶点着色器传入多个顶点的数据,需要遵循以下五个步骤:

1.1 创建缓冲区对象(gl.createBuffer())。

1.2 绑定缓冲区对象(gl.bindBuffer())。

1.3 将数据写入缓冲区对象(gl.bufferData())。

1.4 将缓冲区对象分配给一个attribute变量(gl.vertexAttribPointer())。

1.5 开启attribute变量(gl.enableVertexAttribArray())。

2.创建缓冲区对象(gl.createBuffer())

在使用WebGL时,需要调用gl.createBuffer()方法来创建缓冲区对象。下面的图上部分是执行前的状态,下部分是执行后的状态。

对应createBuffer的是gl.deleteBuffer(buffer)函数,用来删除创建的缓冲区对象。buffer表示带删除的缓冲区对象。

3.绑定缓冲区(gl.bindBuffer(target, buffer))

将缓冲区对象绑定到WebGl系统中已经存在的“目标”(target)上。参数:

target:绑定的目标。可以使以下中的一个:gl.ARRAY_BUFFER,表示缓冲区对象中包含了顶点的数据;gl.ELEMENT_,表示缓冲区对象中包含了顶点的索引值。

buffer:指定之前由gl.createBuffer()返回的带绑定的缓冲区对象。

执行绑定后,WebGL系统内部状态发生变化。如图所示:

4.向缓冲区对象中写入数据(gl.bufferData(target, data, usage))

开辟存储空间,想绑定在target上的缓冲区对象总写入数据data。参数:

target:gl.ARRAY_BUFFER或gl.ELEMENT_ARRAY_BUFFER。

data:写入缓冲区对象的数据。

usage: 表示程序将如何使用存储在缓冲区对象中的数据。参数值包括:gl.STATIC_DRAW,只会向缓冲区对象中写入一次数据,但需要绘制很多次;gl.STREAM_DRAW,只会向缓冲区对象中写入一次数据,然后绘制若干次;gl.DYNAMIC_DRAW,会想缓冲区对象中多次写入数据,并绘制很多次。

5.类型化数组

WebGL使用的各种类型化数组包括:

数组类型/每个元素所占用字节数/描述(C语言总的数据类型)

Int8Array/1/8位整形数(signed char)

UInt8Array/1/8位无符号整形数(unsigned char)

Int16/2/16位整形数(signed short)

UInt16Array/2/16位无符号整形数(unsigned short)

Int32Array/4/32位整形数(signed int)

UInt32Array/4/32位无符号整形数(unsigned int)

Float32Array/4/单精度32位浮点数(float)

Float64Array/8/双精度64位浮点数(double)

6.类型化数组的方法、属性和常量

方法、属性和常量/描述

get(index)/获取第index个元素值

set(index, offset)/设置第index个元素的值为value

set(array, offset)/从第offset个元素开始讲数组array中的值填充进去

length/数组长度

BYTES_PER_ELEMENT/数组中每个元素所占字节数

7.将缓冲区对象分配给attribute变量(gl.vertexAttribPointer(location, size, type, normalized, stride, offset))

将绑定到gl.ARRAY_BUFFER的缓冲区对象分配给有location指定的attribute变量。参数:

location:指定带分配attribute变量的存储位置。

size:指定缓冲区中每个顶点的分量个数(1到4)。若size比attribute变量书序的分量数小,确实分量将按照与gl.vertexAttrib[1234]f()相同的规则补全。

type:使用一下类型之一来指定数据格式:gl.UNSIGNED_BYTE,无符号字节,UInt8Array;gl.SHORT,短整形,Int16Array;gl.UNSIGNED_SHORT,无符号短整形,Uint16Array;gl.INT,整形,Int32Array;gl.UNSIGNED_INT, 无符号整形,Uint32Array;gl.FLOAT,浮点型,Float32Array。

normalize:传入true或false,标明是否将非浮点型的数据归纳化到[0,1]或[-1,1]区间。

stride:指定响铃两个顶点间的字节数,默认为0。

offset:指定缓冲区对象中的偏移量以直接为单位。如果是起始位置,则offset为0。

8.开启attribute变量(gl.enableVertexAttribArray(location))

为了使定点着色器能够访问缓冲区内的数据,需要使用gl.enableVertexAttribArray()方法开启attribute变量。

时间: 2024-08-01 10:41:27

WebGL 绘制和变换的相关文章

利用javascript和WebGL绘制地球 【翻译】

利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个API我们能够在浏览器中创造出炫酷3D场景的能力.本文将完整的向你展示一些炫酷是如何实现的. 需要特别指出的是,这篇教程我们将会构建一个地球行星模型,这个模型可以像一个兴奋的人一样环绕的旋转,另外,它可能使我们可以获得一些其他程序员的称赞,好吧,就这么多了. 准备 这篇教程我们将会用到一个令人着迷的We

WebGL 绘制Line的bug(一)

熟悉WebGL的同学都知道,WebGL绘制模式有点.线.面三种:通过点的绘制可以实现粒子系统等,通过线可以绘制一些连线关系:面就强大了,通过面,我们可以绘制我们想绘制的所有的三维对象. 一切看起来都很完美,perfect. 然而,不幸的是,WebGL在绘制线条的时候,存在一个缺陷,那就是在一些机器的一些浏览器上面(应该是大多数情况下)线宽只能设置为1,而不能设置成其他的值. 通过网址http://alteredqualia.com/tmp/webgl-linewidth-test/,我们可以测试

webGL 绘制图形

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

WebGL入门教程(二)-webgl绘制三角形

前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形. 效果图: 在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点 //绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); 但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer obje

WebGL 绘制Line的bug(三)

上一篇已经讲述了通过面模拟线条时候,每一个顶点的顶点数据包括:端点坐标.偏移量.前一个端点坐标.后一个端点坐标,当然如果我们通过索引的方式来绘制的话,还包括索引数组,下面的代码通过传递一组线条的端点数组来创建上述相关数据:?```bk.Line3D = function (points,colors){? ? ?this.points = points;? ? ?this.colors = colors;} bk.Line3D.prototype.computeData = function()

webgl 绘制三角形 2.1

我的娘噶, 我真的学的太慢了, webgl,不行得加快脚楽. 上节课就是随便介绍了一下webgl, 这节课的知识特别的多呢. 感觉得分为两次讲呢. 你就随着我的脚步慢慢走吧. 一 .首先,介绍一下,webgl里面的 坐标系.右手坐标系.不说了,直接上图 这就不用介绍了吧, 伸出你的右手比划一下,Z轴是穿出你的屏幕的,刺向你的哦, 不要眨眼, 不会伤害你的眼睛, 不过温馨提示,注意休息眼睛哦. 二 . 介绍两个shader, 与显卡GPU有关 1.vertexShader: 顶点shader, 以

WebGL简易教程(五):图形变换(模型、视图、投影变换)

目录 1. 概述 2. 详论 1) 模型变换 (1) 平移变换 (2) 缩放变换 (3) 旋转变换 (4) 组合变换 2) 视图变换 (1) 原理 (2) 推导 3) 投影变换 (1) 透视投影 (2) 正射投影 3. 综合运用 4. 参考 1. 概述 通过之前的教程,对WebGL中可编程渲染管线的流程有了一定的认识.但是只有前面的知识还不足以绘制真正的三维场景,可以发现之前我们绘制的点.三角形的坐标都是[-1,1]之间,Z值的坐标都是采用的默认0值,而一般的三维场景都是很复杂的三维坐标.为了在

图解 WebGL &amp; Three.js 工作原理

1.WebGL背后的工作原理是什么? 2.以Three.js为例,讲述框架在背后扮演什么样的角色? 我们为什么要了解原理? 我们假定你对WebGL已经有一定了解,或者用Three.js做过了一些东西,这个时候,你可能碰到了这样一些问题: 1.很多东西还是做不出来,甚至没有任何思路: 2.碰到bug无法解决,甚至没有方向: 3.性能出现问题,完全不知道如何去优化. 这个时候,我们需要了解更多. 1.什么是矩阵? 简单说来,矩阵用于坐标变换,如下图: 2.那它具体是怎么变换的呢,如下图: 3.举个实

图解WebGL&amp;Three.js工作原理

“哥,你又来啦?”“是啊,我随便逛逛.”“别介啊……给我20分钟,成不?”“5分钟吧,我很忙的.”“不行,20分钟,不然我真很难跟你讲清楚.”“好吧……”“行,那进来吧,咱好好聊聊” 一.我们讲什么? 我们讲两个东西:1.WebGL背后的工作原理是什么?2.以Three.js为例,讲述框架在背后扮演什么样的角色? 二.我们为什么要了解原理? 我们假定你对WebGL已经有一定了解,或者用Three.js做过了一些东西,这个时候,你可能碰到了这样一些问题:1.很多东西还是做不出来,甚至没有任何思路: