Live WebGL Editor

I initially wanted to build a bit of an "interactive textbook" of the graphics concepts we learned this quarter. The intent was to have interactive examples of things like Phong shading, allowing the user to turn components on and off, or Barycentric coordinates and rasterization.

Unfortunately, it wasn't really coming along, so I pivoted to addressing something I disliked about the graphics development process: tweaking and adjusting values. Small changes in OpenGL usually mean a full recompilation and restart of your program, which is a hassle. So I built and interactive WebGL editor. It leverages the dynamic nature of JS and WebGL to allow you to edit your shaders and code, and have the results appear neat instantly.

If you want to try it out, just pick "Live WebGL" from the menu to the left!

I used WebGL (obviously!) with this project, which meant getting in-depth with the initilization process of a WebGL program and GLSL 2.x. I also had to find libraries for tasks like loading OBJs and recreating GLM. I used CodeMirror for the syntax highlighting/editor, and Material Design for the layout and CSS. Material is overkill for this project, but originally I was expecting to have a lot more in the way of interactive controls.