騰訊 Web 前端大會 WebGL & Three.js（MR_LP）

​

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

• 線性代數/計算機圖形