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

Hi.

I have a very strange problem with WebGLRenderer.

I am using WebGLRenderer with WEBGL2 context, because I am using UNIFORMBLOCKS. I found a version that included this feature added by @Mugen87, I am not sure if the issue can be related to this.

The version of threejs I am using is here:

        https://yume.human-interactive.org/examples/ubo/three.js

I am using Instancing and Uniform Block in order to use WEBGL2 advantages.

Unfortunatelly, I have not found this feature in the latest version of three.js (GITHUB)

I have 2 problems:

One is related to model visualization

Here 2 screnshots showing the problem when I rotate the camera with OrbitControls:

image

In the following picture yo can see the problem:

image

You can see that the geometry there is a geometry that shouldn’t be shown because is behind the object shown in the first picture.

The second problem is related to the Axis Scene I am showing at the left top corner. With the official THREE.JS version I was able to put this Scene fully transparent just by setting alplha:true in the WebGLRenderer initialization, but with this version it seems it has a problem related with the UniformBlocks modification.

When I set alpha to true, I get this error:
WebGL: INVALID_ENUM: getParameter: invalid parameter name
The error is related to one of the new functions in this version of three.js:

     function WebGLUniformBlocks( gl, info ) {

		var buffers = {};
		var updateList = {};

		var allocatedBindingPoints = [];
		
		**var maxBindingPoints = gl.getParameter( 35375 ); // binding points are global whereas block indices are per shader program**

		function bind( uniformBlock, program ) {

			// bind shader specific block index to global block point

			var blockIndex = gl.getUniformBlockIndex( program, uniformBlock.name );
			gl.uniformBlockBinding( program, blockIndex, uniformBlock.__bindingPointIndex );

		}

Would it be possible to have a fixed version of three.js including alpha correction or having a three.js version in GITHUB including this feature (UniformBlock).

Many thanks in advanced.

You are referring to this PR, right?

Thanks for testing this! Is it possible for you to share the application as a live demo? Without debugging it’s not really possible to help you further.

Hi.

I will try to create a live example without confidential data.

: )

The models I showed in the picture cannot be outside my work context.

In fact your version is really amazing, uniform blocks accelerate camera movement a lot!!!

Many thanks to you for adding this WEBGL2 feature, it is really a pitty that this feature is not yet available in the version of threejs published in the GITHUB repository.

Best regards

Sry for the delay but reviewing new WebGL 2 features can take some time. It’s important that more than one collaborator knows what’s happening in the renderer and support for Uniform Buffer Objects was not that easy to implement.

Anyway, a reduced test case for debugging would be fantastic!

I love to hear this :heart: :blush: (/cc @mrdoob)

1 Like

Hi again.

I have not been able to reproduce my problem with basic geometries even I have created a scene with 20000 instances. May be it only happens with surfaces which triangles are very close ones from others. I will continue trying.

; )

Maybe there is something in my glb files which is causing this problem even I had never seen this before.

About the transparency (renderer alpha problem), here you can see it.

There are 2 dom objects one related to an axis renderer and camera and another to the 3d scene.
There is also a picking Renderer to find out ids and coordinates in real time to be able to change orbit controls position on click on 3d part.

You will see that trying to set alpha:true in Axis renderer returns the error I attached.

You can see the problem on this FDL:

https://jsfiddle.net/ua4192/ck5m9qbs/

Best regards

Hi again.

I think the other problem about superposition is related to the fact I am currently using USE_LOGDEPTHBUF and USE_LOGDEPTHBUF_EXT features due to the fact the difference in scale between the minimun part and the maximum is very big.

As you can see in my camera settings the near = 1 and far = 500000

It seems that the code in my fragment is failing:

" if (isLogDepth > 0.0) { ",
" gl_FragDepthEXT = log2(vFragDepth) * vLogDepthBufFC * 0.5; ",
" } ",

three_v101.js:17304 THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog invalid shaders

Hi again.

Here the 2 problems using LOGBUFFERDEPTH

https://jsfiddle.net/ta5dc60L/

Try to zoom in and zoom out and you will see the superposition.

Best regards

There you go: https://jsfiddle.net/kp6w9j1t/

I’ve directly imported the shader chunks via the #include statement for now. The main problem was that you did not set the defines in your shader code. This happens not automatically for custom shaders.

At least, it was not a problem related to UBOs^^.

1 Like

Hi Mugen.

You are the master.

; )

Many thanks for your support.

The problem of superposition is now fixed.

: )

Anyway the problem of alpha in WebGLRenderer still persists, the isea is that the Axis Renderer had to be fully transparent. In the previous version of threejs I was using without UBO’s I was able to set this Scene|Renderer| Dom object fully transparent. Now I get the error message I showed you:

three.js:21068 WebGL: INVALID_ENUM: getParameter: invalid parameter name
WebGLUniformBlocks @ three.js:21068

If I remove alha setting from Axis Renderer it doesn’t not prompt any error but ofcourse it doesn’t work.

Ah, there was actually a problem in the PR since MAX_UNIFORM_BUFFER_BINDINGS is not available in a WebGL 1 context. I’ve updated the build file so the warning is now gone.

But it seems your problem is not solved, yet?

Hi Mugen.

No, I am not able to make AxisRenderer fully transparent as before.

Look in the above picute and you will see that the secondary Axis Scene is not 100% transparent.

image

Maybe I am missing something.

Best regards

Can you please show how it works with a previous version of three.js?

Yes.

Let me some minutes and I will providee you a fiddler.

And again many thanks for your support.

: )

1 Like

Ah wait, I think I have solved the issue: https://jsfiddle.net/c305gquL/

Setting Scene.background and the clear color of the renderer is redundant. I also removed the container for your axis canvas since it’s better to change the style of the canvas directly.

You are simple the best.

: )

Many thanks

1 Like

Thanks for testing the UBO implementation :wink:

Hi Mugen.

I am very sorry to bother you again but it seems that the supperposition issue is still there.

Let me attach you 2 pictures just orbiting the camera.

image

image

You can see that the supperposition changes when you orbit the camera.

Shouldn’t be always the same?

Try just to be close from a superposition and orbit the camera you will see that objects that were hidden will be shown.

Best regards

Well, the logarithmic depth buffer works so I suggest you increase the near value/decrease the far value of the camera.

Many many thanks again.

I will try

: )

Hi Mugen.

After many tries, I have to say that increasing near neither decreasing far doesn’t improve anything.
I will continue investigating.

Here some screenshots where you can see how it impacts in render. Only to see if it gives any clew about root cause.

In the past I was not using instances, I was using merged geometries instead and I didn’t face this issue. Could it be related|linked to instancing?

As you will see, it seems that when any surface collides with the frustum then it shows the back side of the geometry. I am using double sided material.

image
image
image
image