WebVR 中文使用策略

(由於A-Frame/ReactVR都是由three.js構成的,本文就主要以three.js作為出發。)

之前有一陣子我被網路上相關錯誤資訊誤導了一陣子,令我頗為不悅,故來完成這篇文章。

Material or Geometry

在WebVR上顯示文字大致就兩種選擇,一種是貼圖形式,一種是真正實際拉出3D幾何。

Material(Canvas or SDF Bitmap)

使用情境:

  • 以「閱讀」為需求的文字顯示
  • 文字較長有換行需求

中文問題:

  • A-Frame「目前」Text component只支援SDF (SDF有點像CSS Sprite,其實就是已經把文字都轉成一張大圖再到相對位置擷取出來 )

使用策略:

像上面這個我之前做的Demo,其實就是倚靠canvas先將文字繪成一張圖,再將圖貼到平面幾何上。

至於作法很簡單,因為A-Frame已經有大神Max Krieger幫你把「繪製」跟「文字處理」兩個麻煩的動作寫成了 aframe-draw-componentaframe-textwrap-component

即使你用的是原生three.js,由於A-Frame component原本就是將A-Frame的lifecycle接上three.js去繪製,所以看他的code就能很快的學會如何實作three.js的部份。

不過由於Max Krieger寫的component是為英文做使用的,所以textwrap是以空格去做斷行,以致於中文就無法正常斷行。

於是我fork過來做了簡單的修改,做了一個英文會以空格斷行,中日文會以單字斷行的中英日文適用版

再者像是我Demo中,選項的文字需要是透明背景,不過原始Max Krieger寫的aframe-draw-component並沒有給一個background transparent的設置接口,所以我也fork過來修改了一個背景可設透明的版本

又進一步需求,由於背景透明很容易讓文字識別比較困難,所以我再做了一個Text Stroke版,就可以像Demo中我文字白色可以帶一個黑色邊線,加強可閱讀性。(還請install stroke_text這個branch)

Material的需求以我過去經驗到此告一段落,接下來就是之前被網路資訊誤導的Geometry部分了。

Geometry

使用情境:

  • 希望文字能有立體光影與質感
  • 比貼圖形式更適合動態應用

中文問題:

  • 必須有完整字體路徑去做3D繪製(中文=大檔)
  • 並不是所有字體都能說用就用

使用策略:

這是我親自下去實測的結果,大家應該可你很快到理解反正就是「.otf」檔會出問題。(otf是微軟跟Adobe合作推出比較新的字體規格)

會出問題的原因是three.js在吃字體的時候是要先將原本字體檔轉成typeface這種JSON形式的字體格式。(typeface converter

顯然就是otf在做轉檔的時候其實會出問題,typeface的資料格式其實就類似文字輪廓的路徑。像「摩」字otf在開頭還有數值,後面才出問題,對比上面文字實際render出來的圖就可以理解發生了什麼事。(雖然otf或許根本就不應該拿來用,不過有些字其實即使是otf還是有機會轉成功,至於癥結點在哪我就沒有細部去研究。)

結論就是乖乖用ttf字體就好。

但其實也不是所有ttf字體就保證沒問題,我測試過那種輪廓很不明確的字體一樣會爆掉(轉檔的時候就爆了)。

使用方式:

在three.js上實作其實十分簡單,只要把typeface的json檔餵給three.js的FontLoader,再以此去創造TextGeometry。

A-Frame上也有text-geometry這樣方便的component去做應用,他已經幫你把three.js的部份做好了。

中文字體檔案過大問題:

由於中文轉成typeface也一定都是10MB起跳,你都用WebVR了,肯定是要面對這種困境。

於是我看到leisir寫的這篇,由於typeface本來就是一個字一個字的json資料格式,所以大可只要載入自己真正需要Geometry化的個別字的資料就好。

畢竟一般會選擇Geometry化的需求,大多都是Logo或標題類,實際字量不會太多,所以只要做到這點,中文使用上也就無需有所顧慮了。

結論

其實WebVR在中文使用上說不上來真的有太大問題,主要問題就還是繼承於「Web」而非「VR」。

那希望WebVR在未來也能更加活絡,我也期待玩到或有機會實現更有趣的構想。

此篇出自於在 Taipei WebGL & WebVR 時所準備簡報,補完簡報所缺的口述部分。

也再次感謝正努力推動WebVR發展的Bob推了我一把讓我把這部份經驗分享出來。

歡迎大家到Mozilla的WebVR中文社群聊聊。