WebGL 与动画实现 学习｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第14天

一.引言

cpu

运算能力强大
gpu

画好多图，可以将数据存入数组并进行压缩 一下子同时处理这些点的像素然后重新渲染 提高效率

二.概念

• 图形元素也叫像素(pixel)，像素阵列也称为光栅(raster)
• 每一个像素对应于图像中的一个位置，或者一块小的区域，这些像素都保存在一个称为帧缓存(frame buffer)的存储区域中
• 帧缓存可以看做是图形系统的核心元素。帧缓存中像素的数目叫做分辨率(resolution)

多边形：三角坡峰 平移 旋转 缩放

实践

• 创建webgl上下文
• 通过WebGL提供的api创建缓冲区对象，将数据放入缓冲区
• 创建着色程序：顶点着色器、片元着色器

顶点着色器代码会在GPU的顶点着色器单元执行，片元着色器代码会在GPU的片元着色器单元执行，在WebGL渲染管线流程中，或者说GPU的渲染流程中，顶点着色器代码先执行处理顶点，得到一系列片元，然后再执行片元着色器代码处理片元。每次调用着色程序都会先执行顶点着色器，再执行片元着色器

• 从缓冲区读取数据，给着色器进行着色。可以从数据中得到所需图形是什么
• 进行光栅化，将图形覆盖的区域转换成像素填充信息
• 调用着色程序进行着色：逐片元调用片元着色器，直到最后一个片元被处理完成后进行展示

<canvas id="glcanvas" width="500" height="500"></canvas>

const canvas = document.querySelector("#glcanvas"); 
// 初始化WebGL上下文 
const gl = canvas.getContext("webgl"); 
// 确认WebGL支持性 
if (!gl) { alert("无法初始化WebGL，你的浏览器、操作系统或硬件等可能不支持WebGL。"); 
return; }

实例

• 一个三角形
• 多边形
• 多个三角形