Error while rendering volumetric webgl2 example with different dataset

Hi Guys,
I am new to threeJS so this may be an obvious problem:
When I render the example:
it works fine (off examples page or using LiveServer).

But when I use a different nrrd file, I get the following error:
INVALID_OPERATION: texImage3D: type FLOAT but ArrayBufferView not Float32Array.
The stack looks like:
texImage3D @ three.module.js:20208
uploadTexture @ three.module.js:20971
setTexture3D @ three.module.js:20683
setValueT3D1 @ three.module.js:16187
WebGLUniforms.upload @ three.module.js:16660
setProgram @ three.module.js:24864
WebGLRenderer.renderBufferDirect @ three.module.js:23933
renderObject @ three.module.js:24486
renderObjects @ three.module.js:24458
WebGLRenderer.render @ three.module.js:24258

The nrrd files look fine in Slicer. The only difference is that the example nrrd file is 861kb compared to the 7.5mb file I am trying. IMO, from a c++ world it looks like a type mismatch somewhere, but any suggestion would be greatly appreciated!


Can you share the NRRD file in this thread?

KneeError.nrrd (2.0 MB)

Hi @Mugen87 ,
Thanks for looking into it! I have uploaded the nrrd file that is causing the error. I had to cut it out a bit to satisfy the upload limit.

Um, I get a totally different error when loading the asset with NRRDLoader.

What do you mean with “cut”^^? It’s probably better to share the entire asset via Google Drive or a similar service.

I took out some of the last few layers to reduce the file size. I still get the same error with the file I posted. I have tried a few other nrrd files and get the same error.

Here is the original knee that I got the error:

@Mugen87 , just curious, what was your error?

Thanks again!

Another interesting observation is if I run the example with the Knee.nrrd file on Firefox (via LiveServer), the message is different:
WebGL warning: tex(Sub)Image[23]D: ArrayBufferView type Int16 not compatible with type FLOAT.


When loading the asset into webgl_loader_nrrd example I get this message three times (for each slice mesh).

three.module.js:9862 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The “position” attribute is likely to have NaN values.

The position attribute of the plane does indeed have NaN values.

After some debugging it seems this happens because of the following code section:

With your asset, the resulting axis order is just [ 'z' ] because xIndex, yIndex and zIndex are all zero. That happens because the code assume an axis definition looks like so:

[0.9375000000000002, 0, 0]

However, in your asset it looks like so:

[0.3319472434711307, 0.00012250095587679915, 0.00591713997077279]

Since there are no 0 values, the code can’t detect the axis order.

I don’t know NRRD but it would be important to know whether the standard allows such definitions. If so, the loader requires a change.

I am no expert in nrrd either. The nrrd files are from:

What still puzzles me is how your error is different. I however still get the texImage3D: type FLOAT but ArrayBufferView not Float32Array error. I also tried with version of three JS, just in case my local version is older.


I did not try to use a 3D texture. I just want to test if the loader is able to load the file so it can be rendered as planes like in webgl_loader_nrrd.

Ok, cool. In that case, here is a folder with a few nrrd files for you to try.

One thought about the data from the knee model you mention above: Do you think that the Y and Z in that vector is noise and there should be a threshold below which it should assume 0.0, perhaps a percentage of the largest component?

I don’t know that, sorry. When I add a threshold, the file can be loaded without runtime errors but the resulting planes do not look correct. I’m afraid this issue can only be solved by someone with good understanding of the NRRD standard.

In any event, would you be willing to file an issue at GitHub? In this way, it’s possible to ping devs who could possibly help.

Sure, I can add an issue.

1 Like