虚拟展厅中所运用的WebGL技术原理简单介绍

Jyadmin — Wed, 23 Dec 2020 07:45:03 +0000

虚拟展厅中所运用的WebGL技术原理简单介绍 Jyadmin 周三, 12/23/2020 - 15:45

WebGL是什么，用它能做什么？

WebGL（Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0（OpenGL 的嵌入式平台版本）结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定来实现，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。

开发者就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化。WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

这项技术还应用了一个绘制所需的专用语言 GLSL：

OpenGL着色语言（OpenGL Shading Language）是用来在OpenGL中着色编程的语言，他们是在图形显卡的GPU （Graphic Processor Unit图形处理单元）上执行的，一般着色器分为两部分：Vertex Shader（顶点着色器）和Fragment（片元着色器），GLSL使用C语言作为基础高阶着色语言。

总的来说，WebGL就是通过js获取Canvas上下文关系，使用JS Api操作GLSL语言进行编程，并最终在Canvas中展示的web图形绘制能力。

WebGL如何形成指定图像？

1. WebGL只能绘制点(gl.POINTS)、线(gl.LINES)、三角(gl.TRIANGLES)三种基础图形，任何复杂图形都是由基础图形组合形成的，如下图所示的茶壶（复杂图形），可被拆解为所示的复数基础图形的组合：

2. 绘制的实现，会经过这三个步骤的处理：

① 获取顶点坐标（即该形状的可见点阵集）

② 图元装配（将顶点绘制成一个一个三角形，拼接成面）

③ 光栅化（将每一个三角形所对应画布的位置和色值计算出来）

目标图形绘制的完整流程如下：

3. 目标图形在实际场景中存在位置、大小、透视关系等影响因素，为了达到符合预期的视觉效果，坐标（X, Y, Z）将经由复数个矩阵变换的计算处理，最终形成指定坐标点（同样片元也会根据矩阵关系计算着色结果）。

4.完成绘制后，通过JS的上下文操作DOM，将在Canvas上成功渲染“一帧”图片，即每次计算将得到一组静态的像素序列，用于铺满填充Canvas画布。

此时一次完整的WebGL绘制流程完成。

WebGL的渲染，就是将三维图形的坐标点，经过复杂的加工处理（3D建模），再经由上述步骤的绘制流程，即可通过WebGL在前端页面中完成“一次”绘制操作，此时通过JS将缓存区的图元信息填充至Canvas，即可在网页中展示一张静态绘制图，受限于篇幅原因，详细的实现细节建议通过网络示例进行了解。

标签

线上展厅

线上展厅

虚拟展厅中所运用的WebGL技术原理简单介绍

WebGL是什么，用它能做什么？

WebGL如何形成指定图像？

WebGL是什么，用它能做什么？

WebGL如何形成指定图像？