Skip to main content

(WIP)3d - webgl

webgl

学习基础​

  • 物理知识
  • html
  • css
  • js
  • 计算机图形学
  • 数学基础： 尤其是线性代数

学习资源​

Webgl games101 threejs(对 webgl 的二次封装)

书籍： webGL 编程指南 webGL 高级

杂乱的碎片信息，待整理​

坐标​

把屏幕坐标转换为 webgl 中显示的坐标。

渲染管线​

顶点缓冲区 图元化：类似是决定用什么 geometry 光栅化：分解成小的像素 片元着色器 深度缓冲区 颜色缓冲区

关键名词​

鼠标绘制​

基础概念​

顶点缓冲区​

ARRAY_BUFFER

存储了一系列顶点信息， 包括位置，颜色，法向量等。这些定点组合在一起可以形成三维模型。利用定点缓冲区可以提高渲染效率，因为它允许 GPU 在不与 CPU 通信的情况下直接读取顶点数据，并将其发送到着色器程序中进行处理。

纹理坐标缓冲区​

TEXTURE_BUFFER 存储了一系列纹理坐标信息。纹理是一张图片，可以映射到三维模型表面上，让它看起来更加真实。纹理坐标确定了纹理在模型表面上的具体位置。

索引缓冲区​

ELEMENT_ARRAY_BUFFER 是什么：一种特殊的缓冲区，存储了一系列【顶点】的索引值，用于指示 webGL 如何组合这些顶点以形成三维模型。 有什么用：

  1. 索引缓冲区可以提高渲染效率，特别是对于包含大量重复定点的模型，就可以只存储不同的顶点，用索引来引用它们，从而减少内存占用和带宽消耗。
  2. 可以简化模型数据的处理，更易于管理和编辑。

我们可以通过 createBuffer(), bindBuffer() 和 bufferData() 等方法来创建和操作对应的缓冲区。

WebGL 实际上是很简单的 API，它就是个栅格化工具，复杂是复杂在着色器这块的。

WebGL 应用：

  1. 初始化阶段
  2. 渲染阶段

vec4:在计算机图形学中，vec4 是指一个四维向量（即包含四个元素的数组），其中每个元素都是浮点数。这种类型通常用于表示三维点和颜色信息。它经常用于传递顶点数据和着色器输出。

WebGL only cares about 2 things: Clip space coordinates**(A vertex shader) and colors(fragment shader).

Vertex Shader: 只是传输数据 Fragment Shader: 位置数据都在这里面

Shader receive data

  1. Attribute: Specify how to pull data out of your buffers and provide them to your vertex shader.

  2. Buffer: Array of binary data you upload to the GPU. contain things like: positions, normals, textures coordinates, vertex colors, etc. (You're free to put anything you want in them)

  3. Vertex Array

Varying: for a vertex shader to pass data to a fragment shader.

demo 开发流程​

常见的库： gl-matrix cdn 引入就行 创建 canvas 初始化：

  • webgl 初始化
    • 获取 canvas 容器
    • 获取 webgl context。 canvas.getContext('webgl')
    • ctx.viewport(0, 0, canvas.clientWidth, canvas.clientHeight)
    • mat4.ortho(0, canvas.clientWidth, canvas.clientHeight,0, -1, 1, projMat4) // 设置 webgl 的投影坐标系
  • shader 初始化 (GPU 计算语言)
    • 编写 shader 脚本。 vertexString & fragmentString // 成对出现: 顶点着色器 & 片元着色器
    • 创建 VS shader: ctx.createShader(ctx.VERTEX_SHADER)
    • 创建 Fragment shader: ctx.createShader(ctx.FRAGMENT_SHADER)
    • 绑定脚本: ctx.shaderSource(vsShader, vertexString), ctx.shaderSource(fragmentShader, fragmentString)
    • 绑定编译: ctx.compileShader(vsShader), ctx.compileShader(fragmentShader)
    • 创建 ctx.createProgram();
    • attach & link: ctx.attachShader(program, vsShader), ctx.attachShader(program, fragmentShader), ctx.linkProgram(program)
    • use program: ctx.useProgram(program)
  • buffer 初始化——数据缓冲区初始化函数
    • 创建定点坐标
  • 绘制
    • draw

reference​

冰哥图形学工作站