PT Forum

Jack Joined: 4th Oct 2004
Location: [Germany]

Posted: 3rd Nov 2015 4:10

Fisheye shader 2:

AGK code:

// Project: Image FOV 
// Created: 2015-11-03

// set window properties
SetWindowTitle( "Image FOV" )
SetWindowSize( 1280, 720, 0 )

// set display properties
dw=1280
dh=720
SetVirtualResolution( dw,dh )
SetOrientationAllowed( 0, 0, 1, 0 )


fovshader=LoadspriteShader("f2.ps" ) 



img=LoadImage("img.png")
spr=CreateSprite(img)
rem spr2=CreateSprite(img)

rem SetSpritePosition(spr2,540,0)
SetSpriteSize(img,1280,720)
SetSpriteShader(spr,fovshader)
SetShaderConstantByName( fovshader, "iResolution", dw , dh, 0, 0 )
SetShaderConstantByName( fovshader, "lensSize",0.3 , 0, 0, 0 )

do
	
	SetShaderConstantByName( fovshader, "iMouse", GetPointerX() , GetPointerX(), 0, 0 )

  // setShaderConstantByName(fovshader, "time", timer(), 0, 0, 0) 


    Print( ScreenFPS() )
    Sync()
loop

f2.ps:

+ Code Snippet

uniform sampler2D tex0;
varying vec2 uvVarying;
 
 
 
float prop = 1.0;
// lens
void main(void)
{
    vec2 p = uvVarying.xy;
    vec2 m = vec2(0.5,0.5);
 
 
    vec2 d = p - m;
   float r = sqrt(dot(d, d)); // distance of pixel from mouse
 
//amount of effect
  float power = ( 2.0 * 3.141592 / (2.0 * sqrt(dot(m, m))) ) *(1.0 / 512.0 - 0.03);
  //radius of 1:1 effect
  float bind;
  if (power &gt; 0.0) bind = sqrt(dot(m, m));//stick to corners
  else {if (prop &lt; 1.0) bind = m.x; else bind = m.y;}//stick to borders
 
    vec2 uv;
// uv = m + d * r*0.5;
      //  uv = m + normalize(d) * sin(r*1.4);
uv = m + normalize(d) * atan(r * -power * 10.0) * bind / atan(-power * bind * 10.0);
 
    vec3 col = texture2D(tex0, uv).xyz;
 
    gl_FragColor = vec4(col, 1.0);
}

Smooth variation:

+ Code Snippet

uniform sampler2D tex0;
varying vec2 uvVarying;
 
 
void main(void)
{
    vec2 m = vec2(0.5,0.5);							// middlepoint
    vec2 d = uvVarying - m;							// distance to middlepoint
    float r = sqrt(dot(d, d));  							//distance to middlepoint
 									
  float power = dot(m, m) *1.5;						//amount of effect
  									//radius of 1:1 effect								
        // vec2 uv = m + normalize(d) * atan(r * -power) * power / atan(-power * power);		// main calculation for the uv offset
 
        vec2 uv = m + normalize(d)*tan(r*power) ;		// main calculation for the uv offset
 
    gl_FragColor = vec4(texture2D(tex0, uv).xyz, 1.0);
}

CJB Joined: 10th Feb 2004
Location: Essex, UK

Posted: 13th Nov 2015 13:34

Preben's 3d fog shader can be found here: https://forum.thegamecreators.com/thread/215787

Blendman Joined: 17th Feb 2014
Location: Arkeos

Posted: 26th Nov 2015 9:00

Hi

A 3D shader : mix two textures (or more) on a mesh.

It's a shader to mix (blend) two textures on an object, for example for a ground.
The first texture should be "plaine "a jpg for example, a texture without alpha if possible), the second texture need alpha (to see the first texture when alpha <255)

Vertex shader :

+ Code Snippet

attribute vec3 position;
attribute vec2 uv;
 
varying vec2 uv0Varying;
uniform vec4 uvBounds0;
 
uniform mat4 agk_World;
uniform mat4 agk_ViewProj;

void main()
{
    vec4 pos = agk_World * vec4(position,1);
    gl_Position = agk_ViewProj * pos;
    uv0Varying = uv * uvBounds0.xy + uvBounds0.zw;
}

Fragment shader :

+ Code Snippet

// constant values sent through from AGK code.
uniform sampler2D texture0; 
uniform sampler2D texture1; 

// Anything that the vertex shader passes as output needs to 
// be defined here as input. The vertex shader is passing the 
// texture coordinate, so it is defined again here.
varying vec2 uv0Varying;
varying vec2 uv1Varying;

void main()
{
  // copy the textures coords
  vec2 texCoord0 = uv0Varying;
  vec2 texCoord1 = uv1Varying;
  
  vec4 colorResult0  = texture2D(texture0, texCoord0);
  vec4 colorResult1  = texture2D(texture1, texCoord0); // you can change here the second uvlayer by texture2D(texture1, texCoord1) if you use different uvchanel for each texture
  
  gl_FragColor = mix(colorResult0, colorResult1, colorResult1.a); // mix with the alpha of the second texture. You can mix with a third texture if you want to use seamless texture and repeat it.
}

And a little example to test :

+ Code Snippet

// create a sphere to see the texture
CreateObjectSphere(1,20,40,60)

// position and orientate the camera
SetCameraPosition(1,0,100,-200)
SetCameraLookAt(1,0,0,0,0)
SetGenerateMipmaps(1)

LoadImage(1,"texture.jpg") // no need for alpha with this one
LoadImage(2,"texture2.png") // with alpha ;)

CreatePointLight(1,-5,5,5,500,200,200,200)

// initial rotation values
angle_x# = 0.0

// main loop
SetObjectRotation(1,-60,-60,0.0)
SetObjectScale(1,4,2,2)
LoadShader(3, "blend.vert", "blend.frag")
SetObjectShader(1,3)
SetObjectImage(1,1,0)
SetObjectImage(1,2,1)

do
	
    angle_x# = angle_x# + 1 
    SetObjectRotation(1,0, angle_x#,0.0)
    sync()

loop

You can easily add other layer to blend several texture if you want.

Blendman Joined: 17th Feb 2014
Location: Arkeos

Posted: 26th Nov 2015 9:38

Hi

Anothe example : the Blending of texture (like blendmode for image).

If you use two textures for some objects, here is a little code to have a multiply blendmode.
You can use an AmbientOcclusion/Shadow Map with this technic (if your second texture has shadow or AO of your scene, of course).

Vertex shader

+ Code Snippet

attribute vec3 position;
attribute vec2 uv;
 
varying vec2 uv0Varying;
uniform vec4 uvBounds0;
 
uniform mat4 agk_World;
uniform mat4 agk_ViewProj;

void main()
{
    vec4 pos = agk_World * vec4(position,1);
    gl_Position = agk_ViewProj * pos;
    uv0Varying = uv * uvBounds0.xy + uvBounds0.zw;
}

Fragment shader :

+ Code Snippet

uniform sampler2D texture0; 
uniform sampler2D texture1; 

varying vec2 uv0Varying;
varying vec2 uv1Varying;
uniform vec4 agk_MeshDiffuse;

void main()
{
     gl_FragColor = texture2D(texture0, uv0Varying) * texture2D(texture2, uv1Varying) * agk_MeshDiffuse;
   // if you want to have a better lighting/brightness, you can multiply *2 your result
}

I know it's very simple, but it's easy to understand how to blend two textures, with the blendmode you want :
- blendmode multiply => gl_FragColor = texture2D(texture0, uv0Varying) * texture2D(texture2, uv1Varying) * agk_MeshDiffuse;

- bledmode add => gl_FragColor = (texture2D(texture0, uv0Varying) + texture2D(texture2, uv1Varying)) * agk_MeshDiffuse;

And so ...

note : theblendmode is only for the textures for the object, not for the objects drawn at the screen.
To change the "blendmode" of an object, we have only 3 blendmode with SetObjectTransparency()
0 = opaque, 1 = transparent, 2 = additive

@29 games : your 3D light doesn't work no more with AGK2.015d, you have to change : agk_ObjColor to agk_MeshDiffuse

Blendman Joined: 17th Feb 2014
Location: Arkeos

Posted: 27th Nov 2015 7:32

Another one (very simple too, but usefull to create some variations on terrain ^^) :
Mix two textures with a mask alpha :

Vertex :

+ Code Snippet

attribute vec3 position;
attribute vec2 uv;
 
varying vec2 uv0Varying;
uniform vec4 uvBounds0;
 
uniform mat4 agk_World;
uniform mat4 agk_ViewProj;

void main()
{
    vec4 pos = agk_World * vec4(position,1);
    gl_Position = agk_ViewProj * pos;
    uv0Varying = uv * uvBounds0.xy + uvBounds0.zw;
}

Pixel/fragment :

+ Code Snippet

// constant values sent through from AGK code.
uniform sampler2D texture0; 
uniform sampler2D texture1; 
uniform sampler2D texture2; // mask 

varying vec2 uv0Varying; // uv

void main()
{
  // copy the textures coords
  vec2 texCoord0 = uv0Varying;
  vec4 colorResult0  = texture2D(texture0, texCoord0);
  vec4 colorResult1  = texture2D(texture1, texCoord0);
  vec4 colorResult2  = texture2D(texture2, texCoord0);
  
  gl_FragColor = mix(colorResult0, colorResult1, colorResult2.a); // mix with the alpha of the second texture. You can mix with a third texture if you want to use seamless texture and repeat it.
}

Blendman Joined: 17th Feb 2014
Location: Arkeos

Posted: 27th Nov 2015 10:43

Another one :
The beautiful Rim-light/fall-off effect

+ Code Snippet

Vertex shader :
/*
Rim lighting vertex shader, Written by TheSnidr
Adapted by blendman for AGK
*/
attribute vec3 position;
attribute vec3 normal;
varying vec4 colorVarying;
varying vec3 posVarying;
uniform vec4 agk_MeshDiffuse;

attribute vec2 uv;
uniform vec4 uvBounds0;
varying vec2 uv0Varying;
varying float dp;

uniform mat4 agk_WorldViewProj;
uniform mat4 agk_World;
uniform mat4 agk_ViewProj;
uniform mat3 agk_WorldNormal;

void main()
{
     vec4 pos = agk_World * vec4(position,1);
     gl_Position = agk_ViewProj * pos;  
     uv0Varying = uv * uvBounds0.xy + uvBounds0.zw;
	
     vec3 norm = agk_WorldNormal * normal;
     vec3 wvPosition = normalize((agk_WorldViewProj * vec4(position, 1.0)).xyz);  
     vec3 wvNormal = normalize((agk_World * vec4(normal, 0.0)).xyz);
     float power = 5.0; //Increase to reduce the effect or decrease to increase the effect
     dp = pow(dot(wvPosition, wvNormal)+1.0, power);		
}

Fragment / pixel shader :

+ Code Snippet

/*
Original Rim lighting fragment shader, Written by TheSnidr
Modified by blendman for AGK2 
*/
varying float dp;
uniform sampler2D texture0; 
varying vec2 uv0Varying;
uniform vec4 agk_MeshDiffuse;

void main()
{
	gl_FragColor = texture2D(texture0, uv0Varying) * agk_MeshDiffuse + dp;
}

And the result :

Blendman Joined: 17th Feb 2014
Location: Arkeos

Posted: 27th Nov 2015 13:09

Another one : Spherical environment mapping.
If you use some particular texture, you can have some good effect (the rim-light effect can be created with spheremapping shader).
Shader written by TheSnidr (like rim-light shader), adapted by me for AppGameKit

Vertex :

+ Code Snippet

/*
Spheremapping vertex shader, Written by TheSnidr
Adapted by blendman for AGK
*/
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;

uniform mat4 agk_WorldViewProj;
uniform mat4 agk_World;
uniform mat4 agk_ViewProj;
uniform vec4 uvBounds0;

varying vec2 uv0Varying;

void main()
{
	vec4 pos = agk_World * vec4(position,1);
	gl_Position = agk_ViewProj * pos;  
       uv0Varying = normalize((agk_WorldViewProj * vec4(normal, 0.0)).xyz).xy / 2.0 + 0.5;
}

Fragment :

+ Code Snippet

uniform sampler2D texture0; 
varying vec2 uv0Varying;
uniform vec4 agk_MeshDiffuse;

void main()
{
    gl_FragColor = texture2D(texture0, uv0Varying) * agk_MeshDiffuse;
}

Result :

A metalic effect, if you change a little the vertex shader :

+ Code Snippet

attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;

uniform mat4 agk_World;
uniform mat4 agk_ViewProj;
uniform vec4 uvBounds0;

varying vec2 uv0Varying;

void main()
{
     vec4 pos = agk_World * vec4(position,1);
     gl_Position = agk_ViewProj * pos;     
     uv0Varying = normalize((agk_World * vec4(normal, 0.0)).xyz).xy + 1.0 ;
}

Result :

BatVink Joined: 4th Apr 2003
Location: Gods own County, UK

Posted: 27th Nov 2015 17:02

Nice, keep 'em coming!!!

Blendman Joined: 17th Feb 2014
Location: Arkeos

Posted: 28th Nov 2015 9:44

Hi
I have just played and changed some parameters in the shader I've posted ( Spherical environment mapping) and we can get some awesome FX with AGk if we mix two textures

Blendman Joined: 17th Feb 2014
Location: Arkeos

Posted: 2nd Dec 2015 7:08

Hi

Just a simple shader (1 point light, 1 directionnal light) for users who haven't used the shaders with agk yet.
The code for vertex and shader is from Paul

.

- you need to create 2 files : shader.ps, shader.vs, place it in your media folder. These files areused by your shader.
NOTE : please use notepad or equivalent appli on mac/linux. The file should be in unicode (I think).

Shader.ps

+ Code Snippet

uniform sampler2D texture0;
 
uniform vec4 agk_MeshDiffuse;
uniform vec4 agk_PLightColor;
uniform vec4 agk_PLightPos; // x,y,z = position, w = light range
 
uniform vec3 ambient; // ambient light
uniform vec3 DLightColor;
uniform vec3 DLightDir;
 
varying vec3 normalVarying;
varying vec3 posVarying;
varying vec2 uv0Varying;
varying vec2 uvNormal;
 
void main()
{
 
    vec3 dir = (agk_PLightPos.xyz - posVarying);
    vec3 norm = normalize(normalVarying);
  
    // calculate point light attenuation for this pixel
    float atten = dot(dir,dir);
    float lightRange = agk_PLightPos.w;
    atten = clamp(lightRange/atten,0.0,1.0);
      
    // calculate point light instensity for this pixel
    float intensity = dot(normalize(dir),norm);
    intensity = clamp(intensity,0.0,1.0);
      
    // add point light color
    vec3 color2 = ambient + agk_PLightColor.rgb * intensity * atten;
      
    // add directional light color
    color2 = color2 + clamp(dot(-DLightDir,norm)*DLightColor.rgb,0.0,1.0); 
    color2 = clamp(color2,0.0,1.0); 
      
    // multiply light with texture and object color
    gl_FragColor = texture2D(texture0, uv0Varying) * vec4(color2,1.0) * agk_MeshDiffuse;
 
}

Shader.vs :

+ Code Snippet

attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
 
uniform mat3 agk_WorldNormal;
uniform mat4 agk_World;
uniform mat4 agk_ViewProj;
uniform vec4 uvBounds0;
 
varying vec3 normalVarying;
varying vec3 posVarying;
varying vec2 uv0Varying;
 
void main()
{
    vec4 pos = agk_World * vec4(position,1);
    gl_Position = agk_ViewProj * pos;  
    posVarying = pos.xyz;
    vec3 norm = agk_WorldNormal * normal;
        normalVarying = norm;   
    uv0Varying = uv * uvBounds0.xy + uvBounds0.zw;  
}

The AppGameKit code :

+ Code Snippet

// Project: 3D_shader_light 
// Created: 2015-12-01
 
// set window properties
SetWindowTitle( "3D_shader_light" )
SetWindowSize( 1024, 768, 0 )
 
// set display properties
SetVirtualResolution( 1024, 768 )
SetOrientationAllowed( 1, 1, 1, 1 )
SetClearColor(150,150,150)
 
// create a sphere to see the texture
CreateObjectSphere(1,50,40,60)
 
// position and orientate the camera
SetCameraPosition(1,50,100,-200)
SetCameraLookAt(1,0,0,0,0)
SetGenerateMipmaps(1)
 
LoadImage(1,"texture.jpg")
LoadShader(1, "shader.vs", "shader.ps")
SetObjectShader(1,1)
SetObjectImage(1,1,0)
SetShaderConstantByName(1,"DLightDir",-0.3,-0.3,0.7,0.0) // direction
SetShaderConstantByName(1,"DLightColor",1,0.5,0,0.0) // rgb : 0 to 1.0
SetShaderConstantByName(1,"agk_PLightPos",10,10,10,50) // position of the point light (x,y,z)+ range
SetShaderConstantByName(1,"agk_PLightColor",0,0,1,0.0) // blue color
SetShaderConstantByName(1,"ambient",0.2,0.2,0.2,0.0) // ambient color
 
do
     
    sync()
 
loop

BatVink Joined: 4th Apr 2003
Location: Gods own County, UK

Posted: 2nd Dec 2015 9:11

Thank you , that is more useful than you could ever imagine!
I am the complete noob with shaders.

Blendman Joined: 17th Feb 2014
Location: Arkeos

Posted: 2nd Dec 2015 9:34

@Batvink

Another usefull thread for shaders :
https://forum.thegamecreators.com/thread/214611

Paul Johnston Joined: 16th Nov 2002
Location: United Kingdom

Posted: 12th Dec 2015 17:30

For those interested I've changed the light attenuation calculation since writing those shaders to make lights falloff slightly slower, meaning they don't create a bright spot and then don't light much else.

To use the new calculation replace the line

+ Code Snippet

atten = clamp(lightRange/atten,0.0,1.0);

with

+ Code Snippet

atten = max(0.0, 1.0 - atten/(lightRange*lightRange));
atten *= atten; 
atten *= atten;

Blendman Joined: 17th Feb 2014
Location: Arkeos

Posted: 14th Jan 2016 10:20

HI

A new simple shader :
Tilled UV offset (with movement if needed)

uvoffset.vs :

+ Code Snippet

attribute vec3 position;
attribute vec2 uv;
uniform vec2 Move;
varying vec2 uvVarying;
varying vec3 posVarying;
uniform mat4 agk_World;
uniform mat4 agk_ViewProj;
uniform vec4 uvBounds0;
 
void main()
{ 
    vec4 pos = agk_World * vec4(position,1.0);
    gl_Position = agk_ViewProj * pos;   
    posVarying = position.xyz;
    uvVarying = (uv * uvBounds0.xy + Move) + uvBounds0.zw;
}

uvoffset.ps :

+ Code Snippet

uniform sampler2D texture0;
uniform vec4 agk_MeshDiffuse;
varying vec2 uvVarying;

void main()
{
    gl_FragColor = (texture2D(texture0,uvVarying) * agk_MeshDiffuse);
}

example of use (if you want a texture sliding in y) :

+ Code Snippet

// Project: 3D_uvoffset 
// Created: 2016-01-14

// set window properties
SetWindowTitle( "3D_uvoffset" )
SetWindowSize( 1024, 768, 0 )

// set display properties
SetVirtualResolution( 1024, 768 )
SetOrientationAllowed( 1, 1, 1, 1 )

LoadImage(1,"water.png")
SetImageWrapU(1,1)
SetImageWrapV(1,1)

LoadShader(1,"uvoffset.vs","uvoffset.ps") // shader for moving texture

// water (test)
water = CreateObjectbox(100,5,100)
SetObjectColor(water,100,100,250,255)
SetObjectImage(water,1,0)
SetObjectShader(water,1)
SetObjectPosition(water,0,0.2,0)

SetCameraPosition(1,0,150,-20)
SetCameraLookAt(1,0,-5,0,0)

b# = 0
do
    
        b# = b# + 0.005
	if b# &gt; 1
		b = 0
	endif
	SetShaderConstantByName(1,"Move",0,b#,1,1)
	
	
    if GetRawKeyPressed( 27 ) 
        end
    endif
    
    Print( ScreenFPS() )
    
    Sync()
loop

haliop_New Joined: 1st Jan 1970
Location: Oblivion

Posted: 15th Jan 2016 0:20

MAN AppGameKit forum is incredible !!!!!!!!

though I do have one request and I'm sorry if this sounds a bit wrong...

but could you please when posting new shaders make a zip file containing the shader files in the media folder and the actual agk code file
cause still shaders are extremely hard for me to grasp and how to use them with Render to Image and such...

really sorry for this request it is really hard for me :/

Zwarteziel Joined: 22nd Jan 2011
Location: Netherlands

Posted: 15th Jan 2016 7:51

illed UV offset (with movement if needed)

@Blendman;
thank you very much for this shader! Would you be willing to answer a question? I would like to animate a character by showing portions of a texture that are moved around by the shader. Currently, the whole texture is displayed on an object while it moves along the UV-coordinates. Is it possible to clip a specific segment from the entire texture?

@Haliop_New:
I've added a file containing an example-project for you, made with Blendman's latest shader. I've added comments to explain what is going on.

Blendman Joined: 17th Feb 2014
Location: Arkeos

Posted: 15th Jan 2016 9:34

@ZeroTown :
I don't know if you can do such a thing easily.
If I have understand, you want to change the uvmapping of your model or the scissor of your texture. I don't know how to change the uvmapping with a 3D shader.

But I think you could do that with an alpha texture (as a mask), it's not a great method but it could work :
- use your diffuse texture as texture0
- use your 2nd diffuse texture as texture1 (the clipped image)
- use your alpha mask as texture2 (your alpha texture should be bigger (Im' not sur of that) than your diffuse texture)
- change the size/position your alpha texture with : uv1Varying = (uv * uvBounds0.xy*newsize + newpos) + uvBounds0.zw * newsize;
newpos : the position of your alpha texture
newsize : the size (your clipping surface)

I have attach a zip with a code test, I hope this will help you (I don't know if it's that example that your want)

@Haliop_New :
For my next example, I will post a zip

There are 3 kind of Shaders :
- 2D shaders : to use with sprite
- 3D shaders : to use on 3D objects
- Fullscreen : to use with a renderImage

1) How to use a Sprite Shader :
You need a shader made for a sprite. A 3D shader or a fullscreen doesn't work with a sprite

+ Code Snippet

LoadShader(1,"spriteshader.vs","spriteshader.ps")
LoadImage(1,"yourimage.png")
CreateSprite(1,1)
SetSpriteShader(1,1)

2) How to use a 3D shader (for 3d object) :
You need a shader that can be used on a 3D model.

+ Code Snippet

LoadShader(1,"3Dshader.vs","3Dshader.ps")
LoadImage(1,"yourimage.png")
LoadObject(1,"yourobject.obj") // format 3D can be : .dae, .x, .obj, .blend....
SetObjectImage(1,1,0)
SetObjectShader(1,1)

2) How to use a Fullscreen shader (use it on renderImage) :
It's more complex. You have a full example named "Bloom" in your example files (AGK directory)

To simplify (it's very very simplified) :
- You have to load your fullscreen shader with LoadShader(1,"FullscreenShader.vs","FullscreenShader.ps")
- You have to create a renderImage()
- set the shader on the image
- render() and swap() your scene (don't use sync()).

For more information, please see the example named "bloom.agk" in the AppGameKit directory/shaders

Zwarteziel Joined: 22nd Jan 2011
Location: Netherlands

Posted: 15th Jan 2016 16:39

I have attach a zip with a code test, I hope this will help you (I don't know if it's that example that your want)

@Blendman:
Wow, you just whipped that example up? Impressive! It actually does more than I what I tried to convey

It's a bit difficult for me to explain, since English isn't first language. I'll try to code something this weekend using your example and will post the results. Thank you once more for your time!

Green7 Joined: 23rd Nov 2005
Location: Switzerland

Posted: 17th Jan 2016 19:41

hello! I have a question: is it possible to have a 2D shader for sprites including directional shadows and directional normal maping? all from one light source, like a sun? or, if it is less difficult, a normal mapping shader with one directional and several point lights? or even alltogether? shaders are something mysterious to me...

Zwarteziel Joined: 22nd Jan 2011
Location: Netherlands

Posted: 17th Jan 2016 21:14

I did some digging regarding my earlier question if it was possible to load a sprite-sheet, and show parts of it as a texture (so a 3D-plane appears to be animated). Turns out Lillpissywilly (I hope I spelled that correct

) had posted a shader that could be used for this purpose. I modified it to work with AGK2 and wrote an example for everybody. Sprites curtesy of Curt - cjc83486 http://opengameart.org/content/rpg-character.

<1 2 3 4 5 ...14 >

Sign In