Alpha blending in three.js

问题

I am trying to volume render the raw data using three.js. The raw data can be of any type. For rendering the data I have written code:

dims is an array of size of data in three axes:

One of the data dims is [256, 256 128] and data is uint8Array(8388608).


    var texture = new THREE.DataTexture3D(data, dims[0], dims[1], dims[2]);
    var texture = new THREE.DataTexture3D(data, dims[0], dims[1], dims[2]);
    texture.format = eval(format[1]);
    texture.type = eval(format[0]);
    texture.minFilter = texture.magFilter = THREE.LinearFilter;
    texture.unpackAlignment = 1;

    material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: shader.vertexShader,
        fragmentShader: shader.fragmentShader,
        side: THREE.BackSide,
        transparent: true,
        blending: THREE.CustomBlending,
        blendEquation: THREE.AddEquation, 
        blendSrc: THREE.SrcAlphaFactor, 
        blendDst: THREE.OneMinusSrcAlphaFactor 
     });

This format array is from a function that checks the format of the data.

    function findFormat(dtype) {
      console.log(dtype);
      let regex = /(u*)(int|float)(\d+)/ig;
      let format = regex.exec(dtype);
      if (format[3] == 8) {
        dtype = ["THREE.UnsignedByteType", "THREE.RedFormat"];
      }
      if (format[3] == 16) {
        dtype = ["THREE.UnsignedShort4444Type", "THREE.RGBAFormat"];
      }
      if (format[3] == 32) {
         dtype = ["THREE.UnsignedByteType", "THREE.RGBAFormat"];
      }

      return (dtype);
     }

I am just checking the data type if it is 8/16/32 bits.

This is the output I am getting :

This is iso type:

This is mip type output :

What I believe is that opacity is not active in these so all of the rendered layer or object is looking as an opaque object. This is a required output or looks like these :

I don't understand how to perform alpha blending in this.

来源：https://stackoverflow.com/questions/62194512/alpha-blending-in-three-js

标签

three.js