WebGL Shader Toy | Hacker News Reader

WebGL Shader Toy

iquilezles.org

42 pointsAndrewMoffat14 comments

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/

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

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

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.

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.

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

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

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?

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

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

Fair warning: Some of these really grab CPU cycles.

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

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.

Yeesh. Running a pixel shader on a CPU is not a pretty thought.

Reply on news.ycombinator.com