是否可以做一个 RGBA 来回浮动并读取 WebGL GLSL ES 1.0 中的像素？
Is it possible to do a RGBA to float and back round trip and read the pixels in WebGL GLSL ES 1.0?
我在尝试所有可能的算法大约一周后问这个问题，并且可能使用了 Whosebug 上的每个先前答案 - 但没有结果。所以，请善待一个GLSL学徒。
我正在尝试
- 将 RGBA 转换为浮点数
- 执行一些计算
- 将浮点数转换为 RGBA
在 GPU 内部 - 初始 RGBA 通过 Float32 到 Uint8 转换在 javascript 中定义。
关键是能够在 GPU 中进行计算（GIS 距离等）后进行往返并读回浮点数，对于 GPU，RGB 的分辨率太低。
我想通过 gl.readPixels.
将结果读回 javascript
我开始怀疑它是否可能的原因是：
- 如果我不进行 RGBA => float => RGBA 转换一切正常 - 我放入 GPU 的浮点数也是我输出的浮点数 - 没有损失
- 如果我进行 RGB => float => RGB 转换，它也可以正常工作，所有的问题都在于第四个分量是最不重要还是最重要
请注意 - 我怀疑这适用于更高版本的 GLSL，但这是 WebGL GLSL ES 1.0，具有更多的限制和更少的功能，我怀疑写入纹理将成为 iOS - 我需要。
我考虑过在此处列出我尝试过的所有代码 - 如果需要可以这样做，但这似乎有些过分了。
快速了解不可能现在就足够了——至少我不会再用头撞墙了。
好吧，除非我 re-write 代码，否则我无法 post 完整答案，因为我没有 re-license 代码的权限 CC-BY-SA- Stack Overflow 要求的 4.0
但是，这里有一个 MIT 许可的 GLSL 片段
https://github.com/mikolalysenko/glsl-read-float/blob/master/index.glsl
这似乎适用于在着色器中使用浮点数并转换 RGBA8 颜色。
换一种方式，您可以使用任意数量的方法将浮点数放入着色器、uniforms、varyings，甚至包括 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>
我要做的一件事是 re-write 函数，因此它以相反的顺序输出值，因此不需要 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 纹理传递给另一个着色器，以便传递 FLOAT 纹理不是解决方案，所以我尝试制作一个 RGAB -> Float 解码器。这似乎有效。不知道它是否完全正确或存在哪些精度问题
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 没有我所知道的常见大端系统，但我没有处理任何端序问题。
我在尝试所有可能的算法大约一周后问这个问题，并且可能使用了 Whosebug 上的每个先前答案 - 但没有结果。所以，请善待一个GLSL学徒。
我正在尝试
- 将 RGBA 转换为浮点数
- 执行一些计算
- 将浮点数转换为 RGBA
在 GPU 内部 - 初始 RGBA 通过 Float32 到 Uint8 转换在 javascript 中定义。
关键是能够在 GPU 中进行计算（GIS 距离等）后进行往返并读回浮点数，对于 GPU，RGB 的分辨率太低。
我想通过 gl.readPixels.
我开始怀疑它是否可能的原因是：
- 如果我不进行 RGBA => float => RGBA 转换一切正常 - 我放入 GPU 的浮点数也是我输出的浮点数 - 没有损失
- 如果我进行 RGB => float => RGB 转换，它也可以正常工作，所有的问题都在于第四个分量是最不重要还是最重要
请注意 - 我怀疑这适用于更高版本的 GLSL，但这是 WebGL GLSL ES 1.0，具有更多的限制和更少的功能，我怀疑写入纹理将成为 iOS - 我需要。
我考虑过在此处列出我尝试过的所有代码 - 如果需要可以这样做，但这似乎有些过分了。
快速了解不可能现在就足够了——至少我不会再用头撞墙了。
好吧，除非我 re-write 代码，否则我无法 post 完整答案，因为我没有 re-license 代码的权限 CC-BY-SA- Stack Overflow 要求的 4.0
但是，这里有一个 MIT 许可的 GLSL 片段
https://github.com/mikolalysenko/glsl-read-float/blob/master/index.glsl
这似乎适用于在着色器中使用浮点数并转换 RGBA8 颜色。
换一种方式，您可以使用任意数量的方法将浮点数放入着色器、uniforms、varyings，甚至包括 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>
我要做的一件事是 re-write 函数，因此它以相反的顺序输出值，因此不需要 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 纹理传递给另一个着色器，以便传递 FLOAT 纹理不是解决方案，所以我尝试制作一个 RGAB -> Float 解码器。这似乎有效。不知道它是否完全正确或存在哪些精度问题
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 没有我所知道的常见大端系统，但我没有处理任何端序问题。