字体、文本

具体的使用方法可以查看我的文章:

1、简书:http://www.jianshu.com/p/1b200198ab41

2、CSDN:http://blog.csdn.net/liu__520/article/details/72624864

文本元素(字形)在3D中渲染,VR中的字体和文本的渲染是棘手的

用法

    一种方法是用three.js中的TextGeometry字体,但是对于高质量的文本计算量耗费很大,

    另外一种用法是用浏览来生成文本模板,再通过html5的canvas绘制成React VR用的

OpenGLES原型,难点在于如何平衡极小的模糊和纹理内存的大小管理

React VR

React VR采用了不同的方法,一个试图为普遍使用而最大化,但同时又有自己的限制,React VR

文本是利用Oculus移动sdk和Signed Distance Field字体渲染的。


distance field字体动态渲染到3D中也能保持锐利和清晰,因为这些文件是用bitmap textures渲染的,这是最小量的几何字体了,我们用最小量的几何字体和texture usage得到动态字体内容和位置


约束是因为字形不是动态生成的,完整的Unicode字符集在浏览器中不支持

Character sets(字符集)

React VR默认的字符集是基于387个覆盖EFIGS语言的字形,当然日语和韩语的模板也可以下载

ovrui 的npm包里面的 fonts/ 目录下可以找到。

OVRUI.loadFont(

  'path/to/custom.fnt',

  'path/to/custom.png'

).then((font) => {

  // 'font' contains everything React VR needs to render <Text> elements with

  // your custom font.


  // Pass it to the boilerplate init code

  const vr = new VRInstance(bundle, MyProject, parent, {

    // Pass in the custom font as an initialization property

    font: font,

    ...options,

  });


  // ...

});

通过显示加载字体,若字体不够的话,你可以安装备选的字体,库中包含了大多数的中文,日文和韩文字形,OVRUI函数addFontFallback用于向已加载的字体集添加回退

var fallbackFonts = {

  'assets/cjk_0.fnt''assets/cjk_0_sdf.png',

  'assets/cjk_1.fnt''assets/cjk_1_sdf.png',

  'assets/cjk_2.fnt''assets/cjk_2_sdf.png',

  'assets/korean_0.fnt''assets/korean_0_sdf.png',

  'assets/korean_1.fnt''assets/korean_1_sdf.png',

  'assets/efigs.fnt''assets/efigs.png',

};

// use the embedded defaultFont and and fallbacks

var font = OVRUI.loadFont();

var count = 0;

function addFallback(fallbackFont) {

  OVRUI.addFontFallback(font, fallbackFont);

  count--;

  if (count === 0) {

    // all fallbacks are loaded start the VRInstance

    // 'font' contains everything React VR needs to render elements with

    // your custom font.


    // Pass it to the boilerplate init code

    const vr = new VRInstance(bundle, 'MyProject', parent, {

      // Pass in the custom font as an initialization property

      font: font,

      ...options,

    });


    // ...

  }

}

guiSysOptions.font = OVRUI.loadFont();

for (var key in fallbackFonts) {

  // allow each font to asynchronously load in parallel and start VR instance when all complete

  count++;

  OVRUI.loadFont(key, fallbackFonts[key]).then((fallbackFont) => {

    addFallback(fallbackFont);

  });

}

你也可以在Oculus Mobile SDK中用fontue tool生成自己的文本模板,这个工具依赖FreeType

在Oculus Mobile SDK的Tools/fontue目录下,readme.txt 里面有讲如何使用。


使用efigs字体的命令行如下:

OculusSans-Medium.otf efigs\efigs -co -0.01 -ts 1.0 -hpad 128 -vpad 128 -sdf 256

1024 1024 -cf data\strings\values\strings.xml -cf data\strings\values-

de\strings.xml -cf data\strings\values-en-rGB\strings.xml -cf

data\strings\values-es\strings.xml -cf data\strings\values-es-rES\strings.xml -

cf data\strings\values-fr\strings.xml -cf data\strings\values-it\strings.xml -cf

data\EFIGS_extended.txt

更多的字符可以用-cf