Possible Bug, MeshStandard + MeshPhong

Noticed these flickering pixels when using a normal map and displacement map. Is it possible that theres something wrong with my normal image or is there something wrong with the shader itself?

fiddle: three.js dev template - JSFiddle - Code Playground

example flickering pixels:


which pixels light up is super dependent on camera/surface angle which causes the flickering

multiple places on the mesh have this problem, takes a little while to find them but they are pretty obvious if you are looking for them

In certain lighting conditions it is more noticeable (using a envmap):

Um, I don’t see these artifacts on my iMac with latest Chrome.

Do they disappear on your system if antialiasing is turned on? three.js dev template - JSFiddle - Code Playground

I can’t see any issue with your fiddle as shared @nwpointer. Checked on Chrome, Windows 10.

However, if I set the roughness to zero (with or without AA) then there are a lot of fireflies (note: to see them open the image in a new tab, discourse scales the image down which removes the artefacts):

Is this what you’re talking about? If so, it’s a known issue, see this post:

Its videocard in my too. Try set:

renderer = new THREE.WebGLRenderer({antialias:true});

Thanks everyone for your comments and suggestions!

Since not everyone was seeing the issue I tried it out on multiple computers. Original screenshots were taken on my new m1x macbook with chrome. Notably my work computer (intel mac) does not seem to have the problem.

Tried out anti-aliasing, and roughness and the problem remains on the new m1x macbook:

problem also occurs in safari and firefox on m1x

1 Like

OK, so this sounds like an M1/M1 max bug. Does anyone else have one of these chips to verify?

1 Like

Hey @nwpointer. Are you using DRACO compression, by any chance? I’ve run into this issue in the past when compressing my UVs too much. The UVs were so compressed that they lost some precision, and neighboring UVs would end up sharing the same coordinates. This would ruin the reading of my normalMap and it would give me random flickering because the normals were going haywire. It was barely noticeable in my Windows machine, but very obvious in my 2015 Macbook Pro. Maybe you’re experiencing the same thing?

Edit: I just looked through your JSFiddle link and I guess this could not be the problem because you’re using a simple Plane for your geometry.


May be too. In 3ds max then exporting to format “obj” we can select precision of uv. vertex e.t.c. In my machine too flickering pixels was. And in the game at low graphics. cbcbsdf


Low graphics, no antialiasvxsdff

color green

I didn’t know this but there are cloud compute platforms with m1 instances available.

I stood up a on-demand m1 instance on Scaleway to double check and confirmed that it also suffers from this issue even with antialiasing and the other suggested fixes turned on.

Unsure what the next step would be given this appears to be a hardware issue - should we submit a bug report to apple? Is there documentation that might shed some light on the differences between the m1 and intel chips that might help?

1 Like

I would say that’s a good idea.

1 Like

@Mugen87 should we open an issue on the three.js repo to track this as well? Or is it sufficient to open a bug with Apple?

I think it’s sufficient to report this just to the browser vendor.

1 Like

Opened a chrome bug, have no idea what the chances are someone looks at it but please leave a star / comment to raise visibility: 1270662 - chromium - An open-source project to help move the web forward. - Monorail