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
線性代數/計算機圖形