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
by - Max Krieger
( 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,895