@yangfch3
2021-04-02T13:01:55.000000Z
字数 2214
阅读 1070
游戏开发
复杂的流程:
简化的流程:
WebGL 的技术规范继承自免费和开源的 OpenGL
标准,某种意义上,WebGL 就是“Web 版的 OpenGL
”
在 PC 上使用最广泛的两种三维图形渲染技术:DirectX/Direct3D
OpenGL
(移动端则在支持 OpenGL
的同时还有安卓的 Metal
,iOS 的 vulkan
)
WebGL 实际上是从 OpenGL
的一个特殊版本 OpenGL ES 2.0
派生而来,OpenGL ES
专门用于 嵌入式计算机、智能手机、家用游戏机,是对 OpenGL
的轻量化并自行扩展
OpenGL ES 2.0
基于 OpenGL 着色器语言 GLSL —— GLSL ES
,WebGL 使用其编写着色器
Canvas
元素开启 WebGL 模式,WebGL 元素获取其并在其上绘图
Canvas
绘图步骤
Canvas
元素2d
/ webgl
的绘图上下文(context
)Canvas
元素不直接提供绘图方法,而是提供绘图上下文
Canvas
坐标系统:原点左上方,→↓
Link canvas.getContext(contextType[, contextAttributes])
获取上下文时是有可选的第二个配置参数的
canvas.getContext
返回的上下文对象类型有:
CanvasRenderingContext2D
为 "2d",WebGLRenderingContext
为 "webgl" 和 "experimental-webgl",WebGL2RenderingContext
为 "webgl2" 和 "experimental-webgl2"ImageBitmapRenderingContext
为 "bitmaprenderer"gl.clear(buffer)
的 buffer 枚举:
gl.COLOR_BUFFER_BIT
- (0.0, 0.0, 0.0, 0.0)gl.DEPTH_BUFFER_BIT
- 1.0gl.STENCIL_BUFFER_BIT
- 0 - 模板缓冲区(很少使用)gl.clearColor()
方法用于设置清空颜色缓冲时的颜色值。这个指定调用 gl.clear()
方法时使用的颜色值
WebGL 程序流程:
两种着色器:
WebGL 中的四维向量:
vec4(x, y, z, w)
=> vec3(x/w, y/w, z/w)
,为了描述顶点为一个矩阵WebGL 可以简单地理解为默认使用的是 右手坐标系
OpenGL 使用两个颜色缓冲区:前台、后台颜色缓冲区,前台显示,后台绘制下一帧,Display 时 Swap
(是否自动 Swap 与否视系统决定)。WebGL
只需要一个颜色缓冲区,浏览器只需要在 JS 执行完后判断缓冲区有无更新,有更新则拿缓冲区数据渲染 Canvas 元素即可。
规避着色器硬编码的方式:
getXxxLocation
GLSL 中的几种变量 <变量限定符><类型><变量名>
:
attribute
- 顶点着色器使用,application
可以取改uniform
- 顶点、片元共同使用,“不变的”、一致的数据,application
可以取改,类似于 const
常量声明varying
- 顶点着色器内定义给片元着色器访问使用 OpenGL ES 2.0 函数命名规范
gl.vertexAttrib3fv(location, arg1, arg2, arg3)
vertexAttrib - 基础函数名
1/2/3/4 - 参数个数
f/i - 参数类型
[可缺省]v - 是否是 float 类型数组/整形数组
Canvas 处理鼠标事件交互时要注意处理点击事件的客户区坐标(getBoundingClientRect
),转换为 Canvas 坐标系下坐标
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 变量
内置变量:
1. gl_Position
- vec4
2. gl_PointSize
- float
内置变量:
1. gl_FragColor()
- vec4