腾讯Web前端大会 WebGL&Three.js（MR_LP）

Posted 2021-04-25 李晓鹏

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

• 线性代数/计算机图形学