*blog... kind of... *rss 



WebGL/GLSL Sandbox January 4th 2011, mr.doob
One of the things WebGL will bring us is Fragment Shaders. If you're familiar with Pixel Bender you know how Fragment Shaders work.

Although they usually go with Vertex Shaders, you can set it up for doing just 2D effects with it. Iq did exactly this some months ago with Shader Toy — a browser based Fragment Shader editor.

This week I started experimenting with this. First thing I needed to do was a sandbox with the basic WebGL initialisation code. With that done is just a matter of testing values and refreshing the browser. I tried to have a compile button right in the page so I wouldn't even need to refresh the browser but it was over complicating the code...

These are the tests I've done so far:









Next thing on the list is to implement render to texture so I can use the output of the fragment shader as input. That'll allow crazy feedback effects and even crazier drawing tools!

Feel free to use the sandbox code for your own experimentation.
12 comments

Hey this is awesome! :)
January 4th 2011, zproxy
The third one gave me this generic error:

ERROR:
VALIDATE_STATUS: false
ERROR: 0

- Vertex Shader -


attribute vec3 position;

void main() {

gl_Position = vec4( position, 1.0 );

}



- Fragment Shader -


uniform float time;
uniform vec2 resolution;

void main( void ) {

vec2 position = gl_FragCoord.xy / resolution.xy;

float color = 0.0;
color += sin( position.x * cos( time / 15.0 ) * 80.0 ) + cos( position.y * cos( time / 15.0 ) * 10.0 );
color += sin( position.y * sin( time / 10.0 ) * 40.0 ) + cos( position.x * sin( time / 25.0 ) * 40.0 );
color += sin( position.x * sin( time / 5.0 ) * 10.0 ) + sin( position.y * sin( time / 35.0 ) * 80.0 );
color *= sin( time / 10.0 ) * 0.5;

gl_FragColor = vec4( vec3( color, color * 0.5, sin( color + time / 3.0 ) * 0.75 ), 1.0 );

}
January 4th 2011, zproxy
Hey,

WebGL is rendering to a Canvas, which means that you could set the canvas element as the source of the texture... giving you your feedback...

But it isn't a hardware feedback loop...
January 6th 2011, Craig Moore
zproxy: No idea... depends of your graphics card..

Craig: Interesting :D
January 7th 2011, mr.doob
You are my hero!!! i was work on developing an interactive skychart based on php and making 2D graphic maps. at last i decided to add a 3D maping system to my program. your library was save my life. but i have problem with make horizon for my map. there no documentation or example that describe how to make cylinder. can you help me?

my camera located at 0,0,0 and rotate on axis. so i need to make a cylinder that make me at center of. also i want to add texture.
many many thanks
January 21st 2011, ShirazITCo
In Example 04, the GLSL code

float a = atan( position.y, position.x );
float r = sqrt( dot( position, position ) );
vec2 uv ;
uv.x = cos( a ) / r;
uv.y = sin( a ) / r;

can be simplified (and presumably sped up) to

float rSq = dot( position, position ) ;
vec2 uv = position/rSq ;
January 27th 2011, Peter Liepa
I used your sandbox to answer a question at http://stackoverflow.com/questions/4638317/how-to-implement-this-rotating-spiral-in-webgl/4741998#4741998

It's an excellent starting point for shader-only experiments.
January 27th 2011, Peter Liepa
Glad to hear that! ^^

Thanks for the code optimisation too. I'm not sure whether to change the code though, it would make it less intuitive I think... ?
January 27th 2011, mr.doob
It's kind of unintuitive either way, so I'm neither here nor there on changing it. Mathematically, you're inverting a point in a circle - http://en.wikipedia.org/wiki/Inversive_geometry#Inverse_of_a_point - some may find that an intuitive explanation, others not.

Btw, I discovered that 'dot( position, position )' can be shortened to 'length(position)'.
February 5th 2011, Peter Liepa
Hey, love your work.

Have you seen MyLittle Artist on the intel app store?

It is very similar to your harmony webpage and I was wondering if you contributed to it?

Keep up the awesome work :)
March 23rd 2011, RP
Mr. Doob,

You really are an amazing genius in this cyberspace. Are you available for freelance projects?

I have a small piece of work well suited for your 3D JS lib skills. I'm sure you could crank it out in an afternoon, and I'm willing to pay top dollar for your services.

If you're too busy, where would be a good place to post the opportunity to your followers?

Cheers,
Jeremy
s 8 1 4 j j s (at) g m i l . c o m
March 26th 2011, Jeremy Sylvester
Hey Mr. Doob,

Unfortunately (it's exam time and I don't have a lot of that specific quantity) I got absorbed by inversive geometrics and all that following the comment by Peter. But now I wonder, was this your intention all along? (using inversive geometry). Or rather, if it's not too bold to ask: how did you come up with this formula? Was it trial and error?

In any case, thanks for inspiring me,
Nicolas
June 17th 2011, Nicolas