Optimizig tile drawing

Hi, so problem I’ve got is with optimization of my program. At the moment I’ve got generated 2D grid of tiles, which every one of has color based on it’s z value. I’ve tried using 200x200, which wasn’t really enough and here is a screen of 400x400:


As you can see the framerate is tanking quite a bit. If I wanted to map som texture to each tile mi computer would probably burst into flames.

Edit: ATM im drawin the tiles with ofDrawRectangle one by one…

I need a way to optimize this. Maybe put this generated grid into single texture and draw it as whole or split it into smaller ones. I’ve been doing something similliar to this in GameMaker Studios but it worked bit differently than this. Any upgrade form my current non existing optimization will be nice. Also if you could point me to some useful posts or tutorials about optimization I would be really glad.
Thanks!

hey. using ofDrawRectangle will be definitely slow.
You can just use a grayscale image, probably an ofFloatImage would be good (it’s values go from 0 to 1) where each tile corresponds to a pixel, put those z values in each pixel. then use a shader to compute color. That should be super fast.
if you want to have these tiles as separate elements you should definitely check the examples for instanced rendering.

best

usually what slows things down is the number of draw calls so if you use ofDrawRectangle in a 400x400 grid you’ll be doing 160000 draw calls. Instead you can create an ofVboMesh witht the coordinates of the rectangles (it only supports triangles but a rectangle is just 2 triangles) and then add colors per vertex like:

mesh.addVertex({0,0});
mesh.addVertex({1,0});
mesh.addVertex({1,1});

mesh.addVertex({0,1});
mesh.addVertex({1,0});
mesh.addVertex({1,1});

mesh.addColor({0,0,0});
mesh.addColor({0,0,0});
mesh.addColor({0,0,0});

mesh.addColor({0,0,0});
mesh.addColor({0,0,0});
mesh.addColor({0,0,0});

will create a black rectangle in 0,0 of side 1. just add as many rectangles as you want to the same ofVboMesh (you can eaily create a function that adds a rectangle of a certain color to a mesh like this) and then draw the mesh like:

mesh.draw();

with that you’ll have only 1 draw call instead of 160000 which will be way faster

1 Like

Thanks that will help a lot I would say