初识WebGL｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 19 天什么是WebGL WebGL（全

这是我参与「第五届青训营」伴学笔记创作活动的第 19 天

什么是WebGL

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
GPU ≠ WebGL ≠ 3D
WebGL不像其他前端技术那么简单

WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

目前支持 WebGL 的浏览器有：Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+和Microsoft Edge build 10240+；然而, WebGL一些特性也需要用户的硬件设备支持。

WebGL 2 API引入了对大部分的OpenGL ES 3.0功能集的支持; 它是通过WebGL2RenderingContext界面提供的。

过程：

GPU：

叫做图形处理器，又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些移动设备(如平板电脑、智能手机等)上做图像和图形相关运算工作的微处理器
GPU由大量的小运算单元构成
每个运算单元只负责处理很简单的计算
每个运算单元彼此独立
因此所有计算可以并行处理

CPU：

综合对比：

计算量比较
- CPU：计算量小，原理：只有4个运算单元
- GPU：计算量大，原理：有1000个运算单元
计算复杂度比较
- CPU：可计算复杂的运算，比如积分微分，4个运算单元都属于专家级别
- GPU：只可以计算简单的1+1算术题，不能计算复杂的微分积分，1000个运算单元属于小学生水平。
对于单个积分微分的计算速度比较
- CPU：较快。原理：单线程计算(比如机器人运动控制)，单个芯片性能强劲，计算能力强，能计算出来
- GPU：较慢，甚至可能计算不了;原理：单个芯片性能弱，计算能力弱，可能算不出来，或速度很慢
适用场景
- CPU：适合需要前后计算步骤严密关联的计算场景。这些任务涉及到“流”的问题，必须先计算完第一步，再去计算第二步;比如你去相亲，双方看着顺眼才能继续发展。总不能你这边还没见面呢，那边找人把证都给领了。这种比较复杂的问题都是CPU来做的，生活中大部分用的都是CPU，例如武器装备运动控制、个人电脑使用等
- GPU：适合前后计算步骤无依赖性，相互独立的计算场景。很多涉及到大量计算的问题基本都有这种特性，比如你说的破解密码，挖矿和很多图形学的计算。这些计算可以分解为多个相同的简单小任务，每个任务就可以分给一个小学生去做。