如何解决是否可以进行RGBA浮动和往返行程并读取WebGL GLSL ES 1.0中的像素？

在尝试每种可能的算法大约一周之后，我可能会在stackoverflow上使用每个先前的答案-没有结果，然后问这个问题。因此，请客气并帮助GLSL学徒。

我正在尝试

将RGBA转换为浮动
进行一些计算
将浮点转换为RGBA

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

关键是能够在RGB分辨率过低的GPU中进行计算（GIS距离和类似距离）后进行往返并读取浮点数。

我想通过gl.readPixels将结果读回到javascript中。

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

如果我不进行RGBA =>浮点=> RGBA转换，一切正常-我放入GPU的浮点也是我也浮出的浮点-没有损失
如果我进行RGB => float => RGB转换，它也可以正常工作，所有的麻烦都在于第四个成分的重要性最低或最高

请注意-我怀疑这可以在更高版本的GLSL上正常运行，但这是WebGL GLSL ES 1.0，它具有更多的约束和更少的功能，而且我怀疑写入纹理将对iOS产生约束-我需要。

我已经考虑列出我在这里尝试过的所有代码-必要时可以执行，但这似乎有些过分。

很快就知道不可能就足够了-我至少不会再把头撞在墙上了。

解决方法

好吧，除非我重新编写代码，否则我无法发布完整答案，因为我没有按照Stack Overflow的要求将代码重新许可为CC-BY-SA-4.0

但是，这里有一个MIT许可的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,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,1);
    const f = new Float32Array(1);
    const u = new Uint8Array(f.buffer);
    gl.readPixels(0,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>

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

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,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,'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,gl.STATIC_DRAW);
    const pLoc = gl.getAttribLocation(prg,"position");
    gl.enableVertexAttribArray(pLoc);
    gl.vertexAttribPointer(pLoc,false,0);
  }

  function test(v) {
    gl.uniform1f(vLoc,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纹理传递给另一个着色器，以至于无法传递FLOAT纹理，因此我尝试制作RGAB-> Float解码器。这似乎有效。不知道它是完全正确的还是存在什么精度问题

async function main() {
  const gl = document.createElement('canvas').getContext('webgl');
  gl.canvas.width = 1;
  gl.canvas.height = 1;
  gl.viewport(0,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,'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,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,data);
    gl.drawArrays(gl.POINTS,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没有我所知道的常见的大型endian系统，但我没有处理任何endian问题。

是否可以进行RGBA浮动和往返行程并读取WebGL GLSL ES 1.0中的像素？

如何解决是否可以进行RGBA浮动和往返行程并读取WebGL GLSL ES 1.0中的像素？

解决方法

更新

相关推荐