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