webgl第八课-绘制多个顶点的基础知识

版权声明:本博客只做技术交流使用 https://blog.csdn.net/weixin_39452320/article/details/81173710

需要源码可以Q群:828202939 或者点击这里  希望可以和大家一起学习、一起进步!!纯手打!!

书籍是PDF电子档,也在Q群里,所有的课程源代码在我上传的资源里面,本来想设置开源,好像不行!

如有错别字或有理解不到位的地方,可以留言或者加微信15250969798,在下会及时修改!!!!!

本节主要是为了后面的一些稍微复杂的一些课程内容做铺垫!

buffer object  (缓冲区对象)  它可以一次性地向着色器传入多个顶点的数据。缓冲区对象是webgl系统中的一块内存区域,我们可以一次性地向缓冲区对象填充大量的顶点数据,然后将这些数据保存在其中,以供顶点着色器使用

一般分为以下几个步骤:

1.创建缓冲区对象 gl.createBuffer()    //gl.daeletBuffer(buffer)可以删除缓冲区对象

2.绑定缓冲区对象 gl.bindBuffer(target,buffer)

    target表示需要绑定缓冲区对象的目标对象,有以下几个参数:

    gl.ARRAY_BUFFER 、gl.ELEMENT、ARRAY_BUFFER、buffer

扫描二维码关注公众号,回复: 4678564 查看本文章

3.将数据写入缓冲区对象  gl.bufferData(target,data,usage)

   target    gl.ARRAY_BUFFER或者gl.ELEMENT_ARRAY_BUFFER

   data      写入缓冲区对象的数据(类型化数组)

   usage   表示程序如何使用储存在缓冲区对象中的数据,这个参数主要帮助webgl进行性能优化,有gl.STATIC_DRAM、

                 gl.STREAM_DEAM、gl.DYNAMIC_DEAM

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

将绑定到gl.ARRAY_BUFFER的缓冲区对象分配给由location指定的attribute变量

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

size         指定缓冲区中每个顶点的分量个数(1-4,xyzw)

type        指定的数据格式

normalize   传入true或者false,表明是否将非浮点型的数据归一化到【0,1】或者【-1,1】区间

stride      指定相邻两个顶点间的字节数,默认为0

offset      指定缓冲区对象的偏移量,即attribute变量从缓冲区中的何处开始存储

5.开启attribute变量  gl.enableVertexAttribARRAY(a_POsition)

开启location指定的attribute变量

a_Position   指定attribute变量的存储位置

补充::::::

  补充一: gl.disableVertexAttribARRAY(a_POsition)

   关闭location指定的attribute

 补充二: 类型化数组:Int8Array 、UInt8Arrray、Int16Array 、UInt16Arrray、Int32Array 、UInt32Arrray、Float32Array、Float64Arry

  方法:  get(index)  获取第index个元素只     set(index, value ) 设置第index个元素的值为value

               set(array,offset) 从第offset个元素开始将数组array中的值填充进去    length  数组的长度

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

类型化数组通过new来创建  ,不能直接使用【】使用

类型话数组不支持push()和pop()方法

补充三:

gl.drawArrays(mode,first,count)

mode   指定绘制的方式

first      指定从哪个顶点开始绘制(整型数)

count   指定绘制需要用到多少个顶点(整型数)
 

基本上一些基础的知识就是这些了! 

猜你喜欢

转载自blog.csdn.net/weixin_39452320/article/details/81173710
今日推荐