WebGL系列-介绍篇

Posted 2021-04-25 学哥来了

关于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网页游戏等等。

要想了解更多，https://baike.baidu.com/item/WebGL/592485?fr=aladdin

WebGL是什么？

1. WebGL就是web版的OpenGL。因为WebGL是基于OpengGL ES2.0设计的。

2. webgl运行效率高。

3. 不需要专门搭建环境。甚至用editor也能开发。

4. 可移植性好。成品就是js和html

5. 教程资源多，比opengl学习门槛低。

渲染

渲染是从使用计算机程序模型生成图像的过程。在图形中，一个虚拟场景是使用像几何，视点，纹理，光照和阴影，这是通过一个渲染程序传递信息描述。此呈现程序的输出将是一个数字图像。
有两种类型的渲染 -

• 软件渲染 − 所有的渲染是在CPU的帮助下计算完成。

• 硬件渲染 − 所有的图形计算都由GPU(图形处理单元)完成的。

WebGL如下基于客户端的呈现方式来呈现3D场景。所有获得图像所需要的处理是使用客户端的图形硬件在本地执行。

GPU

根据NVIDIA，一个GPU就是“使用集成在一块芯片处理器转换，光线，三角形设置/剪辑和渲染处理能力最低为每秒10百万个多边形的引擎。”
不同于多核心处理器，使用顺序处理优化过的几个核，GPU由数千个较小的内核，高效地处理并行工作负载。因此GPU加速旨在用于输出到显示器建立在一个帧缓冲器的图像(压头的一部分，其含有完整的帧数据)。

GPU加速计算

在GPU加速计算，应用程序被装载到CPU。每当遇到代码的计算密集型部分，则该部分的代码将被加载运行在GPU上。它可以使系统以处理图形以更有效的方式来。

GPU有一个单独的存储器，它运行的代码的一小部分一次处理多个副本。 GPU处理所有这些是在它的本地存储器，而不是在中央存储器中的数据。因此，所需要的数据由GPU应加载/复制到GPU存储器，然后进行处理。

在具有上述结构的系统中，CPU和GPU之间的通信开销应减少以实现更快的处理3D程序。对于这一点，我们必须复制所有数据，并保持它在GPU上，而不是与GPU反复沟通。

WebGL VS OpenGL

可以理解为，WebGL就是web版的OpenGL。因为WebGL是基于OpengGL ES2.0设计的。

• OpenGL（全写Open Graphics Library）

是指定义了一个跨编程语言、跨平台的编程接口规格的专业的图形程序接口。它用于三维图像（二维的亦可），是一个功能强大，调用方便的底层图形库。

OpenGL™ 是行业领域中最为广泛接纳的 2D/3D 图形API, 其自诞生至今已催生了各种计算机平台及设备上的数千优秀应用程序。OpenGL™ 是独立于视窗操作系统或其它操作系统的，亦是网络透明的。在包含CAD、内容创作、能源、娱乐、游戏开发、制造业、制药业及虚拟现实等行业领域中，OpenGL™ 帮助程序员实现在 PC、工作站、超级计算机等硬件设备上的高性能、极具冲击力的高视觉表现力图形处理软件的开发。

OpenGL是个与硬件无关的软件接口，可以在不同的平台如Windows 95、Windows NT、Unix、Linux、MacOS、OS/2之间进行移植。因此，支持OpenGL的软件具有很好的移植性，可以获得非常广泛的应用。由于OpenGL是图形的底层图形库，没有提供几何实体图元，不能直接用以描述场景。但是，通过一些转换程序，可以很方便地将AutoCAD、3DS/3DSMAX等3D图形设计软件制作的DXF和3DS模型文件转换成OpenGL的顶点数组。

• WebGL

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

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