Shader Art (Winter 2022)

The first time tried out bumping effects, it really bumps out:) I bet it will be creepy using it for some horror scene, it also contains some dizzy effects since after I finished this shader, I feel a bit uncomfortable

This color palette was inspired by the Windows color palette, it looks very classic to me, I think is a good time to try out multiple bold colors in one picture. I also added the rotation animation.

It is really interesting to try out different u-time functions to see the timing change. Was trying to add as much color as I can.

This is an exploration of different layers of shapes, I was about to make a car but didn’t make it, it turns out quite like a robot face tho:) Used basic shapes shader codes.

Hi! We are Aimee and Doris.

If you want to play around with our Mushroom Garden ↓

>>> itch.io

>>> Video Walkthrough (in VR)

Inspiration & Ideation

For this Assignment, we plan to build a VR gallery to display our models in a Mushroom Forest. The render of materials will be anime style, which is inspired by Doris’ pro shader presentation research. The anime stylized render is inspired by Genshin Impact. We used the real-world object, mushrooms but render it in the anime style. 

For this project, we used Maya and a blender for modeling. Substance Designer, Shader Graph, and Substance Painter for the shader, Unity for building the overall environment. 

Concept

The overall environment uses a yellow tone. We wanted to emphasize the impact of desertification of land, desert encroachment, and deforestation. The flower flake shape and the bottle are rendered with plastic material, which advocates for everyone to protect the environment and reduce the use of plastic or throw it on the land. 

 

Learn from the Project…

Actually, this is the first time using Unity to finish a project for Doris, and we learned a lot from this project. Not only how to make shader graphs or materials in Unity, and also how to generate a shader in Substance Designer. In the process of making them, the most important thing is to learn how to switch thinking ways. I started to think about how to form a series of patterns from simple shapes, and also how to bring my drawing skill into the shader.

Codes

Crystal ↓

Grasssbase ↓

Ground↓

 

Grass (Shader Graph in Unity) ↓

Flower Sculpture↓

Environment Setting (URP) ↓

Final Summary:

For my final, I really wanted to stick to what I thought would benefit me the most in terms of my own future endeavors within the game-making space. I have been recently working on a low poly environment for a game that I have started recently titled Office: Infinite. Right now it is in its infancy and is not a full build quite yet however after completing one of the indoor scenes here I wanted to try and add some more life to the scene overall. And while I do plan on adding more and more over time I thought that a really good Idea was to recreate flowing clouds within the scene using the unity shader graph as I thought that would have been a really practical use for the Package and would add so much to the scene overall.

Shader explanation:

The clouds were done completely in shader graph using a combination of floats, vector 2 and come color functions. I created a base pattern for the clouds using a simple noise node that I then attached tiling to in order to be able to manipulate or animate the clouds. I did this by creating a cloud speed float and time node to the tiling node allowing the clouds to move over time which is also totally adjustable with a slider that is a part of the plane that is connected to the shader material itself. I wanted to be able to mess around with an alternate slider that could change the look and feel of the clouds so I added in a power and colour node which allows me to fine tune the clouds depending on how I’m feeling or how I want the scene to appear. Once the shader was functioning on the 2d plane that I assigned it to I realized I didn’t really like the look of it because of that reason, the rendering on the camera in unity was being weird with the plane so I went into blender and created a high poly plane that had a large curve kind of like it was blanketing the rest of the scene and imported that into unity. Once I applied the shader to that plane instead of the 2d plane I was happy with the way that the shader was looking. Finally, I added Alpha clipping to the shader in an attempt to allow light to be cast through the clouds onto the plane however this gave me problems.

Struggles/Going Forward:

The biggest thing I struggled with was trying to get real-time shadows cast down onto the plane through the clouds. This has been a struggle for me as I’ve tested multiple different render modes and different lightmaps and global illumination options but none of them seem to work which is very odd and annoying to me. I believe it has something to do with the universal render pipeline for the shader that I definitely want to look further into and figure out because I feel it would add a lot more atmospheric qualities to the scene overall. In the end. I’m very pleased with the results and feel of this shader. I will attach an itch.io downloadable and playable file to the submission of this project so that you can check it out yourself 🙂

Documentation(Video/Photos):

Youtube Link to in-game footage: https://youtu.be/xNWWD_2OzMI

I forgot to post when I finished the midterm, and lost the draft somehow. I’ll try to recollect my process.

When I first started on the p5 shaders midterm I wanted to make a digital mirror version of the screen melt from Doom 1 and 2. When you start a new level in those games, the previous screen becomes a foreground image that melts away in a series of offset descending columns, revealing the game in the background.

At first I thought it would be a fun application of what we’d learned, but I forgot that John Carmack is a literal wizard.
I started by creating a grid from our image like we’d learned, but after the grid locations had been indexed, I’d revert the creation of the grid to get our whole image again, without the tiling. This would allow individual segments of the image to be altered.
I had two separate layers of the same camera capture because I wanted the screen wipe to reveal a permanent change to the base image, like a discolouration or distortion. I think this ended up kind of working, but when the columns had descended offscreen, there would be some kind of totally unintended distortion, I think it was like the final pixel of the column stretched out.

The part that caused me trouble was the screen wipe itself.

I wanted each column to descend at its own time, so I set time as a random seed and a random function. This seed would decide which column would begin dropping next each (arbitrary unit of time). It would also decide how the background would be altered.

First issue: The seed would never refresh, so my random function would never change the pattern in which columns dropped.
Second issue: Whenever I got the timed offset of columns working, each column would immediately drop to the current height of the first column dropped. My vertical offset would NEVER work.

I think I never started implementing colour changes in the background, or if I did, it wasn’t carrying over properly. I remember some issues with mix() yelling at me about the data types that were being input, and too many variables in what was coming in/out.

I took a look at the original code for the effect, and a replication made by shadertoy user neur0sys. neur0sys’ code helped to structure my code a bit better and I think it was how I managed to get a limited version of the offset working at the speed I wanted. Ultimately, the original part of the project had lead to a dead end. Doom’s pseudo RNG was a big list of numbers in an array, and neur0sys had done the same. Quickly dumping all these pseudorandom values into an array wasn’t possible in the version of GLSL we were using. Our arrays were extremely limited, and I think I read that was the case for all versions of GLSL really.

I didn’t have to learn version 300 es while this thing was already late, so I pivoted to developing more upon an interesting effect I’d stumbled upon while trying to figure things out.

At one point I wanted to make the dropping columns look like they were dragging the permanent image along like dough or something. I pretty much started hooking everything up to sin waves. I don’t think I got my intended effect but I found a distortion pattern that kind of looked like holographic plastic and certain patterns of glass. When it came time to try something other than the screen melt, I repurposed this idea. The columns wouldn’t fall out entirely, they’d bob up and down in place. The distortion happening within the columns itself gives the appearance of more columns while also blurring the image overall. The base image would slowly distort horizontally, I think. It makes for a cool blurry and disorienting effect. Kind of incognito but you can tell what’s going on. It’s like when the secret Illuminati guys decide they still need to keep their webcams on for some reason.

Here’s the link again.

Video Playthrough/Documentation
https://www.youtube.com/watch?v=wrqRy2-W71s&ab_channel=Mikhail

Final Project
For my final project I decided to incorporate the knowledge I’ve learned about shaders in this class in this low poly game I’m working on. The shader’s I used in the game are using unity’s shader graph.

Project Summary
Titled “Tomi and Ash”, the game is a low poly maze exploration game based on unity. In this game, the player plays as a very shy and fearful rabbit named Tomi, he finds out that his childhood friend that he’s secretly in love with, Ash, will be leaving to move to another far away land. Realizing that it’s now or never, fearful Tomi must gain courage and face his fears to navigate and escape a maze and try to reach Ash to tell her how he feels before it’s too late! Inspired by the aesthetics of Kanye West’s  “Good morning” music video directed by Takashi Murakami, the game tomotoru and children’s stuffed animals. This game is very stylized and surreal in nature as this was the type of design I was going for.

Shaders
In making the shaders I used the tutorials made by Gabriel Aguiar Prod. as a starting point. For the wall shaders (Moving Shaders) I edited a “Toxic Waterfall shader” into a holographic shader by changing the values of the voronoi shader’s tiling and transparency to create the effect. By stretching out the voronoi noise on the X axis and setting the Y value low. I was able to emulate scan lines. I also increased the power node’s intensity to give it a higher contrast. In terms of making the shader’s for the character model’s I followed Gabriel’s crystal glow shader. This shader mostly uses the fresnel effect as its base which is then multiplied then added to get the final effect. I then bumped up the emission on all of the shaders to give it a glowing effect.

VIDEO:

https://vimeo.com/703393702

 

CONCEPT:

With this project I wanted to create one more mirror shader using what I had learnt in this course and while making my midterm project. I have always been intrigued and fascinated by the shared importance of patterns and almost all religions of the world and other rigorous studies like science and mathematics.

A very intriguing reality of these patterns are that most of them can be created by super imposing multiple simple shapes. And I believe that the super posing of simple shapes to create complex and dynamic systems is what underlies our entire universe. I wanted to represent this with my work by making the subject part of the tapestry. I used the color blue as it is a very soothing colour and represents the inpenetrable depths of the universe in islam and looks gorgeous when you project it onto surfaces.

CODE:

https://github.com/AtharvaJ3110/Shader-art-AJ-Final-Project-Patterns-and-lenses

CODE DESCRIPTION:

In the first part of my code I import my camera into GLSL as a vec4. Then I set up a grid. I create an identity for each box of the grid. rotate it a little to make it interesting. Create an offset to calculate the position of neighbouring boxes for each box. create and animate the circles. used a variable m to calculate how many circles overlap at a pixel using the smoothstep function. Display so that only the pixel with odd circles overlapping show.

 

 

 

It is quite fun to link up different squares to create a texture. I personally find this is visually interesting and not hard to understand its function