如何优化A-Frame html着色器文本以实现VR可视化?

时间:2018-11-01 10:45:13

标签: three.js aframe html2canvas

大家好,我一直在尝试使用A-FRAME在VR(在oculus-go上进行测试)中绘制附着在您手上的书页。最初,我尝试使用基准面,并使用text属性将其应用于文本,然后定义其值,对齐方式,字体等。一切正常,但是文本变得“锯齿状”,移动得越远,情况越糟您的手(基本上是不可能做不到的)使它对于长文本形式(例如书页)极为不利。

然后,我尝试使用mayognaise的aframe-html-shader探索替代方案。通过创建一个html div并使用css,它是自定义,对齐等方面的完美解决方案,当我渲染它时,文本不再具有任何“锯齿状的边缘”(因为它基本上是一种纹理)。 但是,它变得很模糊,以至于长时间读取变得很累。

我尽了一切努力来提高其清晰度,但是它一直很模糊,这对我来说绝对没有意义。

我尝试过的事情:

  • 增大纹理所要应用的对象的大小,然后在渲染后将其缩放-结果:相同...

  • 增加画布的大小或aframe-html-shader.js中的纹理-结果:发生相同的事情...但是,某些修补尝试似乎触发了“图像太大(.. 。)缩小到4000“(4000我不记得确切的值),这似乎表明画布已经以全分辨率渲染

  • 从Mayognaise aframe-html-shader.js切换到wildlala fork(在着色器上已经具有“ scale”选项)并应用“ canvasScale:2”-结果:一样...

  • 使用4000px宽的html元素作为要渲染的对象,相应地增加字体-结果:一样...

我没有主意,真的不明白为什么我无法从html着色器中获得足够好的文本,因为如果文本在图像中并且我使用同一图像作为纹理,则文本完全可读。

在此需要所有A-Frame专家和开发人员的帮助!

谢谢大家!

1 个答案:

答案 0 :(得分:0)

  

增加画布的大小或aframe-html-shader.js中的纹理-结果:发生同样的事情...但是,某些修补尝试似乎会触发“图像太大(...)缩放降低到4000“(4000我不记得确切的值),这似乎表明画布已经以全分辨率呈现了

不是太大。这是因为纹理需要是两个大小的幂(例如4096x4096)。

标准文字部分应该是最清晰的。 A-frame主分支具有修复程序,可使文本看起来更清晰,可能会有所帮助。 https://github.com/aframevr/aframe/commit/8d3f32b93633e82025b4061deb148059757a4a0f