thenut at December 7th, 2013 02:36 — #1
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
stainless at December 7th, 2013 05:01 — #2
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
stainless at December 7th, 2013 05:32 — #3
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?
stainless at December 7th, 2013 08:30 — #4
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
thenut at December 7th, 2013 12:08 — #5
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.
stainless at December 7th, 2013 16:07 — #6
vilem_otte at December 7th, 2013 19:17 — #7
I'll start adding stuff sometimes during next week, got too much work on my hands for next 2/3 days.
thenut at December 7th, 2013 20:23 — #8
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
vilem_otte at December 7th, 2013 20:33 — #9
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.
thenut at December 7th, 2013 21:51 — #10
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.
stainless at December 8th, 2013 05:43 — #11
Just for anyone looking for the demos
stainless at December 8th, 2013 07:42 — #12
thenut at December 8th, 2013 12:36 — #13
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?
airo at December 8th, 2013 13:36 — #14
merry christmas, music module player only with Chrome
vilem_otte at December 8th, 2013 18:53 — #15
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).
stainless at December 9th, 2013 06:18 — #16
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
stainless at December 9th, 2013 06:20 — #17
could you share your ray creation for pixel code please?
I've tried several and none worked as I wanted.
vilem_otte at December 9th, 2013 09:51 — #18
Just get the file in shaders folder:
It should be available from any domain.
thenut at December 10th, 2013 01:49 — #19
I added a new one I dub the Voodoobrot. It's basically Mandelbrot on THC
stainless at December 10th, 2013 04:11 — #20
The animation is really subtle, but effective. Like it
next page →