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.
- Specify the number of render passes by providing the url query: ?p=N, where N = 1 to whatever
- The framework will automatically generate N -1 framebuffer objects.
- Pass 1 renders directly to FBO #1
- Pass 2 takes as input the texture from FBO #1 and outputs to FBO #2
- FBO #N takes as input the texture from FBO #N - 1 and outputs directly to the main framebuffer
- FBO and HTML Canvas objects are automatically resized to fit the browser.
- There is one vertex shader (image.vs), which simply renders the quad to fill the screen (shouldn't need to touch that)
- There are N fragment shaders, one for each render pass.
- The fragment shaders use the naming convention "image1.fs", "image2.fs",... "imageN.fs"
- Shaders have access to the screen resolution, texel size (1 / resolution), and Time (incremented by 1 for each new frame for animation)
- Keep your web console open to debug your shaders. If there's a compiler error, the information will be written to the console.
Sample Demo available here.
Download source code here.
Version 1.1 released
- New boolean shader variable "IsMouseDown". Set to true when the left mouse button is pressed.
- New vec2 variable "MousePos". Contains the normalized (x,y) coordinates of the mouse, relative to the top-left of the canvas.
- Shaders can now access all previous FBO textures. For example, render pass 3 can use the textures generated from render passes 1 and 2.
- View the fragment shaders in the new zip file for examples.
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
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 . 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.
I'll start adding stuff sometimes during next week, got too much work on my hands for next 2/3 days.
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
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.
Just for anyone looking for the demos
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.
-- Edit Did you want me to post your second one or are you still working on it?
merry christmas, music module player only with Chrome
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).
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
could you share your ray creation for pixel code please?
I've tried several and none worked as I wanted.
Just get the file in shaders folder:
It should be available from any domain.
I added a new one I dub the Voodoobrot. It's basically Mandelbrot on THC
The animation is really subtle, but effective. Like it
next page →