是否有可能做一个RGBA浮动和返回往返，并读取WebGL GLSLes1.0中的像素？

Question

我是在尝试每一种可能的算法大约一周后问这个问题的，并且可能在堆栈溢出时使用了所有先前的答案--没有结果。所以，请善待一位GLSL学徒。

我在试着

calculations

• convert

• 将RGBA转换为

1. ，执行一些从RGBA

到RGBA

的

在GPU内部-初始的RGBA是通过Float32到Uint8转换在javascript中定义的。

关键是能够在GPU中进行计算(地理信息系统距离和类似的计算)后，进行往返行程和读取浮标，因为RGB的分辨率太低。

我想通过gl.readPixels将结果读入javascript。

我开始怀疑这是否可能的原因是：

如果我不做RGBA most-significant

1. 浮点数=> RGBA转换一切正常我放进GPU中的浮点数也是我得到的浮点数没有损失
2. 如果我做了RGB =>浮点数=> RGB转换，它也工作得很好，所有的问题都是第四个组件的问题要么是最小的，要么是
3. 。

请注意--我怀疑这适用于GLSL的后期版本，但这是WebGL GLSLes1.0，它具有更多的约束和更少的功能，而且我怀疑写入纹理将是对iOS的一个限制--这是我所需要的。

我已经考虑过列出我在这里尝试过的所有代码--如果有必要的话，可以这样做，但这似乎有点过分了。

知道的很快是不可能的，这是不可能的，就目前而言--我至少不会再把头撞在墙上了。

Answer 1

那么，除非我重写代码，否则我不能发布完整的答案，因为我没有权限按照堆栈溢出的要求将代码重新授权为CC- by -SA-4.0。

但是，这里有一个麻省理工学院授权的GLSL片段

https://github.com/mikolalysenko/glsl-read-float/blob/master/index.glsl

它似乎适用于在着色器中使用浮点数并转换RGBA8颜色。

换一种方式，你可以使用多种方法让浮点进入一个着色器，制服，变体，甚至从浮点纹理阅读是支持大多数手机，包括iPhone AFAIK。通常不支持只过滤它们(这是您不需要的)并将其写入它们。

这里有个测试

​

async function main() {
  const gl = document.createElement('canvas').getContext('webgl');
  gl.canvas.width = 1;
  gl.canvas.height = 1;
  gl.viewport(0, 0, 1, 1);

  const req = await fetch('https://cdn.jsdelivr.net/npm/glsl-read-float@1.1.0/index.glsl')
  const glslFn = await req.text();

  const vs = `
  void main() {
    gl_PointSize = 1.0;
    gl_Position = vec4(vec3(0), 1);
  }
  `;

  const fs = `
  precision highp float;
  uniform float value;

  ${glslFn}

  void main() {
    gl_FragColor = encode_float(value).abgr;
  }
  `;

  const prg = twgl.createProgram(gl, [vs, fs]);
  const vLoc = gl.getUniformLocation(prg, 'value');
  gl.useProgram(prg);

  function test(v) {
    gl.uniform1f(vLoc, v);
    gl.drawArrays(gl.POINTS, 0, 1);
    const f = new Float32Array(1);
    const u = new Uint8Array(f.buffer);
    gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, u);

    console.log(`in: ${(new Float32Array([v]))[0]}, out: ${f[0]}`);
  }

  test(123.456);
  test(0.00913);
  test(1000000.1);
  test(0.0000001);

}
main();

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

​

我要做的一件事是重写函数，以便它以相反的顺序输出值，因此不需要swizzle。

ps:这是Safari的一个版本，因为Safari的WebGL支持是以多种方式中断的

​

async function main() {
  const gl = document.createElement('canvas').getContext('webgl');
  gl.canvas.width = 1;
  gl.canvas.height = 1;
  gl.viewport(0, 0, 1, 1);

  const req = await fetch('https://cdn.jsdelivr.net/npm/glsl-read-float@1.1.0/index.glsl')
  const glslFn = await req.text();
  
  const vs = `
  attribute vec4 position;
  void main() {
    gl_PointSize = 1.0;
    gl_Position = position;
  }
  `;

  const fs = `
  precision highp float;
  uniform float value;

  ${glslFn}

  void main() {
    gl_FragColor = encode_float(value).abgr;
  }
  `;

  const prg = twgl.createProgram(gl, [vs, fs]);
  const vLoc = gl.getUniformLocation(prg, 'value');
  gl.useProgram(prg);
  
  // if safari  
  {
    // Safari fails if you don't have at least one attribute.
    // meaning it fails the WebGL Conformance Tests and has for > 4 years
    // in one of many ways.
    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    gl.bufferData(gl.ARRAY_BUFFER, 1, gl.STATIC_DRAW);
    const pLoc = gl.getAttribLocation(prg, "position");
    gl.enableVertexAttribArray(pLoc);
    gl.vertexAttribPointer(pLoc, 1, gl.UNSIGNED_BYTE, false, 0, 0);
  }

  function test(v) {
    gl.uniform1f(vLoc, v);
    gl.drawArrays(gl.POINTS, 0, 1);
    const f = new Float32Array(1);
    const u = new Uint8Array(f.buffer);
    gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, u);

    console.log(`in: ${(new Float32Array([v]))[0]}, out: ${f[0]}`);
  }

  test(123.456);
  test(0.00913);
  test(1000000.1);
  test(0.0000001);

}
main();

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

​

更新

我想我可以看到您可能希望将编码的RGBA纹理传递到另一个着色器，这样传入浮动纹理并不是解决方案，所以我尝试制作一个RGAB ->浮动解码器。这似乎很管用。不知道它是否完全正确，也不知道有什么精度问题

​

async function main() {
  const gl = document.createElement('canvas').getContext('webgl');
  gl.canvas.width = 1;
  gl.canvas.height = 1;
  gl.viewport(0, 0, 1, 1);

  const req = await fetch('https://cdn.jsdelivr.net/npm/glsl-read-float@1.1.0/index.glsl')
  const glslFn = await req.text();

  const vs = `
    attribute vec4 position;
    void main() {
     gl_PointSize = 1.0;
     // gl_Position = vec4(vec3(0), 1); 
     gl_Position = position; 
  }
  `;

  const fs = `
    precision highp float;
    uniform sampler2D tex;

   ${glslFn}
   
   // note: the 0.1s here an there are voodoo related to precision
   float decode_float(vec4 v) {
     vec4 bits = v * 255.0;
     float sign = mix(-1.0, 1.0, step(bits[3], 128.0));
     float expo = floor(mod(bits[3] + 0.1, 128.0)) * 2.0 +
                  floor((bits[2] + 0.1) / 128.0) - 127.0;
     float sig = bits[0] +
                 bits[1] * 256.0 +
                 floor(mod(bits[2] + 0.1, 128.0)) * 256.0 * 256.0;
     return sign * (1.0 + sig / 8388607.0) * pow(2.0, expo);
   }

   void main() {
     float value = decode_float(texture2D(tex, vec2(0)));
     gl_FragColor = encode_float(value).abgr;
   }
`;

  const prg = twgl.createProgram(gl, [vs, fs]);
  const vLoc = gl.getUniformLocation(prg, 'value');
  gl.useProgram(prg);

  // if safari  
  {
    // Safari fails if you don't have at least one attribute.
    // meaning it fails the WebGL Conformance Tests and has for > 4 years
    // in one of many ways.
    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    gl.bufferData(gl.ARRAY_BUFFER, 1, gl.STATIC_DRAW);
    const pLoc = gl.getAttribLocation(prg, "position");
    gl.enableVertexAttribArray(pLoc);
    gl.vertexAttribPointer(pLoc, 1, gl.UNSIGNED_BYTE, false, 0, 0);
  }

  gl.bindTexture(gl.TEXTURE_2D, gl.createTexture());

  function test(v) {
    const float = new Float32Array([v]);
    const data = new Uint8Array(float.buffer);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
    gl.drawArrays(gl.POINTS, 0, 1);
    const f = new Float32Array(1);
    const u = new Uint8Array(f.buffer);
    gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, u);

    log(`in: ${(new Float32Array([v]))[0]}, out: ${f[0]}`);
  }

  test(123.456);
  test(0.00913);
  test(1000000.1);
  test(0.0000001);
  test(-123.456);
  test(-0.00913);
  test(-1000000.1);
  test(-0.0000001);
  test(0.0);
  test(1/0);
  test(-1/0);
  test(1.175494351E-38),
  test(3.402823465E37),
  test(1+'foo');  // NaN
}

function log(...args) {
  const elem = document.createElement('pre');
  elem.textContent = args.join(' ');
  document.body.appendChild(elem);
}

main();

pre { margin: 0; }

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

​

注意:我没有处理任何终端问题，尽管ATM没有我所知道的常见的大终端系统。