I’m working on a sky effect experience in the cloud editor. The experience consists mainly of 2D planes with png textures with alpha transparency.
The planes are staggered in a diorama-like manner.
I’m facing the problem that the layers appear glitchey: there are horizontal stripes / fragments on the layers which are flickering strongly.
It kind of looks like the glitch you get when two layers/objects share the same coordinates. However, this is not the case here.
Take a look at this thread:
Hi George,
Thanks for the fast reply and the link – this issue is different though. I’m not addressing the glitches at the edge of the phone screen (I’m aware of this issue, too). I’m getting horizontal, flickering stripes which are reminiscent of the glitch you get from objects with identical coordinates. Except none of my layers share the same coordinates. I’ve marked it in the screenshot below – you can see it better in the video though. It looks really bad.
Thanks for your help!
Can you land your changes and share your project with the support workspace so I can take a look?
Thanks for looking into this George, I just shared it.
Really cool project!
Unfortunately, I’m not able to reproduce the issue.
If I had to guess it seems like those are artifacts from some other object or the shader have a hard time calculating the sorting order of all the different thin planes. You could try adding a small amount of depth to all of your 3D object planes to see if that fixes it.
@Susanne_Vetter did you ever find a solution to this issue? I’m experiencing it on a sky effect I’m working on.
Hey @Callum_Fowler yes I did actually: I created the experience in Blender and it turned out that the glitches that showed after importing it to 8th Wall were an issue with the blend mode of the materials in Blender. The glitches happened when the blend mode of the material was set to “Alpha Blend” or “Alpha Hashed”. Setting it to “Alpha Clip” solved it. Caveat: it also killed all smooth alpha gradients of the texture. Hope that helps!
@GeorgeButler FYI
1 Like
Glad to hear it! Unfortunately I’m setting my materials in three.js. @GeorgeButler do you know if there’s an equivalent setting on the three.js materials?
Check this out: three.js docs
I enabled alphaHash, but unfortunately it didn’t fix the bug (it seems like alphaHash isn’t a property on the MeshStandardMaterial). I’ve seen similar issues when doing a custom render pass and not having an even number of passes. Is it possible to inject a blank pass to the layer render pipeline? If so how would I go about that?
Just to follow up on this, I managed to change the version of threejs being used and the alphaHash now works (v180). Thanks the help!
Awesome! Glad it worked. 
This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.