Xmas Demo Fun

6837d514b487de395be51432d9cdd078
3
TheNut 179 Dec 07, 2013 at 07:36 webgl contest

Submissions

A list of submissions can be viewed here.

About

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.

  1. Specify the number of render passes by providing the url query: ?p=N, where N = 1 to whatever
  2. The framework will automatically generate N -1 framebuffer objects.
  3. Pass 1 renders directly to FBO #1
  4. Pass 2 takes as input the texture from FBO #1 and outputs to FBO #2
  5. FBO #N takes as input the texture from FBO #N - 1 and outputs directly to the main framebuffer
  6. FBO and HTML Canvas objects are automatically resized to fit the browser.
  7. There is one vertex shader (image.vs), which simply renders the quad to fill the screen (shouldn’t need to touch that)
  8. There are N fragment shaders, one for each render pass.
  9. The fragment shaders use the naming convention “image1.fs”, “image2.fs”,… “imageN.fs”
  10. Shaders have access to the screen resolution, texel size (1 / resolution), and Time (incremented by 1 for each new frame for animation)
  11. Keep your web console open to debug your shaders. If there’s a compiler error, the information will be written to the console.

Downloads

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 :)

44 Replies

Please log in or register to post a reply.

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 07, 2013 at 10:01

Interesting, your demo works fine, but the source code produces no output on my local machine

I assumed invoking …

file:///D:/Websites/TheNut/template/opt/index.htm?p=2

Would run your demo locally, I get a white screen

Any ideas

[more detail]

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

–allow-file-access-from-files

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 07, 2013 at 10:32

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?

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 07, 2013 at 13:30

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

http://stainlessbeer.weebly.com/devmaster-competition.html

6837d514b487de395be51432d9cdd078
1
TheNut 179 Dec 07, 2013 at 17:08

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.

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 07, 2013 at 21:07

Thanks man,

There is one more to add to the pile

http://stainlessbeer.weebly.com/uploads/3/2/9/6/3296541/fractal.zip

B20d81438814b6ba7da7ff8eb502d039
0
Vilem_Otte 117 Dec 08, 2013 at 00:17

I’ll start adding stuff sometimes during next week, got too much work on my hands for next 2/3 days.

B20d81438814b6ba7da7ff8eb502d039
0
Vilem_Otte 117 Dec 08, 2013 at 01:33

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.

6837d514b487de395be51432d9cdd078
0
TheNut 179 Dec 08, 2013 at 02:51

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.

6837d514b487de395be51432d9cdd078
0
TheNut 179 Dec 08, 2013 at 01:23

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

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 08, 2013 at 10:43

Just for anyone looking for the demos

http://nutty.ca/webgl/devmaster_xmas/

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 08, 2013 at 12:42

Tried a two pass version of Orbit, didn’t work out as well as I hoped though

http://stainlessbeer.weebly.com/devmaster-competition.html

http://stainlessbeer.weebly.com/uploads/3/2/9/6/3296541/orbital.zip

6837d514b487de395be51432d9cdd078
0
TheNut 179 Dec 08, 2013 at 17:36

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?

B20d81438814b6ba7da7ff8eb502d039
0
Vilem_Otte 117 Dec 08, 2013 at 23:53

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).

http://www.otte.cz/nutty/raytracer/

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).

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 09, 2013 at 11:20

could you share your ray creation for pixel code please?

I’ve tried several and none worked as I wanted.

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 09, 2013 at 11:18

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

B20d81438814b6ba7da7ff8eb502d039
0
Vilem_Otte 117 Dec 09, 2013 at 14:51

Just get the file in shaders folder:

http://www.otte.cz/nutty/raytracer/shaders/image1.fs

It should be available from any domain.

D3e9222b2f020972a426e1d5b141a823
0
airo 101 Dec 08, 2013 at 18:36

merry christmas, music module player only with Chrome

http://members.casema.nl/a.wouterse/merryxmas2013.html

6837d514b487de395be51432d9cdd078
1
TheNut 179 Dec 10, 2013 at 06:49

I added a new one I dub the Voodoobrot. It’s basically Mandelbrot on THC :)

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 10, 2013 at 09:11

The animation is really subtle, but effective. Like it

B5262118b588a5a420230bfbef4a2cdf
1
Stainless 151 Dec 10, 2013 at 14:41

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

http://stainlessbeer.weebly.com/uploads/3/2/9/6/3296541/tracing.zip

6837d514b487de395be51432d9cdd078
1
TheNut 179 Dec 10, 2013 at 16:00

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.

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 11, 2013 at 17:33

I tried using a much, much simper height equation.

Don’t really like it, but interesting to see what you can do without textures

http://stainlessbeer.weebly.com/uploads/3/2/9/6/3296541/desert.zip

B20d81438814b6ba7da7ff8eb502d039
0
Vilem_Otte 117 Dec 11, 2013 at 23:16

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

6837d514b487de395be51432d9cdd078
1
TheNut 179 Dec 12, 2013 at 03:35

My bad. I forgot to make the update. I just added in the changes and updated the notes at the top.

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 12, 2013 at 10:00

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
6837d514b487de395be51432d9cdd078
0
TheNut 179 Dec 12, 2013 at 15:47

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.

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 13, 2013 at 11:37

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));
}
/// <summary>
/// Generates a pseudo random noise texture
/// <summary>
void main ()
{
vec3 colour = vec3(0.0, 0.0, 0.0);
colour.x=colour.y=colour.z=rand(vUv);
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.

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 13, 2013 at 12:43

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

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 13, 2013 at 14:25

Looks like you never set the samplers, so they are all pointing at channel 0

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 13, 2013 at 14:49

This doesn’t seem to be working

ImageShader.prototype.Init=function() 
{
BaseShader.prototype.Init.call(this);
this.mProjectionId=this.GetVariable("ProjectionMatrix");
this.mViewId=this.GetVariable("ViewMatrix");
this.mModelId=this.GetVariable("ModelMatrix");
this.mModelScaleId=this.GetVariable("ModelScale");
this.mImageSizeId=this.GetVariable("ImageSize");
this.mTexelSizeId=this.GetVariable("TexelSize");
this.mColourId=this.GetVariable("Colour");
this.mSampleId=new Array();
var a;
index=0;
do
{
	a=this.GetVariable("Sample"+index);
	console.log("Looking for Sample"+index+"\n");
	if(a!=null)
	{
		console.log("Found Sample"+index+"\n");
		this.mSampleId.push(a);
		++index
	}
}while(a!=null)
};

I get (with p=4)

Looking for Sample0
Looking for Sample0
     Found 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

6837d514b487de395be51432d9cdd078
0
TheNut 179 Dec 13, 2013 at 15:28

Hey Stainless,

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.

I didn’t think about it at first, but in your specific scenario of using just the 2nd and 3rd textures, but not the first one, will create another problem. The GPU will optimize your shader and you won’t be using the textures you think you’ll be using. Sampler1 will use the texture in Sampler0. The only way around that would be to use all the samplers. Or I could reverse the texture order in JavaScript.

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 14, 2013 at 11:07

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

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 14, 2013 at 10:17

The first one I really like

A five pass shader :>

http://stainlessbeer.weebly.com/uploads/3/2/9/6/3296541/mars.zip

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

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 14, 2013 at 11:05

And of course I had to do a 6 pass one with a cloud layer

http://stainlessbeer.weebly.com/uploads/3/2/9/6/3296541/bluemarble.zip

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 14, 2013 at 14:28

And to finish off the sequence … rocky planets

http://stainlessbeer.weebly.com/uploads/3/2/9/6/3296541/rocks.zip

and gas giants

http://stainlessbeer.weebly.com/uploads/3/2/9/6/3296541/gas.zip

6837d514b487de395be51432d9cdd078
0
TheNut 179 Dec 14, 2013 at 17:47

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).

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 14, 2013 at 18:05

errmmmm really?

I better have another look at it

A638aa42130293f319eda7fa4ba121f4
0
fireside 141 Dec 17, 2013 at 01:24

That might be one of those ink blot things.

6837d514b487de395be51432d9cdd078
1
TheNut 179 Dec 15, 2013 at 18:31

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 :)

Fdbdc4176840d77fe6a8deca457595ab
0
dk 158 Dec 16, 2013 at 06:31

Looks really nice! I tried to zoom-in, hoping to see snow flake fractals ;) but I did see an interestingly effect nevertheless.

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Dec 16, 2013 at 09:18

Pretty

D3e9222b2f020972a426e1d5b141a823
0
airo 101 Dec 16, 2013 at 22:42

great, very relaxing

B5262118b588a5a420230bfbef4a2cdf
0
Stainless 151 Jan 09, 2014 at 12:55

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.

6837d514b487de395be51432d9cdd078
0
TheNut 179 Jan 10, 2014 at 15:51

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 :)