?
1.前言
請(qǐng)注意：若文章中出現(xiàn)圖片無法正常加載的情況。
請(qǐng)移步?騰訊Web前端大會(huì) WebGL&Three.js（MR_LP）
本次大會(huì)下午場(chǎng)我主要在分會(huì)場(chǎng)1 ： Web 前沿技術(shù)聽各位大牛的分享。
本文主要是來跟大家分享一下聽到的關(guān)于前端實(shí)現(xiàn) Web AR/VR的一些信息。
聲明：
本文是由李鵬（MR_LP）全程手打，請(qǐng)勿轉(zhuǎn)載，違者必究！
本文首發(fā)自微信公眾平臺(tái)（李曉鵬：MR_LIXP），如果可以請(qǐng)關(guān)注我一下。
本文中若引用內(nèi)容發(fā)生了侵權(quán)，請(qǐng)及時(shí)聯(lián)系作者刪除。
鑒于本人某些知識(shí)水平有限，如果在文章中出現(xiàn)某些錯(cuò)誤，請(qǐng)不要激動(dòng)，留言給我就好。
本文中有很多內(nèi)容是自己根據(jù)自己的理解去跟大家分享的，所以保留不同觀點(diǎn)，可以留言給我。
2.基礎(chǔ)信息
分享人：
BruceWan ( 萬波 )騰訊 前端高級(jí)工程師
主要分享內(nèi)容：
虛擬現(xiàn)實(shí)(VR)和增強(qiáng)現(xiàn)實(shí)（AR）是近年來出現(xiàn)的高新技術(shù)。它通過電腦技術(shù)，將虛擬的信息應(yīng)用到真實(shí)世界。此次分享BruceWan將由淺入深介紹WebGL，并以three.js為主介紹相關(guān)類庫(kù)和原理，以及3D互動(dòng)、WebVR、WebAR的實(shí)際項(xiàng)目應(yīng)用。
分享內(nèi)容記錄筆記如下：
3.分享流程
自我介紹
首先是作者對(duì)自己的基礎(chǔ)介紹，例如之前是做什么的，從13年開始自學(xué) Three.js 等內(nèi)容。
導(dǎo)言
在開始之前，萬波首先跟我們說明了一個(gè)概念。
WebGL != 3D
還可以做2D
實(shí)現(xiàn)3D 的方式有很多種，并不局限于此
實(shí)際：JS API => Opengi ES => GPU 編程
WebGL 能做什么？
我們能實(shí)現(xiàn)什么？
逼真的 3D 效果
產(chǎn)品展示
品牌及營(yíng)銷網(wǎng)站
應(yīng)用
衣服搭配
視頻裝修
沉浸式網(wǎng)站體驗(yàn)
游戲
VR/AR
開發(fā)的時(shí)機(jī)成熟了么？
開發(fā)成本？
大約為 2D 網(wǎng)站的 2 倍 左右
成本不會(huì)太高
性能如何呢？
移動(dòng)端
需要降低畫質(zhì)
FPS 35
陰影
燈光 5
模型面數(shù)：2W
測(cè)試設(shè)備：一般手機(jī)
PC 端
十分優(yōu)異
FPS:60+
陰影
燈光 5
模板面數(shù)：10W
各大網(wǎng)站對(duì)3D 的 支持程度
3月數(shù)據(jù)
桌面：81.2%
移動(dòng)：74.7%
那我們?cè)撟鍪裁茨兀?/p>
學(xué)習(xí)三維需要什么？
Web GL 繪圖 API
點(diǎn)
線
角
有哪些框架可用？
Three.js
全面3D 框架
Babylon.js
微軟員工開發(fā)3D 引擎
PlayCanvas
實(shí)際的實(shí)現(xiàn)流程是怎么樣？
3DMAX 制作物體原型
修正物體材質(zhì)參數(shù)
總結(jié)：
創(chuàng)建場(chǎng)景
添加燈光
添加物體
賦予材質(zhì)
渲染設(shè)置
渲染
使用Three.js該怎么做呢？
創(chuàng)建場(chǎng)景
配置場(chǎng)景
相機(jī)
燈光
創(chuàng)建模型
渲染
場(chǎng)景
3D 空間容器
燈光
光線照射
材質(zhì)
物體特質(zhì)、質(zhì)點(diǎn)
幾何體
分段、半徑等內(nèi)容
網(wǎng)格
幾何表面、有 Face 構(gòu)成
面
一個(gè)個(gè)很小的三角形
頂點(diǎn)
構(gòu)成三角形的點(diǎn)
相機(jī)
觀察者視角
了解3D 場(chǎng)景概念
3D 軟件制作流程
使用 WebGL 以及 Three.js 能做什么？
從3D 軟件模型中導(dǎo)出已有的模型
創(chuàng)建基本幾何體
基本幾何體
由 CUP 構(gòu)建，比較耗性能
變形幾何體
模擬各種材質(zhì)
內(nèi)置材質(zhì)
材質(zhì)參數(shù)
顏色
漫反射貼圖
凹凸貼圖
環(huán)境貼圖
自發(fā)光
蒙皮-權(quán)重影響定點(diǎn)位置
燈光
燈光類型
點(diǎn)光源
聚光燈
直射光
環(huán)境光
粒子效果
動(dòng)畫
基于 Mesh 的動(dòng)畫
位置
角度
縮放
基于 Vertex 的動(dòng)畫
修改定點(diǎn)位置
粒子動(dòng)畫
軟件導(dǎo)出動(dòng)畫
基于 Material 動(dòng)畫
透明度
貼圖 UV
顏色值
著色器動(dòng)畫
Three.js 到底做了什么？
工作原理是什么樣？
頂點(diǎn)坐標(biāo)
傳入頂點(diǎn)著色器
圖元裝配
頂點(diǎn)坐標(biāo) => 傳入頂點(diǎn) => 頂點(diǎn)著色器 => 圖元裝配
圖元
光柵化
生成片元
片元著色器
光柵化
片元
Three.js 做了什么？
處理流程
我們需要儲(chǔ)備哪些知識(shí)？
3D 軟件
3DSMAX
C4D
MAYA
BIENDER
學(xué)習(xí) Three.js
實(shí)例
文檔
三方庫(kù)
Tween.js
cannon.js
學(xué)習(xí) WEBGL
OPENGL ES
shaderForg
shaderToy
線性代數(shù)/計(jì)算機(jī)圖形
