How can I render a grid using shaders?

nicocaiine

I realise this is a very vague question.

I have a grid composed of thousands of rectangles, and their colour is updated each frame. This makes the sketch call the fill() + rect() function around 40,000 times each frame.

Is there any way I could feed the info for each cell in the grid (cellX, cellY, cellR, cellG, cellB) to a shader and have that render the grid?

I know very little about GLSL, and I apologise if this is a stupid question but I'm desperate to get my CPU usage down.

Thanks in advance for your help,

Nico

nicocaiine

Hi, here's an update that might refine my question.

I have changed my approach and now all the colours are saved into an array. I then load the pixels of an off-screen image and loop through them assigning them the corresponding colour from the colour array.

Is there a way to use the colour array in a shader and assign them to pixels in there?

Thanks a lot in advance,

Nico

Poersch

It's really hard to tell what you are trying to achieve without seeing your code. If I understand you correctly you just want to render a 2D grid with different colored cells onto the screen - that sounds pretty much like a texture:

PImage grid;

void setup() {
    size(800, 800, P2D);

    // Sets the teture filtering to NEAREST sampling to create the more grid like look
    ((PGraphicsOpenGL)g).textureSampling(2);

    // Create the grid with 40000 cells
    grid = new PImage(200, 200, ARGB);

    // Set a random color to each grid cell
    for(int y = 0; y < grid.height; ++y)
        for(int x = 0; x < grid.width; ++x)
            grid.set(x, y, color(random(255), random(255), random(255)));

}

void draw() {

    // Render the grid
    image(grid, 0, 0, width, height);

}

Info: The example above is actually using Processing's texture shader to render the grid, which will be much faster than doing this on the CPU or with individual rect calls.

Additionally here is a little example on how to render a chessboard like grid with a shader:

PShader gridShader;

void setup() {
    size(800, 800, P2D);
    String[] vertSource = {
        "uniform mat4 transform;",

        "attribute vec4 vertex;",

        "void main() {",
            "gl_Position = transform * vertex;",
        "}"
    };
    String[] fragSource = {
        "uniform vec2 mouse;",

        "void main() {",
            "if(fract((gl_FragCoord.x + mouse.x) / 40) > 0.5 ^ fract((gl_FragCoord.y + mouse.y) / 40) > 0.5)",
                "gl_FragColor = vec4(0.9, 0.9, 0.9, 1.0);",
            "else",
                "gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);",
        "}"
    };
    gridShader = new PShader(this, vertSource, fragSource);
}

void draw() {
    gridShader.set("mouse", -(float)mouseX, (float)mouseY);
    filter(gridShader); // Filter basically applies the shader to the viewport
}

If you want to know more about shaders have a look at Processing's shader page.

nicocaiine

Hi Poersch, thanks very much for your answer.

I have handed this project in already, and am not working on it as religiously as before. Your suggestions seem very interesting and I will give them a try as soon as possible.

All the best