I've been developing a web GUI for one of my light simulators using three.js. The GUI involves rendering a 3D volume (containing integers or floats), so I modified the 3D texture demo script and created a test page.
After some adjustments, I managed to render the 3D texture in MIP style. However, I encountered an issue with depth rendering where certain bounding box faces disappear at particular camera angles, resulting in inaccurate rendering.
The image below illustrates the problem. The texture is a 40x20x30 volume with two z-layers: value 1.0 for 0<z<20 and value 2.0 for 20<z<30.
https://i.sstatic.net/EhLsj.png
As seen in the screenshot above, the MIP rendering is fine from the left view angle but exhibits jagged boundaries (or missing bbx faces) from most other angles shown on the right.
You can see this issue yourself by clicking on the link below:
To input this volume, click on the "JSON" tab, remove the existing text, and copy/paste the JSON data provided below. The "Shapes" object defines a 3D volume utilizing the JData ND array format, decoded as a numjs NdArray object. After replacing the JSON text, switch to the "Preview" tab to view the rendering.
{
"Session": {
"ID": "mcx",
…
}My script was heavily based on the 3D texture demo. I attempted to enhance the material settings by adding
transparent: true, opacity: 0.6, alphaTest: 0.5, depthWrite: falseWhile my data matches the float32 array used in the demo, the demo runs smoothly in MIP mode. I'm curious if I missed something during the adaptation.
Your feedback and suggestions are greatly valued! Thank you
…
let jd=new jdata(cfg.Shapes,{});
let vol=jd.decode().data;
boundingbox.add( drawvolume(vol.transpose()) );
…
In addition, I'm struggling to render a 3D integer array instead of a float array. I tried updating the texture setting as follows, but it displays a uniform block. I suspect I may need to create a new shader for this scenario?
const texture = new THREE.DataTexture3D( volume.selection.data, dim[2], dim[1], dim[0]);
texture.format = THREE.RedIntegerFormat;
texture.type = dtype[volume.dtype];
texture.minFilter = texture.magFilter = THREE.LinearFilter;
texture.unpackAlignment = 1;