With all of this talk about shaders, I started thinking about the best way to demonstrate shaders through my blog. I think they're pretty neat to mess with, and are very important to understand how to use due to the fact that they play such a huge role in 3D graphics today.
|A sample WebGL program. The shader code is below!|
Thus I believe I have come up with a rather neat solution: Add a WebGL object using HTML5 that allows you to edit shaders on a webpage in real time, and then view those changes directly on a WebGL canvas. This means you can write entirely new code for a shader, and then with the click of a button watch it appear on a web page.
This also means I can just type out the code for a shader for a blog post, and then you, the reader, can change it and see what happens. No need to code up a new project, no copying and pasting of my code, just a simple shader rewrite on the post! As a quick example, here is the shader code for the WebGL application above:
Pretty straight forward, it simply renders the shapes above and doesn't really do anything special. But, with a few tweaks to it, and then clicking the submit button between them, you can change what the WebGL application above is displaying. I personally think this is really neat, and extremely useful for messing with shaders, without having to create entire new programs each time! As a quick example, try changing the fragment colors from red to blue ("vec4(1, 0, 0, 1)" to "vec4(0, 0, 1, 1)"). Pretty easy right? Since this is pretty simple to setup, I think I may do a few new tutorials on GLSL in the future. I'm planning to add the sample code for my previous tutorial on a simple fade effect with shaders too, but haven't had time to do so yet. Feel free to leave any comments and feedback about this below!