A Shady Browser

Before I begin, this is yet another post inspired by Michael C. Johnson, so I just want to give another shout-out to him!  Most of the code from this is just re-purposed code from http://www.learningwebgl.com/ as well due to laziness, so shout out to them too!

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.

Couldn't load WebGL stuff!

A sample WebGL program.  The shader code is below!

Unfortunately, showing them on this blog properly proved to be a bit of a challenge.  I wanted a way to demonstrate their full capabilities and let readers explore them and how they can change things and mess with them, but wanted to get rid of having to copy and paste the code into their own programs.  Obviously, an animated GIF of the shader effects would not work because they would then just be static, but just posting code is also very boring.

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:

precision mediump float; varying vec4 vColor; void main(void) { gl_FragColor = vec4(1, 0, 0, 1); }

attribute vec3 aVertexPosition; attribute vec4 aVertexColor; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 vColor; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor; }








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!