three.js - 纹理的类型和格式之间有什么关系

Question

我正在 three.js 中处理体积渲染原始数据。我很难理解 three.js 中纹理(在我的例子中是 texture3d)的类型和格式之间的关系。

可用的纹理类型有:

可用格式为:

我尝试将原始数据的 u8int 数据类型的类型设置为 THREE.UnsignedIntType，但它给出了无效的纹理内部格式错误，但一切都适用于 THREE.UnsignedByteType 类型.

这是我的纹理代码，

    var texture = new THREE.DataTexture3D(data, dims[0], dims[1], dims[2]);
    texture.format = THREE.RedFormat;
    texture.type = THREE.UnsignedByteType;

谁能说说两者之间的关系。我不能静态化，因为原始数据类型可以是任何位 (8/16/32) 和类型 (int/float)。

Answer 1

three.js 纹理格式和类型是 WebGL 格式和类型的别名。只允许某些组合。

WebGL1 的有效组合列表是

| format          | type
+-----------------+------
| RGBA            | UNSIGNED_BYTE
| RGB             | UNSIGNED_BYTE
| RGBA            | UNSIGNED_SHORT_4_4_4_4
| RGBA            | UNSIGNED_SHORT_5_5_5_1
| RGB             | UNSIGNED_SHORT_5_6_5
| LUMINANCE_ALPHA | UNSIGNED_BYTE
| LUMINANCE       | UNSIGNED_BYTE
| ALPHA           | UNSIGNED_BYTE

所以将其转换为 three.js 是

| format               | type
+----------------------+------
| RGBAFormat           | UnsignedByteType
| RGBFormat            | UnsignedByteType
| RGBAFormat           | UnsignedShort4444
| RGBAFormat           | UnsignedShort5551
| RGBFormat            | UnsignedShort565
| LuminanceAlphaFormat | UnsignedByteType
| LuminanceFormat      | UnsignedByteType
| AlphaFormat          | UnsignedByteType

注意:WebGL1 不直接支持 3D 纹理，尽管您可以通过创意着色器自己实现它们

WebGL2 allows a much larger list of combinations

请注意，格式/类型组合是您提供给 three.js 的数据的格式和类型，不是将存储数据的纹理格式。

要指定内部格式，您可以设置 texture.internalFormat。要指定 format 和 type，您可以设置 texture.format 和 texture.type

只有某些格式/类型的组合可以用作给定内部格式的输入。请参阅上面的链接以获取列表。

如果你想要1 channel unsigned int纹理你需要设置

texture.internalFormat = 'R32UI';
texture.format = THREE.RedIntegerFormat;
texture.type = THREE.UnsignedIntType;

您还需要确保将 texture.minFilter 和 texture.magFilter 设置为 THREE.NearestFilter 并且您需要确保您的着色器使用 uniform usampler3D someSamplerName;

<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';

function main() {
  const canvas = document.querySelector('#c');
  const context = canvas.getContext('webgl2');
  const renderer = new THREE.WebGLRenderer({canvas, context});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  const data = new Uint32Array([1234]);
  const texture = new THREE.DataTexture3D(data, 1, 1, 1);
  texture.internalFormat = 'R32UI';
  texture.format = THREE.RedIntegerFormat;
  texture.type = THREE.UnsignedIntType;

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  const shader = {
    uniforms: {
      threeD: { value: texture },
    },
    vertexShader: `#version 300 es
      void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }
    `,
    fragmentShader: `#version 300 es
      #include <common>

      uniform highp usampler3D threeD;
      out vec4 c;
      
      void main() {
        uvec4 color = texture(threeD, vec3(0));
        // this also works
        // uvec4 color = texelFetch(threeD, ivec3(0), 0);
        c = vec4(float(color.r) / 2468.0, 0, 0, 1);
      }
    `,
  };


  const material = new THREE.ShaderMaterial(shader);

  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  renderer.render(scene, camera);
}

main();
</script>

对于 RGIntegerFormat 和 UnsignedByteType，您需要使用内部格式 RG8UI 并将数据作为 Uint8Array 传递

<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';

function main() {
  const canvas = document.querySelector('#c');
  const context = canvas.getContext('webgl2');
  const renderer = new THREE.WebGLRenderer({canvas, context});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

// THREE.RGIntegerFormat as format and THREE.UnsignedByteType

  const data = new Uint8Array([11, 22]);
  const texture = new THREE.DataTexture3D(data, 1, 1, 1);
  texture.internalFormat = 'RG8UI';
  texture.format = THREE.RGIntegerFormat;
  texture.type = THREE.UnsignedByteType;
window.t = THREE;
  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  const shader = {
    uniforms: {
      threeD: { value: texture },
    },
    vertexShader: `#version 300 es
      void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }
    `,
    fragmentShader: `#version 300 es
      #include <common>

      uniform highp usampler3D threeD;
      out vec4 c;
      
      void main() {
        uvec4 color = texture(threeD, vec3(0));
        // this also works
        // uvec4 color = texelFetch(threeD, ivec3(0), 0);
        c = vec4(vec2(color.rg) / vec2(22), 0, 1);
      }
    `,
  };


  const material = new THREE.ShaderMaterial(shader);

  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  renderer.render(scene, camera);
}

main();
</script>