dff180
Posts: 5
Joined: Tue Jun 26, 2012 9:00 pm

Announcement: pishadertoy

Wed Jul 04, 2012 4:22 pm

Announcement:

pishadertoy - a small command-line tool which allows you to visualize OpenGL ES 2.0 fragment shaders

https://github.com/dff180/pishadertoy

Thanks to Inigo 'iq' Quilez for permission to include his great sample shaders [http://www.iquilezles.org/apps/shadertoy/].
Thanks to Jon Macey for publishing his EGL class code [http://jonmacey.blogspot.de/2012/06/ope ... ating.html].

Tested on Raspbian (Pisces R1 image with latest firmware and 192/64 memory split).

For further details see github repository.

Enjoy,
dff180

dom
Raspberry Pi Engineer & Forum Moderator
Raspberry Pi Engineer & Forum Moderator
Posts: 5331
Joined: Wed Aug 17, 2011 7:41 pm
Location: Cambridge

Re: Announcement: pishadertoy

Wed Jul 04, 2012 9:51 pm

Nice. They run well.

Might be nice to have a script that cycles through them all, or has a simple menu, just to use as a demo.
For a framework for writing shader code, it looks great.

jmacey
Posts: 135
Joined: Thu May 31, 2012 1:05 pm

Re: Announcement: pishadertoy

Wed Jul 04, 2012 9:59 pm

Great stuff, glad my code is of use, think this will come in handy for simple shader test.

All seems to work well on my system.

Jon

dff180
Posts: 5
Joined: Tue Jun 26, 2012 9:00 pm

Re: Announcement: pishadertoy

Thu Jul 05, 2012 10:17 am

Thanks for testing. Glad to hear that it works for you folks. If it's working on other distros than Raspbian then let me know and I'll update the README.

Code still needs some cleanup (proper resource deallocation on exit).

Please also note that not all fragment shaders from ShaderToy are working. I've only included the ones from iq which worked on my Pi. Noticed that the ones which don't work (example: Apple) usually have for loops with lots of iterations. I also tried with 128/128 memory split without success.

Not sure right now what's the reason for failure on the Pi.

If someone knows why then please let me know. Always eager to learn new things. :)

Cheers,
dff180

dattrax
Posts: 52
Joined: Sat Dec 24, 2011 5:09 pm

Re: Announcement: pishadertoy

Thu Jul 05, 2012 4:08 pm

I had a quick look at Apple, and it looks like the shader backend fails in the draw call. Check the return code after the draw and it should be 'out of memory'.

There is probably little you can do to fix this, as the shader is very long. Even using a noise texture would probably not be sufficient.

Jim

User avatar
panik
Posts: 369
Joined: Fri Sep 23, 2011 12:29 pm
Location: Netherlands

Re: Announcement: pishadertoy

Fri Jul 06, 2012 1:06 pm

Hey, this is great! This really helps in trying to get my head around the concept of (interacting with) shaders. I've been playing around with this for an hour or so, and it already cleared up *some* of the fog. Comparing your version of MyGLWindow.cpp with Jon Macey's original was kind of an eye-opener, even though I'm a long way from fully being there yet. At least it's given me some confidence to try out stuff. Thanks bunches! And thanks again Jon for piNGL. :D

One tiny little detail from the readme:
Using fragment shader which doesn't need texture
./pishadertoy shaders/plasma.f.glsl
plasma.f.glsl is 'missing' in the shaders directory on github. It's easily copied from the shadertoy website you mentioned, but I'm just sayin'...

dom
Raspberry Pi Engineer & Forum Moderator
Raspberry Pi Engineer & Forum Moderator
Posts: 5331
Joined: Wed Aug 17, 2011 7:41 pm
Location: Cambridge

Re: Announcement: pishadertoy

Fri Jul 06, 2012 2:40 pm

dff180 wrote: Please also note that not all fragment shaders from ShaderToy are working. I've only included the ones from iq which worked on my Pi. Noticed that the ones which don't work (example: Apple) usually have for loops with lots of iterations. I also tried with 128/128 memory split without success.

Not sure right now what's the reason for failure on the Pi.
Generally complicated shaders fail on the Pi with a memory error. This is usually due to the shader compiler running out of registers (a hardware resource).
Note that for loops are just unrolled, so generate lots of code. Sometimes registers are reused on each iteration, but often new ones are allocated which is where the problem occurs.
Sometimes expressing the shader code a simpler way may allow better register reuse, but that's pretty much trial and error.

There is a redesign of the shader compiler going on now, that will have a better register allocator in. Post links to any failing shaders and I can link them into our bug tracker, and they will hopefully be supported in the future.
However this is a huge job, that will take likely take many months.

Note: just writing a shader for standard 3D rendering effects is likely to be fine. All the Khronos conformance suite passes. This limitation is only really hit when using the shaders for compute work, like mandelbrots.

dff180
Posts: 5
Joined: Tue Jun 26, 2012 9:00 pm

Re: Announcement: pishadertoy

Sat Jul 07, 2012 11:51 am

Just finished putting up a little pishadertoy video on YouTube for those who want to see what's possible:

http://youtu.be/F0mfntGDmxg

---

Jim / dom: Thanks for your helpful feedback.
panik: README example text is now fixed to use an included shader.

mikerr
Posts: 2778
Joined: Thu Jan 12, 2012 12:46 pm
Location: UK
Contact: Website

Re: Announcement: pishadertoy

Sun Jul 15, 2012 11:11 pm

Works fine on wheezy too - good work

Changed a few lines to get it play 300 frames of each shader in the directory for a demo

http://youtu.be/82PHzktgSNA
openglespi.jpg
openglespi.jpg (41.53 KiB) Viewed 14765 times
Android app - Raspi Card Imager - download and image SD cards - No PC required !

rebb
Posts: 12
Joined: Wed Jan 09, 2013 10:24 am
Location: Finland
Contact: Website

Re: Announcement: pishadertoy

Wed Jan 09, 2013 10:28 am

Tool is working great, thank you!

I am little puzzled how to make shader that simply outputs texture.
Tried using gl_TexCoord but it does not seem to work at all.
Any opengl es specific shader tutorials to be found?

rebb
Posts: 12
Joined: Wed Jan 09, 2013 10:24 am
Location: Finland
Contact: Website

Re: Announcement: pishadertoy

Wed Jan 09, 2013 11:41 am

Got it posted, got it sorted myself :)

triangle.v.glsl is the vertex shader pishadertoy is using.
We need to pass an variable containing coordinates to fragment shader, so we declare new variable which type is varying, like this:

Code: Select all

varying vec2 texel2d;
and in main we give texel2d same value than coord2d is currently having

Code: Select all

texel2d = coord2d;
Now in fragment shader we must declare variable texel2d too. it uses same line of code than in vertex shader. To output texture we have stored in tex0 we can use line

Code: Select all

gl_FragColor = texture2D(tex0,texel2d);
Hope this helps someone starting out like me. Happy pixelcoding!

rebb
Posts: 12
Joined: Wed Jan 09, 2013 10:24 am
Location: Finland
Contact: Website

Re: Announcement: pishadertoy

Sat Jan 12, 2013 4:25 pm

Little video made from my first shader.

https://www.youtube.com/watch?v=RficA2Zcw4c


toxibunny
Posts: 1382
Joined: Thu Aug 18, 2011 9:21 pm

Re: Announcement: pishadertoy

Sun Jan 13, 2013 9:39 am

Very nice. are these just for fullscreen visuals, or could you use them as textures on polygons?
note: I may or may not know what I'm talking about...

rebb
Posts: 12
Joined: Wed Jan 09, 2013 10:24 am
Location: Finland
Contact: Website

Re: Announcement: pishadertoy

Sun Jan 13, 2013 10:47 am

toxibunny wrote:
Very nice. are these just for fullscreen visuals, or could you use them as textures on polygons?
This is actually out of my knowledge, but my guess is that yes you can use them as textures.

What puzzles me is in the pishadertoy code is

Code: Select all

int MyGLWindow::init_resources()
{
  GLfloat triangle_vertices[] = {
    -1.0, -1.0,
     1.0, -1.0,
    -1.0, 1.0,
     1.0, -1.0,
     1.0, 1.0,
    -1.0, 1.0
  };
When doing fullscreen would require rendering quad. Maybe i am just missing some switch on code.

User avatar
paddyg
Posts: 2359
Joined: Sat Jan 28, 2012 11:57 am
Location: UK

Re: Announcement: pishadertoy

Fri Jan 25, 2013 1:19 pm

I've not looked at the code so this a random guess at what it's doing but that does make a quad.
Two triangles: [-1,-1],[1,-1],[-1,1] and [1,-1],[1,1],[-1,1] both 'anticlockwise'
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

rebb
Posts: 12
Joined: Wed Jan 09, 2013 10:24 am
Location: Finland
Contact: Website

Re: Announcement: pishadertoy

Tue Feb 05, 2013 7:32 pm

It puzzled me why to use triangles instead of quad, but answer is obvious enough. There is no quad in Open GL ES 2.0 :)

tejonbiker
Posts: 30
Joined: Tue Aug 28, 2012 1:36 am

Re: Announcement: pishadertoy

Tue Feb 12, 2013 7:06 am

Great Work, the example with texture it's very cool :D

hesspet
Posts: 10
Joined: Mon Jan 28, 2013 12:55 pm

Re: Announcement: pishadertoy

Thu Feb 28, 2013 4:38 pm

I was inspired by you idea.

See the first results of using shaders, and objects and a lot of more stuff:

https://www.youtube.com/watch?v=sTmEoD7G1Sc

Thanks for the idea using shadertoy... :-)

User avatar
ECMDave
Posts: 1
Joined: Mon Apr 15, 2013 7:49 pm
Location: HTX
Contact: Website

Re: Announcement: pishadertoy

Mon Apr 15, 2013 7:59 pm

dom wrote:Nice. They run well.

Might be nice to have a script that cycles through them all, or has a simple menu, just to use as a demo.
For a framework for writing shader code, it looks great.

Here, I banged this out in like 2 minutes so I would have something visual to run alongside my omxplayer icecast radio. I'm sure it could be improved upon greatly though.

NOTE!!! Even though it uses the full path to the script to execute, it must be run from within the "pishadertoy" directory.

# cat /home/pi/pishadertoy/visualizer.sh
while true; do
/home/pi/shadertoy/pishadertoy/pishadertoy shaders/zinvert.f.glsl textures/texl0.jpg & sleep 30;
for p in `ps aux | grep "pishadertoy" | awk '{print $2}'`; do kill -9 $p; done;

/home/pi/shadertoy/pishadertoy/pishadertoy shaders/zinvert.f.glsl textures/texl1.jpg &
sleep 30;
for p in `ps aux | grep "pishadertoy" | awk '{print $2}'`; do kill -9 $p; done;

/home/pi/shadertoy/pishadertoy/pishadertoy shaders/zinvert.f.glsl textures/texl2.jpg &
sleep 30;
for p in `ps aux | grep "pishadertoy" | awk '{print $2}'`; do kill -9 $p; done;

/home/pi/shadertoy/pishadertoy/pishadertoy shaders/flower.f.glsl &
sleep 30;
for p in `ps aux | grep "pishadertoy" | awk '{print $2}'`; do kill -9 $p; done;

/home/pi/shadertoy/pishadertoy/pishadertoy shaders/heart.f.glsl &
sleep 30;
for p in `ps aux | grep "pishadertoy" | awk '{print $2}'`; do kill -9 $p; done;

/home/pi/shadertoy/pishadertoy/pishadertoy shaders/squaretunnel.f.glsl textures/texl1.jpg &
sleep 30;
for p in `ps aux | grep "pishadertoy" | awk '{print $2}'`; do kill -9 $p; done;
done;

paulf
Posts: 11
Joined: Sun May 05, 2013 11:38 pm

Re: Announcement: pishadertoy

Sun May 05, 2013 11:42 pm

dff180 wrote:Just finished putting up a little pishadertoy video on YouTube for those who want to see what's possible:

http://youtu.be/F0mfntGDmxg
That tune is an Edge s3m isn't it?

monte-monte
Posts: 1
Joined: Mon Jul 29, 2013 7:05 pm

Re: Announcement: pishadertoy

Mon Jul 29, 2013 7:35 pm

Hello. I think your program is great, and has big potential in art installations and other places where continuous visualization is needed. But somehow it doesn't work with some shaders that come with it. Some of them crash with error, other just don't move simply displaying first frame. I've found some interesting examples on shadertoy.org but couldn't run them too.
I'm not a programmer at all, though understand the logic and syntax of popular script languages. I would like to learn a little bit to write such shaders, but don't have time for this at the moment, as I am preparing for an exhibition where i'd like to use pishadertoy visualization as background for my work.
I would highly appreciate some help in getting this shader work in pishadertoy if this can be done: https://www.shadertoy.com/view/MdXGDH

Code: Select all

const float PI = 3.14159265;

float time = iGlobalTime *0.2;

void main(void ) {

	float color1, color2, color;
	
	color1 = (sin(dot(gl_FragCoord.xy,vec2(sin(time*3.0),cos(time*3.0)))*0.02+time*3.0)+1.0)/2.0;
	
	vec2 center = vec2(640.0/2.0, 360.0/2.0) + vec2(640.0/2.0*sin(-time*3.0),360.0/2.0*cos(-time*3.0));
	
	color2 = (cos(length(gl_FragCoord.xy - center)*0.03)+1.0)/2.0;
	
	color = (color1+ color2)/2.0;

	float red	= (cos(PI*color/0.5+time*3.0)+1.0)/2.0;
	float green	= (sin(PI*color/0.5+time*3.0)+1.0)/2.0;
	float blue	= (sin(+time*3.0)+1.0)/2.0;
	
    gl_FragColor = vec4(red, green, blue, 1.0);
}

User avatar
Stainless
Posts: 4
Joined: Wed Sep 11, 2013 10:31 am
Location: Southampton
Contact: Website

Re: Announcement: pishadertoy

Fri Sep 13, 2013 9:23 am

I while back I came across this site,http://forthsalon.appspot.com/

The idea of writing shaders in Forth really appealed to me, I guess I'm just weird. Use the Forth you must.

I wrote a tool for Antix Game Player that compiled the Forth code into glsl shader code and blitted a full screen quad using the shader.

You can see an example of the result here https://www.youtube.com/watch?v=ikOe0gM8nQE and here https://www.youtube.com/watch?v=iHmULtCvqeM

The good news is that a couple of us in the office have now bought Pi's and started an off the book port of AGP.

At the moment we have a lot of issues, but OpenGL 1 apps are running (Plants Versus Zombies runs and is playable, but won't go full screen for some strange reason :? ) but we haven't got ES 2 going yet.

When we do get it running, I'd like to post the code for the Forth -> GLSL part of the app somewhere. Maybe add it to pishadertoy ?

primeform
Posts: 11
Joined: Wed Jan 29, 2014 6:46 am

Re: Announcement: pishadertoy

Sat Mar 01, 2014 10:24 pm

Has any more work been done with this project? Has anyone imported sound to run through the visualization?

Luutifa
Posts: 16
Joined: Mon Nov 26, 2012 6:20 pm

Re: Announcement: pishadertoy

Sat Sep 06, 2014 8:35 am

NO WAY! :D

I've made something exactly like this, because a demoscene club ("Demokerho") I attend uses Shadertoy.com a lot.
I didn't want to use the lame modern PCs they provide.

It is my very first OpenGL project, so not so HQ, but it has primitive support for 2D textures which is nice.
http://luutifa.tk/esfragt/
I used it as the "engine" for my demo "Shady fragments" at Evoke 2014.

Even though your project is totally cool and such, I'm not going to betray the fruit of my own work, so I'll keep using and developing esfragt.

Return to “OpenGLES”