Shadertoy adds procedural GPU-generated music in the browser | Hacker News Reader

Shadertoy adds procedural GPU-generated music in the browser

shadertoy.com

76 pointsykl18 comments

Open articleView on HN

This one is also pretty impressive https://www.shadertoy.com/view/ldfSW2

I'm pretty surprised that that was made with like 200 LOC.

No kidding. Almost hard to believe. It sounds great.

It's like a flashback to the late 90s!

This one worked for me, the previous one didn't. Weird.

It worked for me once I reloaded the page.

I took some openGL in college, and can understand the most very basic shaders on Shadertoy, but the more advanced stuff that gets posted to Shadertoy is way over my head.

Is there a good set of resources (book, videos, website?) to learn the more advanced stuff? Sitting there and trying to understand the super complex (and even mediumly complex) shaders from scratch is just not doing it for me.

I have heard good things about this book : http://www.amazon.com/Graphics-Shaders-Theory-Practice-Editi...

Most of the more complex shaders on shadertoy are raymarching signed distance fields. There are a good amount of resources covering this technique. A couple of recommendations:

http://9bitscience.blogspot.com/2013/07/raymarching-distance...

http://www.iquilezles.org/www/articles/raymarchingdf/raymarc... (from Inigo Quilez, founder of shadertoy)

http://www.pouet.net/topic.php?which=8177&page=1

I gave a talk at NYU a few years ago about raymarching signed distance fields which is available here (https://www.youtube.com/watch?v=DXFEOI2SsNY)

One of the best ways to start understanding shader toy shaders is to modify or remove code and run it. This way you can visualize what functions in the shader contribute to the image, and in what ways. In some of the more complex shaders there can be almost random looking strings of math to generate a procedural texture or a specific post process effect, and breaking these down can help you gain an intuitive understanding of how to "paint with math".

This is awesome. Thanks for taking the time to reply.

Procedural, if you like -- the linked example uses a hard-coded sequencer to play the notes.

But this ought to be fun to mess with.

This one has actual procedural audio:

https://www.shadertoy.com/view/ldfSW2

I really like the idea of shadertoy. Learning to write shaders is some thing I really want to learn to do.. I just wish shadertoy was a desktop application because it doesn't run so well in my web browser.

Sorry for the question that might be a bit off-topic. Will we ever have support for sound fonts in a browser? E.g. piano sound fonts? With at least rudimentary support for MIDI (e.g. noteOn, noteOff)?

Yes:

http://www.w3.org/TR/webmidi/

http://badassjs.com/post/40190128792/midi-js-a-soundfont-bas...

Isn't a sound font a MIDI renderer?

Worked for me in Chrome but not in the latest version of Firefox. Is there something that I need to turn on for Firefox to work?

shadertoy.js locked up my Firefox (31 in Xubuntu 14.04).

Reply on news.ycombinator.com