[23年10月版46章]Three.js可视化企业实战WEBGL课，随着 5G 时代的到来，3D可视化需求大量涌现。3D 游戏，酷炫的活动宣传页，三维数字城市，VR全景展示、3D 产品展示等领域中，很多项目都是用 WebGL 实现的，也只能用WebGL来做，也就是说，WebGL 的时代就在眼前了。

WebGL在电脑的GPU中运行。因此你需要使用能够在GPU上运行的代码。 这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器， 另一个叫片段着色器，并且使用一种和C或C++类似的强类型的语言 GLSL。 (GL着色语言)。 每一对组合起来称作一个 program（着色程序）。

顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置，WebGL可以对点， 线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片段着色器方法。 片段着色器的作用是计算出当前绘制图元中每个像素的颜色值。

Adobe 提供的 Stage3D API(Flash、AIR)提供了 GPU 硬件加速架构。使用这些技术，程序员可以在 Web 浏览器以及 IOS 和 Android 平台上开发具有 2D 和 3D 功能的应用程序。由于 Flash 是一种专有软件，它没有被用作网络标准。

2011 年 3 月，WebGL 发布。WebGL是一个无需 JVM 即可运行的开放软件，它完全由网络浏览器控制。新版本的 HTML 5 具有支持 3D 图形的多项功能，例如 2D Canvas、WebGL、SVG、3D CSS 转换和 SMIL。
渲染过程大概经历了下面这么多过程， 因为本篇文章的重点其实是在着色器，所以我重点分析从顶点着色器—— 片元着色器的一个过程

WebGL就是和GPU打交道，在GPU上运行的代码是一对着色器，一个是顶点着色器，另一个是片元着色器。每次调用着色程序都会先执行顶点着色器，再执行片元着色器。

一个顶点着色器的工作是生成裁剪空间坐标值，通常是以下的形式：

const vertexShaderSource = `
    attribute vec3 position; 
    void main() {
        gl_Position = vec4(position,1); 
    }
WebGL工作原理
图像渲染其实是前端工程师使用CSS语言，去调用Web GL的API，然后通过WebGL去调用底层的openGL，来达到操作显卡驱动的目的。

OpenGL－ＥＳ
OpenGL－ＥＳ 是ｏｐｅｎＧＬ的一个精简版．专用于嵌入式计算机、智能手机、家用游戏机等设备。OpenGL ES移除了OpenGL中许多陈旧无用的新特性，并且增加了新特性。这使得OpenGL ES保持了轻量级的同时，还有足够的能力渲染出精美的三维图形。