WebGL Shader Toy

http://www.iquilezles.org/apps/shadertoy/

by AndrewMoffat • 15 years ago

42 14 15 years ago

Geee• 15 years ago

Thanks, this is like totally awesome. I've often wanted to hack shaders, but never really got to it. This seems like a nice tool for that purpose.

wtracy• 15 years ago

Anyone care to explain this to someone who doesn't have a WebGL-enabled browser handy?

AndrewMoffat• 15 years ago

It's basically an interactive shader editor with some great presets. Let's you see the code and the resulting effect basically in realtime.

derleth• 15 years ago

Fair warning: Some of these really grab CPU cycles.

endtime2• 15 years ago

Hmm. Shouldn't it all be on the GPU?

nossralf• 15 years ago

I believe both Chrome and Firefox 4 uses ANGLE if the 3D driver is too old. So it's possible to only hit the CPU with WebGL in certain instances.

mieses• 15 years ago

along these lines, another nice WebGL demo is fractal.io

abi• 15 years ago

I don't think enough people are understanding (1) how cool this is (switch to the tunnel presets and start tweaking the inputs and the shader!) and (2) how important this is for introducing/teaching people about computer science. Now, for the first time ever, we can actually teach kids how to program cool 3D graphics with just a browser (no downloads, no messing with installation issues, no platform-dependent crap).

I'm planning on teaching a class on WebGL for high schoolers at my university (for those of you who are curious, it's through this program [1]). All I have to do is get them to open Chrome/Safari, show them this page and teach them a few basic concepts about OpenGL/vertices/textures/shaders and they can start learning stuff on their own. Hacking and tweaking stuff is the most fun way to learn something. And I think this could be a major milestone for computer science education.

[1] http://www.stanfordesp.org/

stevenashley• 15 years ago

I can vouch for this approach. When I was younger I discovered the magic of the Winamp AVS Editor. I would not be developing software today if I hadn't of discovered it.

It should be possible to perform audio analysis within the shader using the Web Audio API. Google has some demos [1] that seem to do this sort of thing though they don't seem to work for me.

These new APIs have me quite excited :)

[1] http://chromium.googlecode.com/svn/trunk/samples/audio/index...

buza• 15 years ago

This is absolutely a wonderful project, from a very talented member of the demoscene. However, "for the first time ever" isn't entirely accurate. Web-based visual experimentation environments for 2d/3d programming have existed for years, from the Flash-based (wonderfl.net), to Java, to (many) based on processing.js. Being shader-based, I'd say this is actually less accessible to kids, unless you're just teaching them that moving sliders and changing parameters is 'programming'.

tintin• 15 years ago

Note that Iñigo Quílez is big in the demo scene: http://www.iquilezles.org/prods/index.htm

It's amazing what he can do in realtime.

Zolomon2• 15 years ago

I've started Chrome with WebGL enabled, but nothing happens when I press the playbutton? How can I verify that WebGL is truly enabled, am I just not using the app correctly?

Zolomon2• 15 years ago

http://learningwebgl.com/lessons/example02/ told me it could not initialize WebGL - think I'm missing the DirectX runtime.

WebGL Shader Toy

Related Stories