creating a procedural image/texture without filtering/blurryedges/antialias

Community Forums/General Help/creating a procedural image/texture without filtering/blurryedges/antialias

RemiD(Posted 2016) [#1]
Hello,

I don't know Blitzmax well (only the basics) and i wonder if you can create a procedural image (using premade parts (sharp images)) by positioning/rotating the parts following a logic with some randomness but with the final image being sharp (no filtering/blurryedges/antialiasing)

Because with Blitz3d you can't if you only use the images functions (because there will be some filtering/blurring/antialiasing applied when the part (image) is rotated) but you can if you use a textured quad with bilinear filtering deactivated (since the texture is not altered, only the quad rotates).

For example, i want to create a image/texture of gravels using 10 premade gravels (images) and positioning/rotating 1000 gravels on the image/texture area randomly. (doing it manually is too time consuming and annoying!)

Just curious about how you do that with Blitzmax...


Derron(Posted 2016) [#2]
Two options:

1)
- Load your images without "FILTEREDIMAGE" flag (see max2 wikibooks entry
- draw them on the screen like desired
- grab the image rectangle you need
- somehow process the "black" to alpha (or whatever your screencolor was - and should be)

This processing could need 2 steps: one for the color (which then might contain the screen's background color) and one for the mask (alpha). What I mean is:
- draw it one time just as you want (with eg. black setclscolor)
- grab it in image1
- draw it another time with white as background
- grab it in image2
- create an image3 with all images being transparent from 0 to 1.0 according to the changes in image1 and image2 (only transparent or semitransparent images will change their colors between the two images).

2)
Do it via software rendering. But then you need to write your own rotation stuff (the rest is just copying color information at X,Y from pixmap A to pixmap B)


bye
Ron


RemiD(Posted 2016) [#3]
Ok, this sounds complicated for not much...

And using minib3d or openb3d and positionning/rotating many textured quads (with bilinear filtering deactivated and a texture loaded with the flag mask so that black texels are masked (=fully transparent), with an entityblend/surfaceblend alpha and fx fullbright) in an area, and then copyrect the result in a new texture, would this be possible ? Because with Blitz3d it is.
Just curious...


Derron(Posted 2016) [#4]
Try it out ... I'm into 2d.


BTW you could play with directly manipulating quads/textures in OGL - but my suggestion is using the backend-agnostic functions - so work with DX and OGL.


If you are able to skip DX7 - so only use DX9, DX11 and OGL, you might use the render2texture mod flying around in the forums.

http://www.blitzmax.com/Community/posts.php?topic=107108

So it is just method 1) but without the needed "processing" (as the texture already is capable of having an alphachannel).

It then becomes this:
- set render target to new image
- draw your parts (DrawImage...)
- grab the render target into a new image


bye
Ron


RemiD(Posted 2016) [#5]
For those interested, here are the results :
(see post#10)

at first i wanted to created a seamless texture, but then i realized that when there are too many parts which fill the whole area of the texture, then it is harder to distinguish each part, so i decided to not fill the whole area and to leave empty spaces which are black (000,000,000), and then i load the texture with the mask flag so that the black texels are fully transparent, and then each time i create a flat mesh using this texture, a slight random offset is added on the y axis so that 2 flat meshes are never at the exact same y position, and thanks to that i can create overlapping flat meshes which appear seamless to create floors, roads, accesses, paths...


Derron(Posted 2016) [#6]
I would play with overlapping a "small amount" of rectangles to break the seams ...


bye
Ron


RemiD(Posted 2016) [#7]

overlapping a "small amount" of rectangles to break the seams



I already do that

But now i have a problem with the empty spaces, i probably need to add a texture for the terrain...

Also i am not sure if using textures with masked (fully transparent) texels is fast enough to render, i will see...


RemiD(Posted 2016) [#8]
Also what i have not tested but should greatly improve the appearance of each texture would be to add baked texels lighting/shading, that is altering the color of each texel by either lightening/darkening it depending on its "normal" (depending on the shape, each texel of a flat image is like a small part with a different orientation) related to the main light (sunlight/moonlight in this case)

For a procedurally made grass texture, this could greatly improve the appearance !


RemiD(Posted 2016) [#9]
Here is the result of a procedurally made grasses texture using premade parts (2d shapes) with baked texels lighting/shading (the main light comes always from the same position) :
(see post#10)

It looks rather good imo and since it is made with the same graphics style and the same texel size than the others textures, it fits well in the world (but of course these are not photorealistic graphics...)

I think that i will add baked texels lighting/shading in all the others textures which are used only on a flat shape with always the same orientation (to keep a coherent lighting/shading)

It is like baked/static "bumpmapping"/"normalmapping" ;)


RemiD(Posted 2016) [#10]
for those interested, here are the results of

the gravels texture, with baked texels lighting/shading :
rd-stuff.fr/gravels-with-baked-texels-lighting-shading.png
rd-stuff.fr/gravels-with-baked-texels-lighting-shading-(denser).png

the tiles texture, with baked texels lighting/shading :
rd-stuff.fr/tiles-with-baked-texels-lighting-shading.png
rd-stuff.fr/tiles-with-baked-texels-lighting-shading-(denser).png

the grasses texture, with baked texels lighting/shading :
rd-stuff.fr/grasses-with-baked-texels-lighting-shading.png
rd-stuff.fr/grasses-with-baked-texels-lighting-shading-(denser).png

The great thing is that, in the end, it takes less time to generate your own textures using premade colored shapes (with baked texels lighting/shading) than to have to try to modify a photo/drawing to make it have the same graphics style, colors palette, sharpness, texel size, lighting/shading than the others that you have in your world.
So my current approach is to search for examples of textures of things/materials in google/bing images, then to see which shapes and colors are used and how the lighting/shading is applied on each shape, then to create several similar shapes using, for each shape, a basic material color then to apply baked texels lighting/shading on the shape (using 2 lighter colors and 2 darker colors), then to generate a final texture by positioning shapes randomly in the texture space.


Pakz(Posted 2016) [#11]
I have spend a good amount of time over the years trying to create texture routines that I could use later on.

I have posted my last work here : (with monkeyx code)
http://www.monkey-x.com/Community/posts.php?topic=12746

What I do is like what you do with drawing packages. Create layers on top of each other. This based on steps you for instance would take in gimp to create a texture.

I use an array to store the pictures color information in and then increase/decrease the color based on the pattern it will be merged with. Like rectangles or bars for instance. But could also be a heightmap or other map/pattern.




Derron(Posted 2016) [#12]
- Create a base texture
- create your pattern texture
- multiply the pattern on the base texture
- repeat steps with other patterns if desired
- use the patterns to colorize the base texture (eg. adjust hue of the base pixels)
- ...

Not that complicated and of course easily doable with software rendering (means even "headless")


bye
Ron


RemiD(Posted 2016) [#13]
One thing to keep in mind is that if you add baked texels lighting/shading in each premade part (image), then you can't rotate randomly the part, only position it randomly, so that the lighting/shading looks coherent, as if it was coming from the same main light...

Of course you could code a procedure to texels light/shade each part after it has been rotated, but really it would complicate things a lot...
An easier, faster, alternative imo is to create several different parts, so that, since they will be positioned on top of each other, if there are enough different shapes, in the end it will still look random enough...