Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / shader porting help

Author
Message
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 24th Mar 2017 09:30
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):



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



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?
janbo
10
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 24th Mar 2017 14:04 Edited at: 24th Mar 2017 14:56
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

Pixel Shader

Picture

Using AGKv2 Tier1

Attachments

Login to view attachments
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 24th Mar 2017 22:12
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?


Preben
AGK Studio Developer
15
Years of Service
User Offline
Joined: 30th Jun 2004
Location:
Posted: 24th Mar 2017 23:04
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,
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 25th Mar 2017 08:04
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:



And here are the shaders:

red (pixel.ps):



green (pixelg.ps):



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
janbo
10
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 25th Mar 2017 10:26 Edited at: 25th Mar 2017 10:27
Hey,

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

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
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 25th Mar 2017 10:52
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..
janbo
10
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 25th Mar 2017 11:02 Edited at: 25th Mar 2017 11:03
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
Preben
AGK Studio Developer
15
Years of Service
User Offline
Joined: 30th Jun 2004
Location:
Posted: 25th Mar 2017 11:16
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

best regards Preben Eriksen,
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 25th Mar 2017 11:20
Yeah removing the .length() call fixes the error. Thanks! I will play around with this now and see how it works
Preben
AGK Studio Developer
15
Years of Service
User Offline
Joined: 30th Jun 2004
Location:
Posted: 25th Mar 2017 11:26
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,
janbo
10
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 25th Mar 2017 12:53 Edited at: 25th Mar 2017 13:26
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:


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
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 25th Mar 2017 12:59 Edited at: 25th Mar 2017 13:27
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?
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 25th Mar 2017 20:33
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..
janbo
10
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 25th Mar 2017 22:06
great everybody gets another result

Using AGKv2 Tier1
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 26th Mar 2017 11:34
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?
Phaelax
DBPro Master
16
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 26th Mar 2017 16:33
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
janbo
10
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 26th Mar 2017 19:31
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

Login to post a reply

Server time is: 2019-07-20 02:50:21
Your offset time is: 2019-07-20 02:50:21