Procedual brick textures
Community Forums/Showcase/Procedual brick textures
| ||
| After a bit of talk about procedural texture creation in general the other day I thought I'd have a go at creating some myself. I thought I'd start simple with brick walls, but you'd be surprised how tough it is to create anything even close to 'real' looking walls with maths alone... However, slowly but surely I'm getting there with the possible goal of creating an app to generate all the tessellating brick wall textures you'd ever want (!?). Examples thus far:  This is all created with a bit of maths, mortar width and colour, brick size and colour , how beaten up, how deep the mortar is, cracks, splodges, etc, all definable. Got to make it smoother and add a few more options like brick patterns etc. Also I'll probably make it auto create a bump map. |
| ||
| I bet if you make it `scaled up` and then after drawing it, scaled it down with smooth filtering, it'd look more realistic - ie antialiased. But it's actually not too bad. The only problem with procedural generation is it seems to require such specific `formulas` to output all the different types of possible textures. I think figuring out how to `project` a texture ie create one, rather than to just `absorb` a texture ie perceive on, is quite a new area. |
| ||
| Nice ! |
| ||
| Will this be open source? |
| ||
| IH: Nah, you'd lose all the detail on the bricks, if it's worth doing it's worth doing properly :) Regarding procedural generation, I think you're always going to have specific code for specific things, the likelihood of creating a formula that can create a brick and a leaf is somewhat slim. Probably why the MakeGame() command is still missing from Blitz! Réno: Ta :) _33: I doubt it, depends how it ends up really. If the output is of a high enough quality I'll probably be flogging it for a nominal fee. There are 2 options I see: 1) See it as an application with a nice gui that created bitmaps and bumpmaps 2) Same as 1 and include the blitz code to actually create the textures on the fly which you have designed with the gui. |
| ||
| Impressive! Just out of curiosity, roughly how did you get: 1. the scratches 2. the blotches 3. the brick edges 4. the shading on the mortar I don't like the top-right very much, the brick edges are too pixelated looking. Also, the mortar would look better if it also had some fine grain/bumpiness. |
| ||
| 1. Start at a random point in a random direction, move in that direction, monkey with the colours a bit (make some darker some nearby lighter etc), change direction randomly, rinse and repeat until A: Distance X covered, B: Hit an edge... got back to start point again and rinse and repeat. 2. Pick a random point, draw a messy filled circle and average it to the base texture of varying bias depending on where on the circle you are. Move around a bit doing it again. Then pick a new random point. 3. Points randomly picked across the length of the edge and dependant on how smashed up it you want it. Biezier curves the used to fill in the gaps of the points. 4. All part of the process 3, the edges of the bricks are shaded and the mortar is shaded also, just applying varying levels of black to the pixels. However, I'm going to be changing the way the shading is done. I'm going to create a bump map image as well as the texture image, and then have an option to bake the bump map to the texture with light from any direction, any colour etc. That's my thought anyway! The mortar has got texture actually, well, there's noise added to it which gives that impression. Yeah, the top right one isn't very good, that's why I said it all needs to be smoother. It doesn't look good because I set the depth very high, needs to be cleverer! |
| ||
| What markcw said - impressive. |
| ||
| Very good. How long does it take to generate each one? |
| ||
| Been away for a long weekend hence the lack of me replying! Anyhoo... How long depends on how many bricks, how big the bricks etc etc, it varies massively depending on what settings are set, however, we're talking a matter of 1 or 2 seconds to create the examples above which are cropped out of 512x512px textures. |
| ||
| One thing I thought of that would improve your bricks is pores. Bricks have lots of little pock marks in them. The surface of your bricks looks more like mortar or rough tiles. If you created random pock marks of random shapes varying between oval and round and sizes from small to quite big and remember their locations so you don't put a pock mark over another one, it would look really good I think. Just a suggestion. |
| ||
Mark: Good idea! Just finished the first attempt with it creating a bump map and then baking it onto the texture, I think it's looking pretty damn good now (even though I say so myself)  |
| ||
| Hey this looks very impressive so far. Any demos we can eventually try? How faster would it be to create this textures on the fly and texture a mesh rather than load from file? Something you could learn a few things from .werkkzeug 3 TE http://www.werkkzeug.com/ |
| ||
| Excellent. That bump mapping has certainly improved things considerably and is particually effective - nice work. With a little experimentation you could also generate other texture types like stone walls, tiled roofs and cobble stones. Now if only I could come up with a random graffiti painter :) |
| ||
| Roy: Still got to do quite a bit of work on it, the blur on the bump map is too strong so everything looks a little soft, need to write a new blur algo to get that improved and sharpen it all up a little. Different types can almost be done now, there's plenty of options already, but certainly could be worth extending these. I've been thinking of new ways to create the whole thing which may work quite well and potentially improve speed. XML: Regarding time to render it's not quick at all, about 5 seconds to generate a 512x512 texture on my system. Can probably improve this though, just getting the system working well before I worry about optimising. And yeah, seen that thing (although not downloaded it), that's where the idea of creating bricks came from. |
| ||
Sharpened up the blurring a little... defines the baking better I think  Still got some more experiments to do with the cracks... at the moment these are infact part of the texture rather than the bump map, so I think if I put the cracks on the bump map rather than the texture it should work better... if not... interesting experiment either way. |
| ||
| I like this! |
| ||
| Reminds me of the textures the 2d Worms series used to colour-up the randomly-generated landscapes with. This is cool though, any plans on making a little game demo (FPS or something stupidly simple to code?) that is with everything created procedurally? |
| ||
| I would consider buying system capable to produce really nice looking procedural textures...so far this looking really promissing..I like this grey wall thingy..nice bumps on it... |
| ||
| Just so you know... Still working on this! Just hot off the press... Add bumps and cracks to the mortar, set the brick and mortar depths, how bashed up the mortar is, how bashed up the bricks are... etc etc... There's quite a few options now!  All that said. I've just thought of a new way to generate this so it's probably going to be the best part of a rewrite! But it'll look better! |
| ||
| Hello. Rob: Are the tiles seamless? I don't really give a damn, like, but no doubt someone will want that functionality. Oh, and the moon onna stick too ;o) Goodbye. |
| ||
| Yeah, they're seamless. I've just cropped them out of a 512x512 texture. The only time it's gets confused is when you have a brick size / mortar size that doesn't stack up for the texture size you want. It's still seamless but looks rubbish because you end up with a slither of brick at the bottom or something! Not sure what to do about that?! |
| ||
| "The only time it's gets confused is when you have a brick size / mortar size that doesn't stack up for the texture size you want. It's still seamless but looks rubbish because you end up with a slither of brick at the bottom or something! Not sure what to do about that?!" I'd say at the least try to see if you can correct that when using power of 2 texture sizes. ;) Very cool project BTW. :) |
| ||
| Actually I think the way to solve it is not say "How big do you want the brick?" you say "How many bricks do you want to fit across the texture and how many up" |
| ||
| I think that's the right thing to do. A further idea would be limit the brick sizes to what would fit, sort of snap the value to the closest precalculated value that fits. That might be more user-friendly. Your last set of pictures looks very realistic! Although I don't like the black mortar in the bottom two. The top-left mortar color is the best. Obviously you are letting users set the mortar and brick colors but I just wanted to comment on them anyway. Also in the last set of pictures, the shadow/light on the brick edges seem to have gone. The bricks look very flat now. What happened there? Did you set the mortar depth very low? |
| ||
| Mark, The problem with letting people choose brick size is that there is no brick that will fit as the mortar width is variable too, so I think choosing how many across and how many up and let the computer sort out the actual size. All the colours (mortar and brick) are variable so you can pick whatever suits your own personal style! The light/shadow is still there, it's just subtle, you can see that the left and top edges of bricks are highlighted. You can adjust the light intensity I've got it at around .5 or .75 on those example, as soon as you go above 1 it starts to look like everything is plastic coated which generally is the bump map 'look'. I've spent a lot of time looking at bricks recently and generally they are very matt and highlighting/shadowing is subtle. As I said though, the intensity is variable so you can choose how extreme you actually want the lighting on the bricks. Likewise with the mortar and brick depth, these are both variable which again makes a difference to how much of an edge there is to highlight. Often with real walls you'll notice that the mortar is actually a very similar depth to the bricks. Only modern stylised walls have mortar that is actually set back from the bricks. |
| ||
| @.Rob - Good project you have going here. Ideas for possible expansion to keep your head spinning. ;) See through holes in the bricks. Rocks,gravel - instead of bricks. Marble, gold, bronze, etc. Logs, sticks, etc, instead of bricks. Fences, Windows. :) |
| ||
| Hello. I've spent a lot of time looking at bricks recently Eek! He's a jailbird!!! Goodbye. |
   |