Tuesday, 18 January 2011

ShaderToy for Android

 At GDC last year, a little-known search engine company called Google were kind enough give me a free "Android" phone (a Motorola Droid). It turned out this was CDMA and so wasn't of much use to me as a phone in the UK, but fortunately it had a keyboard and could run OpenGL ES 2.0, so my next thought was that it would be cool to write a little app that let you edit and compile GLSL shaders directly on the phone. And this is the result.

It's not that easy editing code on a tiny keyboard, and the shader performance of the current generation of Android phones isn't great, but even so it's fun little app for messing around with shaders on the train or whatever.

It requires Android 2.2 and OpenGL ES 2.0. I've only really tested it on the Droid and my Tegra 2 devkit, so I'd be curious to hear how well it works on other devices. It's free, so you can't complain too much.

This is largely inspired by Inigo Quilez's ShaderToy, and I included some of his shaders, so all due credit to him.

To install it, search "ShaderToy" in the Android Market, or if you're reading this on your phone, just click the link above.


hayden said...

Works well on my desire HD!

mikej said...

News item at
I Programmer

Hope it gets you lots of downloads and publicity.

Simon Green said...

mikej - that's great, thanks!

pixelmager said...

Awesome! Very functional on samsung galaxy s as well.

Only thing it really needs is a time/frame!

Oh, and your android is missing its head :( - everything else is there though, and at a decent framerate.

pixelmager said...

The head seems to be a sign-error?

Changing the sign of the half-sphere plane fixes it:
...plane( p, vec3(0,-1,0) )...

Yes, editing on a phone is a bit cumbersome :) Add load-from-url? It's java, how hard can it be :D


Simon Green said...

Thanks for the feedback! The droid head is correct on my Tegra 2 and desktop, might be a PowerVR compiler bug?

Load from url - good idea!

pixelmager said...

Yea, looks like a compiler-bug with unary minus. If you change the difference(...)-function to be "max(a, 0.0-b)" it works just fine.

zproxy said...

Hey Simon, Could you share the source code so we could learn and fork? :)

Tobias Nurmiranta said...

Hi Simon! Googled and ended up here. Was thinking about porting my small iOS app Paragraf to Android, but you've already made something similar. :)

I've made some changes to make it easier to use with the cumbersome touch keyboard. I have a default draw-function which should return a vec3 for the colors. And some default variables, such as p - position, time, tc - count of touches, t1,t2,t3 - touch positions, and tex(p) - to get the texture for position p. With all positions between 0.0 - 1.0.

I use the camera streams as texture input, which is really nice for effects :). Will try this if I find an android phone to install it on!

Lars said...

Nice ... I've been wanting to see a sample implementation of Inigo's distance field ray casting (marching?) that I could run in WebGL, and here it is.

However when I run it on my laptop, while it doesn't give any errors, it doesn't show the robot either... I just get a throbbing white glow in a sky-blue field. Any clue why?

Screenshot: here.

My graphics card is NVidia Quadro NVS 160M.

Lars said...

P.S. my previous post was not referring to your Android app, but to the Droid shader that IQ has included on his ShaderToy web page.

Lars said...

Never mind... Now that I'm using a newer Nvidia driver (the previous was a couple years old), and also using the --use-gl=desktop argument to Chrome Canary, I can see the robot. Cool!