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