I started the week by revisiting the MAD website shader that we had already edited with Nikolai last week. Again, I simulated incoming data by creating a few variables with random values and made them affect the RBG values of the background and foreground color:
gl.uniform3f(uBackgroundColor, sentiment, 0.5705882352941176, 0.4549019607843137);
gl.uniform3f(uForegroundColor, 0.4764705882352941, polarity, 0.8117647058823529);)
Next we wanted to dive into a topic that allows for interesting chain reactions: buffers and FBOs. These are mostly familiar to me via openFrameworks. In my previous projects, I have for example switched between many FBOs with different textures based on Kinect and webcam interaction.
Buffer objects are a way of passing the data that shader programs need onto the GPU. (You can learn more by checking the articles by WebGL Fundamentals and by Learn WebGL.) A frame buffer object (FBO), on the other hand, acts like an additional screen: one can draw yellow cubes onto one FBO, green spheres onto the other and then draw the contents of both FBOs onto the screen where one wants to.
We examined a beautiful example by Kynd where reactive buffers interact with each other, resulting in watercolour-like patterns. We studied the code and edited the shader parameters to see which of them has the most visible effect on the final result.
Choosing a library
A bunch of interdependent 2D shaders can already get quite complex. What happens if a shader beginner wants to take them to 3D space? For my data viz project, I’m hoping to create a mental landscape where I could control the background and some other elements separately. One can imagine how amazing a 3D room would look like if its walls would be melting like in this lovely shader project by Ezra Miller.
Here, libraries come to help. Nikolai showed me some examples using OGL that could be useful for this project. However, I decided to go with Three.js due to its large variety of examples. Editable materials like MeshStandardMaterial are also a bonus. For this project Three.js is a good choice, as it takes care of the less creative bits and lets the programmer focus on the shaders affecting the visuals and interaction with data.
By following this example, we created a simple 3D room from scratch and, instead of having a mirror, animated the back wall of the room based on a simple shader and a buffer:
