Goal: Create a React-three-fiber shader showcase website
Process:
Did a horrendous job documenting as I had started working on this prior to class starting and I kept re-developing and re-formatting code trying to make it work. I went through about 5 full website iterations though and everything was a major bust. I didn't realize how unique and difficult it would be to smoothly showcase 50+ shaders with transitions etc.
My initial idea was to brute force something quick and utilize the shader I had created on day 43/50
https://www.instagram.com/p/Ca_go7MgLfu/
This shader uses multiple textures and some noise in order to interpolate between the two. Since I had recordings of every single shader I created I figured I could pass them in as video textures and create a fake shader slideshow of sorts. While I wouldn't be actually showing each shader live I could fake a demo with the videos as textures. Aside from the obvious issue of using and loading 50+ videos into a website I quickly ran into another massive problem, glslcanvas, the library that I've always used to quickly put fragment shaders onto the web has a known problem with video textures. It's been an open issue on the github for 2 years now...for whatever reason when loading video textures as a uniform with glslcanvas they don't play at all with chrome, it only works in firefox. Thwarted.
Imagine the following site but instead of paintings of old people, moving videos of cool shaders.
My next move involved a whole host of libraries, I tried R3F to potentially use a declarative component based rendering, react three fibers and shader materials are a bit new to me still and kinda wonky, I wasn't really able to pass in video textures easily once again. There were issues when it came to how uniforms are passed into shader materials when using react three fiber. I then opted to try curtain.js, a webgl library that is meant for slideshows the problem with curtains is that their documentation operates at a very low level and their examples for video textures only show slideshows with two video textures using ternary operators to swap between them. You might assume that it would be coded in a very easy drag and drop manner to add more videos but the shaders they use are hard coded for 2 textures. This meant I had to do a lot of digging and unscrambling example code to figure out what did what and where I can interject more videos. After a lot of experimentation I finally managed to get things working...sort of. Things were going relatively smoothly, or laggily as I still was brute forcing 50 videos onto a webpage, no matter how I lazy load, ajax, video optimize it's going to be heavy. I then rain into another obstacle that I really couldn't logic my way around. I learned the hard way that I could only pass 15 video textures as uniforms in a single shader, it must have something to do render buffers and bitrate etc I don't really know, all I know is that whenever I add a 16th texture the webgl canvas loses context and breaks completely. Once again, an issue that I can't really easily fix at all, or rather it's not so much web-dev.
I uploaded the site as temporary documentation regardless here:
It's a little janky, a little buggy and ultimately even if it had went all the way to 50 it probably would have been too clunky and laggy to turn in.
My final attempt was to revisit react-three-fiber and instead of use video textures, just declaratively pass different shaders into my components. I say just but the process was very painstaking as all things shaders are and required lots of niche bug fixing and discord dm's to react chatrooms. It's janky and uses lots of work arounds but for now it's ok. I'll have to re-factor the code for efficiency in coming weeks but that's for another time.
Final site: bho.media/50days
