WebGL与动画实现|青训营笔记

星星Star98
123 阅读2分钟

WebGL与动画实现

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

什么是WebGL

  • WebGL是一个与具有丰富特性的 HTML5 一起运行的 3D JavaScript API

  • WebGL是一个可以帮助你在浏览器上创建和渲染三维图形的API集，专门用于Web页面的OpenGL

现代图形系统

  • 光栅(Raster)∶几乎所有的现代图形系统都是基于光栅来绘制图形的光栅就是指构成图像的像素阵列。

  • 像素(Pixel):一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。

  • 帧缓存（Frame Buffer)︰在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。

  • CPU (Central Processing Unit):中央处理单元, 负责逻辑计算。

  • GPU (Graphics Processing Unit):图形处理单元, 负责图形计算。

image.png

图形绘制过程：

1.轮廓提取/meshing

2.光栅化

3.帧缓存

4.渲染

image.png

WebGL的使用

开始

  • 1.创建 WebGL上下文
  • 2．创建WebGL Program
  • 3.将数据存入缓冲区
  • 4．将缓冲区数据读取到GPU
  • 5.GPU 执行WebGL程序，输出结果

image.png

着色器

  • 顶点着色器

    • 主要用于处理图形轮廓，用来描述顶点的位置、颜色等特性。顶点是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。

  • 片元着色器

    • 主要用于处理颜色，进行逐片元处理过程如光照的程序。片元是一个WebGL术语，可以将其理解为像素。

WebGL特点与优势

  • WebGL内嵌在浏览器中，不需要安装插件和库就可以直接使用

  • 由于WebGL基于浏览器，不是基于操作系统。所以可以直接在多种平台运行WebGL程序

  • WebGL程序由HTML和JavaScript文件组成，可以直接发送给对方在浏览器中展示

  • 不需要搭建开发环境，可以直接通过文本编辑器开发

  • 由于WebGL继承自OpenGL，所以OpenGL相关资料都可以拿来参考

3D Matrix

3D标准模型的四个齐次矩阵（mat4)

  • 1.投影矩阵 Projection Matrix
  • 2.模型矩阵Model Matrix
  • 3.视图矩阵View Matrix
  • 4.法向量矩阵Normal Matrix
avatar
文章
阅读
粉丝