Question

我试图在Firefox中加载WebGL 2.0中的短3D纹理。

虽然无符号1字节3D纹理加载没有任何问题，但我正在努力为任何其他像素类型做同样的事情。我的js代码：

var SIZE = 512;
var data = new Int16Array(SIZE * SIZE * SIZE);
data.fill(400);

var texture = gl.createTexture();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_3D, texture);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_BASE_LEVEL, 0);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAX_LEVEL, 0);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

gl.texImage3D(
    gl.TEXTURE_3D,  // target
    0,              // level
    gl.R16I,        // internalformat
    SIZE,           // width
    SIZE,           // height
    SIZE,              // depth
    0,              // border
    gl.RED_INTEGER,         // format
    gl.SHORT,       // type
    data            // pixel
   );

我没有在这个纹理上生成mip贴图。

当尝试在片段着色器中对纹理进行采样时，我为每个像素得到0。

FS代码：

#version 300 es

precision highp float;
precision highp int;
precision highp sampler3D;

uniform sampler3D textureData;

in vec3 v_texcoord;

out vec4 color;

void main()
{
   vec4 value = texture(textureData, v_texcoord);
   if( value.x == 0.0 )
      color = vec4(1.0, 0.0, 0.0, 1.0);
   else if( value.x == 1.0)
      color = vec4(1.0, 1.0, 0.0, 1.0);
   else if( value.x < 0.0 )
      color = vec4(0.0, 0.0, 1.0, 1.0);
   else
      color = vec4(1.0,1.0,1.0,1.0);
}

任何帮助都将不胜感激。

Answer 1

您需要使用isampler3D对整数格式纹理进行采样，在这种情况下，texture会返回ivec4

From the spec section 8.8

提供纹理查找函数，可以将其结果作为浮点，无符号整数或   有符号整数，具体取决于传递给查找函数的采样器类型。必须小心使用   用于纹理访问的正确的采样器类型。下表列出了支持的采样器组合   类型和纹理内部格式。空白条目不受支持。执行纹理查找将返回   未支持的组合的未定义值。
 Internal   
 Texture           | Floating Point | Signed Integer | Unsigned Integer |
 Format            | Sampler Types  | Sampler Types  | Sampler Types    |
-------------------+----------------+----------------+------------------+
 Floating point    |   Supported    |                |                  |
-------------------+----------------+----------------+------------------+
 Normalized Integer|   Supported    |                |                  |
-------------------+----------------+----------------+------------------+
 Signed Integer    |                |   Supported    |                  |
-------------------+----------------+----------------+------------------+
 Unsigned Integer  |                |                |   Supported      |
-------------------+----------------+----------------+------------------+

var gl = document.querySelector("#c").getContext("webgl2");
if (!gl) {
  alert("needs webgl 2.0");
}

var SIZE = 512;
var data = new Int16Array(SIZE * SIZE * SIZE);
data.fill(400);

var texture = gl.createTexture();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_3D, texture);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_BASE_LEVEL, 0);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAX_LEVEL, 0);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

gl.texImage3D(
    gl.TEXTURE_3D,  // target
    0,              // level
    gl.R16I,        // internalformat
    SIZE,           // width
    SIZE,           // height
    SIZE,              // depth
    0,              // border
    gl.RED_INTEGER,         // format
    gl.SHORT,       // type
    data            // pixel
   );

// FS code:

var fs = `#version 300 es

precision highp float;
precision highp int;
precision highp isampler3D;

uniform isampler3D textureData;

in vec3 v_texcoord;

out vec4 color;

void main()
{
   ivec4 value = texture(textureData, v_texcoord);
   if( value.x == 0 )
      color = vec4(1.0, 0.0, 0.0, 1.0);
   else if( value.x == 1)
      color = vec4(1.0, 1.0, 0.0, 1.0);
   else if( value.x < 0 )
      color = vec4(0.0, 0.0, 1.0, 1.0);
   else
      color = vec4(0.0,1.0,1.0,1.0);
}
`;

var vs = `#version 300 es
in vec4 position;
out vec3 v_texcoord;
void main() {
  gl_Position = position;
  v_texcoord = vec3(0);
}
`

var programInfo = twgl.createProgramInfo(gl, [vs, fs]);
var bufferInfo = twgl.primitives.createXYQuadBufferInfo(gl);

gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.drawBufferInfo(gl, bufferInfo);

canvas { border: 1px solid black; background: purple; }

<script src="https://twgljs.org/dist/2.x/twgl-full.min.js"></script>
<canvas id="c"><canvas>

支持WebGL 2.0中的短3D纹理

1 个答案: