WebGL和Three.js简介

前言

WebGL和Three.js是一种用于在浏览器上进行3d渲染的技术。是前端领域的又一个细分方向。除了专门做WebGL的公司，比如一些游戏公司等，其他的日常开发中，基本用不到。但是又比较有意思，恰逢赶上部门内部技术分享，所以浅浅学习了一下，给大家做一个分享。

是一种JavaSript API，用于在不使用插件的情况下，在任何兼容的网页浏览器中开发交互式的2D和3D网页效果。------from 维基百科

WebGL是运行在GPU上的，需要GPU能识别的语言，叫做GLSL，也就是着色器语言。它是一种强语言类型，类似于C/C++。这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器、一个叫片元着色器。每对组合起来称作一个着色程序。

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

PS：光栅化就是用像素绘制出来。

片元着色器的作用是计算出当前绘制图元中的每个像素的颜色值。

WebGL在GPU上的工作基本分为两个部分，第一部分是将顶点（或数据流）转换到裁剪坐标，第二部分是基于第一部分的结果绘制像素点。

左侧是你提供的数据，顶点着色器（vertex shader）是你写进GLSL的一个方法，每个顶点调用一次，在这个方法中做一些数学运算后设置了一个特殊的gl_position变量，这个变量就是该顶点转换到裁剪空间中的坐标值，GPU接收该值并保存起来。

1、首先：创建顶点数组。顶点数组的信息包含：在空间的位置、纹理、颜色、如何受光照影响等。

2、将顶点数组中的数据输入到顶点缓冲区中，再将其发送到GPU，同时也需要提供顶点数组原色的附加索引数组，主要是控制如何将顶点组装成三角形。

3、GPU从顶点缓冲区中读取每个选定的顶点，并通过顶点着色器运行它。

4、然后GPU将投影的顶点连接起来形成三角形。它通过按照索引数组指定的顺序获取顶点，并将它们分组为三个集合来实现此目的。

5、光栅化器获取每个三角形，对其进行剪辑，丢弃屏幕之外的部分，并将剩余的可见部分分解为像素大小的片段。

6、这些片段通过片段着色器（对每个绘制的像素独立运行），绘制到帧缓冲区中。

7、最后在帧缓冲区中完成渲染绘制。

是一款基于原生webgl封装的通用的web 3d引擎，是通过对webgl接口的封装与简化而形成的一个易用的图形库。

特点：

1、易用性：threejs旨在提供一个简单、易用的接口，使开发者能够在网页上轻松创建复杂的3D场景

2、跨平台：threejs提供了跨浏览器、跨设备的解决方案，确保在不同平台和浏览器上一致的展现3D图形

3、性能优化：threejs通过底层的webgl技术来实现高性能的3d图形渲染，确保在各种设备上都能流畅运行

4、社区支持：threejs拥有一个庞大的开发者社区，可以轻松的找到支持、文档和示例，有助于加速开发过程

5、广泛应用：threejs被广泛应用于VR、游戏开发、数据可视化等领域

可以理解为虚拟的3D场景，用来表示模拟生活中的真实的三维场景，或者说三维世界。

就像你生活中想获得一张照片，需要一台用来拍照的相机。

执行拍照的动作

性能监控器status.js、GUI调参界面dat.gui.js

Vue3+three.js，master分支，拉下来之后npm run dev即可使用

效果如下：