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:
Chrome:
Firefox:
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
thread_hwiwulRt4ON1N4yLwAYLAC41
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
thread_hwiwulRt4ON1N4yLwAYLAC41
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:
fontStyle property helps.verticalOverflow and horizontalOverflow might give clues if the issue is related to how text bounds are calculated.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
thread_hwiwulRt4ON1N4yLwAYLAC41
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?
Thanks
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.
