Final Project – Totem Vision (TV)

For my last project, my goal is to produce incorporate all the practices we had learned from coding in GLSL and applying it through the use of nodes from the software.
My vision is to have a project where it gives off Surrealism and dreamlike setting with a touch of photorealistic details.

I started off with exploring the different uses of randomness and shape generators that can be used in Adobe Substance Designer.

Substance Designer First Shader Overview:11

And by applying the practices and methods used in the tutorials provided in the class, the first shader for the final project is successfully made.

After exporting the bitmaps, the textures are applied in the Unity shader graph to create a material and applied GLSL coding practices such as time, sine, absolute, and math functions to make the material to be more complex and dynamic.

Unity Shader Graph First Shader Overview: 2

Material created from the shader graph and applied in the cube object.1

Instead of downloading assets from the store, or using generic shapes, I made my own object and modeled it with Rhinoceros3D, and imported the file in Unity. The shaders and materials made will be applied to this object and create surrealism; where unusual patterns are wrapped around an object that we normally see (a television).

Modelling the television using Rhinoceros3D:3

Modeled the screen first to test the UV mapping once the shader is applied in the 3D object: 5

Comparison of the shader when applied to the “TV screen” vs the cube:4

Modelling the full TV 3D object to import in Unity:6

Shader/Material applied in the TV creating different UV maps since it has meshes and not a “whole” mesh:7

Once the object is already made, and the shaders are applied with no problems, I proceeded to do an environment where the setting is going to be “filmed.”

Using a “Terrain Tool” plugin from Unity to create a landscape:


A snapshot of the objects with applied materials in the terrain:9

Snapshot from the camera with post-processing and detailed terrain:10

Overview of Unity and animation used to create a loop for the camera to film: 11

A close up shot/details of the Second shader (Cracked Golden Jade Tile):12

A close up shot/details of the Fourth shader (Monster’s Blood): 13

A close up shot/details of the Third shader (Golden Flames): 14

A close up shot/details of the First shader (The Powerhouse Of The Cell):15

Overall, I actually enjoyed doing the project and I was a bit more comfortable using Nodes for coding/programming. I tend to see the results and changes when doing something visual instead of looking a bunch of lines of codes to work on.
I will definitely work with these type of projects more in the future and continue explore shaders.

Process Documentation Video:

Final Project (Totem Vision”TV”):


Week 9 Homework

In this homework, I explored using Substance Designer and creating my own material by using different nodes provided by the software.

Overview of the shader in Substance Designer:


By following the tutorials provided in the class, I made patterns and geometries such as Cells and Grunge. Combining the textures using Blend node and having two nodes of Blend to combine another random shapes generated will create interesting results


Nodes w/ comments explaining what they do:331 32

Preview of the Shader / Material produced:1 2

I am pretty satisfied with the result of experimenting with the different functionalities of the software. It made me understand the deeper understanding of different outputs (Albedo, Roughness, Metallic, Ambient Occlusion, and Height) when applied to an object.

I will definitely give it another try on my own time to explore the software since it is really powerful when making photorealistic details of a material and incorporating this to game engines such as Unity.

Shaders Applied in Unity:   6

Week 8 Homework



Creating the Materials and applying them in OBJs


Creating Skybox/Cubemap from a Material (and also some spotlights)


Closeup of the OBJs and their Materials applied

week8-homework 3
2 3

In this homework, I have tried and explored different materials and how would they will be applied to different OBJs. I have learned how Albedos / Metallics / Normal / Height / Occlusion Maps more deeply and how they play when applied in 3D models/objects.

I also created some lights and experimented with how the materials will behave when the lights hit the objects; will it create a shadow? or reflect? or rather absorb it?

Playing around with the Metallic properties of the materials, changes how much the lights will be reflected when lights hit it. And especially with the Road material, increasing the smoothness properties creates a “wet road” effect and gives a photorealism output. This also applies with different properties like the Height/Displacement map where changing the values also increases the “details” or the bumping of the material.

OBJs &

PBR Materials – Made with Substance Painter and



Week 7 Assignment

1 2

PushPop Assignment Code
I explored the pushPop assignment by accumulating different shapes in a different canvas and modified the value of the Xs and Ys of every shape creating unique outputs. I have also tried creating a large shape that creates a background for the canvas. Instead animating/moving the camera a lot, I tried to incorporate some transformation with the shape itself and using functions such as “seconds” “sin()” “cos()” and “fill()” using the hex value instead of RGB values.

3 4 5 6

BumpMapping Assignment Code

I really enjoy doing this assignment since this includes 3D objects and I tried to explore more and experiment with the mapping. I have tried replacing a different object at first but it does not look pleasant because it only shows the map (the painting) really closely, but I eventually figured out the problem since the object is not scaled properly and the camera is not focused on the right coordinate. Through this lecture in this topic / assignment, I understood the “backend” of the materials much more and how it was applied when rendering “details” on a specific model/object.

Midterm Assignment

1 2 3 4 5 6

I started my idea initially that incorporates both music video and a camera filter, but I realized how long it will take and the complications it will have when it was migrated from TheBookOfShaders to P5.js. So I went with the music video instead and was heavily inspired by my favorite show. I tried some of my inspirations came from modern art aesthetics and I tried to involve geometries and complementary colors.

The code itself has a lot of frag files and I did my best to apply what I have learned from our previous homework and sketches while also expanding my creativity on how will I work my project along with the music playing in the background.

The most challenging part of my assignment was syncing the transitions of my shaders to the music. It was time-consuming figuring out the millisecond’s timestamps and making the individual shaders, but I was pretty satisfied with the result I had.

Music Video – Midterm Assignment Link


Week 4 Homework

color_week4_homework_-roann_cordova2 color_week4_homework_-roann_cordova3 color_week4_homework_-roann_cordova color_week4_homework_-roann_cordova1

Tetrad Brightness Control Code

By studying the color wheel and the ratio of color harmonies, I have made an animation of colors that travels the color wheel specifically the tetrad color harmony. I used the values that counts the steps of each color in the color wheel that forms the shape of a square/rectangle with four color chord that will lead back to its origin. By using the rgb2hsb and hsb2rgb function back and forth to create properties (hue, brightness, saturation) that can be directly edited and inputting an initial color to reference for the color chord. Using the pct variable to multiply with the steps in order for it to be animated and still maintain the ratio of the color harmony.

Week 3 Homework

Shader 1

shader_1_week3_homework_-roann_cordova2shader_1_week3_homework_-roann_cordova3  shader_1_week3_homework_-roann_cordova shader_1_week3_homework_-roann_cordova1

Shader 2
shader_2_week3_homework_-roann_cordova1 shader_2_week3_homework_-roann_cordova2 shader_2_week3_homework_-roann_cordova3 shader_2_week3_homework_-roann_cordova

I actually really liked doing the shaders and incorporating different shapes in a single canvas using mix(). It actually took me a while to get the hang of it since there is an external reference (circle, squares) using Inigo Quilez’s codes and trying to tinker with it until I actually get the idea of shapes inside the canvas. I understand using abs(), sin(), u_time(), and especially declaring floats to make it as a layer and using that to fill in the mix() function and creating overlapping shapes inside it.

Week 2 Homework


Gradient Animated #1 
I actually had fun doing this work and exploring different values and the unique smoothstep() along with it. I have tried mixing two times adding the mixed vec3 value into another vec3 resulting in three different colours at the same time in the canvas.

Gradient Animated #2
This shader is challenging to make and I try to incorporate overlapping of the three different color channels (RGB) without seeming overwhelming. I used fract() to create the pulsing effect and sin() to do a series of color waves emitting from the vec2() coordinate from pct.