Какая связь между типом и форматом текстуры

Question

Я работаю над volumetri c рендерингом сырых данных в три раза. js. Мне сложно понять взаимосвязь между типом и форматом текстуры (в моем случае это texture3d) в трех. js.

Доступные типы типов текстуры:

и доступный формат:

Я попытался указать тип как THREE.UnsignedIntType для u8int тип исходных данных, но он дает неверный внутренний формат ошибки текстуры, но с типом все работает нормально of THREE.UnsignedByteType .

это мой код текстуры,

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

Кто-нибудь может сказать, как оба связаны. Я не могу сделать stati c, так как тип исходных данных может иметь любой бит (8/16/32) и тип (int / float).

Answer 1

Три формата и типов текстур. 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

Итак, переводим это в три. js это

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

Примечание. WebGL1 не поддерживает 3D-текстуры напрямую, хотя вы можете реализовать их самостоятельно с помощью творческих шейдеров

WebGL2 допускает гораздо больший список комбинаций

Обратите внимание, что комбинация формат / тип формат и тип данных, которые вы предоставляете трем. js, не формат текстуры, в которой будут храниться данные.

Чтобы указать внутренний формат, который вы установили texture.internalFormat. Чтобы указать format и type, вы можете установить texture.format и texture.type

Только определенные комбинации формата / типа могут использоваться в качестве входных данных для данного внутреннего формата. Список см. По ссылке выше.

Если вам нужна 1-канальная беззнаковая текстура int, вам нужно установить

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

Вам также необходимо убедиться, что вы установили texture.minFilter и * От 1032 * до 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>