WebGL TV

This project was a fun exploration for my Creative Development class. We were challenged to use shaders and implement them in a Three.js scene, utilizing the capabilities of WebGL. After some ideation around what I wanted to create, I decided to go for a surreal scene which featured a TV in the middle of nowhere. I first created a 3D model of a TV in Blender which would hold my shader on the screen and then I baked the textures onto an image, which was definitely cumbersome but the other side of the learning curve was sweet victory! I explored some shaders on shadertoy and began experimenting to create something unique. I settled on a combination of a rainbow fractal, a CRT effect for the TV screen, and a background featuring noise resembling clouds. To make the scene even more dynamic, I incorporated a webcam input. After completing the assignment requirements, I went further and added interactive functionality to the TV using a raycaster. The result is an ominous TV floating in the sky, inviting users to interact with its mysterious inputs. (A little tip: Move the antenna and try tapping the screen when the TV is on.) The project files can be found on my GitHub repository.