@yangfch3 2021-04-02T13:01:55.000000Z 字数 2214 阅读 1120

《WebGL 编程》读书笔记

游戏开发

《WebGL 编程》读书笔记

图形学前置认知

复杂的流程：

简化的流程：

概述

WebGL 的技术规范继承自免费和开源的 OpenGL 标准，某种意义上，WebGL 就是“Web 版的 OpenGL”
在 PC 上使用最广泛的两种三维图形渲染技术：DirectX/Direct3D OpenGL（移动端则在支持 OpenGL 的同时还有安卓的 Metal，iOS 的 vulkan）

计算机图形学 https://www.bilibili.com/read/cv413139/
WebGL 实际上是从 OpenGL 的一个特殊版本 OpenGL ES 2.0 派生而来，OpenGL ES 专门用于 嵌入式计算机、智能手机、家用游戏机，是对 OpenGL 的轻量化并自行扩展
OpenGL ES 2.0 基于 OpenGL 着色器语言 GLSL —— GLSL ES，WebGL 使用其编写着色器

WebGL 入门

Canvas 元素开启 WebGL 模式，WebGL 元素获取其并在其上绘图
Canvas 绘图步骤
1. 获取 Canvas 元素
2. 向该元素请求 2d / webgl 的绘图上下文（context）
3. 使用绘图上下文调用相应的绘图函数
Canvas 元素不直接提供绘图方法，而是提供绘图上下文
Canvas 坐标系统：原点左上方，→↓
Link canvas.getContext(contextType[, contextAttributes]) 获取上下文时是有可选的第二个配置参数的
canvas.getContext 返回的上下文对象类型有：
1. CanvasRenderingContext2D 为 "2d",
2. WebGLRenderingContext 为 "webgl" 和 "experimental-webgl",
3. WebGL2RenderingContext 为 "webgl2" 和 "experimental-webgl2"
4. ImageBitmapRenderingContext 为 "bitmaprenderer"
gl.clear(buffer) 的 buffer 枚举：
1. gl.COLOR_BUFFER_BIT - (0.0, 0.0, 0.0, 0.0)
2. gl.DEPTH_BUFFER_BIT - 1.0
3. gl.STENCIL_BUFFER_BIT - 0 - 模板缓冲区（很少使用）
gl.clearColor() 方法用于设置清空颜色缓冲时的颜色值。这个指定调用 gl.clear() 方法时使用的颜色值
WebGL 程序流程：
1. 获取 Canvas 元素
2. 获取 WebGL 绘图上下文
3. 初始化着色器
4. 设置 Canvas 背景色
5. 清除 Canvas
6. 绘图 - 使用绘图上下文调用相应的绘图函数
两种着色器：
1. 顶点着色器（Vertex shader）- 描述顶点的位置、尺寸等信息
2. 片元着色器（Fragment shader）- 逐片元处理经过光栅化处理的片元
  卡通渲染（上）：致从没看懂过着色器代码的你
WebGL 中的四维向量：
1. 齐次坐标：vec4(x, y, z, w) => vec3(x/w, y/w, z/w)，为了描述顶点为一个矩阵
2. RGBa：WebGL 常用 R G B A 来描述一个颜色
WebGL 可以简单地理解为默认使用的是 右手坐标系
OpenGL 使用两个颜色缓冲区：前台、后台颜色缓冲区，前台显示，后台绘制下一帧，Display 时 Swap（是否自动 Swap 与否视系统决定）。WebGL 只需要一个颜色缓冲区，浏览器只需要在 JS 执行完后判断缓冲区有无更新，有更新则拿缓冲区数据渲染 Canvas 元素即可。
规避着色器硬编码的方式：
1. 着色器准备好变量
2. JavaScript 获取内存地址引用 - getXxxLocation
3. 传输赋值
4. 绘制
GLSL 中的几种变量 <变量限定符><类型><变量名>：
1. attribute - 顶点着色器使用，application 可以取改
2. uniform - 顶点、片元共同使用，“不变的”、一致的数据，application 可以取改，类似于 const 常量声明
3. varying - 顶点着色器内定义给片元着色器访问使用

OpenGL ES 2.0 函数命名规范

gl.vertexAttrib3fv(location, arg1, arg2, arg3)
    vertexAttrib - 基础函数名
    1/2/3/4 - 参数个数
    f/i - 参数类型
    [可缺省]v - 是否是 float 类型数组/整形数组

Canvas 处理鼠标事件交互时要注意处理点击事件的客户区坐标（getBoundingClientRect），转换为 Canvas 坐标系下坐标

附录 1：API、语法

WebGL 对象 API

gl.clearColor() - 指定绘图区域背景色
gl.clear() - 清空缓冲区
gl.drawArrays() - 按照指定方式绘制图形
gl.getAttribLocation() - 获取 attribute 变量的存储地址
gl.vertexAttrib[1234][f/i][?v]() - 将数据传输给指定的 attribute 变量
gl.getUniformLocation() - 获取指定 uniform 变量的存储位置
gl.uniform[1234][f/i][?v]() - 将数据传输给指定的 uniform 变量

GLSL - 通用

GLSL - 顶点着色器

内置变量：
1. gl_Position - vec4
2. gl_PointSize - float

GLSL - 片元着色器

内置变量：
1. gl_FragColor() - vec4