WebGL 从浮点渲染目标读取像素-6ren

WebGL 从浮点渲染目标读取像素

转载作者：行者123 更新时间：2023-12-04 02:48:12

25

4

有一些困惑e.g.在 WebGL 中渲染到浮点纹理的支持级别。根据 Optional support for FLOAT textures as FBO attachments (deprecated)，OES_texture_float 扩展本身似乎并没有强制要求。，但看起来一些供应商继续实现它。因此，我的基本理解是渲染到浮点纹理实际上可以在非 ES 桌面环境中工作。不过，我无法直接从浮点渲染目标中读取数据。

我的问题是是否有一种方法可以使用 WebGLContext::readPixels() 调用和 Float32Array 目标从浮点纹理中读取？提前致谢。

附件是一个脚本，它成功地从字节纹理读取，但对于浮点纹理失败:

<html>
<head>
<script>
function run_test(use_float) {
    // Create canvas and context
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    var gl = canvas.getContext("experimental-webgl");

    // Decide on types to user for texture
    var texType, bufferFmt;
    if (use_float) {
        texType = gl.FLOAT;
        bufferFmt = Float32Array;
    } else {
        texType = gl.UNSIGNED_BYTE;
        bufferFmt = Uint8Array;
    }

    // Query extension
    var OES_texture_float = gl.getExtension('OES_texture_float');
    if (!OES_texture_float) {
        throw new Error("No support for OES_texture_float");
    }

    // Clear
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(1.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // Create texture
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0, gl.RGBA, texType, null);

    // Create and attach frame buffer
    var fbo = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
    gl.bindTexture(gl.TEXTURE_2D, null);
    if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
        throw new Error("gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE");
    }

    // Clear
    gl.viewport(0, 0, 512, 512);
    gl.clear(gl.COLOR_BUFFER_BIT);
    var pixels = new bufferFmt(4 * 512 * 512);
    gl.readPixels(0, 0, 512, 512, gl.RGBA, texType, pixels);

    if (pixels[0] !== (use_float ? 1.0 : 255)) {
        throw new Error("pixels[0] === " + pixels[0].toString());
    }
}

function main() {
    run_test(false);
    console.log('Test passed using GL_UNSIGNED_BYTE');
    run_test(true);
    console.log('Test passed using GL_FLOAT');
}
</script>
</head>
<body onload='main()'>
</body>
</html>

最佳答案

不幸的是，将 RGBA 组件读取为字节似乎仍然是 WebGL 的唯一方法。如果您需要将浮点数编码为像素值，可以使用以下内容:

在您的分形着色器(GLSL/HLSL)中:

float shift_right (float v, float amt) { 
    v = floor(v) + 0.5; 
    return floor(v / exp2(amt)); 
}
float shift_left (float v, float amt) { 
    return floor(v * exp2(amt) + 0.5); 
}
float mask_last (float v, float bits) { 
    return mod(v, shift_left(1.0, bits)); 
}
float extract_bits (float num, float from, float to) { 
    from = floor(from + 0.5); to = floor(to + 0.5); 
    return mask_last(shift_right(num, from), to - from); 
}
vec4 encode_float (float val) { 
    if (val == 0.0) return vec4(0, 0, 0, 0); 
    float sign = val > 0.0 ? 0.0 : 1.0; 
    val = abs(val); 
    float exponent = floor(log2(val)); 
    float biased_exponent = exponent + 127.0; 
    float fraction = ((val / exp2(exponent)) - 1.0) * 8388608.0; 
    float t = biased_exponent / 2.0; 
    float last_bit_of_biased_exponent = fract(t) * 2.0; 
    float remaining_bits_of_biased_exponent = floor(t); 
    float byte4 = extract_bits(fraction, 0.0, 8.0) / 255.0; 
    float byte3 = extract_bits(fraction, 8.0, 16.0) / 255.0; 
    float byte2 = (last_bit_of_biased_exponent * 128.0 + extract_bits(fraction, 16.0, 23.0)) / 255.0; 
    float byte1 = (sign * 128.0 + remaining_bits_of_biased_exponent) / 255.0; 
    return vec4(byte4, byte3, byte2, byte1); 
}

 // (the following inside main(){}) return your float as the fragment color
 float myFloat = 420.420;
 gl_FragColor = encode_float(myFloat);

然后回到 JavaScript 端，在进行绘图调用后，您可以使用以下内容提取每个像素的编码浮点值:

var pixels = new Uint8Array(CANVAS.width * CANVAS.height * 4);
gl.readPixels(0, 0, CANVAS.width, CANVAS.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
pixels = new Float32Array(pixels.buffer);

// pixels now contains an array of floats, 1 float for each pixel

关于WebGL 从浮点渲染目标读取像素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17981163/

25

4

0

文章推荐： apache-flex - 一个 block 文件如何使用 ActionScript (flex)？

文章推荐： unity3d - 在 Unity3d 4.2 中找到展平高度图

c - 错误 "invalid types ' 浮点 [100][浮点 ]' for array subscript"
这个问题已经有答案了: Invalid types 'double [100][double]' for array subscript (3 个回答) 已关闭 6 年前。我已复制下面的整个代码并在
math - 浮点;除法与乘法
您有 2 个功能； f(x)= x(((x+1)^(1/2))-(x^(1/2))) g(x)= x/(((x+1)^(1/2))+(x^(1/2))) 哪个更准确？旁注:如果你能解释为什么，
java - 浮点 - NaN
我正在从事一个关于java的研究项目，其中必须完成一些艰难的计算。然而，我已经完成了大部分工作，但停留在某个点上。我必须计算以下内容: (2.1-2.3) raised to power 0.3. 但
c - 浮点 while 循环
int main() { float x = 50; float y = 1/x; float result = y * x; float test = 41;
c++ - 浮点/整数类型转换的可靠溢出检测
有没有安全的方法来可靠地确定整数类型 T可以存储浮点整数值 f (所以 f == floor(f) )没有任何溢出？请记住，不能保证浮点类型 F与 IEC 559 (IEEE 754) 兼容，并且有
c++ - 浮点，相等比较是否足以防止被零除？
// value will always be in the range of [0.0 - maximum] float obtainRatio(float value, float maximum
c++ - 浮点 == 可以吗？
就在今天，我遇到了我们正在使用的第三方软件，在他们的示例代码中，有以下内容: // Defined in somewhere.h static const double BAR = 3.14; //
jQuery 浮点 : clear graph
是否有推荐的方法来清除 jQuery Flot 图表？我在 API 引用中找不到任何内容。最佳答案 “清除”是指“破坏整个图表”还是只是清除数据？要核对整个图表:$('#canvas_id').e
c - 对单精度(浮点)值求和时的错误传播
我正在学习单精度并想了解错误传播。根据this nice website ，加法是一个危险的操作。所以我编写了一个小的 C 程序来测试错误累积的速度。我不完全确定这是否是一种有效的测试方法。如果是，
WHERE 子句中的 SQL Server 浮点
我正在尝试查询数据库，我需要获取权重等于 60.5 的客户列表。问题是 60.5 是一个实数，我以前从未在 where 子句中使用实数查询过数据库。我已经尝试过这个: SELECT Name FRO
java - 浮点 setter 设置任意分数
这是我的“ProjectEntity”类中的代码部分(我在其中使用 hibernate 进行 SQL 调用) @Column(name = "BUDGET") private float budget
haskell - 浮点 SMT 逻辑比实际逻辑慢吗？
我用 Haskell 编写了一个应用程序，它调用 Z3 求解器来解决一些复杂公式的约束。感谢 Haskell，我可以快速切换正在使用的数据类型。当使用 SBV 的 AlgReal 类型进行计算时，我
c - C中大写和小写双(浮点)类型说明符的区别
在 C 中 double/float 有一个集合类型说明符:%f %F %g %G %e %E .有什么区别吗 %f和 %F , %g和 %G , %e和 %E ? 根据 printf和 scanf输
java - 大量(浮点)值的最佳数据结构
我正在开发一个适用于 Android 的可视化应用程序(包括运行 Android 2.2 的旧设备)。我的应用程序的输入模型包含一个区域，该区域通常由数万个顶点组成。典型模型有 50000-1000
java - (浮点)NAN 是否有一个普遍接受的值
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 6 年前。 Improve this ques
c - 如何检查输入是数字(浮点)还是某个字符？
我被要求编写一个程序来查找我大学中两个输入的总和，因此我应该首先检查输入是否有效。例如，如果我输入 2534.11s35，程序应该检测到它不是该程序的有效输入，因为输入中存在 s。最佳答案 to
c - 浮点 Fastpow OpenCL
我正在尝试降低 FPGA 的逻辑利用率，但在网上找不到任何好的 float fastpow。我所说的“好”是指充分减少所使用的逻辑。如果我使用双版本我几乎没有什么改进。如果我使用其他依赖日志的 flo
c++ - 浮点/ double 的字符数据
我有一个 128 字节的内存位置。我尝试用从 1...127 开始的数据填充内存。我需要编写一个代码来获取两个参数，如偏移量、数据类型。根据参数，我需要将内存中的数据转换为提到的特定数据类型。举个
c++ - 可测试的无效浮点值。 (浮点 NULL)
我希望能够做到以下几点: float func() { if( error ) return InvalidFloatingPointValue; else return 0.0f;
c++ - 浮点，我可以信任多少小于/大于比较？
假设我有两个 float ，我想比较它们。如果一个大于另一个，程序应该采用一个 fork。如果情况正好相反，它应该走另一条路。并且它应该做同样的事情，如果被比较的值在一个仍然应该使它比较真实的方向上被

首页

博学

6Ren·AI

商城

WebGL 从浮点渲染目标读取像素