4 ms·

WebGL Shader Toy

42 points by AndrewMoffat 16y ago

Geee 16y 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 16y ago
Anyone care to explain this to someone who doesn't have a WebGL-enabled browser handy?
- AndrewMoffat 16y 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 16y ago
Fair warning: Some of these really grab CPU cycles.
- endtime 16y ago
  Hmm. Shouldn't it all be on the GPU?
  - nossralf 16y 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.
    - endtime 16y ago
      Yeesh. Running a pixel shader on a CPU is not a pretty thought.
mieses 16y ago
along these lines, another nice WebGL demo is fractal.io
abi 16y 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/ http://www.stanfordesp.org/
- stevenashley 16y 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.html http://chromium.googlecode.com/svn/trunk/samples/audio/index...
  - deleted 16y ago
    [deleted]
- buza 16y 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 16y ago
Note that Iñigo Quílez is big in the demo scene: http://www.iquilezles.org/prods/index.htm http://www.iquilezles.org/prods/index.htm It's amazing what he can do in realtime.
Zolomon 16y 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?
- Zolomon 16y ago
  http://learningwebgl.com/lessons/example02/ http://learningwebgl.com/lessons/example02/ told me it could not initialize WebGL - think I'm missing the DirectX runtime.

42 points by AndrewMoffat 16y ago

Geee 16y 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 16y ago

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

AndrewMoffat 16y 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 16y ago

Fair warning: Some of these really grab CPU cycles.

endtime 16y ago
Hmm. Shouldn't it all be on the GPU?
- nossralf 16y 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.
  - endtime 16y ago
    Yeesh. Running a pixel shader on a CPU is not a pretty thought.

mieses 16y ago

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

abi 16y 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/ http://www.stanfordesp.org/

stevenashley 16y 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.html http://chromium.googlecode.com/svn/trunk/samples/audio/index...
- deleted 16y ago
  [deleted]
buza 16y 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 16y ago

Note that Iñigo Quílez is big in the demo scene: http://www.iquilezles.org/prods/index.htm http://www.iquilezles.org/prods/index.htm It's amazing what he can do in realtime.

Zolomon 16y 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?

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