1

我正在尝试通过在片段着色器中应用窗口调平，从 WebGL2 中的 16 位数组缓冲区渲染灰度图像。我生成的纹理如下：

let typedArray = new Int16Array(data);
gl.texImage2D(
        gl.TEXTURE_2D,
        0,
        gl.R16I,
        w, h,
        0,
        gl.RED_INTEGER,
        gl.SHORT,
        typedArray);

并尝试使用以下片段着色器中的数据：

let fragmentShaderSource = `#version 300 es
    precision highp float;
    precision highp int;
    precision highp isampler2D;

    // our texture
    uniform isampler2D u_image;

    uniform highp float u_windowWidth;
    uniform highp float u_windowCenter;

    in vec2 v_texCoord;
    out vec4 outColor;

    void main() {
        highp float f = float(texture(u_image, v_texCoord).r);
        f = (f - (u_windowCenter - 0.5)) / max(u_windowWidth - 1.0, 1.0) + 0.5;
        f = min(max(f, 0.0), 1.0);
        outColor = vec4(vec3(f), 1.0);
    }
    `;

但这只会呈现黑屏。实际上，经过一些调试，我发现所有像素texture(u_image, v_texCoord)的值为零，并且（alpha）字段的值非常大（2^29 ~ 2^30）。我试过改变着色器的精度，但结果是一样的。rgba

为了缩小问题范围，我尝试了一种不同的方法，将 16 位整数拆分为gl.RGBA4，每个 RGBA 通道中包含 4 位：

let typedArray = new Uint16Array(data);
gl.texImage2D(
        gl.TEXTURE_2D,
        0,
        gl.RGBA4,
        w, h,
        0,
        gl.RGBA,
        gl.UNSIGNED_SHORT_4_4_4_4,
        typedArray);

并将 RGBA 值组合回片段着色器中的 16 位整数。

let fragmentShaderSource = `#version 300 es
    precision highp float;
    precision highp int;
    precision highp sampler2D;

    // our texture
    uniform sampler2D u_image;

    uniform highp float u_windowWidth;
    uniform highp float u_windowCenter;

    in vec2 v_texCoord;
    out vec4 outColor;

    void main() {
        highp vec4 rgba_map = texture(u_image, v_texCoord);
        // Combining rgba4 back into int16
        highp f = rgba_map.r * 65536.0 + rgba_map.g * 4096.0 + rgba_map.b * 256.0 + rgba_map.a * 16.0;
        // signed value
        if (f > 32768.0) {
            f = 65536.0 - f;
        }
        f = (f - (u_windowCenter - 0.5)) / max(u_windowWidth - 1.0, 1.0) + 0.5;
        f = min(max(f, 0.0), 1.0);
        outColor = vec4(vec3(f), 1.0);
    }
    `;

这个版本很好地呈现了预期的图像，尽管由于转换，结果有点嘈杂。我也尝试过其他一些格式，浮点类型的很好，整数类型的格式都不起作用。所以我认为程序的其他部分都很好。我想知道我的程序有什么问题。

4

1 回答 1

3

你还没有真正发布足够的代码来调试，所以让我们做一些有用的东西。

function main() {
  const gl = document.querySelector('canvas').getContext('webgl2');
  if (!gl) {
    return alert('need WebGL2');
  }
  const vs = `#version 300 es
  void main() {
    gl_PointSize = 300.0;
    gl_Position = vec4(0, 0, 0, 1);
  }
  `;
  const fs = `#version 300 es
  precision highp float;
  precision highp int;
  precision highp isampler2D;

  // our texture
  uniform isampler2D u_image;

  out vec4 color;
  
  void main() {
    ivec4 intColor = texture(u_image, gl_PointCoord.xy);
    color = vec4(vec3(intColor.rrr) / 10000.0, 1);
  }
  `;
  
  const program = twgl.createProgram(gl, [vs, fs]);
  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texImage2D(
      gl.TEXTURE_2D,
      0,               // mip level
      gl.R16I,         // internal format
      10,              // width
      1,               // height
      0,               // border
      gl.RED_INTEGER,  // source format
      gl.SHORT,        // source type
      new Int16Array([
        1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000
      ]));
  // can't filter integer textures
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  
  gl.useProgram(program);
  
  // no need to set any attributes or
  // uniforms as we're not using attributes
  // and uniforms default to zero so will use
  // texture unit zero
  gl.drawArrays(gl.POINTS, 0, 1);
  
  console.log('max point size:', gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE)[1]);
}
main();
canvas {
  border: 1px solid black;
  background: red;
}
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>

应该看起来像这样

在此处输入图像描述

但如果您的 GPU 最大点大小 < 300，可能会有红色边框

一些想法

  • 你检查 JavaScript 控制台是否有错误？

  • 您是否关闭了纹理的过滤？

    整数纹理不能被过滤

  • 你的纹理宽度是偶数吗？

    如果不是，你可能需要设置，gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1)但我预计你会在这里得到一个错误，除非你Int16Array的大于宽度 * 高度

于 2019-12-20T09:15:16.550 回答