3642QCA - Experimental
& Generative Design
Nathan Smith
Shaders __________________________________________
Task 4.1) Shader developed with shaderfrog.com and exported to Glitch
Task 4.2) Video shader example developed with Seriously or VideoContext
Task 4.3) Shader example developed with threeJS
4.1) https://shader-frog-bas.glitch.me/ "View App"
Using ShaderFrog.com to compose existing shaders, to bring them into a Glitch scene.
I use different geometry from a-frame to apply the shaders and altered the .json files to change their appearance.
Animation is set within the a-frame code to rotate the torus rings around the spheres.
4.2) https://its-a-trippp.glitch.me/ "View App"
Using the Seriously.js library to chain effects on multiple videos which works well as a loop.
This uses the split effect to combine two videos and another split to combine with a third.
4.3) https://cautious-tan-wrench.glitch.me/ "View App"
Using Three.js to apply shaders to the supplied Bunny geometry and making a scene to showcase some of the library.
By finding the right values, I got this pulsating effect where the bunny implodes and explodes and made a colour gradient with a cross section of white and black with blue. The outer scene is put together with different properties of the MeshBasicMaterial
Process & Experiments _______________________________
https://playing-with-geo-.glitch.me/ "View App"
- Made from scratch Glitch project using Three.js library
https://carpal-stone-quality.glitch.me/ "View App"
- Found a method to create this slow breathing effect by changing the value of offset.xyz
- Applied colour gradient to animated Bunny - replaces the normals as colour.
https://unreal-video-mash.glitch.me/ "Audio plays on start"
- Using my Unreal Project Video to apply seriously effects - also has audio
- Found a sweet spot with ascii & hex that shows a broken view of the video
- Using split to overlay a second video with kaleidoscope effect
https://video-enchanting-silk.glitch.me/ "View App"
- First experiments with seriously effects, using hue & saturation with kaleidoscope to highlight existing lighting.
Exemplars & References_______________________________
Three.js developed experiences:
Four different projects with quite different uses of the Three.js library.
It shows the ability to produce interactive games, visual journeys, 360 degree movies and online exhibition spaces.
Javier Gracia Carpio WebGL shader examples I would like to remix in the future:
Remixed Glitch Projects:
CJ Gammon YouTube Series on Three.JS:
Video Footage From:
Reflection ___________________________________________
The shader tasks helped me understand how XR can be used even further to create a variety of experiences. I find myself far more interested in the creative coding aspect than when I began this course and I really enjoy pulling apart examples to understand how code works.
I tried to push myself beyond the weekly tutorial content and remix examples from other sources. I found this to be challenging when it came to getting the right libraries imported. The examples of shaders I gave were some projects I found interesting. I would like to be able to recreate them in my own way for future use or create something of the same professional standard. Especially the infinite terrain – I feel like this would be a nice background for a website if made subtly.
‘Track’ was a project that I want to use as inspiration for my own infinite loop experience. It has simple visuals which compliment the music and pace of the screen. The camera is limited to roughly 180-degree view to direct attention forward at almost all times.
An app like ‘Within’ is an effective way of viewing 360-degree movies in XR and I feel like I can see the logic of its creation. A scrolling menu is created (somehow) which is added to a scene with an equirectangular image and animated water as a ground plane. There appears to be particle effects floating around the scene too. Clicking on a link might take you to another screen which plays video, similarly to our Seriously.js task.
Using shader frog to compose existing shaders in a node-based editor was a familiar platform to our previous work in Unreal. This made it a bit easier to understand what I was doing, rather than just playing with values and inputs. I was able to mash a few examples to produce some trippy shaders which I then applied to a scene. Using a few planes pointing inward I made the effect of a closed room with visual journey.
I had fun with the seriously.js task and exploring the library. It has some great effects to use that can really change the viewers’ experience. I wanted to do more than just chain a lot of effects together, so I used a few carefully selected effects which I fed into a ‘Split’. This gave me a video overlaid on another, which I then fed into another ‘Split’ for three videos in one. My chosen footage selection happened to create a nearly seamless loop, except for the smoke.
I found it easier to understand fragment and vertex shaders with three.js in the final weeks however I still wish I had more time to learn it from the ground up. I had trouble with using examples and getting them to work within my glitch projects and I think this is because I did not take a step by step approach.
I have learnt a lot in a very short amount of time and loved each of the tasks I completed.
In the future I look forward to developing my knowledge in this area and creating more.
In the future I look forward to developing my knowledge in this area and creating more.
Thanks for looking!
