1.前言
本文主要是来跟大家分享一下听到的关于前端实现 Web AR/VR 的一些信息。
2.基础信息
主要分享内容：
-
虚拟现实(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
-
-
线性代数/计算机图形