1

我正在尝试在 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);
}

任何帮助，将不胜感激。

4

1 回答 1

1

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

来自规范第 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>

于 2016-06-03T18:53:30.407 回答