这是我参与「第四届青训营」笔记创作活动的的第 13天
WebGL定义
- 光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
- 像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
- CPU（Central Processing Unit）：中央处理单元，负责逻辑计算。
- GPU（Graphics Processing Unit）：图形处理单元，负责图形计算。
现代计算机运行分工：
轮廓提取/meshing（网格化）、光栅化（对应像素点）、帧缓存、渲染
GPU与CPU的区别：
CPU主要用来处理复杂的问题，比如涉及“流”的问题。 GPU适合前后计算步骤无依赖性，相互独立的计算场景。
GPU的长处：
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
WebGL
WebGL（全称全写Web Graphics Library）可以为HTML5 Canvas提供硬件3D加速渲染，可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面。
WebGL 开始使用
const canvas document.querySelector('canvas);
const gl canvas.getContext('webgl');
function create3DContext(canvas,opttons){
const names ['webgl','experimental-webgl','webkit-3d','moz-webgl']
tf(opttons.webgl2)names.unshift('webgl2');
let context null;
for(let ii 0;ii<names.length;++ii){
try{
context=canvas.getContext(names[ii],options);
catch (e){
if(context){
break;
return context;
}
编写着色器Shaders
1.Vertex Shader 顶点着色器是一组指令代码，这组指令代码在顶点被渲染时执行。 同一时间内，只能激活一个顶点着色器。
2.Fragment Shader 通过编程控制编程控制屏幕上显示颜色的阶段叫做片元着色阶段。这个阶段处理OpenGL光栅化之后生成的独立片元，使用着色器计算片元的最终颜色和它的的深度值。
3.Rasterization 光栅化是判断某一部分几何体(点、线或者三角形)所覆盖的屏幕空间。因为屏幕是由一个个的像素点构成的，如果要画一条线，就要判断这条线在哪几个像素点表示
