WebGL学习 🌟 Shuey猫舍

WebGL理解

状态

gl_Position: 被定义的顶点着色器返回值寄存器。

参数

属性(Attributes)，缓冲区(Buffers)和顶点数组(Vetex Arrays)

缓存区以二进制数据形式的数组传给GPU。缓存区可以放任意数据，通常有位置，归一化参数，纹理坐标，顶点颜色等等

属性用来指定数据如何从缓冲区获取并提供给顶点着色器。比如你可能将位置信息以3个32位的浮点数据存在缓存区中，一个特定的属性包含的信息有：它来自哪个缓存区，它的数据类型(3个32位浮点数据)，在缓存区的起始偏移量，从一个位置到下一个位置有多少个字节等等。

缓冲区并非随机访问的，而是将顶点着色器执行指定次数。每次执行时，都会从每个指定的缓冲区中提取下一个值并分配给一个属性。

属性的状态收集到一个顶点数组对象（VAO）中，该状态作用在每个缓冲区，以及如何从这些缓冲区中提取数据。

Uniforms

Uniforms是在执行着色器程序前设置的全局变量

纹理(Textures)

纹理是能够在着色器程序中随机访问的数组数据。大多数情况下纹理存储图片数据，但它也用于包含颜色以为的数据。

Varyings

Varyings是一种从点着色器到片段着色器传递数据的方法。根据显示的内容如点，线或三角形，顶点着色器在Varyings中设置的值，在运行片段着色器的时候会被解析。

绘制

gl.drawArrays和gl.drawElements将状态绘制到屏幕上。

版本

#version 300 es: 首行启用WebGL2

创建着色器程序

@startuml
(*) -right-> gl.createProgram
-right-> gl.attachShader
-right-> gl.linkProgram
if "gl.getProgramParameter" then
  note left: gl.getProgramParameter(program, gl.LINK_STATUS)
  -->[false] gl.getProgramInfoLog
  -right-> gl.deleteProgram
  -right-> (*)
else
  -right->[true] (*)
endif
@enduml

创建着色器

@startuml
(*) -right-> gl.createShader
note top: 根据类型(VERTEX_SHADER、FRAGMENT_SHADER)创建着色器
-right-> gl.shaderSource
-right-> gl.compileShader
if "gl.getShaderParameter" then
  -->[true] gl.attachShader
  note left: 绑定程序
  --> (*)
else
  note left: gl.getShaderParameter(shader, gl.COMPILE_STATUS)
  -->[false] gl.getShaderInfoLog
  --> gl.deleteShader
  -right-> (*)
endif
@enduml

创建buffer

@startuml
(*) -right-> gl.createBuffer
-right-> gl.bindBuffer
note top: 指定buffer写入、读取位置
-right-> gl.bufferData
note bottom: static type: STATIC_DRAW
-right-> (*)
@enduml

代码中多次使用bindBuffer，起初阅读代码以为是指定buffer中的数据类型，之后发现在要使用这个数据的时候也需要在这之前调用bindBuffer。于是觉得不同的bind类型是不同的数据类型的访问指针（参gl.h），在写入gl.bufferData和读取gl.vertexAttribPointer、gl.enableVertexAttribArray之前都需要重新绑定到固定地址。

gl.ARRAY_BUFFER: 包含顶点属性的Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。
gl.ELEMENT_ARRAY_BUFFER: 用于元素索引的Buffer。
gl.COPY_READ_BUFFER: 从一个Buffer对象复制到另一个Buffer对象。
gl.COPY_WRITE_BUFFER: 从一个Buffer对象复制到另一个Buffer对象。
gl.TRANSFORM_FEEDBACK_BUFFER: Buffer for transform feedback operations.
gl.UNIFORM_BUFFER: 用于存储统一块的Buffer。
gl.PIXEL_PACK_BUFFER: 用于像素传输操作的Buffer。
gl.PIXEL_UNPACK_BUFFER: 用于像素传输操作的Buffer。

创建纹理

@startuml
(*) -right-> gl.createTexture
-right-> gl.bindTexture
note top: 绑定指针
-right-> gl.texImage2D
--> gl.texParameteri
-right-> gl.texParameteri
-left-> gl.bindTexture(gl.TEXTURE_2D, null)
note bottom: 释放指针
-left-> (*)
@enduml

从这里我就更觉得bind相关的操作就是把固定的内存指针指向数据区域，并且对这个区域做出操作。详细的要求参考MDN WebGL Texture。

默认操作

vertexAttribPointer

Shuey猫舍

WebGL学习