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

​

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

• 线性代数/计算机图形