WebGL基础 - 笔记
2023-06-13 09:17:28 时间
为什么要使用 WebGL/GPU 怎样使用 WebGL(WebGL 入门第一步) 更多读物
# WebGL 基础 - 笔记
# Why WebGL/Why GPU?
# WebGL 是什么?
- GPU ≠ WebGL ≠ 2D
- WebGL 是浏览器上的 OpenGL
- 需要一定计算机图形学基础和线性代数基础
# Modern Graphics System
光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的,光栅就是指构成图像的像素阵列。
像素(Pixel):一个像素对应图像上的一个点,它通常保存图像上的某个具体位置的颜色等信息。
帧缓存(Frame Buffer):在绘图过程中,像素信息被存放于帧缓存中,帧缓存是一块内存地址。
CPU(Central Processing Unit):中央处理单元,负责逻辑计算。
GPU(Graphics Processing Unit):图形处理单元,负责图形计算。
一般来说,在图形绘制时,有以下步骤:
- 轮廓提取 /meshing
- 光栅化
- 帧缓存
- 渲染
# CPU vs GPU
CPU 的优势在于:CPU 能够处理大计算量的任务,但是 CPU 的并行处理有上限
GPU 的优势在于:GPU 的计算量处理能力不大,但是 GPU 中的所有计算都可以并行处理
因为图形渲染的像素处理数量一般都是非常大的,但是每个像素的计算量却不大,所以 GPU 处理图形渲染就非常有优势
# WebGL Startup
- 创建 WebGL 上下文
- 创建 WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到 GPU
- GPU 执行 WebGL 程序,输出结果
# Shaders(着色器)
Vertex Shader
attribute vec2 position;
void main() {
gl_Pointsize = 1.0; // 设置像素点大小为 1.0
gl_Position = vec4(position,1.0,1.0 );
}
Fragment Shader
precision mediump float;
void main() {
// 每个像素都被并行执行这段代码,设置了像素的颜色
gl_Fragcolor = vec4(1.0,0.0,0.0,1.0 );
}
着色器内可以执行向量运算,并且定义的变量可以共享:
# Create Program
webgl 是一个很底层的 API,所以创建 webgl 程序也是个比较复杂的过程,类似编译器的工作需要自己写
const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader( gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program) ;
# Data to Frame Buffer
如何创建一个三角形?
const points = new Float32Array([
-1, -1, // 坐标 (-1, -1)
0, 1, // 坐标 (0, 1)
1, -1, // 坐标 (1, -1)
]);
# Frame Buffer to GPU
# Output
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);
# WebGL 的封装库 —Mesh.js
# Polygons
如何绘制一个多边形?
- 三角剖分
可以使用 Earcut 库进行三角剖分
# 3D Meshing
一般来说,3D 的模型是在设计软件里先设计好再导出,而不是像 2D 一样实时计算
# Transform
# 3D Matrix
3D 标准模型的四个齐次矩阵(mat4)
- 投影矩阵 Projection Matrix
- 模型矩阵 Model Matrix
- 视图矩阵 View Matrix
- 法向量矩阵 Normal Matrix
# Read More
- The book of shaders
- Mesh.js
- glsl-doodle
- SpriteJS
- ThreeJS
- shadertoy.com
# 参考资料
- 字节青训营课程
相关文章
- 安全测试笔记《二十四》——静态代码分析理论基础和主要技术
- 数据库-MySQL-基础(3)-DML操作
- 五、集合基础【黑马JavaSE笔记】
- 负载均衡(SLB)基础入门学习笔记
- 【学习笔记】Python基础
- 二次剩余理论的数学基础
- 懂你的Chris生信初级教程~从负基础开始
- Linux Shell基础篇一 - 简介
- (七)51单片机基础——串口通信
- Cobalt Strike4工具的基础使用
- MongoDB数据库基础 之 mongodb常用操作命令
- Java基础学习笔记二十一 多线程详解编程语言
- Python基础学习笔记详解编程语言
- xml基础学习笔记详解编程语言
- xhEditor入门基础详解编程语言
- Linux 的依赖性:建立强韧的基础(linux依赖性)
- 开源、开放、使能,看华为如何为中国基础软件带来新变化
- Redis配置实践从基础到进阶(redis配置示例)
- javascript温习的一些笔记基础常用知识小结