Some infos and resources about some math formulars

[va!n]

I am very interested in some infos / math (esp psydo basic sources) about procedural textrue genreation and how to do following stuff when having an image/a texture as source:

- Normal Map (first greyscale image and then calculate it to normal map?)
- Bump Map (greyscale image and blur?)
- Fastest way to create clouds/perlin noise (without use of pointers)

Whats wrong with my source, trying to create a checkerboard texture - which works OK as long as NumX and NumY are same.... When using for both values different values, the result looks not as it should look like.

Code: [Select]

            // not implented yet
            // int color0 = new Color(255, 255, 255, 255);
            // int color1 = new Color(   0,    0, 255, 255);

            int sizeX = 32;
            int sizeY = 32;

            for (int y = 0; y < 256; y++)
            {
                int ty = y * 256;                     // calculation not needed in each x loop... i.e. shifting to speed up
                for (int x = 0; x < 256; x++)
                {
                    int col = ((x & sizeX) ^ (y & sizeY));
                    byte col2 = (byte)col;
                    texData[x + ty] = new Color(col2, col2, col, 255);
                }
            }

Please dont blame me about the source... Its my first try and thoughts how it could be done in a non basic language ^^ Thanks for any hints, tips, resources that are usefull for an own generator Btw, i know the article on this forum Best regards

[Stonemonkey]

I've only done that on a per pixel basis using something like

col=(x eor y)and 1

but I think something like this should work

col=( (x\sizeX) eor (y\sizeY) ) and 1

eor (exclusive or) should maybe be xor depending on the language and \ (integer divide) maybe DIV and the result in col will be either 0 or 1.

EDIT: you could add them instead of using eor.

[Jim]

Stonemonkey's right.  Try defining the sizes as a shift instead, and making it like this

Code: [Select]

sizeX=5; //1<<5==32
sizeY=4; //1<<4==16
...
col=255*((x>>sizeX)^(y>>sizeY)&1);

To do bumpmaps and normal maps, one simple way is to convert the image to greyscale, then imagine it is a height map, with bright shades at the peaks and dark shades in the valleys.
Then, for every pixel, look at the 8 neighbouring pixels.  You want to know if they're higher or lower that the pixel you are working on.  For bumpmap you might just want to average all the differences.  For normal map you want to work out the average gradient (average normal).  I usually do that by creating 8 2d normals and averaging them out.

Jim

 

[va!n]

Thanks for your feedback!

@Jim:
Thanks for helping to fix my problem when having two different values for sizeX and sizeY. I think there is a small bug and an unneeded muliplication of 255 in your code. However i got the idea and managed to get it work. Input values for sizeX and sizeY are still values like 5 and 4 instead of 32 and 16... but i think its still ok for the first.

Maybe there are parts for optimisations like doing all in just one For/Next loop or whatever... I am not sure...
Here is the fixed working version, thanks to Jim!

Code: [Select]

            // ------ Checkerboard by va!n

            int sizeX = 6;       // 128     
            int sizeY = 5;       //  64     

            // Define colors and save to array

            Color color0 = new Color(255, 255, 255, 255);
            Color color1 = new Color(255, 0, 0, 255);

            Color[] array = new Color[2] { color0, color1 };

            // Create stuff...

            for (int y = 0; y < 256; y++)
            {
                int ty = y << 8;                    // y * 256
                for (int x = 0; x < 256; x++)
                {
                    int col = ((x >> sizeX) ^ (y >> sizeY)) & 1;
                    texData[x + ty] = array[col];
                }
            }

I know two ways to convert an image to greyscale... One way is just to add r,g,b and divide by three, which is possible the fastest way but afaik it does not represent 100% the greyscale range of human eye. The other way and afaik more exact greyscale converting way is to multiply each color channel with a defined value. Does it makes any big difference in the normalmaps or bumpmaps result?

Code: [Select]

a) grey = r + g + b / 3
b) grey = r * 0.3 + g * 0.59 + b *0.11

Atm i am not really sure how to calculate the wanted maps from the greyscaled image using this 8x8 neighbouring pixels. I will try to find hopefully something at google.

[hellfire]

I know two ways to convert an image to greyscale...

You wouldn't store a heightmap in rgb-colors in the first place.
If you need to reuse an existing rgb-map has height-map due to size-constraints, you might want to use adjustable rgb-weights to control how much each color-channel affects the resulting height.
Human rgb-perception doesn't apply here because you're creating heights.

Does it makes any big difference in the normalmaps or bumpmaps result?

If your source-image is mainly blue, a) will produce 3x stronger values than  b).

how to calculate the wanted maps from the greyscaled image using this 8x8 neighbouring pixels.

The easiest way is to calculate the gradient in horizontal and vertical direction using a 4-point neighbour-hood:

Code: [Select]

        (x,y-1)
           +
          /|\
         / | \
(x-1,y) +--X--+ (x+1,y)
         \ | /
          \|/
           +
        (x,y+1)

gradientX= (input(x+1,y) - input(x-1,y)) / 2;
gradientY= (input(x,y+1) - input(x,y-1)) / 2;
The 8-point neighbourhood gives the same result but slightly smoothed.

[va!n]

hellfire:
Thanks for the informative info
I will check it out again later... Atm i am trying to code some basic generators... Not really easy in some parts and even when all gens should work to create any kind of^2 images like 256, 512 - without changing the output result.

First i will try to code some more generator code... following gens are missing or having a prob with atm:

RandomGen = atm i m using real rnd generated numbers to create a tex which works fine. Stuff i have to think about, even when wanting an CloudsGen too... using just rnd for it or using real (slow?) perlin noise math? Not reall sure where and even if there is big difference by using just rnd or perlin for both gens (at least just only one gen i think)

CloudsGen = searched on web for code... Seems there are different snippets. Just wanting a very fast one (no PS)

Second i will try to get infos and try how to code the stuff arround the gens, to have an GenClass and how to handle all the stuff with arrays and even OOP Its completly new to me.

[edit]
another thing about rnd is, how to create the same pattern when changing the tex size from 256 to 512 for example. hmmm

[hellfire]

all gens should work to create any kind of^2 images like 256, 512 - without changing the output result

This won't be possible for some filter-types and I don't see much sense in trying.
Just create your texture at a higher resolution and downsample to the size you need.

using just rnd for it or using real (slow?) perlin noise math? Not reall sure where and even if there is big difference by using just rnd or perlin for both gens

If you're familiar with making music you can think of it as two different ways of synthesis.
Rnd generates white noise. You can apply additional filters to shape the spectrum (just like in subtractive synthesis).
Perlin controls the contained frequencies in the creation-process and adds the different bands separately (just like in additive synthesis).
You'd usually use perlin to add a bit of modulation.
It doesn't make sense to model unfiltered white noise with perlin.
Have a look at this.

how to code the stuff arround the gens, to have an GenClass and how to handle all the stuff with arrays and even OOP Its completly new to me.

For an introduction to OOP have a look here.