Safari rendering issue

Questions
1

Hi!
I’m creating a site like a store. Everithing runs ‘fine’ but I’m having an rendering issue of the labels in the bottles in Safari.

This is how looks in Chrome. (How it should look)

image
image1421×843 247 KB

This is how looks in Safari.

image
image1280×869 172 KB

Looks like the label of the bottle is inside of the bottle, also, the pack of bottles looks weird, and another certain points where the geometries are too close (I think this could be the reason).

Also tried with renderOrder but didnt work.
I’m ussing, Three R124 and postprocessing.

Any help?

2

Your camera “near” is 0.01. change to 0.05 or 0.1
Another solution is add to renderer parametr logarithmicDepthBuffer:true
renderer=new THREE.WebGLRenderer({canvas:canvas,antialias:true,alpha:true,transparent:true,premultipliedAlpha:true,physicallyCorrectLights:false,logarithmicDepthBuffer:true});

1 Like
3

Thanks a lot!

Increase the “camera near” fix a little the problem but keeps existing.
When I try logarithmicDepthBuffer:true the performance lose like 10-12fps.

My scene has a lot of objects, any other idea?

4

Try near 0.2. By default in three.js precision is highp. Maybe in safari is mediump.

image
image893×293 44.5 KB

5

When you say in Safari are you running on laptop or mobile?

Also can you put together a minimal example that demonstrates this? With just one bottle if possible. Could be a browser bug in which case you can report it but you’ll need a reproducible code sample, preferably shared on Codesandbox or similar.