Shader Tutorial

[Andy90]

Hello  i want to ask if there is any tutorial to create own shaders with GLSL in Leadwerks?

[havenphillip]

I don't think there's an official tutorial or anything but I made a tutorial on how to convert from Shadertoy to Leadwerks. If you look around the community you can find things here and there.  Also I made a blog with a bunch of different shaders you can grab. Once you get the hang of them you should be able to figure them out.
 

 

...and the blog:

 

 

[Thirsty Panther]

Philips tutorials are very good.

Another good source is nice.aces video series.

 

[Andy90]

Thanks   i starting to read all the tutorials  i think if im able to create own shader in leadwerks and afterwards in ultimate it would be realy helpful.

[Andy90]

On 9/30/2023 at 12:27 AM, havenphillip said:

I don't think there's an official tutorial or anything but I made a tutorial on how to convert from Shadertoy to Leadwerks. If you look around the community you can find things here and there.  Also I made a blog with a bunch of different shaders you can grab. Once you get the hang of them you should be able to figure them out.
 

...and the blog:

I made this tutorial but my shader ist just black

Fragment Shader

#version 400

out vec4 fragData0;

uniform vec2 buffersize;
uniform float currenttime;
uniform sampler2D texture0;


void main()
{
	vec2 q = gl_FragCoord.xy/buffersize.xy;
    vec2 p = -1.0+2.0*q;
	p.x *= gl_FragCoord.x/buffersize.y;

    vec3 col = vec3(0.0, 0.0, 0.0);
	
	// Rain
	vec2 st =  p * vec2(.5, .01)+vec2(currenttime*.3-q.y*.6*-0.0, currenttime*.3);
    float f = floor(mod(currenttime/9., 2.0));
	f = texture(texture0, st).y * texture(texture0, st*.773).x * 1.55;
	f = clamp(pow(abs(f), 23.0) * 13.0, 0.0, q.y*.14);
	col += f;
    fragData0=vec4(col, 1.0 );
}

Vertex Shader
 

#version 400

uniform mat4 projectionmatrix;
uniform mat4 drawmatrix;
uniform vec2 offset;
uniform vec2 position[4];

in vec3 vertex_position;

void main(void)
{
    gl_Position = projectionmatrix * (drawmatrix * vec4(position[gl_VertexID]+offset, 0.0, 1.0));
}

and here is the source Simple rain (shadertoy.com)

[reepblue]

Read your compile errors. Simply looking at your code, you need to define texrture0. 

Not a shader expert, but I made my shaders by trial and error.  

[klepto2]

Read the comment on shadertoy: change this line 

fragData0=vec4(col, 1.0 );

to 

fragData0=vec4(col * 4.0, 1.0 );

and you should be able to see the effect.

[havenphillip]

Ok so you set the "col" to vec3(0,0,0) that's where the black is coming from. You're sort of just trying to add the effect over a black screen. The screencolor texture for post effect shaders is texture1. That gives you the standard screen.  Set it instead to:

 

uniform sampler2D texture1; //color

...

vec3 col = texture(texture1, q ).xyz;
 

[klepto2]

 

1 hour ago, havenphillip said:

Ok so you set the "col" to vec3(0,0,0) that's where the black is coming from. You're sort of just trying to add the effect over a black screen. The screencolor texture for post effect shaders is texture1. That gives you the standard screen.  Set it instead to:

uniform sampler2D texture1; //color

...

vec3 col = texture(texture1, q ).xyz;
 

While this is true, it isn't needed in this case. The shader on shadertoy also just uses a black background, which might be what he currently wants. The blending with the actual background is not yet the problem.  The problem is, that the calculated value for 'f' is just to low to be recognized in the output. a multiplication by 2.0 or 4.0 will move the rain into a more visible spectrum. 

Another problem might be the pfx lua script. This would be nice to see as well to figure out if the noise texture is correctly bound.

[klepto2]

But i agree, with the proper background the rain would be visible without the need of muliplication.

[havenphillip]

@klepto2 I'm quite certain you know more about this stuff so I defer to you. I just assumed. If it was me I'd try to find a rain shader that uses noise instead of going through a script with the noise buffer.

[klepto2]

1 minute ago, havenphillip said:

@klepto2 I'm quite certain you know more about this stuff so I defer to you. I just assumed. If it was me I'd try to find a rain shader that uses noise instead of going through a script with the noise buffer.

yeah, that is what most users do with shadertoy shaders. But gpu noise is far too expansive to be used in realtime scenarios (espacially when it is a game or so) It is always better to use a noise texture than to calculate the noise with the various available noise methods for glsl. 

1. Performance: noise calculation on the gpu is much (and i mean very much) slower than a simple texture lookup.

2. low end hardware: most noise mehtods have something like this: 

float hash( vec2 p ) {
	float h = dot(p,vec2(127.1,311.7));	
    return fract(sin(h)*43758.5453123);
}

but this will result in unexpected results on low end hardware (espacially integrated gfx)

[Andy90]

Okey i miss the noise texture. So in this case i need to create the shader itself and a lua post effect wich loads the noise texture in the shader itself right? But how can i set the texture? I searched within the documentation but there is nothing to set a texture.

[Andy90]

Seems to work now...at least a bit. But there are some artifacts wich looking not that good at all

Do someone knows why ?

[klepto2]

You can upload the pfx and textures here, and i can look at it if you want.

[Andy90]

sure here he is. 

 

RainShader.zip

[klepto2]

 

Try this: i have added the diffuse layer, so the background is visible.

1. I changed the noise texture to the one used by shadertoy (using other textures might lead to artifacts)

2. I corrected the aspect ratio calculation you had p.x*= gl_FragCoord.x / buffersize.y; where is should be  p.x*= buffersize.x / buffersize.y;

Effect.zip

[Andy90]

Wow, this looks perfect. Thank you so much. Do you happen to know why there were artifacts? Was it due to the texture?

[klepto2]

the noise texture was ok, the other noise texture i use is closer to the original.

The artifacts came from this line: 

p.x *= gl_FragCoord.x/buffersize.y;

this: should have been:

p.x *= buffersize.x/buffersize.y;

this line calculates the aspect ratio and if you use gl_FragCoord.x it is dependend on the pixel position which leads to the artifacts you have seen.

[Andy90]

Ah, okay, this makes sense. I'm relatively new to shaders. It's a fascinating aspect of game development, so I'm trying to grasp what's happening rather than just copying and pasting. I believe that being able to create your own shaders is a significant skill that opens up a world of possibilities. Thanks all again for your help.