一个片段可以访问 WebGL GLSL 中的所有纹理像素值吗?(不仅仅是它自己的 TexCoord) [英] Can one fragment access all texture pixel values in WebGL GLSL? (Not just it's own TexCoord)

问题描述

假设我正在使用 WebGL 和 GLSL 制作计算着色器.

在这个着色器中，每个片段(或像素)都想查看纹理上的每个像素，然后决定它自己的颜色.

通常一个片段从几个纹理中采样它提供的纹理坐标(UV 值)，但我想有效地从单个纹理中为单个片段采样所有 UV 值.

这可能吗?

解决方案

我能够从 128x128 纹理中的每个像素进行采样，但移动到 256x256 会导致 Chrome 失败.这意味着每个像素可以在一次绘制调用中从同一纹理中采样大约 16384 个不同的像素.对机器学习非常有用！

注意:在 256x256(65536 像素)下，可能存在 2 次方纹理以支持更高的像素样本数，但我只使用正方形纹理，因此未对此进行测试.

源代码要点

void main() {vec4 tcol = vec4(0, 0, 0, 0);for (float x = 0.0; x 

在 Chrome 中，我能够执行以下循环:

100 次传球(作品):

void main() {浮动注册 = 0.0;for (int i = 0; i <100; i++) {注册 += 1.0/255.0;}gl_FragColor = vec4(reg, 0, 0, 1);}

1 000 次通行证(作品):

void main() {浮动注册 = 0.0;for (int i = 0; i <1000; i++) {注册 += 0.1/255.0;}gl_FragColor = vec4(reg, 0, 0, 1);}

10 000 次通行证(作品):

void main() {浮动注册 = 0.0;for (int i = 0; i <10000; i++) {注册 += 0.01/255.0;}gl_FragColor = vec4(reg, 0, 0, 1);}

100 000 次传球(拉屎):

void main() {浮动注册 = 0.0;for (int i = 0; i <100000; i++) {注册 += 0.001/255.0;}gl_FragColor = vec4(reg, 0, 0, 1);}

<块引用>

GL_INVALID_ENUM : glBindFramebuffer: 目标是 GL_READ_FRAMEBUFFER_ANGLEGL_INVALID_ENUM : glBindFramebuffer: 目标是 GL_DRAW_FRAMEBUFFER_ANGLEWebGL:CONTEXT_LOST_WEBGL:looseContext:上下文丢失

Let's pretend I'm making a compute shader using WebGL and GLSL.

In this shader, each fragment (or pixel) would like to look at every pixel on a texture, then decide on it's own color.

Normally a fragment samples it's provided texture coordinate (UV value) from a few textures, but I want to sample effectively all UV values from a single texture for a single fragment.

Is this possible?

解决方案

EDIT: I was able to sample from each pixel in a 128x128 texture, but moving to 256x256 causes Chrome to fail. Meaning each pixel can sample roughly 16384 different pixels from the same texture in one draw call. Very useful for machine learning!

Note: There may be an unsquare power of 2 texture to support a higher pixel sample count under 256x256 (65536 pixels), but I only use square textures so this wasn't tested.

GIST OF SOURCE CODE

void main() {
    vec4 tcol = vec4(0, 0, 0, 0);
    for (float x = 0.0; x < PIXELS_WIDE; x++) 
        for (float y = 0.0; y < PIXELS_TALL; y++) 
            tcol += texture2D(tex0, vec2(x / PIXELS_WIDE, y / PIXELS_TALL));
    tcol /= 100.;
    gl_FragColor = tcol;
}

In Chrome I was able to execute the following loops:

100 Passes (Works):

void main() {
    float reg = 0.0;
    for (int i = 0; i < 100; i++) {
        reg += 1.0 / 255.0;
    }
    gl_FragColor = vec4(reg, 0, 0, 1);
}

1 000 Passes (Works):

void main() {
    float reg = 0.0;
    for (int i = 0; i < 1000; i++) {
        reg += 0.1 / 255.0;
    }
    gl_FragColor = vec4(reg, 0, 0, 1);
}

10 000 Passes (Works):

void main() {
    float reg = 0.0;
    for (int i = 0; i < 10000; i++) {
        reg += 0.01 / 255.0;
    }
    gl_FragColor = vec4(reg, 0, 0, 1);
}

100 000 Passes (Shits the bed):

void main() {
    float reg = 0.0;
    for (int i = 0; i < 100000; i++) {
        reg += 0.001 / 255.0;
    }
    gl_FragColor = vec4(reg, 0, 0, 1);
}

GL_INVALID_ENUM : glBindFramebuffer: target was GL_READ_FRAMEBUFFER_ANGLE 
GL_INVALID_ENUM : glBindFramebuffer: target was GL_DRAW_FRAMEBUFFER_ANGLE 
WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

这篇关于一个片段可以访问 WebGL GLSL 中的所有纹理像素值吗?(不仅仅是它自己的 TexCoord)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！