时间戳

首页 > 解决方案 > 如何将 A-Frame html 着色器文本优化为 VR 可视化？

three.js - 如何将 A-Frame html 着色器文本优化为 VR 可视化？

问题描述

大家好，所以我一直在尝试使用 A-FRAME 在 VR（在 oculus-go 上进行测试）中渲染附在您手上的书页。最初我尝试使用平面并使用 text 属性将文本应用到它，然后定义它的值、对齐方式、字体等......一切都很好，但是文本变得“锯齿状边缘”似乎变得更糟你移动得越多你的手（这基本上是不可能不做的）使得它对于像书页这样的长文本形式非常糟糕。

然后我尝试通过使用 mayognaise 的 aframe-html-shader 来探索替代方案。通过创建一个 html div 并使用 css，它是自定义、对齐等方面的完美解决方案，当我渲染它时，文本不再有任何“锯齿状边缘”（因为它基本上是一个纹理）。但是，它变得足够模糊，以至于长时间阅读变得令人厌烦。

我已经尽我所能来增加它的清晰度，但是它一直模糊不清，这对我来说完全没有意义。

我试过的：

我没有想法，真的不明白为什么我不能从 html 着色器中获得足够好的文本，因为如果文本在图像中并且我使用相同的图像作为纹理，则文本出来时完全可读.

在这里需要所有 A-Frame 专家和开发人员的帮助！

谢谢大家！

标签： three.jsaframehtml2canvas

解决方案

增加画布的大小或 aframe-html-shader.js 内的纹理 - 结果：同样的事情......但是一些修补尝试似乎触发了“图像太大（......）缩小到 4000 "（4000 我不记得确切的值）这似乎表明画布已经以全分辨率渲染

它不是太大。这是因为纹理需要是两倍大小的幂（例如，4096x4096）。

不过，标准文本组件应该是最清晰的。A-Frame master 分支修复了使文本看起来更清晰，可能会有所帮助。https://github.com/aframevr/aframe/commit/8d3f32b93633e82025b4061deb148059757a4a0f

推荐阅读