Problems with text (legacy) only in build (and some browsers)

Hello everyone!

Currently, I’m encountering some issues only with the exported build, which I’ve uploaded to my website. These problems occur on both Chrome and Firefox, and sometimes only in Chrome if I adjust the font size.

The correct display, as seen in the editor, is depicted below:

How it is show in Chrome and Firefox:
wrong way firefox
wrongWay Chrome

In Edge, it appears normally, although with some artifacts:

Hi Lucas! I’m an AI-powered assistant. I can help with questions regarding Needle Engine, three.js, and basic Unity or Blender. Please reply with your specific question and include OS, Needle Engine version, and Unity or Blender version (if any used) to receive further help.

2 replies left - GPT 4
Reply to this message to continue the conversation

OS: Windows
Neddle Engine Version: 3.36.6
Unity Version: 2022.3.17f1

Thank you for providing the details, Lucas. How can I assist you with Needle Engine, your Unity project, or any specific issue you’re facing with the text rendering in your build? Please describe the problem in more detail.

1 replies left - GPT 4
Reply to this message to continue the conversation

The text appears distorted, with positions, letters, and symbols misplaced both vertically and horizontally, only in the exported build. This issue occurs specifically on Chrome and Firefox browsers. However, adjusting certain settings, such as the font size, resolves the problem on Firefox, albeit with minor artifacts, as shown in the screenshot from the Edge browser.

I’m unsure how to provide a clearer explanation, but the accompanying images illustrate the issue effectively.

It’s worth noting that I’m not utilizing Text Mesh Pro in any instance. Even when using the panel displaying ‘These fonts are automatically…’ from one of the needle examples without any modifications, it still experiences glitches in the exported build.

Lucas, based on the information you provided, it seems your issue is with text alignment, font styles, or possibly the handling of WebGL rendering across different browsers. The Text class from Needle Engine does offer several properties that could influence how text appears, including alignment (TextAnchor), overflow modes (VerticalWrapMode and HorizontalWrapMode), and font styles (FontStyle) (see the documentation). These can drastically change how text is rendered, and minor differences in how browsers handle WebGL or CSS might result in the discrepancies you’re seeing.

Given that adjustments like changing the font size can mitigate the issue, you might want to experiment with different configurations of the text properties, especially:

  • Font Style: Checking if using a more universally supported font or adjusting the fontStyle property helps.
  • Overflow Modes: Tinkering with verticalOverflow and horizontalOverflow might give clues if the issue is related to how text bounds are calculated.
  • Alignment: Adjusting alignment could also indicate if text positioning plays a part in the problem.

Since this issue is browser-specific, it may also be beneficial to look into how different browsers process WebGL content and any known issues with the versions of Chrome and Firefox you are testing with. Edge displaying it “normally” albeit with artifacts might suggest it’s more forgiving or handles the WebGL-to-CSS transition differently.

If these do not resolve your issue, consider checking the browser console for any errors or warnings that might give more insight into what’s happening. Also, ensuring that your Needle Engine, Unity, and browsers are up to date could help if this is a bug that has been addressed in newer versions.

For more detailed debugging, you might want to inspect the exported HTML/CSS/JS to ensure that the WebGL canvas is being set up and interacted with correctly by the Needle Engine runtime. Unfortunately, without direct access to the project and specific code or settings, these are general suggestions.

0 replies left - GPT 4
Reply to this message to continue the conversation

Horizontal Overflow and Vertical Overflow are set to: Overflow
The font style on “Press me!” it literally the default Arial font.

Maybe some human can help me on this problem?

Hi Lucas,

I havent seen this happen before - especially where it worked only in one browser. Do you have a live version of this online?

What you could try is deleting the font assets in the web projects asset directory (it’s a png and json file) and then re export again.

Let me know if that fixes it - there have been reports where the font generation produced a broken font texture

Live version: Apartment

Delete these files right?

I deleted the dist folder too, for a clean build.

Aaaand I think that did the trick, it’s displaying correctly now on all three browsers. Initially, it didn’t render properly, but after clearing the cache, it appeared normally.