Black areas/flickering in my Android app (solved)

[anon95708182]

Thank you!

[anon95708182]

After an exhaustive test marathon, I think I found the source of the flickering on Android.
It is a custom unlit material I use because I just don’t know how to remove the little light shining down when using the in-built model material.

This custom material looks like this:

.fp:

varying mediump vec4 var_position;
varying mediump vec3 var_normal;
varying mediump vec2 var_texcoord0;

uniform mediump sampler2D tex0;

void main() {

    gl_FragColor = texture2D(tex0, var_texcoord0.xy); // RGBA color vector.
}

.vp:

attribute mediump vec4 position;
attribute mediump vec2 texcoord0;
attribute mediump vec3 normal;

uniform mediump mat4 mtx_view;
uniform mediump mat4 mtx_proj;

varying mediump vec4 var_position;
varying mediump vec3 var_normal;
varying mediump vec2 var_texcoord0;

void main() {
    var_position = position;
    var_texcoord0 = texcoord0;
    var_normal = normalize(normal);
    gl_Position = mtx_proj * mtx_view * position;
}

.material:

The material works very well, apart from Android, where the flickering becomes a problem.
As to why this would be, I do not know.

[Mathias_Westerdahl]

I can’t say for sure, but in general graphics drivers are quite picky about unused variables.
E.g. in your .vp you pass the var_position/var_normal to the fragment shader (but they are not used).

[anon95708182]

Hello @Mathias_Westerdahl,

of course I copied the code I am just hunting for more examples and try to get my head around them. What I try to achieve is a scene without the little spot light and working transparency for my windows. And no flickering on Android.
Will get there, well, hopefully I will
And if I can’t, I’ll hang a round lamp in my lobby and the spot on the floor makes sense.
This one, from the in-built model material:

Addendum:
I just ran a test after having removed the unused variables, flicker still there.

[Mathias_Westerdahl]

As suggested, someone might have a look at it if you share a repro project here.

[anon95708182]

Here it is, just a quick mock-up of one room without proper textures and code just for movement.
You can move with WASD and arrow keys, to rotate, you hold the left mouse button. For Android, there is a gui for navigation.
There is a plane above the skylight to test transparency for the glass. The transparent glass image is included.
The example also shows the other issue I have with this custom material: whenever you built, sometimes the plane above the glass is visible, sometimes it is gone.
test.zip (7.8 MB)
Thank you for offering to look t it!

[MasterMind]

Hello , Opening your test scene I get an error about the gui

I removed the gui , runs fine and builds on pc. However as I bundle to test apk for android I get this error

Seems to be hung on some gui source.(“most likely related to the above”)

I believe you can solve the transparency issue no prob , I would like to see the flickering on android and try to help solve that issue as well if I can. If possible , can you position the camera default to where you can see the flickering in your test scene?

[anon95708182]

How odd, I downloaded my zip and it doesn’t make a fuss. Maybe because it’s zipped on a Mac?
Here’s a link to a video with the flickering (i haven’t moved, but am rotating): MVI_3988.MP4 - Google Drive

[MasterMind]

I’m not sure but I don’t think it is because it was zipped on mac. I got it working, removed all gui related files and now I can bundle for android . Taking a look now.

[anon95708182]

Thank you!
I just logged in from my win laptop. Would this zip file work?

testwin.zip (7.8 MB)

[Mathias_Westerdahl]

@MasterMind It seems you are using an older version than @anon95708182 ?
That’s not guaranteed to work since we need to update our file formats every now and then.

[MasterMind]

Yes you are correct, I am using an older version that is the reason for the error.

[anon95708182]

Update:
I ran some more tests with the unlit material playing with near z and far z. and also installed the test apk on a friend’s newer phone. None solved the flickering issue.
So I decided to look at the default model material, that does not lead to flickering. And I managed to switch off the little spot light:

This does not seem to lead to problems, I just built my larger project and ran it on my tablet without issues.
I have changed nothing in the default vp/fp - that’s ok, isn’t it?
I figured that the quaternion regulates size and position of the cone. Can I ask what the W-value does?

So, my flickering issue seems to be sorted now. Transparency comes next and @MasterMind has so very kindly offered to lend me a hand with it, so this will be solved as well.

[MasterMind]

Not changing much in that material should be fine and you can remove the light calculations and constant if you wanted and should be fine too.

To address the transparency issue, for this we can create a “glass” material and predicate in the render script then render that predicate after the model predicate and then assign the material to the glass models. that should solve the issue that you are having.

To do this, first thing we can create a “glass” material + fragment and vertex shader.

In the material we can set the tag “predicate” name to glass. Then we should open up the render script and create the “glass” predicate in the Init function.

After that we can render the predicate after the models are rendered in the update function of the render script.

Next we can assign the glass material to the glass models.

Thats should be it. ezpz

---

I also did some testing with the flickering issue. Which is for sure z-fighting and wanted to delve in and see why it was occuring on android phones and not higher end devices.

I may be wrong but I believe the issue is partially due to precision in low end devices and low resolution in depth buffer. However I also seen that the “built-in” model material and shader seems to do a much better job and may be due to the calculations done in the vertex shader. I can still see some flickering in problematic areas of the test scene.

Instead of stopping there I wanted to use the unlit material and shader you provided and show/highlight a couple techniques that can be used to work around it. A common fix could be to simply add distance between fighting polygons. In a lot of cases this can quickly solve it , this case is different as you don’t want floating artwork in your scene. So another technique is to address problematic polygons in the mesh itself.

Intersecting geometry, hidden geometry that the user will never see, loose edges and near polygons can get by on higher end devices and on lower end devices cleaning the geometry up can help steer away from z-fighting.

For example the art is on the wall and the face of the wall is very close behind the art. We don’t want to move the art from the wall but we can remove the troublesome surface from behind the art that the user will never see anyway.

This approach works well on the low end devices. The takeaway is the mesh can accumulate more vertices (shouldn’t be such a big deal though) and it takes a bit more work.

We also can fix intersecting mesh detail like this and stop the pesky z-fighting there.

Cut the intersections outta there! z-fighting be gone. The skirts have the wall behind those so we move the walls lower vertices up to sit flush with the top of the skirts , the wall behind the signs cut out and so on. So that’s what I did, cleaned up the test scene a bit used your unlit material and shader and tested a build on android. Looks good and shows the technique in action. I put a blender file and changes I made to your test project here: testflicker.zip - Google Drive

Cheers~

[anon95708182]

Ah, @MasterMind, you are such a great help, as ever, thank you! And thanks a lot for so thoroughly dissecting the test project as well! And for making a new one for me. And for the transparency material.
As you saw, I did remove all hidden geometry in the individual meshes - but that the wall could and should be cut out as well, never thought of it. That is a super tip! I think to avoid the possibility of a visitor to see this gap behind the pictures and the signs, I could move the collision shapes more to the front. This would make sense, too, as you aren’t allowed to get too close to art in many museums without raising an alarm.
Yes, the bars in the skylight, I had them connected, but in my endeavour to keep the vertex count as low as possible, I took the risk of intersecting geometry and on the walls for instance, ngons. This the reason too why I didn’t bevel any edges but use a bevel shader in the large model.
Today, I will implement your suggestions, tidy up my model and get the transparency done.
Again, thank you so much!

[anon95708182]

Last update:

thanks to @MasterMind, all my flickering is gone now and the glass material he made works perfectly.
I can see through my windows now, hurrah!!!

So, this thread can be marked as solved now.