PT Forum

fubarpk Joined: 11th Jan 2005
Location: AGK is my friend

Posted: 2nd Jun 2023 1:48

The following code adds shader positioning as world coordinates relative to the screen

vec2 center = vec2(0.5,0.5);
vec2 p= ((gl_FragCoord.xy+agk_spritesize.xy)*center/agk_resolution)

[s]What i require help with is the shader code changed so as its on relative to the sprite, whenever i feel i get close it just shows a white sprite
it may need a vs shader aswell im not really sure[/s]
this is the ps shader now edited and working as desired a few minor mods to come i needed to work with uvvarying better for those interested

+ Code Snippet

#ifdef GL_ES
precision mediump float;
#endif
#extension GL_OES_standard_derivatives : enable
uniform vec2 agk_resolution;
uniform float time;
uniform sampler2D texture0; 
varying mediump vec2 uvVarying;

float snoise(vec3 uv, float res)
{
	const vec3 s = vec3(1e0, 1e2, 1e3);
	
	uv *= res;
	
	vec3 uv0 = floor(mod(uv, res))*s;
	vec3 uv1 = floor(mod(uv+vec3(1.), res))*s;
	
	vec3 f = fract(uv); f = f*f*(3.0-2.0*f);

	vec4 v = vec4(uv0.x+uv0.y+uv0.z, uv1.x+uv0.y+uv0.z,
		      	  uv0.x+uv1.y+uv0.z, uv1.x+uv1.y+uv0.z);

	vec4 r = fract(sin(v*1e-1)*1e3);
	float r0 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);
	
	r = fract(sin((v + uv1.z - uv0.z)*1e-1)*1e3);
	float r1 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);
	
	return mix(r0, r1, f.z)*2.-1.;
}

void main() 
{
	
	vec2 center = vec2(0.5,0.5);
    	vec4 col = texture2D(texture0, uvVarying);
	vec2 p=vec2(uvVarying-center);
	if (col.a &lt; 0.2)
	{	
	float color = 3.0 - (3.*length(2.*p));
	
		vec3 coord = vec3(atan(p.x,p.y)/6.2832+.5, length(p)*.4, .5);
	
		for(int i = 1; i &lt;= 7; i++)
		{
			float power = pow(2.0, float(i));
			color += (1.5 / power) * snoise(coord + vec3(0.,-time*.05, time*.01), power*16.);
		}
		gl_FragColor = vec4( color, pow(max(color,0.),2.)*0.4, pow(max(color,0.),3.)*0.15 , 1.0);
	}else{
		//gl_FragColor = vec4(0,0,0,0);
		gl_FragColor = col;
	}
}

the code i use to test it

+ Code Snippet

image=loadimage("4.png") //any image surrounded by transparency
LoadSpriteShader(sh,"flame.ps")
spr=createSprite(image)
SetSpritePosition(Spr, 0, -128)
SetSpriteShader(spr,sh)
SetShaderConstantByName(Sh,"resolution",512,512,0,0)
do
      SetShaderConstantByName(sh,"time",Timer(),0,0,0) 
       sync()
loop

fubarpk Joined: 11th Jan 2005
Location: AGK is my friend

Posted: 2nd Jun 2023 3:34

an example of what it looks like for a banner without the animation

it looks much better ofcourse which a sprite that fills out a square area better leaving the edges for the effect

Game_Code_here Joined: 2nd Jun 2020
Location:

Posted: 2nd Jun 2023 4:28

That is pretty cool, thank you

fubarpk Joined: 11th Jan 2005
Location: AGK is my friend

Posted: 2nd Jun 2023 5:15

Your welcome

to make the shader more useful i made it so as you could use with animated sprites
to do so you will now need to add SetShaderConstantByName(sh,"center",0.5,0.5,0,0)
when you are setting up you sprite the 0.5 values are required to be just that for non animated sprites
for animated sprites it will be some value less ie a percentage of 0.5 depending on your
number of frames. it may not work with an odd number of frames but worked for my testing
purposes

+ Code Snippet

#ifdef GL_ES
precision mediump float;
#endif
#extension GL_OES_standard_derivatives : enable
uniform vec2 agk_resolution;
uniform float time;
uniform vec2 center;
uniform sampler2D texture0; 
varying mediump vec2 uvVarying;

float snoise(vec3 uv, float res)
{
	const vec3 s = vec3(1e0, 1e2, 1e3);
	
	uv *= res;
	
	vec3 uv0 = floor(mod(uv, res))*s;
	vec3 uv1 = floor(mod(uv+vec3(1.), res))*s;
	
	vec3 f = fract(uv); f = f*f*(3.0-2.0*f);

	vec4 v = vec4(uv0.x+uv0.y+uv0.z, uv1.x+uv0.y+uv0.z,
		      	  uv0.x+uv1.y+uv0.z, uv1.x+uv1.y+uv0.z);

	vec4 r = fract(sin(v*1e-1)*1e3);
	float r0 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);
	
	r = fract(sin((v + uv1.z - uv0.z)*1e-1)*1e3);
	float r1 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);
	
	return mix(r0, r1, f.z)*2.-1.;
}

void main() 
{
	
	//vec2 center = vec2(0.5,0.5);
    	vec4 col = texture2D(texture0, uvVarying);
	vec2 p=vec2(uvVarying-center);
	if (col.a &lt; 0.2)
	{	
	float color = 3.0 - (3.*length(2.*p));
	
		vec3 coord = vec3(atan(p.x,p.y)/6.2832+.5, length(p)*.4, .5);
	
		for(int i = 1; i &lt;= 7; i++)
		{
			float power = pow(2.0, float(i));
			color += (1.5 / power) * snoise(coord + vec3(0.,-time*.05, time*.01), power*16.);
		}
		gl_FragColor = vec4( color, pow(max(color,0.),2.)*0.4, pow(max(color,0.),3.)*0.15 , 1.0);
	}else{
		//gl_FragColor = vec4(0,0,0,0);
		gl_FragColor = col;
	}
}

nonom Joined: 12th Nov 2017
Location: Picking mushrooms

Posted: 2nd Jun 2023 19:51

Awesome, let me try

blink0k Joined: 22nd Feb 2013
Location: the land of oz

Posted: 3rd Jun 2023 3:25

Nice work fubes. You are becomming quite the shader guru!

fubarpk Joined: 11th Jan 2005
Location: AGK is my friend

Posted: 4th Jun 2023 7:37

Your welcome Game_Code_here
Thankyou Blink

Ive been trying to improve the effect so as its more just flames around the sprites edge /banner etc
and ive come up with the below solution. The problem is with it is that the edge is the same pixel several times (outlinesize)
when i need it to be the offset one. like in the previous and above results but only in the outlined area.
I hope someone can see this like janbo and point me in the right direction

+ Code Snippet

uniform sampler2D texture0; 
varying mediump vec2 uvVarying;
varying mediump vec4 colorVarying;
uniform vec2 agk_resolution;
uniform float time;
uniform vec2 center;
uniform float outlineSize;
uniform float Percentage;


float snoise(vec3 uv, float res)
{
	const vec3 s = vec3(1e0, 1e2, 1e3);
	
	uv *= res;
	
	vec3 uv0 = floor(mod(uv, res))*s;
	vec3 uv1 = floor(mod(uv+vec3(1.), res))*s;
	
	vec3 f = fract(uv); f = f*f*(3.0-2.0*f);

	vec4 v = vec4(uv0.x+uv0.y+uv0.z, uv1.x+uv0.y+uv0.z,
		      	  uv0.x+uv1.y+uv0.z, uv1.x+uv1.y+uv0.z);

	vec4 r = fract(sin(v*1e-1)*1e3);
	float r0 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);
	
	r = fract(sin((v + uv1.z - uv0.z)*1e-1)*1e3);
	float r1 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);
	
	return mix(r0, r1, f.z)*2.-1.;
}





void main()
{
    vec4 finalColor;	
    vec2 pixelSize = vec2(1.0)/agk_resolution;
    vec4 pixel_color = texture2D(texture0, uvVarying);
    vec2 p=vec2 (uvVarying-center);
    finalColor=pixel_color;		
    if (pixel_color.a &lt;= 0.75)
    {
        pixel_color = colorVarying;
        pixel_color.a =0;
	float color = 3.0 - (3.*length(2.*p));
	       
        for (float x = -ceil(outlineSize); x &lt;= ceil(outlineSize); x++)
        {
            for (float y = -ceil(outlineSize); y &lt;= ceil(outlineSize); y++)
            {
	       //vec3 coord = vec3(atan(p.x,p.y)/6.2832+.5, length(p)*.4, .5);
                
            
                if (texture2D(texture0, uvVarying + vec2(x*pixelSize.x, y*pixelSize.y)).a == 0.0 || (x==0.0 &amp;&amp; y==0.0))
                    continue;
		for(int i = 1; i &lt;= 7; i++)
		{        
			float power = pow(2.0, float(i));    
                	vec3 coord = vec3(atan(p.x,p.y)/6.2832+.5, length(p)*.4, .5);
			//float offset= (colorVarying.a / (pow(x,2.0)+pow(y,2.0) + outlineSize * 20.0)*(Percentage * 0.01));
			//vec3 coord = vec3(atan(p.x+offset,p.y+offset)/6.2832+.5, length(p)*.4, .5);
			pixel_color += (1.5 / power) * snoise(coord + vec3(0.,-time*.05, time*.01), power*16.);
                	pixel_color.a = min(pixel_color.a,1.0); 
		}
		if (pixel_color.a &gt; 0.75)
		{
			finalColor=vec4(color,pow(max(color,0.),2.)*0.4,pow(max(color,0.),3.)*0.15,1.0); 
		}
            }
        }
    }
    gl_FragColor = finalColor;
}

the way i use those modifications is as follows

+ Code Snippet

image=loadimage("myLogo.png")
LoadSpriteShader(sh,"flaming2.ps")
spr=createSprite(image)
SetSpritePosition(Spr, 0, -128)
SetSpriteShader(spr,sh)
SetShaderConstantByName(sh,"outlineSize",10.0,0.0,0,0)

SetShaderConstantByName(sh,"offset",1.0 / 128.0,0.0,0,0
do 

	Time#=Time#+8.5*getframetime()
        SetShaderConstantByName(sh,"time",Timer(),0,0,0)
	Print( ScreenFPS() )
    Sync()
loop

if anyoneone can help so as it doesnt repeat the same colour outline size times that would be really helpfull thankyou in advance

<1 >

Sign In