WebGL入门 --- 认识 WebGL

WebGL 产生的背景和历史

在学习 WebGL 之前,我们先简单了解一下 WebGL 产生的背景。WebGL 规范产生以前,浏览器如果想实现 3D 动画效果,只能借助一些浏览器插件,比如 Adobe 的 Flash、微软的 SilverLight 等来实现,那么,为了打破这一局限,各大知名公司联手制定了一种跨平台的 3D 开发标准,也就是 WebGL 规范。WebGL起源于Mozilla员工弗拉基米尔·弗基西维奇的一项称为Canvas 3D实验项目。2006年,弗基西维奇首次展示了Canvas 3D的原型。2007年底在Firefox和Opera被实现。在2009年初,非营利技术联盟Khronos Group启动了WebGL的工作组,最初的工作成员包括Apple、Google、Mozilla、Opera等。2011年3月发布WebGL 1.0规范。截至2012年3月,工作组的主席由肯·罗素(Ken Russell,全名“Kenneth Bradley Russell”)担任。WebGL的早期应用包括Zygote Body。WebGL 2规范的发展始于2013年,并于2017年1月完成。该规范基于OpenGL ES 3.0。首度实现在Firefox 51、Chrome 56和Opera 43中。

什么是WebGL

WebGL(Web图形库)是一个JavaScript API,可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形,而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点,该API可以在HTML5 canvas 元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速。这些 API 能够让 Web 开发者使用 JavaScript 语言直接和显卡(GPU)进行通信。当然 WebGL 的 GPU 部分也有对应的编程语言,简称 GLSL。我们用它来编写运行在 GPU 上的着色器程序。着色器程序需要接收 CPU(WebGL 使用 JavaScript) 传递过来的数据,然后对这些数据进行流水线处理,最终显示在屏幕上,进而实现丰富多彩的 3D 应用,比如 3D 图表,网页游戏,3D 地图,WebVR 等。

WebGL 工作原理

3D 模型数据从诞生到最终显示在屏幕上,这期间经历了什么样的过程呢?大家可以想象一下流水线的生产过程,流水线按照既定的步骤对原料进行加工,当前步骤只对前一步骤的结果进行处理,然后将处理后的结果传递给下一步骤,最终将原材料生产成完整的产品。WebGL 的工作方式和流水线类似,也是按照流水线的方式将 3D 模型数据渲染到 2D 屏幕上的,业界把这种渲染方式称为图形管线或者渲染管线,大家以后碰到这两个名词,应该能明白什么意思了。
GPU 渲染管线的主要处理过程如下:

  • 首先进入顶点着色器阶段,利用 GPU 的并行计算优势对顶点逐个进行坐标变换。
  • 然后进入图元装配阶段,将顶点按照图元类型组装成图形。
  • 接下来来到光栅化阶段,光栅化阶段将图形用不包含颜色信息的像素填充。
  • 在之后进入片元着色器阶段,该阶段为像素着色,并最终显示在屏幕上。

什么是 GLSL?

GLSL 的中文意思是 OpenGL 着色语言,英文全称是 OpenGL Shading Language,它是用来在 OpenGL 编写着色器程序的语言。
着色器程序:
我们知道了 GLSL 是用来编写着色器程序的语言,那么新的问题来了,着色器程序是用来做什么的呢? 简单地说,着色器程序是在显卡(GPU)上运行的简短程序,代替了 GPU 固定渲染管线的一部分,使 GPU 渲染过程中的某些部分允许开发者通过编程进行控制。上面这段解释有些长,用一句话来说:着色器程序允许我们通过编程来控制 GPU 的渲染。

总结

本文是学习 WebGL 开发前的一个铺垫,读完本小节,相信大家会对 WebGL 有了一个整体认识:

  • WebGL 是一组图形 API,允许我们使用 JavaScript 控制 GPU 渲染过程,进行 3D 绘图。
  • WebGL 应用由 JavaScript 程序和着色器程序构成。
  • WebGL 如何将 3D 模型数据显示在 2D 屏幕上。
  • WebGL 编程要素:开发者需要针对 CPU 和 GPU 进行编程,CPU 部分是 JavaScript 程序,GPU 部分是着色器程序。
posted @ 2021-12-24 15:32  自在一方  阅读(1077)  评论(0编辑  收藏  举报