This was a fun exploration for my Creative Development class. We were challenged to use shaders and implement them in a Three.js scene, leaning into what WebGL actually lets you do.
After some ideation I landed on a surreal scene: a TV in the middle of nowhere. I modeled the TV in Blender so it could hold my shader on the screen, then baked the textures onto an image — definitely cumbersome, but the far side of the learning curve was sweet victory.
I explored some shaders on shadertoy and started experimenting until something felt right. I settled on a combination of a rainbow fractal, a CRT effect for the TV screen, and a cloud-noise background. To make the scene more alive, I plugged in a webcam input.
After fulfilling the assignment, I went further and added interactive functionality to the TV via a raycaster. The result is an ominous TV floating in the sky, inviting users to interact with its mysterious inputs. (Little tip: move the antenna and try tapping the screen when the TV is on.) Files on GitHub.
