WebVR vs 中文演出

Gore Wang , 2017 @ Taipei WebGL & WebVR

Email:sunrise91.t3@gmail.com

Agenda

  • Strategy

  • .ttf ? .otf ? .typeface ?

  • 咩咩嘎嘎

WebGL

three.js

A-Frame

React VR

Strategy

Geometry ?

or

 Material ?

Geometry

  • 需要凸顯文字質感
  • 比貼圖形式更適合動態應用

使用情境

中文

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

 Material

  • 以「閱讀」為需求的文字顯示
  •  word wrap 需求

使用情境

Canvas or SDF (Bitmap)

中文

  • A-Frame「目前」Text component只支援SDF
  • 嗯 ... 其實沒什麼太大問題 ...

Geometry

微軟雅黑

思源黑

王漢宗勘流亭

思源明

隸書

.ttf

.otf

.ttf

.ttf

.otf

ttf => typeface

otf => typeface

three.js


    var loader = new THREE.FontLoader();
    
    loader.load(typeface_json_url, function (font) {
    
          var textGeometry = new THREE.TextGeometry("摩茲", {
            font: font,
            ...
          })
          
          ...
    })

A-Frame

A-Frame canvas text

( add background transparent property​ )

(CJ Unified Ideographs enhance version)​

( add text stroke for background transparent )

Thanks~!

WebVR vs Chinese

By Gore Wang

WebVR vs Chinese

  • 2,911