webGL three.js 的使用流程

1.前言

本次大会下午场我主要在分会场1 ： Web 前沿技术听各位大牛的分享。

本文主要是来跟大家分享一下听到的关于前端实现 Web AR/VR 的一些信息。

声明：

本文是由李鹏（MR_LP）全程手打，请勿转载，违者必究！

本文首发自微信公众平台（李晓鹏：MR_LIXP），如果可以请关注我一下。

本文中若引用内容发生了侵权，请及时联系作者删除。

鉴于本人某些知识水平有限，如果在文章中出现某些错误，请不要激动，留言给我就好。
本文中有很多内容是自己根据自己的理解去跟大家分享的，所以保留不同观点，可以留言给我。

2.基础信息

分享人：

BruceWan ( 万波 )腾讯前端高级工程师

主要分享内容：

虚拟现实(VR)和增强现实（AR）是近年来出现的高新技术。它通过电脑技术，将虚拟的信息应用到真实世界。此次分享BruceWan将由浅入深介绍WebGL，并以three.js为主介绍相关类库和原理，以及3D互动、WebVR、WebAR的实际项目应用。

分享内容记录笔记如下：

3.分享流程

自我介绍

首先是作者对自己的基础介绍，例如之前是做什么的，从13年开始自学 Three.js 等内容。

导言

在开始之前，万波首先跟我们说明了一个概念。

WebGL != 3D

还可以做2D
实现3D 的方式有很多种，并不局限于此
实际：JS API => Opengi ES => GPU 编程

WebGL 能做什么？

我们能实现什么？

逼真的 3D 效果
- 产品展示
- 品牌及营销网站
- 应用
- 衣服搭配
- 视频装修
沉浸式网站体验
- 游戏
- VR/AR
  
  开发的时机成熟了么？
开发成本？
- 大约为 2D 网站的 2 倍左右
- 成本不会太高
  
  性能如何呢？
移动端
- 需要降低画质
  FPS 35
  阴影
  灯光 5
  模型面数：2W
  测试设备：一般手机
PC 端
- 十分优异
  FPS:60+
  阴影
  灯光 5
  模板面数：10W
各大网站对3D 的支持程度
- 3月数据
  桌面：81.2%
  移动：74.7%

那我们该做什么呢？

学习三维需要什么？
- Web GL 绘图 API
  点
  线
  角
有哪些框架可用？
- Three.js
  全面3D 框架
- Babylon.js
  微软员工开发3D 引擎
- PlayCanvas
实际的实现流程是怎么样？
- 3DMAX 制作物体原型
- 修正物体材质参数
- 总结：
  创建场景
  添加灯光
  添加物体
  赋予材质
  渲染设置
  渲染
- 使用Three.js该怎么做呢？
- 创建场景
- 配置场景
  相机
  灯光
- 创建模型
- 渲染
- 场景
  3D 空间容器
- 灯光
  光线照射
- 材质
  物体特质、质点
```
  几何体
      分段、半径等内容
  网格
      几何表面、有 Face 构成
  面
      一个个很小的三角形
  顶点
      构成三角形的点
```
- 相机
  观察者视角
- 了解3D 场景概念
- 3D 软件制作流程

使用 WebGL 以及 Three.js 能做什么？

从3D 软件模型中导出已有的模型
创建基本几何体
- 基本几何体
  由 CUP 构建，比较耗性能
- 变形几何体
模拟各种材质
- 内置材质
- 材质参数
  颜色
  漫反射贴图
  凹凸贴图
  环境贴图
  自发光
  蒙皮-权重影响定点位置
灯光
- 灯光类型
  点光源
  聚光灯
  直射光
  环境光
粒子效果
动画
- 基于 Mesh 的动画
  位置
  角度
  缩放
- 基于 Vertex 的动画
  修改定点位置
  粒子动画
- 软件导出动画
- 基于 Material 动画
  透明度
  贴图 UV
  颜色值
- 着色器动画

Three.js 到底做了什么？

工作原理是什么样？

顶点坐标
传入顶点着色器
图元装配

  顶点坐标 => 传入顶点 => 顶点着色器 => 图元装配
      图元

光栅化
生成片元

  片元着色器
      光栅化
          片元

Three.js 做了什么？
处理流程

我们需要储备哪些知识？

3D 软件
- 3DSMAX
- C4D
- MAYA
- BIENDER
学习 Three.js
- 实例
- 文档
三方库
- Tween.js
- cannon.js
学习 WEBGL
OPENGL ES
- shaderForg
- shaderToy
线性代数/计算机图形