A list of submissions can be viewed here.
Stainless posted the idea of doing some random psychedelic demo stuff this Xmas, so I decided to start a clean thread for that. I dug up my old open sourced nutty webgl engine and prepared a simple framework for quickly generating art using fragment shaders. The framework is simple.
Sample Demo available here.
Download source code here.
The source zip file contains an /opt folder that you can use to publish a minimized version to your site.
The /shaders folder contains the samples I used in the demo.
Don’t forget the ?p=N tag! If you provide a link without it, the app will default to 1 render pass.
You are of course free to use your own tech, but with this project you can jump straight into shader dev, unless you really need a special parameter or some such. If necessary, you can modify src/app/MainScene.js and src/app/AnimatingImageShader.js. Those are the only two files you should care about.
Let’s see some cool stuff :)
Please log in or register to post a reply.
Interesting, your demo works fine, but the source code produces no output on my local machine
I assumed invoking …
Would run your demo locally, I get a white screen
XMLHttpRequest cannot load file:///D:/Websites/TheNut/template/opt/shaders/image.vs. Cross origin requests are only supported for HTTP. index.htm:1
Error initializing WebGL: NetworkError: A network error occurred.
Ahhhh anyone else have this problem, start chrome with the command line
Okay I’ve done some quick ports of my existing stuff to get us going, but my website host does not allow me to publish them.
Anybody got somewhere to host them?
Okay no body seems to be online today, I’ve put a zip up here if anyone is kind enough to host it for me
I posted your stuff on my site. I moved some stuff around to make it more web efficient. If anyone else wants their stuff posted on my site, I’ll just add the entries.
BTW, I love the orbit one. I’d like to see it animate with some heat waves from the sun.
There is one more to add to the pile
I’ll start adding stuff sometimes during next week, got too much work on my hands for next 2/3 days.
I still can’t run even Nutty’s example - got everything placed on localhost, and Opera still screams ‘Unhandled Error: Undefined variable: MainScene’, plus Linked script not loaded (in console). I know this is sometimes caused by disallowing cross origin request (while I have them enabled)… any hint?
EDIT: Somewhere read that this is a common bug with Opera, although I can’t really use different browser by now (I’m limited to Linux OS here, and installing FF on this distro would be bloody mess), so I guess it has to wait till I get to desktop.
Did you see any other important details? It doesn’t sound like a cross-domain issue, otherwise you would see the white screen Stainless saw (although I am surprised Chrome required that special attribute). Perhaps the Opera JS engine is failing on something I’m doing?
BTW, Firefox has a static build for Linux, so it should be a simple extract + run ./firefox.
Fractalicious! Hmm, would be interesting to do a mandelbulb next. I also added a new warp shader.
Vilem, no worries. Gives the rest of us a head start :D
Just for anyone looking for the demos
Tried a two pass version of Orbit, didn’t work out as well as I hoped though
I was thinking something more like this. It would be nice to put a satellite or space station in there to add context, but save that for another place and time.
Did you want me to post your second one or are you still working on it?
Bwhahaha… found a bit of time today, so I can start catching you. For start, a simple ray tracer … although it’ll get more serious really really soon (would like to do some epic geometry and procedural texturing).
This one is single-pass only. Just spheres, reflections, shadows and stuff.
By the way, is there a possibility to read textures from N-1 previous passes (that could help me a bit, but if not I guess I’ll have to live with limitations).
could you share your ray creation for pixel code please?
I’ve tried several and none worked as I wanted.
No load it, might give someone an idea
All it does is use the second pass to rotate the bitmap generated in the first pass, but you could use a warp or something using the same technique
Just get the file in shaders folder:
It should be available from any domain.
merry christmas, music module player only with Chrome
I added a new one I dub the Voodoobrot. It’s basically Mandelbrot on THC :)
The animation is really subtle, but effective. Like it
Started to do ray traced terrain, but if I add anything else to the shader it crashes
I guess I’ve run out of registers
Interesting. I would suspect the fbm is causing most of the problems. At 6 iterations, it’s pretty expensive, plus being nested in another loop. Have you tried for something more like rolling hills? You could skip the fbm and just use the noise value directly. With the savings, you can calculate a normal vector and use real lighting equations. Could be interesting.
I’m going to update the framework when I get home from work tonight. As Vilem suggested, I’m going to store a record of textures (up to 4, maybe 8) as you progress down the number of passes. I’m also going to add normalized mouse coordinates if you want to make your shaders respond to mouse movements. Let me know if there’s anything else you think would be nice to have.
I tried using a much, much simper height equation.
Don’t really like it, but interesting to see what you can do without textures
Well I guess we’ll get some update from Nutty soon, that will allow us to read from M previous passes … then the fun will begin.
And I finally started working on something to add here :P
My bad. I forgot to make the update. I just added in the changes and updated the notes at the top.
I don’t want you spending all your spare time on the framework, rather see some pretty pictures.
However, having said that ……. ;>
I am just wondering if it could be possible to have passes flagged as “run once”
What I am thinking is….
image1.fs run once generates water texture
image2.fs run once generates grass texture
image3.fs run once generates rock texture
image4.fs textured landscape shader
That’s what Vilem wanted too. The update I made essentially turns all render passes into “run once”, since pass N can now access the textures generated from N-2, N-3, N-4, etc. So in your case, go ahead and generate your water, grass, and rock textures individually over 3 passes. Sample0 = water, Sample1 = grass, Sample2 = rock. On the 4th pass, you can sample from all those textures.
Actually, there was an error in my documentation of how the textures work. I updated the zip file with new comments in the shaders, but it’s essentially what I described above. Sample0 = texture from first pass, Sample1 = texture from second pass, etc.
I needed a decent random number generator for my next shader, and came across a one liner that looked good.
So I wrote this
float rand(vec2 co)
return (fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453));
/// Generates a pseudo random noise texture
void main ()
vec3 colour = vec3(0.0, 0.0, 0.0);
gl_FragColor.xyz = colour;
gl_FragColor.w = 1.0;
To my suprise, it animated!
changing it to this gave me the expected results
return abs(fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453));
Just thought it may be something one of you can use.
Got a problem.
I have now got a 4 pass shader
pass 1 generates a random noise texture
pass 2 generates a height field using the texture generated in pass 1
pass 3 generates a pallete texture
pass 4 combines the height field and the pallete
In pass 4 no matter what sampler I use, I get the noise texture from pass 1
Looks like you never set the samplers, so they are all pointing at channel 0
This doesn’t seem to be working
console.log("Looking for Sample"+index+"\n");
I get (with p=4)
Looking for Sample0
Looking for Sample0
Looking for Sample1
Looking for Sample0
Looking for Sample0
pass 2 seems to find Sample0
then no other pass finds it
aaaaaggggghhhhhh of course
Sample0 was not used in pass 4, so it was optomised out.
Since Sample0 no longer exists in the shader, the init method can’t find it so doesn’t even look for the other samplers
I have added a texture read from Sample0 and my level 4 shader now works
What samplers did you declare in your 4th shader? If GetVariable(…) is returning null, then it looks like those samplers were undeclared. The new sample I included in the zip shows how the 3rd pass is able to take the results from the 1st pass and add it to the 2nd pass. If you’re testing this offline and you had a version of the shader where these samplers were undeclared, then cleaning your cache might help. I haven’t run into this issue with Firefox for the past couple versions, but there were times it use to cache my old shaders and I had to manually clean up its cache.
No they were declared, but I wasn’t using Sample0.
So the compiler optomised it out
Since Sample0 was not found in the init methid, it never looked at Sample1 etc.
Using a dummy read is the safest way of dealing with it, in the end I used this value as a detail texture
The first one I really like
A five pass shader :>
Pass one generates a random number texture
Pass two generates a mercator for the planet
Pass three generates a pallete texture
Pass four generates a star field
Pass five draws the planet by ray tracing a sphere and mapping the mercator on to it
And of course I had to do a 6 pass one with a cloud layer
And to finish off the sequence … rocky planets
and gas giants
bravo sir, bravo! I posted them all except the Mars one cause it was your fav… :) Actually I didn’t post it because the landscape exhibits… interestingly adult oriented patterns (o¿O).
I better have another look at it
That might be one of those ink blot things.
Being winter and all, I did a shader on snow. I was going to do koch flakes, but I decided for a quick 2 minute job instead :)
Looks really nice! I tried to zoom-in, hoping to see snow flake fractals ;) but I did see an interestingly effect nevertheless.
great, very relaxing
Well now Xmas is over, I suppose we should close this down.
Does anyone know how to set up a voting system on Devmaster?
We should try and get people to vote on it.
Not sure if markdown supports some sort of html syntax that would allow us to reference a PHP powered polling app. Worse comes to worse, we just spam our votes here in the chat :)