Shaders Where to begin with shaders?

T

Toxicosis

Guest
Hello,

I'm gonna try something simple for starters, writing a shader that turns the whole sprite black, and another that turns the whole sprite white. However, I don't even know where to begin.

Where can I learn how to use shaders?
 

jo-thijs

Member
Create a new shader.
You'll see a tab saying vertex and a tab saying fragment.

The code you see in vertex is executed for every vertex you're drawing.
If you're drawing a plain sprite, vertices correspong to the corners of this sprite.
The code in the vertex tab transforms the current vertex (from one with coordinates in the room) to a new vertex (with coordinates on screen).
The input vertex (in_Position) has 3 coordinates: x, y and z.
The output vertex (gl_Position) has 4 coordinates: x, y, z and a fourth coordinate to be able to work with projective geometry.

Along with the vertices you specify in the vertex shader, you can also specify some "varying" variable values per vertex.
For example, you can specify a color for every vertex to create a gradient or you could specify a texture coordinate for every vertex to draw a sprite.
Because everything you draw is made up of either points, lines or triangles and because the vertices of these shapes are exactly the corners,
every point that is being drawn is actually an interpolation (a weighted sum with a total weight of 1) of the given vertices.
The varying variables will interpolate their values in just the same way.
If you're drawing a triangle with vertices v1, v2 and v3 and you have a varying variable alpha that is 0 in v1, 0.25 in v2 and 1 in v3,
then alpha will be (0 + 0.25 + 1) / 3 in the middle of the triangle and it will be (0 + 1) / 2 in the middle of v1 and v3.

The code you see in fragment is executed for every pixel that is being drawn.
You get the result of every varying variable in the current pixel and you need to specify the final color and alpha value that will be drawn.
You specify this in the variable gl_FragColor, which has 4 components: a red, a green, a blue and an alpha component.

This means that if you want to draw a sprite entirely black, you just need to change this line in the fragment code:
Code:
    gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord );
to this:
Code:
    gl_FragColor = vec4(0.0, 0.0, 0.0, v_vColour.a * texture2D(gm_BaseTexture, v_vTexcoord).a);
And to make it white:
Code:
    gl_FragColor = vec4(1.0, 1.0, 1.0, v_vColour.a * texture2D(gm_BaseTexture, v_vTexcoord).a);
Are you familiar with typed languages, such as C or java?
In that case, you'll probably learn all that's left pretty quickly.
 
T

Toxicosis

Guest
Thank you all kindly.

I tried to fiddle with it myself a wee whit. I got it made, jo-thijs, though of course, not as efficiently as yourself. I modified one of the grayscales in the tutorial section.
And I do have C experience, but it's been gone for half a decade almost. I'll get a refresher now.

Code:
varying vec2 v_vTexcoord;
varying vec4 v_vColour;

void main()
{
     vec4 v_pre= v_vColour * texture2D( gm_BaseTexture, v_vTexcoord ); //this is the output.
     gl_FragColor = vec4(0,0,0,v_pre.a);
}
Thank you all for your assistance. I'll try not to disappoint.
 
Top