?
1.前言
請注意：若文章中出現圖片無法正常加載的情況。
請移步?騰訊Web前端大會 WebGL&Three.js（MR_LP）
本次大會下午場我主要在分會場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
線性代數/計算機圖形
