Strange rendering problem in Safari

First…its a really good product configurator…congrats on that.

I have run into similar problems but not so strange that it’s unique to Safari. Since Safari and Chrome on Mac use the same browser based on WebKit, it makes it even more unique. I can say that what you are experiencing is happening just as you state.

My first guess would be to look at the model. I get these sorts of artifacts when I have overlapping identical sets of geometry or solidified geometry that is very thin causing the lower geometry to calculate at essentially the same level..then you have bi-directional normals on a single plane that will cause this effect.

The second thing I would check would be the normals on these faces…make sure they are all heading in the right direction.

Thirdly…I would test the material…stick a standard texture in and see if it creates the same problem…if not slowly build your texture backup….the problem might be the normal map pushing into faces below.

Lastly..if all else fails…I would copy the project…and isolate one piece of geometry and one material and see if you can isolate the issue.

Good luck…please post back what you find.

OK… I have validated this is a model interference/overlap issue….at least in my case. Why Safari is able to display this better than Chrome…no clue…but it’s a great diagnostic tool now.

So based on your scene I would guess that your water geometry is not hidden but scaled and sitting below the floor of the tub. If so I would hide it via puzzles until you need it to be on. This will prevent the blue patches from appearing while the tubs are not filled with water.

Good luck.

As much as I would like to blame this on Safari…its more than likely a problem with your scene. These types of issues that we see in your scene are caused by one of a few issues. The first is intersecting geometery. When two objects overlap you can get this effect. Imagine having two planes sitting in the same space. When the water is scaled down…it occupies the same “Z-space” as the floor. The water was an easy fix….you just hide it until you need it. The same problem probably exists for many other objects in your scene.

To help diagnose this issue….start with main controls of your Utopia Series model. I do the following:

1. Copy your 3D model scene to a new project so you can do some destructive testing.
2. Using the copy project delete all objects not in the same space as the controller including the tub.
3. Determine how many objects occupy this space. From the geometry I would expect only 1 but if you more than one…delete those too. So only the controller exists.
4. Export a GLTF and test.
5. If the issue goes a way then you have interference with one of the parts you deleted. If it doesnt go away…then you will need to look at the model of the controller. Is it a solid or solidified model? does it have a back surface? If it does you should delete the back surface and retest.

My guess is these files were probably imported from a CAD file initially. CAD files are notorious for creating perfect interference and creating these problems. For Verge3D to render correctly there has to be some physical distance between objects that is slightly greater than the normal map heights. This is should very small distance but has to be there to avoid these issues. Given that all the objects are interfering with the tub, it is likely they are all intersecting the tub. Alternatively if for instance, the valves have multiple stacked parts it would be better to delete the inside of the valves and make it one part so there is no interference. Headrests…my gut says this may be an object where the inner surfaces are too close to the outer surface.

What 3D modeling package do you use?

After further thought, there is one more thing that could cause this…. Move your near and far planes of the camera closer to each other and see if that helps.