News:

Masm32 SDK description, downloads and other helpful links
Message to All Guests

Main Menu

Fun with Pixel Shaders and maths

Started by Siekmanski, February 07, 2018, 09:23:15 AM

Previous topic - Next topic

Siekmanski

These are my first steps into the world of Pixel Shaders.
Suggestions and/or remarks are always welcome.

My goal was to use pixel shaders in Direct3D9.
Unfortunately d3d9.dll ( which is standard present on all windows operating systems from 2003 till now ) doesn't have a shader compiler function.
The fully functional DirectX9 shader compiler function for shader version 3.0 is available in the wrapper libs D3DX9_32.dll up to D3DX9_43.dll.

So I programmed a small ShaderCompiler program that searches if one of the 12 D3DX9_xx.dlls is available on the developers computer and calls the compiler function by using "LoadLibrary" and "GetProcAddress".
The compiled pixel shader code can be saved as pre-compiled GPU code.

The pre-compiled GPU code can be included and executed from your program without the presence of one of the 12 D3DX9_xx.dlls on the end-users computer.
This way we don't bother the end-user with missing D3DX9_xx.dll messages.

As a pixel shader developer your computer must have at least one of the 12 D3DX9_xx.dlls present to compile the pixel shader code.

You can download the latest DirectX9 End-User Runtimes here:
DirectX End-User Runtimes (June 2010)
https://www.microsoft.com/en-us/download/details.aspx?id=8109

Shadertoy, https://www.shadertoy.com/ is a great source to learn pixel shader progamming.
At this moment there are more than 20.000 examples.
You have to convert the WebGL or GLSL to DirectX9 HLSL or GPU assembly.

Here are some great Youtube Video tutorials:
Shadertoy for absolute beginners https://www.youtube.com/watch?v=u5HAYVHsasc&t=829s

The following 3 examples are also in the source code attachment (converted to HLSL),

Simple3D -> https://www.youtube.com/watch?v=dKA5ZVALOhs
Camera3D -> https://www.youtube.com/watch?v=PBxuVlp7nuM
Tutorial palm tree -> https://www.youtube.com/watch?v=0ifChJ0nJfM

A great site about ray-marching:
http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/

The attachment contains 2 sources,
The ShaderCompiler source and the ShaderWindow source to execute the pre-compiled pixelshader.

There are 22 examples, most of them I have converted to HLSL from shadertoy examples.
Creative coders use backward thinking techniques as a strategy.

avcaballero

Siekmanski, thank you for the stuff and resources. Great work. I'll have a close look when I have time :t

Amazing demos!

daydreamer

Great work Marinus  :t
is kinda CPU coded perlin noise procedural easiest to port to pixelshaders?
my none asm creations
https://masm32.com/board/index.php?topic=6937.msg74303#msg74303
I am an Invoker
"An Invoker is a mage who specializes in the manipulation of raw and elemental energies."
Like SIMD coding

aw27

Nice demos  :t
The usual stupid question: Why don't you use the 8 years old dx11 instead of the 16 years old dx9? You could reduced the number of shader compilers to 2, I believe.

Siekmanski

@aw27, I like to keep things as small and simple as possible.
Because dx9 also is available on XP and dx11 doesn't, dx9 don't need additional ddl's installed the way I use it.

@daydreamer2, yes it can be done.
Here's an example of procedural Perlin Noise,
Creative coders use backward thinking techniques as a strategy.

avcaballero

Siekmanski, you are gaining a place next to the programmers' iron throne

jj2007

Quote from: caballero on February 08, 2018, 03:27:09 AM
Siekmanski, you are gaining a place next to the programmers' iron throne
Right :t

avcaballero

Hello. This is my first attemp to pixel shaders programming. Here is a stupid example did in a hurry using the Siekmanski's pixel shaders compiler in D3D. Source code included.

I'd like to make any other more complex example. But there are many unknown things for me still as how to make random numbers and how to get colors from other rows/columns than the actual.

Regards.

Siekmanski

It is handy and logical to treat every window resolution as if they have all the same width and height.
By normalizing the screen viewport coordinates ( fragCoord.xy / iResolution.xy ) the width and height are both from 0.0 to 1.0. So coordinate 0.5,0.5 is exactly in the middle of the screen regardless the window resolution.
Pixel shaders are different in the way we normally paint a pixel on the screen just by telling to paint it at coordinate 100,230.
Now Pixel shaders:
ps_main is called for every pixel in the window, starting at left-top position (0.0,0.0) tracing all scanlines till right-bottom (1.0,1.0). You decide what color you paint at the current position given by the ps_main routine.
And of course you want to do that by using fancy math formulas.  :t
I wondered that myself and tested this by writing the Basic HLSL examples, look at the Basic3.hlsl example.

Made a sort of fake random generator,
Creative coders use backward thinking techniques as a strategy.

avcaballero

Nice!

The "main" routine always returns a color for the fragCoord.xy to paint it in some canvas. What I want also is getting the color I have already painted in some coordinate here. I have thought on making a matrix for that, but maybe there is any other simpler way.

Siekmanski

Don't know, I'm just like you a beginner in pixel shading.
At the beginning I have studied the YouTube tutorials ( links in my first post ) to get an idea how pixel shaders behave.
To create something we have to do some backwards thinking I guess. In fact this is a logical, fast and short way to solve complex stuff.
I already use this approach for a long time, when I code new routines.
I'll try to explain what I mean by this. ( if you could understand Dutch it would be easier for me  :biggrin: )

A stupid example but I hope you get my drift:

A = the bottom of a tree.
B = one of the many leaves on that tree.

Q: How to find the shortest way between A and B?

From A to B, you get lost when choosing the wrong branches to reach the particular leaf at B and have to go back and start over again and over again until you get to the right leaf at B.

From B to A, you never get lost on a wrong branch because you have only one branch to choose from and end up in a straight way to A.

In pixel shader code this is kind of the same strategy because you know at the start where to paint the pixel, so work your way back to decide what color you want there.
Creative coders use backward thinking techniques as a strategy.

Raistlin

#11
Sounds like you are like me, Aspergers... Passion
dictates pseudo idealism and then solution follows.....If not,
must be as all else (comments) says, PURE Genius.  :greenclp:
PPS: I do not mean one is exclusive of the other, that would be like
telling myself I am brilliant and stupid at the same time. Come to think of it....
possibly the correct diagnosis.   
Are you pondering what I'm pondering? It's time to take over the world ! - let's use ASSEMBLY...

Siekmanski

My wife and my friends often call me an idiot.  :biggrin:
Creative coders use backward thinking techniques as a strategy.

avcaballero

Well, it is easy, just use a matrix as double buffer. Just wonder if there is a standard way to get the color, not just to set it. Never mind... I'll try to do it when I have some time.

> if you could understand Dutch...
My God, I think I'm too old for that :lol:. Some years ago I shared a flat with some Erasmus Germans, they just taught me to say some swear words :greensml:. Fortunately, they spoke Spanish very well. One day they forced us to read a text in German to an American and me while they were videotaping us. I do not know how someone can read so many consonants together  :shock:.

Siekmanski

Quote from: caballero on February 11, 2018, 09:12:24 AM
Well, it is easy, just use a matrix as double buffer. Just wonder if there is a standard way to get the color, not just to set it. Never mind... I'll try to do it when I have some time.

It is possible to create a texture in floating point format and use that as a lookup table and access it from the pixel shader.
This is very fast because you can place in video memory.
I'll implement textures in the next week when time permits. I think it's cool to do texture deformations with the pixel shader.  8)

Quote
> if you could understand Dutch...
My God, I think I'm too old for that :lol:. Some years ago I shared a flat with some Erasmus Germans, they just taught me to say some swear words :greensml:. Fortunately, they spoke Spanish very well. One day they forced us to read a text in German to an American and me while they were videotaping us. I do not know how someone can read so many consonants together  :shock:.

:lol:
Then I would let you read these long Dutch words,
aansprakelijkheidswaardevaststellingsveranderingen ( 50 chars translation: liability value changes )
This one is cool,
Hippopotomonstrosesquippedaliofobie ( 35 chars translation: phobia for long words )

Longest Dutch palindrome,
koortsmeetsysteemstrook. ( 23 chars translation: fever measurement system strip )
Creative coders use backward thinking techniques as a strategy.