通过片段着色器中的相邻像素进行有效迭代

Question

For context:

I'm working on a generative 2D animation with OpenFrameworks. I'm trying to implement a shader shifts the fills some shapes with a color, depending on the orientation of the shapes edges.

Basically it takes an image like this one:

and spits out something like this:

Note that it intentionally only takes the color from the left side of the shape.

Right now my fragment shader looks like this:

#version 150

out vec4 outputColor;

uniform sampler2DRect fbo;
uniform sampler2DRect mask;

vec2 point;
vec4 col;
float x,i;
float delta = 200;

vec4 extrudeColor()
{
        x = gl_FragCoord.x > delta ? gl_FragCoord.x - delta : 0;
        for(i = gl_FragCoord.x; i > x; i--)
        {
            point = vec2(i, gl_FragCoord.y);
            if(texture(fbo, point) != vec4(0,0,0,0)){
                col = texture(fbo, point);
                return vec4(col.r, col.g, col.b, (i-x)/delta);
            }
        }
        return vec4(0,0,0,1);
}

void main()
{
    outputColor = texture(mask, gl_FragCoord.xy) == vec4(1,1,1,1) && texture(fbo, gl_FragCoord.xy) == vec4(0,0,0,0) ? extrudeColor() : vec4(0,0,0,0);
}

the mask sampler is just a black and white version of the second image that I use to avoid calculating pixels outside of the shapes.

The shader I have works but it is slow and I feel like I'm not using proper GPU thinking and coding.

The actual, more general question:

I'm totally new to glsl and opengl. Is there a way to make this kind of iteration trough neighbouring pixels more efficiently and without having this many texture() reads?

Maybe using matrices? IDK!

Answer 1

This is a highly inefficient way to approach this problem. Try to avoid conditionals (if's) and loops (for's) in your shader. I would suggest loading or generating a single texture, and then using an alpha mask to create the shape you need. The texture could remain constant, while the 2 or 8-bit mask could be generated per frame.

An alternative method would be to use a few uniforms and upload "per-line" data in an array:

#version 440 core

uniform sampler2D _Texture ; // The texture to draw
uniform vec2 _Position ; // The 'object' position (screen coordinate)
uniform int _RowOffset ; // The offset in the 'object' to start drawing
uniform int _RowLength ; // The length of the 'row' to draw
uniform int _Height ; // The height of the 'object' to draw

in vec2 _TexCoord ; // The texture coordinate passed from Vertex shader

out vec4 _FragColor ; // The output color (gl_FragColor deprecated)

void main () {
  if (gl_FragCoord.x < (_Position.x + _RowOffset)) discard ;
  if (gl_FragCoord.x > (_Position.x + _RowOffset + _RowLength)) discard ;
  _FragColor = texture2D (_Texture, _TexCoord.st) ;
}

Or, without sampling a texture at all, you could generate a linear gradient function and sample the color from it using the Y coordinate:

const vec4 _Red = vec4 (1, 0, 0, 1) ;
const vec4 _Green vec4 (0, 1, 0, 0) ;

vec4 _GetGradientColor (float _P /* Percentage */) {
  float _R = (_Red.r * _P + _Green.r * (1 - _P) / 2 ;
  float _G = (_Red.g * _P + _Green.g * (1 - _P) / 2 ;
  float _B = (_Red.b * _P + _Green.b * (1 - _P) / 2 ;
  float _A = (_Red.a * _P + _Green.a * (1 - _P) / 2 ;
  return (vec4 (_R, _G, _B, _A)) ;
}

Then in your Frag Shader,

float _P = gl_FragCoord.y - _Position.y / _Height ;
_FragColor = _GetGradientColor (_P) ;

Shader Output

Of course this all could be optimised a bit, and this only generates a 2-color gradient whereas it looks like you're needing several colors. A quick Google search for "linear gradient generator" can land you some nicer alternatives. I should also note this simple example will not work for shapes with 'holes' in them, but it can be revised to do so. If the shader math gets too heavy, then choose the texture with alpha mask option.