Parts of the gltf model are missing when the camera moves closer to the object, especially noticeable on Android devices

Questions
, , , , ,
1

Hey, everybody! :raised_hand_with_fingers_splayed:

Faced with this effect:
On mobile devices (mostly Android devices) below 850px, when the camera zooms in on a gltf model, parts of it start to disappear, as if it is being cut by something, or parts of the polygons start to disappear from the renderer.

Also semi-transparent figures appear in front of the camera.

How they manifest themselves:

First video:

Second video:

Third video:

Actions I applied:

  1. Optimisation of the model, it was compressed by the number of polygons, as well as compressed textures (as a result, performance improved, but glitches did not go away).

  2. I thought that the problem may be in the settings and display methods of PerspectiveCamera, and applied different parameters such as:

const camera1 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 450);

camera1.updateProjectionMatrix();
camera1.zoom
camera1.filmGauge
camera1.filmOffset
camera1.focus

(This didn’t get rid of the bugs either).

  1. I can also set any mesh in the gltf model its own materials and properties to them, but switching to different types of materials, also does not solve the problem, as well as switching the parameters transparent and depthWrite in different positions.
    (performance changes, but bugs don’t go away)

  2. I also thought that there might be a problem with the settings and positions of the light sources, because the black translucent formations look like RectAreaLightHelper, but after I removed them or moved them further away from the visibility area, the bugs did not go away.

(Also the reflection of the SpotLight in the windscreen has gone black, can’t figure out the reason why. It’s evident in the video)

My assumptions:

  1. Object collision can occur. (the camera crashes into the model, but then it would cut it with an even layer, not quite suitable, but still)
  2. Camera occlusion can occur.

As if the renderer can’t render the gltf parts of the model, or render them in a chaotic order.

My render settings right now:

const renderer = new THREE.WebGLRenderer({
    antialias: AA,  // is changed dynamically from the variable
    precision: "lowp",
    physicallyCorrectLights: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.1;
renderer.shadowMap.enabled = ShadowSwitch;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setPixelRatio( window.devicePixelRatio * 0.9 );
renderer.localClippingEnabled = true;

If anyone has encountered similar effects, and knows how to solve them or what to pay attention to, please help in understanding this problem)))

Thank you very much!)))

2

Change you camera near from .1 to .01 const camera1 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 450);

3

Unfortunately this doesn’t solve the underlying problem, changed these values to different ones:

0.1, 0.01, 1, 5 and more, but it only changes the radius of the lens, but the bugs do not disappear(

1 Like
4

Without debuggable code it is impossible to experiment and provide a suggestion. Anyway, try these two things:

  • Add logarithmic depth buffer to the renderer
const renderer = new THREE.WebGLRenderer({
    ...
    logarithmicDepthBuffer: true, // logarithmic buffer
});
  • Try making the frustum as shallow as it is possible (i.e. the interval 0.1 … 450). For example, if changing 0.1 does not work, try reducing 450, e.g.
const camera1 = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    200
);
1 Like
5

Thanks for the advice

When I apply logarithmicDepthBuffer: true to the renderer, the lags become less, but they do not disappear completely, also the fps parameter drops very much.

Maybe this is one of the solutions, but it’s not very clear)

6

When zooming in, it looks as if some invisible layer goes over the model and changes its geometry, thus the lags occur, and it shows up on medium to low performance devices.

Is it possible to solve this problem by adjusting the rendering of the model with changes in the renderer or model meshes, have you encountered this effect?

7

As I said, without debugging, it is just blind guessing. There might be quite many other possible reasons.

  • For example, does it happen when the shadows are turned off? Sometimes not well tuned shadows may cause such effect.
  • If the issue is z-fighting (I cannot guess from the videos), then it is better to separate the conflicting meshes with polygonOffset.
  • If the meshes are defined as transparent (even if they are not visually transparent), this open another can of worms – then changing render order might help.
  • Is there is an issue with the model itself? Does the problem happen when you open in other tools (the Three.js editor, Blender, etc)?

It is crucial to find out where the dark color comes from. This will indicate what the solution might be.

Anyway, good luck with the project. It has the potential to look beautiful.

1 Like