shader porting help - GameCreators Forum

Author

Message

tmu

7

Years of Service

User Offline

Joined: 2nd Feb 2017

Location:

Posted: 24th Mar 2017 09:30

Link

trying to play with/learn a bit of shaders and try them out/modify from different sources on the internet

found some nice tutorials on tutsplus and was trying to port a smoke shader from

https://gamedevelopment.tutsplus.com/tutorials/how-to-write-a-smoke-shader--cms-25587

so i grabbed the code from the tutorials codepen and github sites the examples were hosted on.

http://codepen.io/tutsplus/pen/OMmpwJ
https://github.com/tutsplus/Beginners-Guide-to-Shaders/blob/master/Part4_Smoke/code/7_final.html

on the codepen site, you can play with it on the bottom screen by pressing the mouse button and dragging around the window to create the smokesources.

shader code (if i managed to grab it right):

uniform vec2 res;//The width and height of our screen
uniform sampler2D bufferTexture;//Our input texture
uniform vec3 smokeSource;//The x,y are the posiiton. The z is the power/density
uniform float time;

void main() {
	vec2 pixel = gl_FragCoord.xy / res.xy;
	//Get the distance of the current pixel from the smoke source
	float dist = distance(smokeSource.xy,gl_FragCoord.xy);
	//Get the color of the current pixel
	gl_FragColor = texture2D( bufferTexture, pixel );
	//Generate smoke when mouse is pressed
	gl_FragColor.rgb += smokeSource.z * max(15.0-dist,0.0);
	//Generate fixed smoke (this is the little point moving around in the center)
	vec2 smokePoint = vec2(res.x/2.0+100.0*sin(time),res.y/2.0+cos(time*3.5)*20.0);
	dist = distance(smokePoint,gl_FragCoord.xy);
	gl_FragColor.rgb += 0.01 * max(15.0-dist,0.0);
	//Smoke diffuse
	float xPixel = 1.0/res.x;//The size of a single pixel
	float yPixel = 1.0/res.y;
	vec4 rightColor = texture2D(bufferTexture,vec2(pixel.x+xPixel,pixel.y));
	vec4 leftColor = texture2D(bufferTexture,vec2(pixel.x-xPixel,pixel.y));
	vec4 upColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y+yPixel));
	vec4 downColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y-yPixel));
	//Handle the bottom boundary
	if(pixel.y <= yPixel){
		downColor.rgb = vec3(0.0);
	}

//Diffuse equation
	float factor = 8.0 * 0.016 * (leftColor.r + rightColor.r + downColor.r * 3.0 + upColor.r - 6.0 * gl_FragColor.r);
 
	//Account for low precision of texels
	float minimum = 0.003;
	if(factor >= -minimum && factor < 0.0) factor = -minimum;
	gl_FragColor.rgb += factor;
}

+ Code Snippet

uniform vec2 res;//The width and height of our screen
uniform sampler2D bufferTexture;//Our input texture
uniform vec3 smokeSource;//The x,y are the posiiton. The z is the power/density
uniform float time;

void main() {
	vec2 pixel = gl_FragCoord.xy / res.xy;
	//Get the distance of the current pixel from the smoke source
	float dist = distance(smokeSource.xy,gl_FragCoord.xy);
	//Get the color of the current pixel
	gl_FragColor = texture2D( bufferTexture, pixel );
	//Generate smoke when mouse is pressed
	gl_FragColor.rgb += smokeSource.z * max(15.0-dist,0.0);
	//Generate fixed smoke (this is the little point moving around in the center)
	vec2 smokePoint = vec2(res.x/2.0+100.0*sin(time),res.y/2.0+cos(time*3.5)*20.0);
	dist = distance(smokePoint,gl_FragCoord.xy);
	gl_FragColor.rgb += 0.01 * max(15.0-dist,0.0);
	//Smoke diffuse
	float xPixel = 1.0/res.x;//The size of a single pixel
	float yPixel = 1.0/res.y;
	vec4 rightColor = texture2D(bufferTexture,vec2(pixel.x+xPixel,pixel.y));
	vec4 leftColor = texture2D(bufferTexture,vec2(pixel.x-xPixel,pixel.y));
	vec4 upColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y+yPixel));
	vec4 downColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y-yPixel));
	//Handle the bottom boundary
	if(pixel.y <= yPixel){
		downColor.rgb = vec3(0.0);
	}

	//Diffuse equation
	float factor = 8.0 * 0.016 * (leftColor.r + rightColor.r + downColor.r * 3.0 + upColor.r - 6.0 * gl_FragColor.r);
 
	//Account for low precision of texels
	float minimum = 0.003;
	if(factor >= -minimum && factor < 0.0) factor = -minimum;
	gl_FragColor.rgb += factor;
}

I then tried to grab some AppGameKit code from the community shaders thread and use that to load the shader and see it run:

+ Code Snippet



SetWindowTitle( "test" )
SetWindowSize( 640, 480, 0 )
 
// set display properties
SetVirtualResolution( 640, 480 )
SetOrientationAllowed( 1, 1, 1, 1 )
SetPrintColor(0,0,255)
 
SetSyncRate(0,0)
SpriteID=createsprite(0)
SetSpriteSize(SpriteID, 640,480)

ShaderID=LoadSpriteShader("pixel.ps" )
//ShaderID=LoadShader("vertex.vs", "pixel.ps" )
SetSpriteShader(SpriteID,ShaderID)

x# = 1
y# = 1
do
    Time#=Time#+getframetime()
//    setShaderConstantByName(ShaderID, "smokeSource",100,100,1,0)
	setShaderConstantByName(ShaderID, "smokeSource",x#,y#,1,0)
	setShaderConstantByName(ShaderID, "res",640,480,0,0)
 	setShaderConstantByName(ShaderID, "time",Time#, 0, 0, 0)
 
	x# = x# + 0.01
	y# = y# + 0.01
    Print( ScreenFPS() )
    print(Time#)
    Sync()
loop

So the "smokesource" moves across the screen but no "diffusion" happens. The dot just moves around but nothing happens.
I think maybe I am missing how to set up the frame buffer rendering / render to object stuff in AGK.

Any help on getting this to run?

Back to top

Profile PM

janbo

15

Years of Service

User Offline

Joined: 10th Nov 2008

Location: Germany

Posted: 24th Mar 2017 14:04 Edited at: 24th Mar 2017 14:56

Link

Nice finding.
I'm happy you want to dive in the world of shaders ...as they are amazing not ?

Its a good tutorial, although you shouldn't begin with a post processing shader for learning shaders

And that exactly, was your problem.

At first you can switch the uniform time with agk_time and res with agk_spritesize you can find those at the bottom of agk shader documentation
Then you need a texture to render to for that post processing trick, actually he explained it quiet good there
as the state of a pixel/texel/fragment get lost after the processing of the shader
So you catch the old state again with the help of SetRenderToImage() and Render2DFront()
And the rest does that neat neighbour-color-sucking shader algorithm.

And here you go:

AGK Code

+ Code Snippet

SetWindowTitle( "test" )
SetWindowSize( 640, 480, 0 )
  
// set display properties
SetVirtualResolution( 640, 480 )
SetOrientationAllowed( 1, 1, 1, 1 )
SetPrintColor(0,0,255)
SetSyncRate(60,0)

RenderImageID=CreateRenderImage(GetVirtualWidth(),GetVirtualHeight(),0,0)
SpriteID=createsprite(RenderImageID)
 
ShaderID=LoadSpriteShader("pixel.ps" )
SetSpriteShader(SpriteID,ShaderID)
 
do
	setShaderConstantByName(ShaderID, "smokeSource",GetPointerX(),GetPointerY(),0.1,0)
	SetRenderToImage(RenderImageID,0)
	Render2DFront()

	SetRenderToScreen()

    Print( ScreenFPS() )
    Sync()
loop

Pixel Shader

uniform sampler2D bufferTexture;//Our input texture
uniform vec3 smokeSource;//The x,y are the posiiton. The z is the power/density
uniform float agk_time;
uniform vec2 agk_spritesize;
 
void main() {
    vec2 pixel = gl_FragCoord.xy / agk_spritesize;
    //Get the distance of the current pixel from the smoke source
    float dist = distance(vec2(smokeSource.x,agk_spritesize.y-smokeSource.y),gl_FragCoord.xy);
    //Get the color of the current pixel
    gl_FragColor = texture2D( bufferTexture, pixel );
    //Generate smoke when mouse is pressed
    gl_FragColor.rgb += smokeSource.z * max(15.0-dist,0.0);
    //Generate fixed smoke (this is the little point moving around in the center)
    vec2 smokePoint = vec2(agk_spritesize.x/2.0+100.0*sin(agk_time),agk_spritesize.y/2.0+cos(agk_time*3.5)*20.0);
    dist = distance(smokePoint,gl_FragCoord.xy);
    gl_FragColor.rgb += 0.01 * max(15.0-dist,0.0);
    //Smoke diffuse
    float xPixel = 1.0/agk_spritesize.x;//The size of a single pixel
    float yPixel = 1.0/agk_spritesize.y;
    vec4 rightColor = texture2D(bufferTexture,vec2(pixel.x+xPixel,pixel.y));
    vec4 leftColor = texture2D(bufferTexture,vec2(pixel.x-xPixel,pixel.y));
    vec4 upColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y+yPixel));
    vec4 downColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y-yPixel));
    //Handle the bottom boundary
    if(pixel.y <= yPixel){
        downColor.rgb = vec3(0.0);
    }
 
    //Diffuse equation
    float factor = 8.0 * 0.016 * (leftColor.r + rightColor.r + downColor.r * 3.0 + upColor.r - 6.0 * gl_FragColor.r);
  
    //Account for low precision of texels
    float minimum = 0.003;
    if(factor >= -minimum && factor < 0.0) factor = -minimum;
    gl_FragColor.rgb += factor;
}

+ Code Snippet

uniform sampler2D bufferTexture;//Our input texture
uniform vec3 smokeSource;//The x,y are the posiiton. The z is the power/density
uniform float agk_time;
uniform vec2 agk_spritesize;
 
void main() {
    vec2 pixel = gl_FragCoord.xy / agk_spritesize;
    //Get the distance of the current pixel from the smoke source
    float dist = distance(vec2(smokeSource.x,agk_spritesize.y-smokeSource.y),gl_FragCoord.xy);
    //Get the color of the current pixel
    gl_FragColor = texture2D( bufferTexture, pixel );
    //Generate smoke when mouse is pressed
    gl_FragColor.rgb += smokeSource.z * max(15.0-dist,0.0);
    //Generate fixed smoke (this is the little point moving around in the center)
    vec2 smokePoint = vec2(agk_spritesize.x/2.0+100.0*sin(agk_time),agk_spritesize.y/2.0+cos(agk_time*3.5)*20.0);
    dist = distance(smokePoint,gl_FragCoord.xy);
    gl_FragColor.rgb += 0.01 * max(15.0-dist,0.0);
    //Smoke diffuse
    float xPixel = 1.0/agk_spritesize.x;//The size of a single pixel
    float yPixel = 1.0/agk_spritesize.y;
    vec4 rightColor = texture2D(bufferTexture,vec2(pixel.x+xPixel,pixel.y));
    vec4 leftColor = texture2D(bufferTexture,vec2(pixel.x-xPixel,pixel.y));
    vec4 upColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y+yPixel));
    vec4 downColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y-yPixel));
    //Handle the bottom boundary
    if(pixel.y <= yPixel){
        downColor.rgb = vec3(0.0);
    }
 
    //Diffuse equation
    float factor = 8.0 * 0.016 * (leftColor.r + rightColor.r + downColor.r * 3.0 + upColor.r - 6.0 * gl_FragColor.r);
  
    //Account for low precision of texels
    float minimum = 0.003;
    if(factor >= -minimum && factor < 0.0) factor = -minimum;
    gl_FragColor.rgb += factor;
}

Picture

Using AGKv2 Tier1

Attachments

Login to view attachments

Back to top

Profile PM Email Website

tmu

7

Years of Service

User Offline

Joined: 2nd Feb 2017

Location:

Posted: 24th Mar 2017 22:12

Link

Cool, thanks you very much Janbo! Yes, shaders are great

I actually did go through the basics tutorial on the same site with shadertoy etc. This one was the more interesting of the following ones but had trouble porting it even though I tried to read the pages you linked. Just did not have the terminology to link them all etc.

The code you posted works great on PC/Mac but on Android it seems to have some issues. The shader only works in the bottom left corner of the screen on Android. The smoke area has a very limited width and height. And if I draw the smokesource on top of that area it actually generates quite nice looking vertical bars instead of smoke

This seems to be related to virtual vs screen resolution. If I change the virtual resolution to match that of the actual Android screen it works. Is there maybe some issue with regards to the coordinate space of the shader vs the virtual coordinate space of the device used by AppGameKit? I would have though the sprite would scale to match that.

Any ideas how to fix the scale issue?

Back to top

Profile PM

Preben

AGK Studio Developer

19

Years of Service

User Offline

Joined: 30th Jun 2004

Location:

Posted: 24th Mar 2017 23:04

Link

Always so many different GL version so try to keep it KISS ( Keep It simple Sir ) perhaps the command distance is not a android one ?, janbo is the shader guru, so im sure he find a way for you

best regards Preben Eriksen,

Back to top

Profile PM Email

tmu

7

Years of Service

User Offline

Joined: 2nd Feb 2017

Location:

Posted: 25th Mar 2017 08:04

Link

OK so I managed to not KISS this some more

I tried to create two sprites, give them different instances of this shader and overlap them.

Here is the AppGameKit code:

global devW# = 640
global devH# = 480

oneColor()
//twoColors()

function oneColor()
	SetWindowTitle( "test" )
	SetWindowSize( devW#, devH#, 0 )
	   
	// set display properties
	SetVirtualResolution( devW#, devH# )
	SetOrientationAllowed( 1, 1, 1, 1 )
	SetPrintColor(255,255,255)
	SetSyncRate(60,0)
	 
	RenderImageID=CreateRenderImage(devW#, devH#,0,0)
	SpriteID=createsprite(RenderImageID)
	SetSpriteSize(SpriteID, devW#, devH#)
	SetSpritePosition(SpriteID, 0, 0)
	  
	ShaderID=LoadSpriteShader("pixel.ps" )
	SetSpriteShader(SpriteID,ShaderID)

x# = 100
	y# = 100
	do
		setShaderConstantByName(ShaderID, "smokeSource",GetPointerX(),GetPointerY(),0.1,0)
		SetRenderToImage(RenderImageID,0)
	  
		Render2DFront()

SetRenderToScreen()
	 
		x# = x# + 1
		y# = y# + 1
		Print( ScreenFPS() )
		Sync()
	loop
endfunction

function twoColors()

SetWindowTitle( "test" )
	SetWindowSize( devW#, devH#, 0 )
	   
	// set display properties
	SetVirtualResolution( devW#, devH# )
	SetOrientationAllowed( 1, 1, 1, 1 )
	SetPrintColor(255,255,255)
	SetSyncRate(60,0)
	 
	RenderImageID=CreateRenderImage(devW#, devH#,0,0)
	SpriteID=createsprite(RenderImageID)
	SetSpriteSize(SpriteID, devW#, devH#)
	SetSpritePosition(SpriteID, 0, 0)
	  
	RenderImageID2=CreateRenderImage(devW#, devH#,0,0)
	SpriteID2=createsprite(RenderImageID2)
	SetSpriteSize(SpriteID2, devW#, devH#)
	SetSpritePosition(SpriteID2, 100, 0)

ShaderID=LoadSpriteShader("pixel.ps" )
	SetSpriteShader(SpriteID,ShaderID)
	  
	ShaderID2=LoadSpriteShader("pixelg.ps" )
	SetSpriteShader(SpriteID2,ShaderID2)

x# = 100
	y# = 100
	do
		setShaderConstantByName(ShaderID2, "smokeSource",GetPointerX(),GetPointerY(),0.1,0)
	//	setShaderConstantByName(ShaderID2, "smokeSource",x#,y#,1,0)
		SetRenderToImage(RenderImageID2,0)
		Render2DFront()
	 
		setShaderConstantByName(ShaderID, "smokeSource",GetPointerX(),GetPointerY(),0.1,0)
	//	setShaderConstantByName(ShaderID, "smokeSource",x#,y#,1,0)
		SetRenderToImage(RenderImageID,0)	  
		Render2DFront()

SetRenderToScreen()
	 
		x# = x# + 1
		y# = y# + 1
		Print( ScreenFPS() )
		Sync()
	loop
endfunction

+ Code Snippet

global devW# = 640
global devH# = 480

oneColor()
//twoColors()

function oneColor()
	SetWindowTitle( "test" )
	SetWindowSize( devW#, devH#, 0 )
	   
	// set display properties
	SetVirtualResolution( devW#, devH# )
	SetOrientationAllowed( 1, 1, 1, 1 )
	SetPrintColor(255,255,255)
	SetSyncRate(60,0)
	 
	RenderImageID=CreateRenderImage(devW#, devH#,0,0)
	SpriteID=createsprite(RenderImageID)
	SetSpriteSize(SpriteID, devW#, devH#)
	SetSpritePosition(SpriteID, 0, 0)
	  
	ShaderID=LoadSpriteShader("pixel.ps" )
	SetSpriteShader(SpriteID,ShaderID)
	  

	x# = 100
	y# = 100
	do
		setShaderConstantByName(ShaderID, "smokeSource",GetPointerX(),GetPointerY(),0.1,0)
		SetRenderToImage(RenderImageID,0)
	  
		Render2DFront()

		SetRenderToScreen()
	 
		x# = x# + 1
		y# = y# + 1
		Print( ScreenFPS() )
		Sync()
	loop
endfunction

function twoColors()

	SetWindowTitle( "test" )
	SetWindowSize( devW#, devH#, 0 )
	   
	// set display properties
	SetVirtualResolution( devW#, devH# )
	SetOrientationAllowed( 1, 1, 1, 1 )
	SetPrintColor(255,255,255)
	SetSyncRate(60,0)
	 
	RenderImageID=CreateRenderImage(devW#, devH#,0,0)
	SpriteID=createsprite(RenderImageID)
	SetSpriteSize(SpriteID, devW#, devH#)
	SetSpritePosition(SpriteID, 0, 0)
	  
	RenderImageID2=CreateRenderImage(devW#, devH#,0,0)
	SpriteID2=createsprite(RenderImageID2)
	SetSpriteSize(SpriteID2, devW#, devH#)
	SetSpritePosition(SpriteID2, 100, 0)

	ShaderID=LoadSpriteShader("pixel.ps" )
	SetSpriteShader(SpriteID,ShaderID)
	  
	ShaderID2=LoadSpriteShader("pixelg.ps" )
	SetSpriteShader(SpriteID2,ShaderID2)

	x# = 100
	y# = 100
	do
		setShaderConstantByName(ShaderID2, "smokeSource",GetPointerX(),GetPointerY(),0.1,0)
	//	setShaderConstantByName(ShaderID2, "smokeSource",x#,y#,1,0)
		SetRenderToImage(RenderImageID2,0)
		Render2DFront()
	 
		setShaderConstantByName(ShaderID, "smokeSource",GetPointerX(),GetPointerY(),0.1,0)
	//	setShaderConstantByName(ShaderID, "smokeSource",x#,y#,1,0)
		SetRenderToImage(RenderImageID,0)	  
		Render2DFront()

		SetRenderToScreen()
	 
		x# = x# + 1
		y# = y# + 1
		Print( ScreenFPS() )
		Sync()
	loop
endfunction

And here are the shaders:

red (pixel.ps):

uniform sampler2D bufferTexture;//Our input texture
uniform vec3 smokeSource;//The x,y are the posiiton. The z is the power/density
uniform float agk_time;
uniform vec2 agk_spritesize;
  
void main() {
    vec2 pixel = gl_FragCoord.xy / agk_spritesize;
    //Get the distance of the current pixel from the smoke source
    float dist = distance(vec2(smokeSource.x,agk_spritesize.y-smokeSource.y),gl_FragCoord.xy);
    //Get the color of the current pixel
    gl_FragColor = texture2D( bufferTexture, pixel );
    //Generate smoke when mouse is pressed
    gl_FragColor.r += smokeSource.z * max(15.0-dist,0.0);
    //Generate fixed smoke (this is the little point moving around in the center)
    vec2 smokePoint = vec2(agk_spritesize.x/2.0+100.0*sin(agk_time),agk_spritesize.y/2.0+cos(agk_time*3.5)*20.0);
    dist = distance(smokePoint,gl_FragCoord.xy);
//    gl_FragColor.rgb += 0.01 * max(15.0-dist,0.0);
    gl_FragColor.r += 0.01 * max(30.0-dist,0.0);
    //Smoke diffuse
    float xPixel = 1.0/agk_spritesize.x;//The size of a single pixel
    float yPixel = 1.0/agk_spritesize.y;
    vec4 rightColor = texture2D(bufferTexture,vec2(pixel.x+xPixel,pixel.y));
    vec4 leftColor = texture2D(bufferTexture,vec2(pixel.x-xPixel,pixel.y));
    vec4 upColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y+yPixel));
    vec4 downColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y-yPixel));
    //Handle the bottom boundary
    if(pixel.y <= yPixel){
        downColor.rgb = vec3(0.0);
    }
  
    //Diffuse equation
    float factor = 8.0 * 0.016 * (leftColor.r + rightColor.r + downColor.r * 3.0 + upColor.r - 6.0 * gl_FragColor.r);
   
    //Account for low precision of texels
    float minimum = 0.003;
    if(factor >= -minimum && factor < 0.0) factor = -minimum;
    gl_FragColor.r += factor;
    gl_FragColor.a = 0.0;
}

+ Code Snippet

uniform sampler2D bufferTexture;//Our input texture
uniform vec3 smokeSource;//The x,y are the posiiton. The z is the power/density
uniform float agk_time;
uniform vec2 agk_spritesize;
  
void main() {
    vec2 pixel = gl_FragCoord.xy / agk_spritesize;
    //Get the distance of the current pixel from the smoke source
    float dist = distance(vec2(smokeSource.x,agk_spritesize.y-smokeSource.y),gl_FragCoord.xy);
    //Get the color of the current pixel
    gl_FragColor = texture2D( bufferTexture, pixel );
    //Generate smoke when mouse is pressed
    gl_FragColor.r += smokeSource.z * max(15.0-dist,0.0);
    //Generate fixed smoke (this is the little point moving around in the center)
    vec2 smokePoint = vec2(agk_spritesize.x/2.0+100.0*sin(agk_time),agk_spritesize.y/2.0+cos(agk_time*3.5)*20.0);
    dist = distance(smokePoint,gl_FragCoord.xy);
//    gl_FragColor.rgb += 0.01 * max(15.0-dist,0.0);
    gl_FragColor.r += 0.01 * max(30.0-dist,0.0);
    //Smoke diffuse
    float xPixel = 1.0/agk_spritesize.x;//The size of a single pixel
    float yPixel = 1.0/agk_spritesize.y;
    vec4 rightColor = texture2D(bufferTexture,vec2(pixel.x+xPixel,pixel.y));
    vec4 leftColor = texture2D(bufferTexture,vec2(pixel.x-xPixel,pixel.y));
    vec4 upColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y+yPixel));
    vec4 downColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y-yPixel));
    //Handle the bottom boundary
    if(pixel.y <= yPixel){
        downColor.rgb = vec3(0.0);
    }
  
    //Diffuse equation
    float factor = 8.0 * 0.016 * (leftColor.r + rightColor.r + downColor.r * 3.0 + upColor.r - 6.0 * gl_FragColor.r);
   
    //Account for low precision of texels
    float minimum = 0.003;
    if(factor >= -minimum && factor < 0.0) factor = -minimum;
    gl_FragColor.r += factor;
    gl_FragColor.a = 0.0;
}

green (pixelg.ps):

uniform sampler2D bufferTexture;//Our input texture
uniform vec3 smokeSource;//The x,y are the posiiton. The z is the power/density
uniform float agk_time;
uniform vec2 agk_spritesize;
  
void main() {
    vec2 pixel = gl_FragCoord.xy / agk_spritesize;
    //Get the distance of the current pixel from the smoke source
    float dist = distance(vec2(smokeSource.x,agk_spritesize.y-smokeSource.y),gl_FragCoord.xy);
    //Get the color of the current pixel
    gl_FragColor = texture2D( bufferTexture, pixel );
    //Generate smoke when mouse is pressed
    gl_FragColor.g += smokeSource.z * max(15.0-dist,0.0);
    //Generate fixed smoke (this is the little point moving around in the center)
    vec2 smokePoint = vec2(agk_spritesize.x/2.0+100.0*sin(agk_time),agk_spritesize.y/2.0+cos(agk_time*3.5)*20.0);
    dist = distance(smokePoint,gl_FragCoord.xy);
//    gl_FragColor.rgb += 0.01 * max(15.0-dist,0.0);
    gl_FragColor.g += 0.01 * max(30.0-dist,0.0);
    //Smoke diffuse
    float xPixel = 1.0/agk_spritesize.x;//The size of a single pixel
    float yPixel = 1.0/agk_spritesize.y;
    vec4 rightColor = texture2D(bufferTexture,vec2(pixel.x+xPixel,pixel.y));
    vec4 leftColor = texture2D(bufferTexture,vec2(pixel.x-xPixel,pixel.y));
    vec4 upColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y+yPixel));
    vec4 downColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y-yPixel));
    //Handle the bottom boundary
    if(pixel.y <= yPixel){
        downColor.rgb = vec3(0.0);
    }
  
    //Diffuse equation
//    float factor = 8.0 * 0.016 * (leftColor.g + rightColor.g + downColor.g + upColor.g * 3.0 - 6.0 * gl_FragColor.g);
    float factor = 8.0 * 0.016 * (leftColor.g + rightColor.g + downColor.g * 3.0 + upColor.g - 6.0 * gl_FragColor.g);
   
    //Account for low precision of texels
    float minimum = 0.003;
    if(factor >= -minimum && factor < 0.0) factor = -minimum;
    gl_FragColor.g += factor;
//    gl_FragColor.r = 0.5;
//    gl_FragColor.b = 0.5;
    gl_FragColor.a = 0.0;
}

+ Code Snippet

uniform sampler2D bufferTexture;//Our input texture
uniform vec3 smokeSource;//The x,y are the posiiton. The z is the power/density
uniform float agk_time;
uniform vec2 agk_spritesize;
  
void main() {
    vec2 pixel = gl_FragCoord.xy / agk_spritesize;
    //Get the distance of the current pixel from the smoke source
    float dist = distance(vec2(smokeSource.x,agk_spritesize.y-smokeSource.y),gl_FragCoord.xy);
    //Get the color of the current pixel
    gl_FragColor = texture2D( bufferTexture, pixel );
    //Generate smoke when mouse is pressed
    gl_FragColor.g += smokeSource.z * max(15.0-dist,0.0);
    //Generate fixed smoke (this is the little point moving around in the center)
    vec2 smokePoint = vec2(agk_spritesize.x/2.0+100.0*sin(agk_time),agk_spritesize.y/2.0+cos(agk_time*3.5)*20.0);
    dist = distance(smokePoint,gl_FragCoord.xy);
//    gl_FragColor.rgb += 0.01 * max(15.0-dist,0.0);
    gl_FragColor.g += 0.01 * max(30.0-dist,0.0);
    //Smoke diffuse
    float xPixel = 1.0/agk_spritesize.x;//The size of a single pixel
    float yPixel = 1.0/agk_spritesize.y;
    vec4 rightColor = texture2D(bufferTexture,vec2(pixel.x+xPixel,pixel.y));
    vec4 leftColor = texture2D(bufferTexture,vec2(pixel.x-xPixel,pixel.y));
    vec4 upColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y+yPixel));
    vec4 downColor = texture2D(bufferTexture,vec2(pixel.x,pixel.y-yPixel));
    //Handle the bottom boundary
    if(pixel.y <= yPixel){
        downColor.rgb = vec3(0.0);
    }
  
    //Diffuse equation
//    float factor = 8.0 * 0.016 * (leftColor.g + rightColor.g + downColor.g + upColor.g * 3.0 - 6.0 * gl_FragColor.g);
    float factor = 8.0 * 0.016 * (leftColor.g + rightColor.g + downColor.g * 3.0 + upColor.g - 6.0 * gl_FragColor.g);
   
    //Account for low precision of texels
    float minimum = 0.003;
    if(factor >= -minimum && factor < 0.0) factor = -minimum;
    gl_FragColor.g += factor;
//    gl_FragColor.r = 0.5;
//    gl_FragColor.b = 0.5;
    gl_FragColor.a = 0.0;
}

I attached images showing what the one- and two-color versions look on desktop and android.

The android versions show the problem of the image only appearing at bottom left corner.

The android versions also show a problem of only one shader/sprite appearing on android and the other shader not appearing at all. I tried to move them to not fully overlap but it still did not appear.

The desktop version shows a problem with the green smoke rising twice at the speed of the red smoke. I had to call the Render2DFront() twice to get it to draw so not sure if that causes it..

Attachments

Login to view attachments

Back to top

Profile PM

janbo

15

Years of Service

User Offline

Joined: 10th Nov 2008

Location: Germany

Posted: 25th Mar 2017 10:26 Edited at: 25th Mar 2017 10:27

Link

Hey,

I got your "instance" problem solved... as I guess you just wanted more smoke sources.
So here is the code:

SetWindowTitle( "test" )
SetWindowSize( 640, 480, 0 )
  
// set display properties
SetVirtualResolution( 640, 480 )
SetOrientationAllowed( 1, 1, 1, 1 )
SetScissor(0,0,0,0)
SetPrintColor(0,0,255)
SetSyncRate(60,0)

RenderImageID=CreateRenderImage(GetVirtualWidth(),GetVirtualHeight(),0,0)

GenerateSmokeShader("pixel.ps",3)
ShaderID=LoadSpriteShader("pixel.ps")
SpriteID=createsprite(RenderImageID)
SetSpriteShader(SpriteID,ShaderID)

//~ ShaderID=LoadFullScreenShader("pixel.ps")
//~ QuadID=CreateObjectQuad()
//~ SetObjectImage(QuadID,RenderImageID,0)
//~ SetObjectShader(QuadID,ShaderID)

SetShaderConstantArrayByName(ShaderID, "smokeColor",0,1,0,0,0)
SetShaderConstantArrayByName(ShaderID, "smokeColor",1,0,1,0,0)
SetShaderConstantArrayByName(ShaderID, "smokeColor",2,0,0,1,0)

do
	Print(ScreenFPS())
	
	Angle#=Angle#+20*GetFrameTime()
	
	Update(0)
	SetShaderConstantArrayByName(ShaderID, "smokeSource",0,GetPointerX(),GetPointerY(),0.1,0)
	for i=1 to 2
		SetShaderConstantArrayByName(ShaderID, "smokeSource",i,GetVirtualWidth()*0.5+sin(Angle#)*i*80,GetVirtualHeight()*0.5+cos(Angle#)*i*80,0.1,0)
	next i

SetRenderToImage(RenderImageID,0)
	DrawSprite(SpriteID)
	//~ DrawObject(QuadID)

SetRenderToScreen()
	Render()

swap()
loop

+ Code Snippet

SetWindowTitle( "test" )
SetWindowSize( 640, 480, 0 )
  
// set display properties
SetVirtualResolution( 640, 480 )
SetOrientationAllowed( 1, 1, 1, 1 )
SetScissor(0,0,0,0)
SetPrintColor(0,0,255)
SetSyncRate(60,0)

RenderImageID=CreateRenderImage(GetVirtualWidth(),GetVirtualHeight(),0,0)

GenerateSmokeShader("pixel.ps",3)
ShaderID=LoadSpriteShader("pixel.ps")
SpriteID=createsprite(RenderImageID)
SetSpriteShader(SpriteID,ShaderID)

//~ ShaderID=LoadFullScreenShader("pixel.ps")
//~ QuadID=CreateObjectQuad()
//~ SetObjectImage(QuadID,RenderImageID,0)
//~ SetObjectShader(QuadID,ShaderID)

SetShaderConstantArrayByName(ShaderID, "smokeColor",0,1,0,0,0)
SetShaderConstantArrayByName(ShaderID, "smokeColor",1,0,1,0,0)
SetShaderConstantArrayByName(ShaderID, "smokeColor",2,0,0,1,0)

do
	Print(ScreenFPS())
	
	Angle#=Angle#+20*GetFrameTime()
	
	Update(0)
	SetShaderConstantArrayByName(ShaderID, "smokeSource",0,GetPointerX(),GetPointerY(),0.1,0)
	for i=1 to 2
		SetShaderConstantArrayByName(ShaderID, "smokeSource",i,GetVirtualWidth()*0.5+sin(Angle#)*i*80,GetVirtualHeight()*0.5+cos(Angle#)*i*80,0.1,0)
	next i

	SetRenderToImage(RenderImageID,0)
	DrawSprite(SpriteID)
	//~ DrawObject(QuadID)

	SetRenderToScreen()
	Render()

	swap()
loop

function GenerateSmokeShader(File$,Count)
	FileID=OpenToWrite(File$)
		WriteLine(FileID,"varying mediump vec2 uvVarying;")
		WriteLine(FileID,"uniform sampler2D bufferTexture;//Our input texture")
		WriteLine(FileID,"uniform vec3 smokeSource["+str(Count)+"];//The x,y are the posiiton. The z is the power/density")
		WriteLine(FileID,"uniform vec3 smokeColor["+str(Count)+"];")
		WriteLine(FileID,"uniform float agk_time;")
		WriteLine(FileID,"uniform vec2 agk_spritesize;")
		WriteLine(FileID," ")
		WriteLine(FileID,"void main()")
		WriteLine(FileID,"{")
		WriteLine(FileID,"    //Get the color of the current pixel")
		WriteLine(FileID,"    gl_FragColor = texture2D( bufferTexture, uvVarying );")
		WriteLine(FileID,"    for(int i=0; i < smokeSource.length(); i++)")
		WriteLine(FileID,"    {")
		WriteLine(FileID,"        //Get the distance of the current pixel from the smoke source")
		WriteLine(FileID,"        float dist = distance(smokeSource[i].xy,uvVarying * agk_spritesize);")
		WriteLine(FileID,"        //Generate smoke when mouse is pressed")
		WriteLine(FileID,"        gl_FragColor.rgb += smokeSource[i].z * max(15.0-dist,0.0) * smokeColor[i];")
		WriteLine(FileID,"    }")
		WriteLine(FileID,"")
		WriteLine(FileID,"    //Smoke diffuse")
		WriteLine(FileID,"    float xPixel = 1.0/agk_spritesize.x;//The size of a single pixel")
		WriteLine(FileID,"    float yPixel = 1.0/agk_spritesize.y;")
		WriteLine(FileID,"    vec4 rightColor = texture2D(bufferTexture,vec2(uvVarying.x+xPixel,uvVarying.y));")
		WriteLine(FileID,"    vec4 leftColor = texture2D(bufferTexture,vec2(uvVarying.x-xPixel,uvVarying.y));")
		WriteLine(FileID,"    vec4 upColor = texture2D(bufferTexture,vec2(uvVarying.x,uvVarying.y-yPixel));")
		WriteLine(FileID,"    vec4 downColor = texture2D(bufferTexture,vec2(uvVarying.x,uvVarying.y+yPixel));")
		WriteLine(FileID,"    //Handle the bottom boundary")
		WriteLine(FileID,"    if(uvVarying.y <= yPixel){")
		WriteLine(FileID,"        downColor.rgb = vec3(0.0);")
		WriteLine(FileID,"    }")
		WriteLine(FileID,"")
		WriteLine(FileID,"    //Diffuse equation")
		WriteLine(FileID,"    vec3 factor = 8.0 * 0.016 * (leftColor.rgb + rightColor.rgb + downColor.rgb * 3.0 + upColor.rgb - 6.0 * gl_FragColor.rgb);")
		WriteLine(FileID,"  ")
		WriteLine(FileID,"    //Account for low precision of texels")
		WriteLine(FileID,"    float minimum = 0.003;")
		WriteLine(FileID,"    if(factor.r >= -minimum && factor.r < 0.0) factor.r = -minimum; // here needs to be a better solution")
		WriteLine(FileID,"    if(factor.g >= -minimum && factor.g < 0.0) factor.g = -minimum; // the best is something calculated as branching is expensive in shaders")
		WriteLine(FileID,"    if(factor.b >= -minimum && factor.b < 0.0) factor.b = -minimum;")
		WriteLine(FileID,"    gl_FragColor.rgb += factor;")
		WriteLine(FileID,"}")
	CloseFile(FileID)
endfunction

I generate the shader in the AppGameKit code like AppGameKit does it internal for 3D point lights for example.
I like that approach and maybe I adjust some of my shader systems for it.
So there is now an array for the source position and color.
I changed quiet a bit, and I know it is hard for a beginner but maybe you can retrace what I did.
But you can ask of course.

I didn't manage to render it for mobile phones...i.e. give me some more time

Using AGKv2 Tier1

Back to top

Profile PM Email Website

tmu

7

Years of Service

User Offline

Joined: 2nd Feb 2017

Location:

Posted: 25th Mar 2017 10:52

Link

Cool, thanks!

Really looking forward to give it a go. I get this error "Pixel shader pixel.ps failed to compile: ERROR: 0:13: Method calls not allowed in this GSGL version". I tried to run it on OSX. Tried also to debug the shader but cannot really see what method call it is referring to..

Back to top

Profile PM

janbo

15

Years of Service

User Offline

Joined: 10th Nov 2008

Location: Germany

Posted: 25th Mar 2017 11:02 Edited at: 25th Mar 2017 11:03

Link

I don't get this Error...does it work if you change smokeSource.length() to 3 for this example ?
The generated pixel shader is in AppData/local/AppName

Using AGKv2 Tier1

Back to top

Profile PM Email Website

Preben

AGK Studio Developer

19

Years of Service

User Offline

Joined: 30th Jun 2004

Location:

Posted: 25th Mar 2017 11:16

Link

SetScreenResolution( 640, 480 ) is needed to change the mobile device screen size.
.lenght is not supported on mac , mobile devices and webgl so try this:

Great effect

SetWindowTitle( "test" )
SetWindowSize( 640, 480, 0 )
   
// set display properties
SetVirtualResolution( 640, 480 )
SetScreenResolution( 640, 480 ) // change screen size on mobile devices.
SetOrientationAllowed( 1, 1, 1, 1 )
SetScissor(0,0,0,0)
SetPrintColor(0,0,255)
SetSyncRate(60,0)
 
RenderImageID=CreateRenderImage(GetVirtualWidth(),GetVirtualHeight(),0,0)
 
GenerateSmokeShader("pixel.ps",3)
ShaderID=LoadSpriteShader("pixel.ps")
SpriteID=createsprite(RenderImageID)
SetSpriteShader(SpriteID,ShaderID)
 
//~ ShaderID=LoadFullScreenShader("pixel.ps")
//~ QuadID=CreateObjectQuad()
//~ SetObjectImage(QuadID,RenderImageID,0)
//~ SetObjectShader(QuadID,ShaderID)
 
SetShaderConstantArrayByName(ShaderID, "smokeColor",0,1,0,0,0)
SetShaderConstantArrayByName(ShaderID, "smokeColor",1,0,1,0,0)
SetShaderConstantArrayByName(ShaderID, "smokeColor",2,0,0,1,0)
 
do
    Print(ScreenFPS())
     
    Angle#=Angle#+20*GetFrameTime()
     
    Update(0)
    SetShaderConstantArrayByName(ShaderID, "smokeSource",0,GetPointerX(),GetPointerY(),0.1,0)
    for i=1 to 2
        SetShaderConstantArrayByName(ShaderID, "smokeSource",i,GetVirtualWidth()*0.5+sin(Angle#)*i*80,GetVirtualHeight()*0.5+cos(Angle#)*i*80,0.1,0)
    next i
 
    SetRenderToImage(RenderImageID,0)
    DrawSprite(SpriteID)
    //~ DrawObject(QuadID)
 
    SetRenderToScreen()
    Render()
 
    swap()
loop
 
function GenerateSmokeShader(File$,Count)
    FileID=OpenToWrite(File$)
        WriteLine(FileID,"varying mediump vec2 uvVarying;")
        WriteLine(FileID,"uniform sampler2D bufferTexture;//Our input texture")
        WriteLine(FileID,"uniform vec3 smokeSource["+str(Count)+"];//The x,y are the posiiton. The z is the power/density")
        WriteLine(FileID,"uniform vec3 smokeColor["+str(Count)+"];")
        WriteLine(FileID,"const int smokeCount="+str(Count)+";") // .lenght not supported on Mac,Mobile devices,WebGL
        WriteLine(FileID,"uniform float agk_time;")
        WriteLine(FileID,"uniform vec2 agk_spritesize;")
        WriteLine(FileID," ")
        WriteLine(FileID,"void main()")
        WriteLine(FileID,"{")
        WriteLine(FileID,"    //Get the color of the current pixel")
        WriteLine(FileID,"    gl_FragColor = texture2D( bufferTexture, uvVarying );")
        WriteLine(FileID,"    for(int i=0; i < smokeCount; i++)")
        WriteLine(FileID,"    {")
        WriteLine(FileID,"        //Get the distance of the current pixel from the smoke source")
        WriteLine(FileID,"        float dist = distance(smokeSource[i].xy,uvVarying * agk_spritesize);")
        WriteLine(FileID,"        //Generate smoke when mouse is pressed")
        WriteLine(FileID,"        gl_FragColor.rgb += smokeSource[i].z * max(15.0-dist,0.0) * smokeColor[i];")
        WriteLine(FileID,"    }")
        WriteLine(FileID,"")
        WriteLine(FileID,"    //Smoke diffuse")
        WriteLine(FileID,"    float xPixel = 1.0/agk_spritesize.x;//The size of a single pixel")
        WriteLine(FileID,"    float yPixel = 1.0/agk_spritesize.y;")
        WriteLine(FileID,"    vec4 rightColor = texture2D(bufferTexture,vec2(uvVarying.x+xPixel,uvVarying.y));")
        WriteLine(FileID,"    vec4 leftColor = texture2D(bufferTexture,vec2(uvVarying.x-xPixel,uvVarying.y));")
        WriteLine(FileID,"    vec4 upColor = texture2D(bufferTexture,vec2(uvVarying.x,uvVarying.y-yPixel));")
        WriteLine(FileID,"    vec4 downColor = texture2D(bufferTexture,vec2(uvVarying.x,uvVarying.y+yPixel));")
        WriteLine(FileID,"    //Handle the bottom boundary")
        WriteLine(FileID,"    if(uvVarying.y <= yPixel){")
        WriteLine(FileID,"        downColor.rgb = vec3(0.0);")
        WriteLine(FileID,"    }")
        WriteLine(FileID,"")
        WriteLine(FileID,"    //Diffuse equation")
        WriteLine(FileID,"    vec3 factor = 8.0 * 0.016 * (leftColor.rgb + rightColor.rgb + downColor.rgb * 3.0 + upColor.rgb - 6.0 * gl_FragColor.rgb);")
        WriteLine(FileID,"  ")
        WriteLine(FileID,"    //Account for low precision of texels")
        WriteLine(FileID,"    float minimum = 0.003;")
        WriteLine(FileID,"    if(factor.r >= -minimum && factor.r < 0.0) factor.r = -minimum; // here needs to be a better solution")
        WriteLine(FileID,"    if(factor.g >= -minimum && factor.g < 0.0) factor.g = -minimum; // the best is something calculated as branching is expensive in shaders")
        WriteLine(FileID,"    if(factor.b >= -minimum && factor.b < 0.0) factor.b = -minimum;")
        WriteLine(FileID,"    gl_FragColor.rgb += factor;")
        WriteLine(FileID,"}")
    CloseFile(FileID)
endfunction

+ Code Snippet

SetWindowTitle( "test" )
SetWindowSize( 640, 480, 0 )
   
// set display properties
SetVirtualResolution( 640, 480 )
SetScreenResolution( 640, 480 ) // change screen size on mobile devices.
SetOrientationAllowed( 1, 1, 1, 1 )
SetScissor(0,0,0,0)
SetPrintColor(0,0,255)
SetSyncRate(60,0)
 
RenderImageID=CreateRenderImage(GetVirtualWidth(),GetVirtualHeight(),0,0)
 
GenerateSmokeShader("pixel.ps",3)
ShaderID=LoadSpriteShader("pixel.ps")
SpriteID=createsprite(RenderImageID)
SetSpriteShader(SpriteID,ShaderID)
 
//~ ShaderID=LoadFullScreenShader("pixel.ps")
//~ QuadID=CreateObjectQuad()
//~ SetObjectImage(QuadID,RenderImageID,0)
//~ SetObjectShader(QuadID,ShaderID)
 
SetShaderConstantArrayByName(ShaderID, "smokeColor",0,1,0,0,0)
SetShaderConstantArrayByName(ShaderID, "smokeColor",1,0,1,0,0)
SetShaderConstantArrayByName(ShaderID, "smokeColor",2,0,0,1,0)
 
do
    Print(ScreenFPS())
     
    Angle#=Angle#+20*GetFrameTime()
     
    Update(0)
    SetShaderConstantArrayByName(ShaderID, "smokeSource",0,GetPointerX(),GetPointerY(),0.1,0)
    for i=1 to 2
        SetShaderConstantArrayByName(ShaderID, "smokeSource",i,GetVirtualWidth()*0.5+sin(Angle#)*i*80,GetVirtualHeight()*0.5+cos(Angle#)*i*80,0.1,0)
    next i
 
    SetRenderToImage(RenderImageID,0)
    DrawSprite(SpriteID)
    //~ DrawObject(QuadID)
 
    SetRenderToScreen()
    Render()
 
    swap()
loop
 
function GenerateSmokeShader(File$,Count)
    FileID=OpenToWrite(File$)
        WriteLine(FileID,"varying mediump vec2 uvVarying;")
        WriteLine(FileID,"uniform sampler2D bufferTexture;//Our input texture")
        WriteLine(FileID,"uniform vec3 smokeSource["+str(Count)+"];//The x,y are the posiiton. The z is the power/density")
        WriteLine(FileID,"uniform vec3 smokeColor["+str(Count)+"];")
        WriteLine(FileID,"const int smokeCount="+str(Count)+";") // .lenght not supported on Mac,Mobile devices,WebGL
        WriteLine(FileID,"uniform float agk_time;")
        WriteLine(FileID,"uniform vec2 agk_spritesize;")
        WriteLine(FileID," ")
        WriteLine(FileID,"void main()")
        WriteLine(FileID,"{")
        WriteLine(FileID,"    //Get the color of the current pixel")
        WriteLine(FileID,"    gl_FragColor = texture2D( bufferTexture, uvVarying );")
        WriteLine(FileID,"    for(int i=0; i < smokeCount; i++)")
        WriteLine(FileID,"    {")
        WriteLine(FileID,"        //Get the distance of the current pixel from the smoke source")
        WriteLine(FileID,"        float dist = distance(smokeSource[i].xy,uvVarying * agk_spritesize);")
        WriteLine(FileID,"        //Generate smoke when mouse is pressed")
        WriteLine(FileID,"        gl_FragColor.rgb += smokeSource[i].z * max(15.0-dist,0.0) * smokeColor[i];")
        WriteLine(FileID,"    }")
        WriteLine(FileID,"")
        WriteLine(FileID,"    //Smoke diffuse")
        WriteLine(FileID,"    float xPixel = 1.0/agk_spritesize.x;//The size of a single pixel")
        WriteLine(FileID,"    float yPixel = 1.0/agk_spritesize.y;")
        WriteLine(FileID,"    vec4 rightColor = texture2D(bufferTexture,vec2(uvVarying.x+xPixel,uvVarying.y));")
        WriteLine(FileID,"    vec4 leftColor = texture2D(bufferTexture,vec2(uvVarying.x-xPixel,uvVarying.y));")
        WriteLine(FileID,"    vec4 upColor = texture2D(bufferTexture,vec2(uvVarying.x,uvVarying.y-yPixel));")
        WriteLine(FileID,"    vec4 downColor = texture2D(bufferTexture,vec2(uvVarying.x,uvVarying.y+yPixel));")
        WriteLine(FileID,"    //Handle the bottom boundary")
        WriteLine(FileID,"    if(uvVarying.y <= yPixel){")
        WriteLine(FileID,"        downColor.rgb = vec3(0.0);")
        WriteLine(FileID,"    }")
        WriteLine(FileID,"")
        WriteLine(FileID,"    //Diffuse equation")
        WriteLine(FileID,"    vec3 factor = 8.0 * 0.016 * (leftColor.rgb + rightColor.rgb + downColor.rgb * 3.0 + upColor.rgb - 6.0 * gl_FragColor.rgb);")
        WriteLine(FileID,"  ")
        WriteLine(FileID,"    //Account for low precision of texels")
        WriteLine(FileID,"    float minimum = 0.003;")
        WriteLine(FileID,"    if(factor.r >= -minimum && factor.r < 0.0) factor.r = -minimum; // here needs to be a better solution")
        WriteLine(FileID,"    if(factor.g >= -minimum && factor.g < 0.0) factor.g = -minimum; // the best is something calculated as branching is expensive in shaders")
        WriteLine(FileID,"    if(factor.b >= -minimum && factor.b < 0.0) factor.b = -minimum;")
        WriteLine(FileID,"    gl_FragColor.rgb += factor;")
        WriteLine(FileID,"}")
    CloseFile(FileID)
endfunction

best regards Preben Eriksen,

Back to top

Profile PM Email

tmu

7

Years of Service

User Offline

Joined: 2nd Feb 2017

Location:

Posted: 25th Mar 2017 11:20

Link

Yeah removing the .length() call fixes the error. Thanks! I will play around with this now and see how it works

Back to top

Profile PM

Preben

AGK Studio Developer

19

Years of Service

User Offline

Joined: 30th Jun 2004

Location:

Posted: 25th Mar 2017 11:26

Link

10:26: janbo makes you some great code.
10:52: tmu find a bug.
11:02: debugging going on.
11:16: solution.
11:20: confirmed working.

Amazing all within 1 hour on a forum, what a community

best regards Preben Eriksen,

Back to top

Profile PM Email

janbo

15

Years of Service

User Offline

Joined: 10th Nov 2008

Location: Germany

Posted: 25th Mar 2017 12:53 Edited at: 25th Mar 2017 13:26

Link

Preben wrote: "janbo is the shader guru"

I appreciate that, especialy when it comes from someone like you

Is there a simple online versioning and revision control system for such little projects, but without registration ?
Nothing-special-update:

SetWindowTitle( "test" )
SetWindowSize( 640, 480, 0 )
   
// set display properties
SetVirtualResolution( 640, 480 )
SetScreenResolution( 640, 480 ) // change screen size on mobile devices.
SetOrientationAllowed( 1, 1, 1, 1 )
SetScissor(0,0,0,0)
SetPrintColor(0,0,255)
SetSyncRate(60,0)
 
RenderImageID=CreateRenderImage(GetVirtualWidth(),GetVirtualHeight(),0,0)

GenerateSmokeShader("pixel.ps",3)
ShaderID=LoadSpriteShader("pixel.ps")
SpriteID=createsprite(RenderImageID)
SetSpriteShader(SpriteID,ShaderID)
 
//~ ShaderID=LoadFullScreenShader("pixel.ps")
//~ QuadID=CreateObjectQuad()
//~ SetObjectImage(QuadID,RenderImageID,0)
//~ SetObjectShader(QuadID,ShaderID)
 
SetShaderConstantArrayByName(ShaderID, "smokeColor",0,1,0,0,15)
SetShaderConstantArrayByName(ShaderID, "smokeColor",1,0,1,0,10)
SetShaderConstantArrayByName(ShaderID, "smokeColor",2,0,0,1,25)
do
    Print(ScreenFPS())
	
    Angle#=Angle#+20*GetFrameTime()
	
    Update(0)
    SetShaderConstantArrayByName(ShaderID, "smokeSource",0,GetPointerX(),GetPointerY(),0.1,0)
    for i=1 to 2
        SetShaderConstantArrayByName(ShaderID, "smokeSource",i,GetVirtualWidth()*0.5+sin(Angle#)*i*80,GetVirtualHeight()*0.5+cos(Angle#)*i*80,0.1,0)
    next i
 
    SetRenderToImage(RenderImageID,0)
    DrawSprite(SpriteID)
    //~ DrawObject(QuadID)
 
    SetRenderToScreen()
    Render()
 
    swap()
loop
 
function GenerateSmokeShader(File$,Count)
    FileID=OpenToWrite(File$)
		WriteLine(FileID,"varying mediump vec2 uvVarying;")
		WriteLine(FileID,"uniform sampler2D bufferTexture;//Our input texture")
		WriteLine(FileID,"const int smokeCount="+str(Count)+";") // .lenght not supported on Mac,Mobile devices,WebGL
		WriteLine(FileID,"uniform vec3 smokeSource[smokeCount];//The x,y are the posiiton. The z is the power/density")
		WriteLine(FileID,"uniform vec4 smokeColor[smokeCount];")
		WriteLine(FileID,"uniform float frameTime;")
		WriteLine(FileID,"uniform vec2 agk_spritesize;")
		WriteLine(FileID," ")
		WriteLine(FileID,"void main()")
		WriteLine(FileID,"{")
		WriteLine(FileID,"    //Get the color of the current pixel")
		WriteLine(FileID,"    gl_FragColor = texture2D(bufferTexture, uvVarying);")
		WriteLine(FileID,"    for(int i=0; i < smokeCount; i++)")
		WriteLine(FileID,"    {")
		WriteLine(FileID,"        //Get the distance of the current pixel from the smoke source")
		WriteLine(FileID,"        float dist = distance(smokeSource[i].xy,uvVarying * agk_spritesize);")
		WriteLine(FileID,"        //Generate smoke when mouse is pressed")
		WriteLine(FileID,"        gl_FragColor.rgb += smokeSource[i].z * max(smokeColor[i].a-dist,0.0) * smokeColor[i].rgb;")
		WriteLine(FileID,"    }")
		WriteLine(FileID,"")
		WriteLine(FileID,"    //Smoke diffuse")
        WriteLine(FileID,"    float xPixel = 1.0/agk_spritesize.x;//The size of a single pixel")
        WriteLine(FileID,"    float yPixel = 1.0/agk_spritesize.y;")
        WriteLine(FileID,"    vec4 rightColor = texture2D(bufferTexture,vec2(uvVarying.x+xPixel,uvVarying.y));")
        WriteLine(FileID,"    vec4 leftColor = texture2D(bufferTexture,vec2(uvVarying.x-xPixel,uvVarying.y));")
        WriteLine(FileID,"    vec4 upColor = texture2D(bufferTexture,vec2(uvVarying.x,uvVarying.y-yPixel));")
        WriteLine(FileID,"    vec4 downColor = texture2D(bufferTexture,vec2(uvVarying.x,uvVarying.y+yPixel));")
		WriteLine(FileID,"    //Handle the bottom boundary")
		WriteLine(FileID,"    if(uvVarying.y <= yPixel) downColor.rgb = vec3(0.0);")
		WriteLine(FileID,"")
		WriteLine(FileID,"    //Diffuse equation")
		WriteLine(FileID,"    vec3 factor = 8.0 * 0.016 * (leftColor.rgb + rightColor.rgb + downColor.rgb * 3.0 + upColor.rgb - 6.0 * gl_FragColor.rgb);")
		WriteLine(FileID,"")
		WriteLine(FileID,"    //Account for low precision of texels")
		WriteLine(FileID,"    float minimum = 0.003;")
		WriteLine(FileID,"    if(factor.r >= -minimum && factor.r < 0.0) factor.r = -minimum; // here needs to be a better solution")
		WriteLine(FileID,"    if(factor.g >= -minimum && factor.g < 0.0) factor.g = -minimum; // the best is something calculated as branching is expensive in shaders")
		WriteLine(FileID,"    if(factor.b >= -minimum && factor.b < 0.0) factor.b = -minimum;")
		WriteLine(FileID,"    gl_FragColor.rgb += factor;")
		WriteLine(FileID,"}")
    CloseFile(FileID)
endfunction

+ Code Snippet

SetWindowTitle( "test" )
SetWindowSize( 640, 480, 0 )
   
// set display properties
SetVirtualResolution( 640, 480 )
SetScreenResolution( 640, 480 ) // change screen size on mobile devices.
SetOrientationAllowed( 1, 1, 1, 1 )
SetScissor(0,0,0,0)
SetPrintColor(0,0,255)
SetSyncRate(60,0)
 
RenderImageID=CreateRenderImage(GetVirtualWidth(),GetVirtualHeight(),0,0)

GenerateSmokeShader("pixel.ps",3)
ShaderID=LoadSpriteShader("pixel.ps")
SpriteID=createsprite(RenderImageID)
SetSpriteShader(SpriteID,ShaderID)
 
//~ ShaderID=LoadFullScreenShader("pixel.ps")
//~ QuadID=CreateObjectQuad()
//~ SetObjectImage(QuadID,RenderImageID,0)
//~ SetObjectShader(QuadID,ShaderID)
 
SetShaderConstantArrayByName(ShaderID, "smokeColor",0,1,0,0,15)
SetShaderConstantArrayByName(ShaderID, "smokeColor",1,0,1,0,10)
SetShaderConstantArrayByName(ShaderID, "smokeColor",2,0,0,1,25)
do
    Print(ScreenFPS())
	
    Angle#=Angle#+20*GetFrameTime()
	
    Update(0)
    SetShaderConstantArrayByName(ShaderID, "smokeSource",0,GetPointerX(),GetPointerY(),0.1,0)
    for i=1 to 2
        SetShaderConstantArrayByName(ShaderID, "smokeSource",i,GetVirtualWidth()*0.5+sin(Angle#)*i*80,GetVirtualHeight()*0.5+cos(Angle#)*i*80,0.1,0)
    next i
 
    SetRenderToImage(RenderImageID,0)
    DrawSprite(SpriteID)
    //~ DrawObject(QuadID)
 
    SetRenderToScreen()
    Render()
 
    swap()
loop
 
function GenerateSmokeShader(File$,Count)
    FileID=OpenToWrite(File$)
		WriteLine(FileID,"varying mediump vec2 uvVarying;")
		WriteLine(FileID,"uniform sampler2D bufferTexture;//Our input texture")
		WriteLine(FileID,"const int smokeCount="+str(Count)+";") // .lenght not supported on Mac,Mobile devices,WebGL
		WriteLine(FileID,"uniform vec3 smokeSource[smokeCount];//The x,y are the posiiton. The z is the power/density")
		WriteLine(FileID,"uniform vec4 smokeColor[smokeCount];")
		WriteLine(FileID,"uniform float frameTime;")
		WriteLine(FileID,"uniform vec2 agk_spritesize;")
		WriteLine(FileID," ")
		WriteLine(FileID,"void main()")
		WriteLine(FileID,"{")
		WriteLine(FileID,"    //Get the color of the current pixel")
		WriteLine(FileID,"    gl_FragColor = texture2D(bufferTexture, uvVarying);")
		WriteLine(FileID,"    for(int i=0; i < smokeCount; i++)")
		WriteLine(FileID,"    {")
		WriteLine(FileID,"        //Get the distance of the current pixel from the smoke source")
		WriteLine(FileID,"        float dist = distance(smokeSource[i].xy,uvVarying * agk_spritesize);")
		WriteLine(FileID,"        //Generate smoke when mouse is pressed")
		WriteLine(FileID,"        gl_FragColor.rgb += smokeSource[i].z * max(smokeColor[i].a-dist,0.0) * smokeColor[i].rgb;")
		WriteLine(FileID,"    }")
		WriteLine(FileID,"")
		WriteLine(FileID,"    //Smoke diffuse")
        WriteLine(FileID,"    float xPixel = 1.0/agk_spritesize.x;//The size of a single pixel")
        WriteLine(FileID,"    float yPixel = 1.0/agk_spritesize.y;")
        WriteLine(FileID,"    vec4 rightColor = texture2D(bufferTexture,vec2(uvVarying.x+xPixel,uvVarying.y));")
        WriteLine(FileID,"    vec4 leftColor = texture2D(bufferTexture,vec2(uvVarying.x-xPixel,uvVarying.y));")
        WriteLine(FileID,"    vec4 upColor = texture2D(bufferTexture,vec2(uvVarying.x,uvVarying.y-yPixel));")
        WriteLine(FileID,"    vec4 downColor = texture2D(bufferTexture,vec2(uvVarying.x,uvVarying.y+yPixel));")
		WriteLine(FileID,"    //Handle the bottom boundary")
		WriteLine(FileID,"    if(uvVarying.y <= yPixel) downColor.rgb = vec3(0.0);")
		WriteLine(FileID,"")
		WriteLine(FileID,"    //Diffuse equation")
		WriteLine(FileID,"    vec3 factor = 8.0 * 0.016 * (leftColor.rgb + rightColor.rgb + downColor.rgb * 3.0 + upColor.rgb - 6.0 * gl_FragColor.rgb);")
		WriteLine(FileID,"")
		WriteLine(FileID,"    //Account for low precision of texels")
		WriteLine(FileID,"    float minimum = 0.003;")
		WriteLine(FileID,"    if(factor.r >= -minimum && factor.r < 0.0) factor.r = -minimum; // here needs to be a better solution")
		WriteLine(FileID,"    if(factor.g >= -minimum && factor.g < 0.0) factor.g = -minimum; // the best is something calculated as branching is expensive in shaders")
		WriteLine(FileID,"    if(factor.b >= -minimum && factor.b < 0.0) factor.b = -minimum;")
		WriteLine(FileID,"    gl_FragColor.rgb += factor;")
		WriteLine(FileID,"}")
    CloseFile(FileID)
endfunction

Trying to find a way to incorporate the Flow Direction from a kind of normalmap.
Can't find the right equation.

[Edit]
I will eventualy make a tool that I can run from Notepad++ which converts the GLSL code in the AppGameKit code.
Then I can easily work from my GLSL syntax enabled notepad and copy paste the exported function into AGK.
Hm that system is still not perfect...
[/Edit]

Using AGKv2 Tier1

Back to top

Profile PM Email Website

tmu

7

Years of Service

User Offline

Joined: 2nd Feb 2017

Location:

Posted: 25th Mar 2017 12:59 Edited at: 25th Mar 2017 13:27

Link

Yes, AppGameKit is not just a nice tool but a great community

The shader seems to work pretty great. But I was also hoping to be able to control the direction/speed of smoke sources. That is, the weights in the diffuse equation for different sides of color (up,down,left,right). Is this possible?

I couldn't quite figure out how to modify this single shader you made to have different weights, so I tried to use your drawing method to draw separate sprites with separate shaders but the "black" area of sprite 2 seems to obscure the area of sprite 1. Also, your shader seems to nicely handle overlapping smoke sources as not overwriting others permanently. Couldn't quite figure out why does it do that.. I thought if you put white on blue it would get permanently mixed but no :o

How could I make it so the direction/weights (and speed) of smoke sources are configurable as well?

Back to top

Profile PM

tmu

7

Years of Service

User Offline

Joined: 2nd Feb 2017

Location:

Posted: 25th Mar 2017 20:33

Link

I played with this quite a bit and its a very useful shader. The problem is that it now does not work on mobile (Android) at all. The smoke sources sort of just flash for a moment and disappear..

Back to top

Profile PM

janbo

15

Years of Service

User Offline

Joined: 10th Nov 2008

Location: Germany

Posted: 25th Mar 2017 22:06

Link

great everybody gets another result

Using AGKv2 Tier1

Back to top

Profile PM Email Website

tmu

7

Years of Service

User Offline

Joined: 2nd Feb 2017

Location:

Posted: 26th Mar 2017 11:34

Link

Your original code for fixing the shader I posted originally worked, so I was able to compare and modify your new one to work on all platforms. It's quite a mess now in my project, since I tried all sorts of weird stuff on it but I try to remember what I modified. The two main modifications I see:

The "uvVarying" variable you used in the later version instead of the "pixel" variable - I reverted to the original pixel variable.
The factor variable you combined all three channels of r,g,b in one and used those. I split them all to separate so I had factor_r, factor_g, factor_b and applied them separately.

So with these changes to make it more like the original one, it worked on OSX, Android and iPhone. But I guess my screensize of 1900x1200 was a bit too much for the Android as it slowed to around 30FPS. This also slowed down the simulation significantly, which would be a problem. And in a game I should have more than a shader as well..

I guess I should actually set all my code to match framerate or something but I like to cross my fingers and pretend its not going to be an issue.

I am also a bit vary about all the customization of the rendering pipeline, I like to have a sync() call and some for dummies style method calls in between

. Kind of like particles, which I also tried but could not produce this kind of effect.

Still a very nice shader to try if I ever realize to use a smaller resolution for next game or something..

We can use this in any game we like?

Back to top

Profile PM

Phaelax

DBPro Master

21

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 26th Mar 2017 16:33

Link

Quote: "I will eventualy make a tool that I can run from Notepad++ which converts the GLSL code in the AppGameKit code.
Then I can easily work from my GLSL syntax enabled notepad and copy paste the exported function into AGK.
Hm that system is still not perfect..."

AGK uses it's own shader lingo?

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds

Back to top

Profile PM Email Website

janbo

15

Years of Service

User Offline

Joined: 10th Nov 2008

Location: Germany

Posted: 26th Mar 2017 19:31

Link

No I was talking about the generateshader function
I am to lazy to copy paste the glsl code between the writeline(" and the ") so I made a "tool" for it which creates the whole function

Using AGKv2 Tier1

Back to top

Profile PM Email Website

Sorry your browser is not supported!

AppGameKit Classic Chat / shader porting help

Attachments

Attachments