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

55 阅读2分钟

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

18.jpg

一、重点内容

初识WebGL

二、详细知识点

WebGL是什么?

WebGL全称是Web Graphics Library,是一种3D绘图协议,但是WebGL通过增加OpenGL ES 2.0的一个JavaScript绑定,可以为HTML5 Canvas提供硬件3D加速渲染,减去了开发网页专用渲染插件的麻烦,还可以创建复杂3D结构的网站页面和用来设计3D网页游戏等等。

WebGL主要应用

WebGL完美地解决了现有的Web交互式三维动画的两个问题

  • 通过HTML脚本本身实现Web交互式三维动画的制作,WebGL无需任何浏览器插件支持
  • WebGL利用底层的图形硬件可以加速进行图形渲染。

CPU(中央处理器) vs GPU(图形处理器)

  • CPU:由数百万个晶体管组成,有多个处理内核,被称为计算机的大脑,是所有现代计算系统必不可缺的组成部分,主要执行计算机和操作系统所需要的命令和流程。
  • GPU:由大量的小运算单元构成,每个运算单元只负责处理简单的计算,由于每一个单元都是独立的,所以所有计算都可以并行处理。
  • 两个都是基本的计算引擎,GPU适合用在处理从串行计算到数据库运行这种一系列广泛的工作中,而GPU则更适合用在图像处理和游戏中。

Transforms

  • 平移 24.png

  • 旋转 25.png

  • 缩放 26.png

  • 旋转+缩放是线形变换

27.png

28.png

29.png

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

  1. 投影矩阵 Projection Matrix
  2. 模型矩阵 Model Matrix
  3. 视图矩阵 View Matrix
  4. 法向量矩阵 Normal Matrix

三、应用参考

WebGL_百度百科 (baidu.com)

本文若有不足,欢迎纠正。