Three.js WebGL2 uniformblock webglrenderer alpha issue and model superposition issue

Questions
21

Um, I don’t think so. At least I’ve seen a similar issue when switching to instancing

Out of curiosity: Do you also have this clipping when you just render the front side?

22

Hi Mugen.

many thanks for the interest.
The problem only hapens when I orbit (click and move mouse to left|right), when I orbit the camera (click and move the mouse up|down) it doesn’t happen.
In the fornt view it doesn’t happen.

23

You can try to automatically compute optimal camera parameters for your viewer. This can be done by computing the AABB for your scene and then use the respective size and center vector to position your camera and to adjust the near and far plane. You can use the following code for this:

24

Hi Mugen.

I have a function very similar to this in order to set orthogonal zoom extension views in my scene.

The problem is that I tested near and far values very close in order to see the effect and the problem persisted.

In deed in these orthogonal views (lef, right, front, bottom, up, down) the problem is not happenning, but when I change the camera with my orbit controls it happens.

Best regards

25

Well, this could also happen because multiple faces lie in the same logical plane. In this case, The issue can’t be solved with even more depth precision.

There are two options. Change your modeling (since it is often a modeling failure) or try use Material.polygonOffset to avoid the clipping. The following example demonstrates this approach:

https://threejs.org/examples/webgl_decals

26

Again, many thanks

: )

It is a bit strange because in the past I used the same glb models I I didn’t face this issue.
The difference was that in the past I finally merged the scene in multiple merged geometries and now I am using instancing.

I will try and give you my feedback.

I guess you are not able to reproduce my problem, aren’t you?

Best regards

27

No, at least not with the previous fiddle.

28

I have changed the geometries instances in the last fiddler by boxes and I am able to reproduce the problem

https://jsfiddle.net/uvrox3kb/

Here some pictures:
image
image

29

Just try to click at any intersection and zoom in|out:

image
image

30

Hi Mugen.

Can then this be considered as a bug?

I guess you were able to reproduce the problem, weren’t you?

Best regards

31

Well, I’m not sure about the root cause but I don’t think this is a bug in the library. So filing an issue at github would be wrong since this overlapping most likely occurs when using raw WebGL, too.

The problem is your fiddle is still very big and contains a lot of stuff like the SelectionBox logic which is superfluous in context of this issue. I’m also not sure if there is be a problem in your custom shader code.

I suggest you try to make the fiddle as small as possible and than create a new issue here and at stackoverflow. It would be even better to have a second fiddle without instancing that works as expected. I bet there is somebody else who can explain the behavior.

32

Sure.

No problem.

; )

I will reduce the fiddler as short as possible.

Many thanks.

33

Hi again.

I have removed from the fiddler everything not directly related with my issue.

https://jsfiddle.net/uvrox3kb/1/

In order to reproduce the problem just zoom in | out and you will see that visibility doesn’t work as expected:

Here an example just zooming in:
image
image

Best regards

34

The new fiddle is much better than the old one! However, I would also remove the picking related code.

Asking a question at stackoverflow about this issue might be also a good idea.

35

Hi Mugen.

Ok. Even I think that the picking code shouldn’t be linked to the problem, I will also remove it from the fiddle and publish it again.

About asking to stackoverflow, I will also try.

Many thanks again and we will see if we can resolve this issue…

Best regards

36

Here the last fiddle removing all non linked stuff.

https://jsfiddle.net/uvrox3kb/2/

I will also ask in stackoverflow

37

Hi Mugen.

Here the question posted in stackoverflow
https://stackoverflow.com/questions/55027416/threejs-rendering-issue-with-instancing

; )

1 Like
38

I think it could be also beneficial to demonstrate the issue with the latest stable version of three.js and not with an unstable dev version. You have written at stackoverflow:

As you will observe, I am using an altered version of THREE.JS thanks to Mugen87 that includes UNIFORM BLOCKS, a very interesting feature to take advantage of WEBGL2.

I’m afraid this will discourage community members to have a look at the issue since they might assume the problem is related to the altered version of three.js. Also remove the usage of the logarithmic depth buffer.

39

Can you please verify if the issue is solved in this fiddle: https://jsfiddle.net/q160fg85/

40

Hi Mugen.

As I told you before, you are the best.

Yes, it seems the issue is now fixed.

Which change did you applied?

Best regards