Javascript 支持WebGL 2.0中的短3D纹理

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

财政司司长代码：

#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);
}

#版本300 es
高精度浮点；
精度高；
高精度三维采样器；
均匀采样3D纹理数据；
在vec3 v_texcoord；
输出vec4颜色；
void main（）
{
vec4值=纹理（纹理数据，v_texcoord）；
if（value.x==0.0）
颜色=vec4（1.0,0.0,0.0,1.0）；
else if（value.x==1.0）
颜色=vec4（1.0,1.0,0.0,1.0）；
else if（值x<0.0）
颜色=vec4（0.0,0.0,1.0,1.0）；
其他的
颜色=vec4（1.0,1.0,1.0,1.0）；
}

---

任何帮助都将不胜感激。

您需要使用

isampler3D

对整数格式纹理进行采样，在这种情况下

texture

返回

ivec4

提供了纹理查找函数，可将其结果作为浮点、无符号整数或整数返回 带符号整数，取决于传递给查找函数的采样器类型。使用时必须小心 纹理访问的正确采样器类型。下表列出了受支持的采样器组合 类型和纹理内部格式。不支持空白条目。执行纹理查找将返回 不支持的组合的未定义值

内部
纹理|浮点|有符号整数|无符号整数|
格式|采样器类型|采样器类型|采样器类型|
-------------------+----------------+----------------+------------------+
浮点|支持| ||
-------------------+----------------+----------------+------------------+
标准化整数|支持| ||
-------------------+----------------+----------------+------------------+
有符号整数| |支持||
-------------------+----------------+----------------+------------------+
支持无符号整数| | ||
-------------------+----------------+----------------+------------------+

var gl=document.querySelector（#c”）.getContext（“webgl2”）；
如果（！gl）{
警报（“需要webgl 2.0”）；
}
变量大小=512；
var数据=新的Int16Array（大小*大小*大小）；
数据填充（400）；
var texture=gl.createTexture（）；
gl.activeTexture（gl.TEXTURE0）；
gl.bindTexture（gl.TEXTURE_3D，纹理）；
gl.texParameteri（gl.TEXTURE_3D，gl.TEXTURE_BASE_LEVEL，0）；
gl.texParameteri（gl.TEXTURE_3D，gl.TEXTURE_MAX_LEVEL，0）；
gl.texParameteri（gl.TEXTURE\u 3D，gl.TEXTURE\u MIN\u过滤器，gl.NEAREST）；
gl.texParameteri（gl.TEXTURE\u 3D，gl.TEXTURE\u MAG\u过滤器，gl.NEAREST）；
gl.texImage3D(
gl.TEXTURE_3D，//目标
0，//级别
gl.R16I，//内部格式
大小，//宽度
大小，//高度
大小，//深度
0，//边框
gl.RED\u整数，//格式
gl.SHORT，//类型
数据//像素
);
//财政司司长代码：
var fs=`#版本300 es
高精度浮点；
精度高；
精度高，精度高；
均匀的三维纹理数据；
在vec3 v_texcoord；
输出vec4颜色；
void main（）
{
ivec4值=纹理（纹理数据，v_texcoord）；
if（value.x==0）
颜色=vec4（1.0,0.0,0.0,1.0）；
else if（value.x==1）
颜色=vec4（1.0,1.0,0.0,1.0）；
else if（值x<0）
颜色=vec4（0.0,0.0,1.0,1.0）；
其他的
颜色=vec4（0.0,1.0,1.0,1.0）；
}
`;
var vs=`#版本300 es
vec4位；
out vec3 v_texcoord；
void main（）{
gl_位置=位置；
v_texcoord=vec3（0）；
}
`
var programInfo=twgl.createProgramInfo（gl[vs，fs]）；
var bufferInfo=twgl.primitives.createXYQuadBufferInfo（gl）；
总账使用程序（programInfo.program）；
twgl.setBuffersAndAttributes（总帐、程序信息、缓冲信息）；
twgl.drawBufferInfo（总账，bufferInfo）
canvas{边框：1px纯黑色；背景：紫色；}
这帮了大忙。谢谢。