【第二届字节青训营 - 寒假前端场】「WebGL 基础」の学习笔记
初识WebGL
WebGL定义
WebGL - Web API 接口参考 | MDN (mozilla.org)
-
光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的,光栅就是指构成图像的像素阵列。
-
像素(Pixel):一个像素对应图像上的一个点,它通常保存图像上的某个具体位置的颜色等信息。
-
帧缓存(Frame Buffer):在绘图过程中,像素信息被存放于帧缓存中,帧缓存是一块内存地址。
-
CPU(Central Processing Unit):中央处理单元,负责逻辑计算。
-
GPU(Graphics Processing Unit):图形处理单元,负责图形计算。
现代计算机运行分工:
1.轮廓提取/meshing(网格化)
2.光栅化(对应像素点)
3.帧缓存
4.渲染
GPU与CPU的区别:
CPU主要用来处理复杂的问题,比如涉及“流”的问题。
GPU适合前后计算步骤无依赖性,相互独立的计算场景。
GPU的长处:
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
WebGL & OpenGL的区别:
WebGL(全称全写Web Graphics Library)可以为HTML5 Canvas提供硬件3D加速渲染,可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面。
WebGL基于OpenGL ES,它缺少常规OpenGL具有的许多功能,例如仅支持顶点和片段着色器。OpenGL具有WebGL所不具备的功能,例如几何体着色器,镶嵌细分着色器和计算着色器。
WebGL Startup过程
1.创建WebGL上下文
2.创建WebGL Program
3.将数据存入缓冲区
4.将缓冲区数据读取到GPU
5.GPU执行WebGL程序,输出结果
The Shaders
1.Vertex Shader
顶点着色器是一组指令代码,这组指令代码在顶点被渲染时执行。 同一时间内,只能激活一个顶点着色器。
2.Fragment Shader
通过编程控制编程控制屏幕上显示颜色的阶段叫做片元着色阶段。这个阶段处理OpenGL光栅化之后生成的独立片元,使用着色器计算片元的最终颜色和它的的深度值。
3.Rasterization
光栅化是判断某一部分几何体(点、线或者三角形)所覆盖的屏幕空间。因为屏幕是由一个个的像素点构成的,如果要画一条线,就要判断这条线在哪几个像素点表示
3d metrix
3D标准模型的四个齐次矩阵(mat4)
1.投影矩阵 Projection Matrix
2.模型矩阵 Model Matrix
3.视图矩阵View Matrix
4.法向量矩阵Normal Matrix
参考资料
mesh-js/mesh.js: A graphics system born for visualization 😘. (github.com)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战