我在尝试了每种可能的算法大约一周后提出了这个问题，并且使用了 stackoverflow 上可能的每个先前答案 - 但没有结果。所以，请善意地帮助 GLSL 学徒。
我在尝试着
在 GPU 内部 - 初始 RGBA 是通过 Float32 到 Uint8 转换在 javascript 中定义的。
关键是能够在 GPU 中进行计算（GIS 距离等）后进行往返并读回浮点数，而 RGB 的分辨率太低。
我想通过 .read 将结果读回 javascript gl.readPixels。
我开始怀疑这是否可能的原因是：
请注意 - 我怀疑这适用于更高版本的 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, 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>我要做的一件事是重写函数，使其以相反的顺序输出值，这样就不需要混合了。
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 纹理不是解决方案，因此我尝试制作 RGB -> 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 没有常见的大字节序系统。
| 归档时间： |
|
| 查看次数： |
1239 次 |
| 最近记录： |