Web3D从入门到跑路

　　大厂技术坚持周更精选好文
　　本文为来自字节跳动业务中台前端团队成员的文章，已授权ELab发布。
　　前情概要
　　作为在该领域小白的我，在准备该主题分享之前，我信心满满的去知乎查了下，如何学习WebGL？如何入手webGl以及three。js呢？知乎〔1〕
　　前端开发者应该如何学习计算机图形学相关的知识？知乎〔2〕
　　大三计算机，想接触图形学方面的知识，直接学WebGL还是OpenGL？知乎〔3〕等。。。。。。。
　　摘取自知乎回复：图形数学体系结构操作系统软件工程设计模式编译原理（C功力）更好的3D软件工程师。（然而我不想成为更好的3D软件工程师）
　　同时也看了很多大佬分享学习路径，基本上都是：
　　图形学和数学打好基础。
　　网友说：推荐看3d数学基础这本书，学好线性代数，接口本质就是数学和物理，涉及大量矩阵变换。。。
　　选择一个领域，Web（WebGL、Threejs）、3D引擎、游戏（Unity）。。。。。
　　网友说：语言是以硬件为基础的，如果你了解CPU，学习C语言很随意，同样着色器语言GLSL是类似C语言的高级语言在GPU上执行的语言，学习WebGLAPI和着色器语言最好去了解GPU的渲染管线、可编程着色器。语言和硬件又是隔离的，没有必要深入了解硬件，知道一个大概印象就行。
　　干：不断学习、不断实践、直到可以造轮子，再循环。。。。。。
　　看了比较多的知乎回复后，我发现这玩意学习路径和门槛都比较高的，都是和底层、数学强相关的。而且WebGL技术和Web前端技术还是有比较大区别，感觉除了只是叫Web外没别的相同啦。速成是不可能的，有尤其在该领域我是个小白，所以本次分享（到此结束）。
　　本次分享，大致分为两个部分：
　　概念篇：浅浅了解计算机图形相关知识。先了解OpenGL、WebGL等库或语言都是干什么的；无论是库还是语言，核心都是为了GPU服务的，我们还需要理解GPU设计模型和图形渲染管线；以上，我们才能将技能点串起来，知道后续发力方向和如何实践。
　　实践篇：先通过Three。js入个门，再看后续是深入学习还是跑路放弃。
　　概念篇：计算机图形相关知识Three。js？GLSL？WebGL？OpenGL？
　　参考：WebGL，OpenGL和OpenGLES三者的关系〔4〕图
　　OpenGL（OpenGraphicsLibrary）
　　OpenGL〔5〕isacrosslanguage，crossplatformapplicationprogramminginterface（API）forrendering2Dand3Dvectorgraphics。TheAPIistypicallyusedtointeractwithagraphicsprocessingunit（GPU），toachievehardwareacceleratedrendering。
　　OpenGL是API、是规范。GPU硬件厂商需要满足统一OpenGL规范。而OpenGLES（OpenGraphicsLibraryforEmbeddedSystems）是OpenGL子集，专门针对手机等嵌入式设备而设计的。
　　人话版本是：发动机（GPU）驱动是方向盘、离合器等等，OpenGL定义操纵发动机（GPU）发动规范，OpenGL不关心方向盘是圆的还是方的，驱动发动机（GPU）干活啦。
　　用方向盘（驱动器）依照调用标准使用（OpenGL）指挥发动机（GPU）干活
　　WebGL（WebGraphicsLibrary）
　　WebGL〔6〕isacrossplatform，royaltyfreeopenwebstandardforalowlevel3DgraphicsAPIbasedonOpenGLES，exposedtoECMAScriptviatheHTML5Canvaselement。
　　WebGL是在OpenGLES基础上建立的在浏览器跑起来的图形学标准，同理是浏览器厂商规范让JS操作接口。光有规范是不够的，还要程序告诉GPU如何进行渲染。
　　GLSL（OpenGLShadingLanguage）
　　后面讲到图形渲染管线会说到，这里浅浅先通过例子感受下立方体demo〔7〕。
　　代码〔8〕阉割版：有类C语言的着色器语言、有我们熟悉JS语言、有矩阵相乘。。。
　　canvasidcanvascanvas
　　Three。js
　　WebGL学习有门槛，Three。js〔9〕作为方向入门，就像jQuery一样的存在，可以快速的创建出三维场景。
　　阶段总结
　　我们需要一个规范接口告诉驱动如何和GPU通信，这个规范接口是OpenGL，发展至今嵌入式设备崛起，OpenGLES也应运而生，WebGL是基于OpenGLES可以让其在浏览器上通过Javascript调用的规范接口，但WebGL门槛不低，要和GPU通信，就需要了解计算机图形学知识，那肯定也需要用到着色器，所以Three。js封装好成为三维引擎，也不用知道那么多底层知识，就可以创建Web3D。
　　这个过程就好比深度学习领域：Tensorflow（xxx。jsPython）都可以调调现有成熟模型，看起来是调参数十分的简单，但是模型背后是线性代数、高数、统计学。。。
　　理解GPU设计模型
　　什么是渲染呢？简单的说就是从计算机程序最后到图像的过程。
　　大家面试都会被问到一个问题从输入url到页面渲染完成，都经历了些什么呢？大部分同学都止步于。。。。。。。生成RenderTree。那后续是如何将各种信息转换为屏幕上的像素呢？
　　在说明渲染过程之前，先来大致看下为什么需要GPU？
　　下面绘制图片，引用来自该文档TheBookofShadersbyPatricioGonzalezVivoJenLowe〔10〕
　　要对每个像素的计算，如此设计模式对CPU压力会比较大，故有GPU结构去处理该场景。
　　上述这么设计的原因是：对每个像素进行计算，而且是相同的运算，这样并行计算的效率会更高。
　　以上可以理解：GPU计算能力不如CPU，但是GPU人多力量大（管子多，且管子只处理已知简单任务），类比于建筑工程师（CPU）设计出来建筑图纸和每项任务，工人们（GPU）搬砖干活。