小窺React360——用React建立360全景VR體驗

前言   

混跡VR屆的發燒友兼開發者們一定不要錯過這款FaceBook推出的跨端VR開發框架——React360，稱為360全景體驗框架更為準確，因為其前身是FaceBook和Oculus2017年釋出的一個叫作“Racet VR”的JS庫，用來在web端建立3D和VR體驗。後來Oculus使用該框架的原生C++版本構建自己部分應用，隨著時間推移，由於要求框架解決不同需求，專案的APIs開始發生分叉。為了避免兩個系統的混淆，開源框架重新命名為React360，這更好地反映它的使用場景：建立橫跨PC，移動端，VR裝置上的沉浸式360體驗。

可以先看一下官方示例效果，這是一個稍複雜的應用，加入了3D模型，在3D模型和2D皮膚間共享資料。

體驗

工作原理

官方提供了構建工具react-360-cli，內部使用和ReactNative一樣的打包工具Metro，基於JS Bundle在自己的JS Runtime中進行解析，通過事件機制與客戶端通訊，其實該框架還有很多方面相像或依賴於RN。構建一個React360應用程式需要完成兩部分，需要渲染的Raect元件和Runtime定義（這種角色劃分直接借鑑於React Native）。這也很清楚地反映出React360的工作流程，可以參見下圖：
（工作流程圖）

基於JavaScript Core/V8引擎，React360提供了Runtime需要的APIs，在客戶端（頭戴裝置，移動端，瀏覽器等）完成構建介面，web端的渲染底層依賴於Three.js，這是業界較為成熟的3D圖形框架，一般需要手動設定3D網格和紋理，而框架中的react-360-web模組隱藏了這些細節。當建立了新的React元件，框架會指示Runtime將它們新增到3D場景中，當使用者提供輸入將作為事件通過Runtime傳遞給React，這兩部分相互合作形成一個凝合系統。如果想在系統中分享資料，就需要藉助框架提供的Native Modules。

需要注意的是，由於JS運作在瀏覽器中是單執行緒的，應用中任何阻礙行為都有可能造成渲染延遲，這對於VR這種即時性很強的體驗是十分致命的，所以框架將React元件和渲染過程放在分離的上下文中情有可原。

預設情況下，React360使用Web Worker執行你的React程式碼，而不是標準瀏覽器，這就意味著在元件定義的檔案中訪問不到原生window.location這類APIs。並不是嚴格意義上的無法訪問，事實上當你列印window物件時React360提供了一個DedicatedWorkerGlobalScope型別例項，它包裝了window的一些內容。

Surfaces
Surfaces實際上是一個載體，允許你新增2D內容到3D場景，開發者依據畫素定義Surfaces寬高，React360獲取資訊產生合適尺寸的物件，官方介紹了兩種型別的Surfaces，Cylinder和Flat。一個Cylinder Surface讓2D內容投射到半徑為4m的Cylinder內部，其實是假想的圓柱模式。一個Flat Surface位於4m半徑的球體外側，一個假想的球體模式。APIs也提供了像yaw（垂搖），pitch（縱搖），roll（橫搖）這些物體自由度控制資訊。

為了將React組建附著在Surface上，需要使用AppRegistry註冊元件，又一次與ReactNative相似。這會告知Runtime你的元件通過id欄位被唯一確定。

AppRegistry.registerComponent('MyAppName', () => MyAppName);

同時在Runtime檔案中引用。

r360.renderToSurface(
  r360.createRoot('MyAppName'),
  r360.getDefaultSurface(),
  'default' /* 可選項，引用的surface的名稱 */
);

Components

官方提供了呈現2D，3D內容的展示元件和互動按鈕元件。

• View：UI構建最基本的元素，被用來組織實體或其他View元素，也是輸入事件的容器。
• Image：呈現2D影像
• ENtity：渲染3D物件，支援obj，mtl，gltf格式檔案
• VrButton：是一個實用程式類，是捕獲事件的包裝器。可以檢測各種輸入裝置上單擊型別操作，這是通過一個可以監聽按鍵事件的內部狀態機做到的。

Layout 

支援2D Surface佈局，完全以Flexbox格式佈局，又是一個和RN相似的點。支援3D Space佈局，使用Entity元件時候，通過transform完成3D物件放置，x軸指向使用者右側，y軸指向上方，z軸指向使用者後方。

APIs
官方提供了常見的APIs，例如來自React Native的Animated；鍵值對儲存系統AsyncStorage；值得一提的是提供的ControllerInfo可以被用來響應控制器的connect/disconnect事件，獲取關於所連線的遊戲手柄和控制器的靜態資訊，比如唯一識別符號，按鈕，軸數等資訊。環境API Environment用來改變場景的背景，包括圖片，音訊，視訊。

例項解讀

利用react-360-cli生成的專案中主要有這三個檔案：

• index.js：放置應用的主要程式碼，React元件的地方，在這裡可以組織拆分多個元件
• client.js：也就是Runtime的配置，這部分連線瀏覽器環境和React應用。根據程式碼示例看到主要完成三件事：（1）建立React360一個新例項，載入並附加React程式碼到DOM特定位置，這裡也是傳遞初始化選項的地方。（2）將你的程式碼掛載到3D場景中，在index.js中宣告的掛載點附著在應用程式的預設曲面。（3）新增背景資訊，這個部分可選，允許程式碼仍在載入過程中展示圖片，讓使用者儘快看到一些內容。
• index.html：提供安裝JS程式碼的掛載點。

import {ReactInstance} from 'react-360-web';

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    fullScreen: true,
    ...options,
  });

  r360.renderToSurface(
    r360.createRoot('SlideshowSample', {
      photos: [
        {uri: './static_assets/360_world.jpg', title: '360 World1', format: '2D'},
        {uri: './static_assets/360_world2.jpg', title: '360 World2', format: '2D'},
        // Add your own 180 / 360 photos to this array,
        // with an associated title and format
      ],
    }),
    r360.getDefaultSurface(),
  );
}

window.React360 = {init};

Native Modules

前面說過React元件執行在單獨上下文中，那麼如何與主視窗通訊，官方提供了Native Modules模組，讓React程式碼有了回撥到Runtime的能力，包括在載入中存值，請求有關連線控制器資訊或操縱渲染環境。Native模組被建立在Runtime程式碼中，使用Native Module需要自定義類，繼承自Module，使用前需註冊，這個示例模板程式碼演示了Native Modules的許多用法

import {Module} from 'react-360-web';

class MyModule extends Module {
  constructor() {
    // 使這個模組在NativeModules.MyModule可用
    super('MyModule'); 
  }
  
  // 這個方法將被暴露到React應用一側
  doSomething() {

  }
}

const r360 = new ReactInstance(
  'MyApp.bundle?platform=vr',
  document.getElementById('container'),
  {
    // 在初始時刻註冊自定義模組，接收Native Module例項，或一個返回例項的函式（需要傳遞上下文）
    nativeModules: [
      new MyModule(),
      ctx => new MyModule(ctx)
    ]
  }
);

通常有兩種使用場景，暴露常量和普通到React（同步），回撥函式或返回Promise方法（非同步）。這一段程式碼同時演示了這幾種使用場景，這是一個傳送瀏覽器資訊到React側的應用示例，在註冊階段，模組構造時常量生成並新增模組例項的userAgent屬性上，這個值被直接傳遞給React。第二個例子是暴露了同步setTitle()方法，只需要一個字串設定視窗標題欄。剩下兩個非同步方法展示了非同步資料如何返回到React。當getBatteryLevel()在React側被呼叫，開發者傳遞的回撥在資料可用時觸發，呼叫上下文提供的invokeCallback，將引數放置在陣列中，你可以給回撥傳遞任意數量的引數。儘管回撥是處理非同步任務的一種方式，但我們更偏向於用Promise建立有組織可讀性強的非同步邏輯鏈。通過Native Module，你可以使用$符號字首形式來暴露這種行為，兩個回撥ID會作為Promise的resolve, reject自動傳遞給Runtime，該方法會返回一個Promise到呼叫端。

import {Module} from 'react-360-web';

export default class BrowserInfoModule extends Module {
  constructor(ctx) {
    super('BrowserInfo');
    this._rnctx = ctx;
    this.userAgent = navigator.userAgent;
  }
  /*
       
     */
  setTitle(title) {
    document.title = title;
  }

  getBatteryLevel(cb) { // 讀取window資訊
    const getBattery = navigator.mozGetBattery || navigator.getBattery;
    getBattery
      .call(navigator)
      .then(
        battery => {
          // extract the level and return it
          return battery.level;
        },
        e => {
          // if an error occurs, return null
          return null;
        }
      )
      .then(level => {
        if (this._rnctx) {
          this._rnctx.invokeCallback(cb, [level]);
        }
      });
  }

  $getConfirmation(message, resolve, reject) {
    const result = window.confirm(message);
    if (this._rnctx) {
      if (result) {
        this._rnctx.invokeCallback(resolve, []);
      } else {
        // When rejecting a Promise, a message should be provided to populate
        // the Error object on the React side
        this._rnctx.invokeCallback(reject, [{message: 'Canceled the dialog'}]);
      }
    }
  }
}

後記

對於React360的整體一覽，官方文件還是對在web端介紹比較多，官方開發團隊在GitHub也比較活躍，所以有問題可以及時issue都會有人回覆。Facebook在幾年前收購了Oculus足已看出其進軍VR屆的雄心已經初見倪端，目前市面上許多APP對360全景圖的應用也永珍回春，微博的全景圖藉助手機的陀螺儀和重力感測器在不點選圖片詳情的情況下跟隨使用者手勢動態變化，自如的VR看房，在我們APP裡也引入了全景酒店實景體驗。在昂貴的VR裝置消費者負擔不起的情況下，360度全境體驗正是VR在當今階段最普及的形態，雖然只是純粹的平面影像，卻也一定程度上營造了沉浸式感受，而React360在靜態全景的基礎上引入了多種互動，這更加方便消費者瞭解需求，相信360全景的未來還能做得更多。

參考
https://facebook.github.io/react-360/