Voxel rgb data doesn't work when the z extent go above 2000

Questions
1

I used random rgb voxel data in Uint8Array to create texture and apply it by using ShaderMaterial.
It seems working except the z value goes above 2000. It becomes all black.
Do anyone have any idea what’s going on?

var resolution = new THREE.Vector3(617, 352, 2100);
    var rgbVoxelArray = new Uint8Array(resolution.x * resolution.y * resolution.z * 4);

    // Populate the RGB voxel array with random colors
    for (var x = 0; x < resolution.x; x++) {
      for (var y = 0; y < resolution.y; y++) {
        for (var z = 0; z < resolution.z; z++) {
          var index = (x + y * resolution.x + z * resolution.x * resolution.y) * 4;

          rgbVoxelArray[index] = Math.random() * 255; // Red component
          rgbVoxelArray[index + 1] = Math.random() * 255; // Green component
          rgbVoxelArray[index + 2] = Math.random() * 255; // Blue component
          rgbVoxelArray[index + 3] = 1.0; // a component
        }
      }
    }

    var texture = new THREE.Data3DTexture(
      rgbVoxelArray,
      resolution.x,
      resolution.y,
      resolution.z,
    );
    texture.format = THREE.RGBAFormat;
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;
    texture.mapping = THREE.UVMapping;
    texture.type = THREE.UnsignedByteType;
    texture.needsUpdate = true;

    var vertexShader = `
    varying vec2 vUv;

    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );
    }
    `;

    const fragmentShader = `
    precision highp sampler3D;
    precision highp float;
    precision highp int;

    uniform sampler3D volume;

    in vec2 vUv;

    void main() {

      vec3 color = texture(volume, vec3(vUv, 1.)).rgb;
      gl_FragColor = vec4(color, 0.7);
    	}
    `;

    const material = new THREE.ShaderMaterial({
      uniforms: {
        volume: { value: texture },
        resolution: { value: resolution },
      },
      vertexShader,
      fragmentShader,
      transparent: true,
    });

    const geometry = new THREE.BoxGeometry(resolution.x, resolution.y, resolution.z);
    const mesh = new THREE.Mesh(geometry, material);

resolution = 617 x 352 x 2000

image
image663×651 145 KB

resolution = 617 x 352 x 2100
image

2

Just a guess. There might be a problem with the size of the array or the size of the texture. Are you sure 1.8GB array can be passed to the GPU? 617 x 352 x 2100 x 4 bytes is approximately 1.8GB.

To verify this, you can reduce 2100 to something smaller, and start to increase the other dimensions. If this hypothesis is true, you will get a black voxels with all three sizes below 2000.