Announcement: pishadertoy

[dff180]

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]

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]

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]

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]

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

[panik]

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.

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]

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]

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]

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 (41.53 KiB) Viewed 16047 times

[rebb]

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]

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]

Little video made from my first shader.

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

[rebb]

http://www.youtube.com/watch?v=9N-2srAwLE8

[toxibunny]

http://www.youtube.com/watch?v=9N-2srAwLE8

Very nice. are these just for fullscreen visuals, or could you use them as textures on polygons?

[rebb]

http://www.youtube.com/watch?v=9N-2srAwLE8

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.

[paddyg]

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'

[rebb]

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]

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

[hesspet]

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...

[ECMDave]

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]

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]

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);
}

[Stainless]

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]

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

[Luutifa]

NO WAY!

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.