Page 1 of 3

RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Sat Jul 27, 2019 5:59 pm
by tipam
Hi,

I've just written a small app that will render over 100+ OpenGL ES 3.0 shaders (pinched from ShaderToy.com) to give an idea of what can be done with the RPi 4 GPU.

Link: http://www.skillmanmedia.com/ShaderToyRPi4.zip

You will need to install the SDL2 libraries from a terminal window and reserve 128MB GPU mem ...

Code: Select all

sudo apt-get install libsdl2-dev
sudo apt-get install libsdl2-image-dev
sudo apt-get install libsdl2-ttf-dev
sudo apt-get install libsdl2-mixer-dev
You should be able to dbl-click the ShaderToy executable after unzipping the folder to try it out.
(You will need to set permissions first by selecting ShaderToy, right-click 'File Properties->Permissions->Execute' to 'Anyone')

Use the SPACEBAR to jump to the next shader and ESCAPE to exit.
There are some shaders that allow you to use the mouse (navigation/rotate etc..)

The 'options.txt' file allows you to change a few obvious settings.

Note - this will ONLY work on the Raspberry Pi 4!

Please let me know if you have any problems.

Have fun! :D

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Sun Jul 28, 2019 4:58 pm
by pik33
Downloaded, tested, it works. The only problem I noticed is unresponsible X when playing with "heavy" shaders.

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Sun Jul 28, 2019 5:29 pm
by jamesh
pik33 wrote:
Sun Jul 28, 2019 4:58 pm
Downloaded, tested, it works. The only problem I noticed is unresponsible X when playing with "heavy" shaders.
Not wholly surprising - some of those shaders requires a HUGE amount of GPU processing, and X rendering requires...the GPU.

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Sun Jul 28, 2019 7:17 pm
by tipam
jamesh wrote:
Sun Jul 28, 2019 5:29 pm
pik33 wrote:
Sun Jul 28, 2019 4:58 pm
Downloaded, tested, it works. The only problem I noticed is unresponsible X when playing with "heavy" shaders.
Not wholly surprising - some of those shaders requires a HUGE amount of GPU processing, and X rendering requires...the GPU.
You're right - but I'm still quite surprised the humble Pi4 can handle those shaders!

I just wanted to see how far the Pi4 could be pushed ... some of the shaders could be used for static renders / fractal texture generation for example. And some are still pretty quick and usable.

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Mon Jul 29, 2019 2:50 am
by Gavinmc42
I also needed this one.
sudo apt-get install libsdl2-image-dev

Nice shadertoy demos.
I started them up with 64MB, was not too bad.
Apart from the initial load no CPU usage at all.

Wonder what can be done with 4 x A72's and the VC6.
3GB for the Arm's, 1GB for the VC6?
Better get a 4B4 first.

SDL2 is just working now?
I suppose that means I have to add it to my list of things to learn :)

I like that I can edit the options file and only display some of them.
I am interested in water effects at the moment.
This will work to test any shader files?

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Mon Jul 29, 2019 7:01 am
by PeterO
Gavinmc42 wrote:
Mon Jul 29, 2019 2:50 am
Wonder what can be done with 4 x A72's and the VC6.
3GB for the Arm's, 1GB for the VC6?
Better get a 4B4 first.
VC6 doesn't need lots of memory to be preallocated because it has it's own MMU so can use "normal" memory. ISTR only some camera related hardware still needs the preallocated memory,

PeterO

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Mon Jul 29, 2019 7:26 am
by Gavinmc42
Tim's shadertoy is fun.

Povray works on Pi4 and can make nice sky.
http://www.f-lohmueller.de/pov_tut/backgrnd/p_sky9.htm

Mix the cheapwater shader with a sky png ;)

I know from Gentoo64 16MB, ie the minimum was used for the GPU.
Not sure why Buster defaulted to 64MB.

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Mon Jul 29, 2019 7:29 am
by Gavinmc42
Ok, set it to 16MB and it still seems fine.
Now for further testing.

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Mon Jul 29, 2019 8:45 am
by jamesh
Gavinmc42 wrote:
Mon Jul 29, 2019 7:26 am
Not sure why Buster defaulted to 64MB.
Camera and codec support requires more than 16MB. 64MB is about right for those.

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Mon Jul 29, 2019 8:57 am
by Gavinmc42
Camera and codec support requires more than 16MB. 64MB is about right for those.
Ah, codec is the h264 hardware one? VLC uses it?
If I don't use camera and codec then 16MB should be ok?
Stick with just music while coding?

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Mon Jul 29, 2019 9:02 am
by 6by9
Gavinmc42 wrote:
Mon Jul 29, 2019 8:57 am
Camera and codec support requires more than 16MB. 64MB is about right for those.
Ah, codec is the h264 hardware one? VLC uses it?
If I don't use camera and codec then 16MB should be ok?
Stick with just music while coding?
Hevc is also using the same mechanism to allocate buffers, mainly as it was a simple route to do it. As and when we manage to shift to v4l2 then those will be cma allocations too.

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Tue Jul 30, 2019 11:09 pm
by tipam
... Added a fix to ShaderToy; iResolution should be a vec3 (not vec2) in a shader file. Shaders updated accordingly plus there's a few more nice shaders to play around with!

Here's the link: http://www.skillmanmedia.com/ShaderToyRPi4b.zip

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Wed Jul 31, 2019 12:08 am
by Gavinmc42
Thanks Tim.
Playing with these examples has been a lot of fun.
They show that shaders can do lots to add to the visual effects.
I have no idea how the shader maths works yet but it is easy to modify and see the results.

It does not matter how many books I read, none makes sense till I see code working.
This helps filling that big hole between a RGB triangle/cube and a full 3D rendered model.

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Wed Jul 31, 2019 8:31 am
by Gavinmc42
Lots of cool shaders on that site.
Doing a crash course on learning what they are.
They seem to be some sort of magical incantations using maths.

I now want to get Minecraft working just so I can put this on it.
http://shadersmods.com/sonic-ethers-unb ... aders-mod/

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Wed Jul 31, 2019 6:41 pm
by tipam
Gavinmc42 wrote:
Wed Jul 31, 2019 12:08 am
.
I have no idea how the shader maths works yet but it is easy to modify and see the results.
You're right! ... some of those shaders are insane! ... If you have a PC with an NVidia/AMD graphics card you'll find some crazy shaders ..

For example https://www.shadertoy.com/view/MsGGDK is a mini movie, battle scene with realistic effects, geometry and a computer generated sound track lasting just over 2 mins ... in just 330 lines of shader code (minus sound code)!

I can't imagine how some people visualize maths and coding like this - they must from another planet :mrgreen:

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Thu Aug 01, 2019 2:39 am
by Gavinmc42
Any sufficiently advanced technology is indistinguishable from magic. Arthur C. Clarke
Yep, these guys are the Harry Potters of the GPU universe.
I want to get a 4K screen and stick it on the roof as a fake skylight and just stare at Clouds2D all day.

First I need to figure out how it works so I can tune it faster on the Pi4.
I can slow it done a little but still jerky at full screen on a 1280x1024.
CPU usage is easy to measure, how to measure GPU usage?

How to find out if it is using 16bit or 32bit floats?
Can we double the speed by using the new 16bit floats?

Some way to spread the processing to the CPU/NEON.
It seems the noise code takes some processing, could that be CPUed?
Need to get a 4B4, precalculate a bunch of code and hold it in memory?
.. battle scene with realistic effects..
Landscapes with water, trees and clouds in a few tens of lines of code :o
It has to be magic, secret formulas passed around by a cabal of coders?

Thanks Tim.
Here is another 10years of learning some serious brain stretching maths for me :lol:
Some guys spend a lot of time on Fibonacci, this shader stuff looks like more fun.

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Thu Aug 01, 2019 9:54 am
by UglyMike
This is GREAT!! Thanks! I came to the forums to complain that chromium can't handle Shadertoy.com, but I see you already have a nice workaround! Thanks again. (Any idea WHY chromium can't handle shadertoy.com? WebGL issues? Something else?)

Now looking for other suitable alternatives to Shadertoy.com in order to see/modify fragmentshaders and to try to write some basic ones using some programs from the following list: https://alternativeto.net/software/shadertoy/

Thanks again. :P

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Thu Aug 01, 2019 10:35 am
by Gavinmc42
Any idea WHY chromium can't handle shadertoy.com? WebGL issues? Something else?)
No idea, but even my work Window10 PC struggles.
I do have to cut and paste from the Windows PC into a file i can test with Tim's tool.
Probably some, lots of those shaders require serious GPU hardware.
Shaders are GPU stress testers ;)

Pi's can handle WebGL,
I tested WebGLSamples on Chromium and Firefox on Gentoo64 on a 3B+.
The Pi4 is even faster with these Samples.

Thanks for that link to alternatives.
Shadergif looks like a place to start, but I get a warning that says WebGL2 not supported. :?
http://webglsamples.org/WebGL2Samples/# ... tex_format

So maybe Pi4/Buster is not perfect yet?

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Fri Aug 02, 2019 5:08 am
by Gavinmc42
It is the Mesa GLSL compiler that does the magic?
I have to find out if it works on the old VC4 Pi's.
https://www.x.org/wiki/Events/XDC2015/P ... mpiler.pdf

Will reading this help or confuse me?
https://github.com/mesa3d/mesa/tree/mas ... piler/glsl

GLSL code running on a Zero will be just as fast as it running on a 3B+?
I am only just starting to understand OpenGL now I need to figure out vec4 hypercubes :o
Non stop learning with these Pi's.

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Thu Aug 08, 2019 10:09 am
by Gavinmc42
Ok Tim, how did you do it?
These run on a Pi3B+ as well, some not fast, but some ok.
I did get some thermal throttling, going to need heatsinks on my 3's ;)

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Thu Aug 08, 2019 6:25 pm
by pik33
Landscapes with water, trees and clouds in a few tens of lines of code
This is what you can do using 4096(!) bytes of code - including music:

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

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Fri Aug 09, 2019 2:39 am
by Gavinmc42
I saw this time lapse on the blog and the clouds over the Finnish Lake reminded me of the clouds2D shader.
https://www.raspberrypi.org/blog/rather ... me-lapses/

These moving sand paintings were all the rage decades ago, got one somewhere.
https://www.bing.com/images/search?q=sa ... &FORM=IGRE

So why not figure out how to do this with Pi's.
Not time lapse, just real time, nice slow calming clouds.
Seem to have collected a surplus of monitors, time to use them ;)
Use the onboard USB hub for power.

Simple enough a Zero can do it, which means OpenGLES 2.0.
But I did not think the VC4 had shaders.

So when Tim's shadertoy worked on a Pi3B+ I got confused.

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Fri Aug 09, 2019 2:09 pm
by Paeryn
Gavinmc42 wrote:
Fri Aug 09, 2019 2:39 am
Simple enough a Zero can do it, which means OpenGLES 2.0.
But I did not think the VC4 had shaders.

So when Tim's shadertoy worked on a Pi3B+ I got confused.
OpenGLES1's vertex and fragment stages are fixed-function only, OpenGL ES2's vertex and fragment stages are shader only. When running ES1 code the VC4 will be using pre-defined shaders that implement the the fixed-function stages. What gave you the impression that the VC4 didn't have shaders?

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Fri Aug 09, 2019 5:53 pm
by pik33
These moving sand paintings were all the rage decades ago, got one somewhere.
This still exists and works on RPi4 :)

https://dan-ball.jp/en/javagame/dust/

If this is possible using Java, then shader based sand art should be possible too

Re: RPi 4 OpenGL ES 3.0 ShaderToy to download (100+ examples)

Posted: Sat Aug 10, 2019 12:37 am
by Gavinmc42
Cool demo, lots of things seem to just work on Pi4's :D
Good excuse for learning OpenGL Particle coding :D
What gave you the impression that the VC4 didn't have shaders?
In Tim's Readme it says only works on Pi4's.
It looks like mesa is smart enough to figure that out and use the VC4 driver.
Dug out the VC4 manual, not much on shaders, need the VC6 manual, not that it will make much sense.

Think I need to look at the output of the shader compilers.
So far reading all the OpenGL books is leading me to conclude shaders are even more complex than just the 3D stuff.

Been putting off learning 3D on Pi's, it has been playing with OpenGL on the Pi4 that all the pieces fell into place.
I wondered why there was nothing between triangles and cubes and full objects in OpenGLES.
There is no library like FreeGLUT for OpenGLES.

Then Tim comes along and throws shaders into the mix.
Another new world of learning.