Procedurally generating textures

[Paul Brzeski]

Does anyone know of any good libraries or tutorials that could help me procedurally generate textures?

 

I'm interesting in the following types of patterns and features:

• Building windows with randomly alternating window dimness/brightness
• "Gradienty" blue/white ice textures for ice bergs, crystals, water
• "Dithery" grass/sand/dirt textures for rocks, mountains
• "Smoky" for cloud shapes, smoke effects
• "Oily" for water splash shapes, other liquid splashes

Here's some that I'm currently looking at but haven't tried yet, if anyone's heard of them before I'm keen to hear your experience

• http://tech.pusherhq.com/sandbox/seamless_brick
• http://amsqr.github.io/chromanin.js/texgen.html

I have a class called Textures that will be used to create and store new textures. 

 

Here's a mockup of how I plan to use the functionality:

 

[P.Uri.Tanner]

Yes!

I have made some research into that matter. My final technology stack looks like that:

 

 

Pseudo Random Number Generator (PRNG)

You probably want a good, seedable and fast pseudo number generator to seed your Noise generator with.

This one works well. But be aware that it needs a well randomized seed to create good combinations out of the box. 

Mersenne Twister: https://gist.github.com/banksean/300494

 

NOISE

This implementation is easily outfitted with your (seeded) PRNG
Simplex/Perlin: https://gist.github.com/banksean/304522

 

TWEENING:

Why Tweening you might ask. Isn't that for animations?!

Yes and No. If you want to create good looking procedural textures/landscape you want to layer on several different noisemaps. It's a huge time safer to just Tween together the values of different layers. For advanced use i recommend the use of noise patterns as masks for other noise patterns.

 

It's easy to write your own interpolation functions, but here are some well documented ones:

Sole/tweenjs https://github.com/sole/tween.js/

 

 

 

Hope that gives you a starting point. Amitp has lots of information on procedural landscape generation http://www-cs-students.stanford.edu/~amitp/game-programming/polygon-map-generation/.
There really isn't much difference between some procedural textures like clouds, mud, earth and procedural landscapes!

[Paul Brzeski]

Thanks for that! After having a flick through those, I'm going to create a class for noise functions and the like. It looks like it's noise functions play a major part in adding 'texture' to a game. 

 

The performance of my engine takes a noticeable hit when all SFX are on, mostly because I'm doing everything really inefficiently. So far I'm just throwing everything in and focusing on getting things going

 

Have you looked at putting noise functions into a Worker before? I'm using a 3d noise function to animate my water, but it takes a lot of resources and seems like overkill... I feel like if I could trap 2 or 3 seconds worth of XYZ information, that may be enough to just run it on a pre-set loop.. but I haven't gotten around to doing that yet.

[Paul Brzeski]

I'm off to a pretty good start  (first attempt at a building below)

 

Now I really want to generate UV mapped textures for objects exported from Blender... any idea how to go about doing this?

 

I'm guessing that I have to pass in all the vertices and then draw them on a 2D plane... but I'm not sure how this can then be relayed to THREE.JS? 

[PAEz]

I dont make games (will one day....pfff) and certainly dont know 3d (does my freakn head in) but I played with that chromanim.js and if you change the way it accesses pixels it can be speed up quite a bit.  Treating each pixel as an object is dam convenient but also dam slow, so I converted it to use Typed Arrays.

I attached my muck around.  To be honest I did that ages ago and cant remember jack all of it (I have a REALLY bad memory), but the bits of it I converted work.  Oh yeah, I didnt finish converting all of it (probably got distracted with something else shiny).

 

Also, the idea of generating textures while the games running seems nuts to me.  Usually you create them before the game/level is run and make them according to the resolution/woteva.  Unless its simple/quick or maybe done with glsl (because they can be quick).  Oh and theres another thing.  That chromanim can be speed up again if you replace some of the routines with glsl ones, but unfortunately I couldn't find my experiment for that one.

 

On your new question, keep looking around.  Have a search for bump mapping in JS.  It was only a few days ago that I saw tutorials on this, one would have been perfect for you as it was about creating them in Blender to use with some js library that I cant remember.....good luck.

editor -PAEz.zip

[Paul Brzeski]

I dont make games (will one day....pfff) and certainly dont know 3d (does my freakn head in) but I played with that chromanim.js and if you change the way it accesses pixels it can be speed up quite a bit.  Treating each pixel as an object is dam convenient but also dam slow, so I converted it to use Typed Arrays.

I attached my muck around.  To be honest I did that ages ago and cant remember jack all of it (I have a REALLY bad memory), but the bits of it I converted work.  Oh yeah, I didnt finish converting all of it (probably got distracted with something else shiny).

 

Also, the idea of generating textures while the games running seems nuts to me.  Usually you create them before the game/level is run and make them according to the resolution/woteva.  Unless its simple/quick or maybe done with glsl (because they can be quick).  Oh and theres another thing.  That chromanim can be speed up again if you replace some of the routines with glsl ones, but unfortunately I couldn't find my experiment for that one.

 

On your new question, keep looking around.  Have a search for bump mapping in JS.  It was only a few days ago that I saw tutorials on this, one would have been perfect for you as it was about creating them in Blender to use with some js library that I cant remember.....good luck.

Cheers for that!

 

The texture generator will only be called on scene set-up. The main reason I want it though is to free up my time in the long run with some purpose built production tools and conserve bandwidth (I'm in Australia where the internet is really slow It's a good testing ground for mobile though!). My ultimate goal is to be able to automatically map unique and specific textures for a complex/custom UV map, hopefully with specular/bump maps to boot.

[PAEz]

I'm in Australia where the internet is really slow 

 

hehe...boo hoo you  I live in Australia and can only afford dialup!...thank god for mates with broadband.