Webgl入门指南(一):前言——什么是webgl以及它的应用场景

Webgl对于很多前端的同学来说至今都是一个如梦似幻的迷。虽然我们总会无意中听到了它带来的各种各样神奇的立体效果,但是无论是在工作中,或者网络平台上,关于它的内容总是少之又少。也许有一部分人在工作中接触过做3D项目,他们中很多人选择threejs这种3D框架完成的,就算是做完了项目,对webgl的了解也仅仅是只言片语的。有心的人抱着尝鲜的态度去了解它,往往都会被它的陡峭的学习曲线拦下来。要在屏幕上绘制3D图形是非常难的,这其中包含了很多抽象的概念需要学习,因此单是听到webgl这个名词,很多人就望而却步了。
这个系列的文章的目的就是用最简单直白的语言把这门模式的技术说清楚,使有对3D图形有兴趣的同学能够入门(webgl入门之后你会发现另外一个世界)。虽然是入门,但是这不会像是简单的写一行代码能够搞定的。准备好了吗?我们现在就开始我们的webgl之旅吧!

什么是WebGL

对于WebGL标准定义是:Webgl是一套在浏览器中兼容的,用来与2D或者3D图形交互的Javascript应用程序接口”。这样的定义有一些生硬,初看起来迷迷糊糊。我用简单的话来表达一次:

我们可以把webgl想像是一系列的函数集合体,它允许我们在浏览器中绘制三样东西:点,线和三角形从而组成各种各样的——2D或者3D——图形。

函数集合体的意思是指浏览器提供给我们一些特殊的函数,这些函数可以像直接操作DOM一样操作图形处理单元显示复杂的图形。Webgl就是这些函数的合集。
wp editor md 2bb8f10e6b1df7732648d6c8245d7500 - Webgl入门指南(一):前言——什么是webgl以及它的应用场景
为什么是点,线和三角形呢?因为在计算机图形学中,任何图形都是这三种图形元素生成的(一个矩形由两个三角形组成,一个圆形则由多个三角形组成),这个后面我们讲图形的时候后面我们会学习到。你也许会有疑问,这跟我们用HTML和CSS在界面上绘制图形有什么不一样呢?答案是:Webgl通过直接与GPU沟通,从而能够绘制比HTML界面要复杂得多的图形。
wp editor md ec8b5fecb9e71f522866fcb0161177f2 - Webgl入门指南(一):前言——什么是webgl以及它的应用场景

简单来说webgl就做一件事情,将数据信息处理然后传递给GPU进行绘制。这些数据主要包括顶点的颜色和位置信息。例如我要画一个三角形,我只要知道三个顶点的位置,以及他们的颜色然后通过这些方法传递给GPU, 那么就会为我们就能在屏幕上得到一个三角形。
QQ图片20220517113034 - Webgl入门指南(一):前言——什么是webgl以及它的应用场景

CPU和GPU

了解完webgl的基础定义之后,我们来考虑定义中提到的一个概念:GPU,我们首先了解一下CPU

CPU

CPU(Central Processing Unit)中央处理器。CPU是一台计算机的大脑,一块CPU的内核可以被认为是一个正在流水线上工作的打工人,他一个一个的将流水线上的东西进行组装,虽然经过多年的培训使得这些熟练的工人组装效率很高,但是他同时只能组装一个配件。以前,一条流水线上只有一个工人,所以计算机运行的速度比较慢,这样的电脑我们称为单核的电脑。如今,大多数的电脑都有好几个处理器,可以同时处理多个任务了,我们称这种为多核电脑。
wp editor md a78af7d70b8683554f5434c9c8d9f546 - Webgl入门指南(一):前言——什么是webgl以及它的应用场景

GPU

GPU(Graphics Processing Unit)图形处理器。它也是计算机的一块硬件组成部分,主要功能就是在屏幕上同时绘制图像。和CPU不同,GPU的拿手好戏就是同时处理多个任务。一块GPU就相当于有很多只手的机器人,他组装的速度是非常快的。GPU就是为了针对图形显示而设计的硬件,所以它仅仅是在处理图形这块功能上有很高的效率。你现在看到的屏幕上的每一像素点,都是GPU绘制上去的。
gpu - Webgl入门指南(一):前言——什么是webgl以及它的应用场景

webgl既然是用属于javascript语言编程接口运行在浏览器,那么它首先就是需要依赖CPU的,webgl能够直接操作GPU,那么它又必定是GPU相关的应用语言(Shader)。所以,一个WEBGL应用程序必定是CPU+GPU的计算的结果,关键在于哪一部分的工作量更多。例如:我可以用javascript(CPU部分)完成变换矩阵的计算,也可以用着色器(GPU)完成同样的计算。

Webgl的实际使用场景

3D和2D不同,它模拟的是更加真实的图形。人观察的世界是3D,这就会让我们在使用3D程序或者游戏的时候,有较强的代入感。3D的操作也更符合人的直觉。而web端毫无疑问又是未来的趋势,所以我认为web+3D将会是元宇宙时代的一块重要组成的部分。Webgl分为以下几大应用场景。

创意设计

有一些产品用3D的场景来展示要比2D更加生动,细节也更加清楚。例如我们经常可网上看房子,360全景看房。还有线上汽车,都是可以通过webgl来实现的。这些有特殊细节需求的产品在考虑只做他们的宣传网站的时候一般都会优先考虑3D的形式。3D形式的展示形式更加给用户添加好的体验。

游戏

游戏一直是图形学发展应用的最前沿领域。当然,游戏开发也是相当的复杂了。不过你可以用Unity公司提供的引擎来做到这一点。

模拟仿真

仿真设计时图形学模拟现实物理世界的一个名词。有些在物理世界无法实现的,或者实现成本较大的实验,我们可以图形模拟仿真来实现,例如:汽车碰撞,模拟驾驶,飞行员培训等等,这些都需要设计到大量的数据计算和图形绘制才有可能实现。

数据可视化

Web端一直都是数据展示的最前端。而可靠的,更符合人的直觉的数据形式会更加受人青睐。很多类型的数据如果使用可视化的方式来展示会比单纯用表格或者2D图形要更加直观,同时会更加突出比对性。数据可视化将来会是webgl的一个重点发展领域,未来的大数据需要实时可靠的前端交互作为展示提供给人分析。

虚拟现实

AR已经发展了有些年头了,在web端也开始支持一些简单的AR场景了。学习webgl有助于你进入AR领域。试想一下带着头盔坐在屏幕面前进入虚拟世界的场景吧,一定会让你发出感叹的。

学习webgl的同时,你也是在学习图形学。一个稍微复杂的3D场景会涉及到一些基本的图形学概念。图形学就好比内容,学会了之后,跨平台使用Opengl等其他平台的api也是顺手拈来。所以,严格来说,webgl的使用范围囊括了所有图形学包含的使用场景。

Three.js

Three.js是一个优秀webgl框架。它的目的就是简化webgl的繁杂冗长的开发过程。讲代码封装,抽象,重命名来达到跟易学易用的目的,总之是和其他前端框架一样目的。使用three能够快速的制作出webgl应用并且不需要考虑底层的性能问题。但是,设计到更加细节的问题,three是无法解决的。这跟语言一样,越是低级的语言课塑性约强,但是使用起来就越是繁琐。我会在后面写一期threejs的教程。

学前准备

webgl是底层的api,大家也知道,越是底层的,越是繁琐和复杂。在调试Webgl应用的时候也会莫名其妙的报错,更令人头疼的是有时候代码虽然不报错但是结果却不对。由于webgl与GPU打交道,因此你不能用之前打断点或者打印的方式去调试他,你只能在shader语言中用颜色和眼睛去调试他。这就使得webgl开发的过程是个极其冗长和繁琐的过程。所以,Webglvue以及react或者其他框架不一样,它是一门有门槛的技术。但是也正是因为有门槛,竞争力才会更强。我在这个系列里面会讲到我学习过程中遇到的坑,能帮助你在学习的过程中避免走一些不必要的路。学习webgl是一个漫长的过程,你需要需要的是耐心和坚持。
随着元宇宙的到来,3D交互场景会越来越常见。学习webgl不仅仅是学习一套api,也是开启3D图形学的大门。希望你能够打开这扇大门,并走得越来越远。

总结

好了,这一章我们学习了什么是webgl,了解了基本概念以及其用途。下一章,我们将学习一些简单的基础概念,这些概念是建造3D世界的基石。

发表回复 0