[Postprocessing] - Weird text appearence on different devices

Questions
1

I have already posted some questions about problems i had using postprocessing, but it would be helpful if anyone could explain to me things i should be aware of.

For example:
I created a scene that works perfecly in my machine.

  • It renders texts at random places on the screen
  • The text is made of 3 things, first if the front text, second is the back text that is Y inverted, and third is the box sepparating these two texts so it has a background.
  • on hover the texts get lightned by the glow effect
  • The actual project is very similar to this fiddle i made: three.js dev template - module - JSFiddle - Code Playground, if necessary i can complement with the real code of the following image:

BUT… Seeing the exact same project at a linux machine at my work or some phones, the texts just get a glitch appearence like the fragments when you record a Tube TV with your phone.

This is basicly what happens on different machines and phones (not all of them show this problem):
image

This is the result on my machine:

image
image747×474 8.54 KB

2

Can you please verify if the browser on the Linux machine supports WebGL 2? You can do this by adding this line to your code and then check the browser console:

console.log( renderer.getContext() );
3

Hi Mugen. The log on the linux is the same as in my machine that works perfecly
image

4

Dont know if that helps, but this problem only occurs if the entire group is rendered (2 texts and the box)

if i only render the text, it does not hapen

5

For those who have a similar problem, here’s the solution:

1- The problem was related to z fighting, something i did not know and just now came across, searching my issue.
2- To solve this i followed the steps in: webgl - How can I solve z-fighting using Three.js - Stack Overflow, that is basicly logarithmicDepthBuffer to the WEBGLRenderer

1 Like