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