Joycelyn Wong – Final Project: the unexistent room

For my final project, I wanted to create a surreal room that is full of natural elements. This is inspired by the Ghibli movie castle in the sky and 3d room on Pinterest. I think it would be interesting to see the paradoxical combination of technology with nature. This room would be used as a guide for my graphic design work therefore some of my posters are present in the room.  

To create a surreal atmosphere, I used a dissolving shader to create unrealistic floating spheres that act as light sources. I also didn’t use regular materials such as cloth, leather, or wood to apply to my furniture. I used crystal for computer screens, glass for the chair, grass for the floor, and cloud texture for the sofa. Even though it is surreal, I tried to make all the materials look realistic to create an illusion that this might be seen in the real world to enhance the paradox. 

During the process of making, I have encountered many obstacles, for instance, the water shader would not work applying on the wall as it calculates the water depth based on objects underneath it. In this case, I needed to find an alternative shader instead of insisting on it. Otherwise, I would adjust the shader graph and achieve my expectation, for example, adjusting the vertex of the grass (at first when I tried to apply animation following the tutorial, the grass’s vertex would be so away from the center and become invisible). I also had to figure out everything from scratch since HDRP is kind of different from URP.  

Overall, I really enjoyed this project since I got a chance to explore the possibilities of Unity and substance designers.  

screen-shot-2022-04-29-at-7-33-49-pm

screen-shot-2022-04-29-at-7-33-45-pm screen-shot-2022-04-29-at-7-33-59-pm

Final Assignmwnr – Weiqi Wu & Ziqi Guo

Flower Shop from the Fairy Tale

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-181543

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-181615

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-181733

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-181821

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-181908

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-181948

Video: https://youtu.be/52fw-Wfxk6I

Inspiration

shader-art-final-presentation

Our inspiration for this project is from some creative scenes. The first inspiration is from the music video of a K-pop girl group, which is Aespa. The video shows a lot of bright and shiny elements including illuminated plants and objects from nature. The other inspiration is from a series of paintings related to mystery forests created by the Chinese illustrator called MaoYong Liu, where she created a lot of immersive mysterious corners within a forest. We were inspired by the combination of plants and lights, so we finally decided to set a scene as a magical flower store from the fairy tale. 

Concept

shader-art-final-presentation-1

For creating a magical flower shop, we set our goals of exploring natural textures and bright colours. We would like to use as many functions as we can for a better experience of the new tools we learnt (substance designer and shader graph) as we found that node coding is a tool which is exciting to learn. With the creative coding, we wanted to create something which is different from what we did with p5.js and see if we can make some innovations from it.

Asset

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-183922

We got the assets online and downloaded them. We first get rid of all of the original textures. And then created our own texture and animation. 

TEXTUre design

Weiqi Wu is responsible for the texture design in substance designer. Weiqi had created six textures in substance design. They are tree bark texture, crystal texture, metal plate texture, leafy pond texture, stylized water texture, random texture, and one simple texture.

Tree Bark Texture

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-184409

Crystal Texture

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-184700

Metal Plate Texture

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-184621

Leafy Pond Texture

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-184846

Stylized Water Texture

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-184820

Others Textures

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-27-110128 %e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-27-104651

Shader & Motion design

Ziqi Guo is responsible for the shader graph and motion design. And Ziqi had created six shaders, which are the glowing shader effect, emission shader effect, two force field shader effects,  and dissolve shader effect.

shader-art-final-presentation-2

shader-art-final-presentation-3

shader-art-final-presentation-4

note: the commands of the code on shader graph were done using sticky notes and because we created different colours and effects with mainly five types of functions, the comments of the coding were only shown in these shader graphs: 
- dissolve2; flower3; force3; forcefield1; glowlight;   
  hologram1
- You can find them in the shader file :)

Colour Theories

Colour theories had been implemented into our scene. We chose the colour that fits the concept and theme first, and then we found the triadic, analogous, complementary combination of them.

shader-art-final-presentation-6 shader-art-final-presentation-5

What did we learn by doing this project?

  • The importance of shader

This is the first time for us to learn how to apply our shaders on models in a scene. We realized how important it is to design the shader and detailed textures. The shader created a huge difference. In P5.js when we do the type coding, we used to pay more attention to creating graphical shaders and thinking about how to make the shader’s patterns identical, but now we are applying them to the real scene, so they have more storytelling use. 

  • Understand how to use both substance designer and shader graph in Unity

node-based coding is like a life savour by making our work more effective and powerful. It encouraged us to think about having our own shaders in our later work. we cannot imagine how complex that will be by having only the conventional programming. Now we are more confident at creating shaders becasue we will not be so worried about forgetting how to type the program vocabulary. 

  • Details have a great effect

both substance designer and shader graph would require a lot of details on the final effect. with node-based coding, it is way more efficient to change those details and have them under control. 

  • The choice of colour is important

We know that we will use the macaroon colour series at the beginning but we found that with the colour theories, we could create different combinations of different colours more easily. The application of colour theory in space also helped us better understand the different results having different theories. 

Final Shader Assignment

1

Video Link:https://youtu.be/Nu45GQl3WM

Introduction:

For this final assignment, I created an island and then added a bit of vegetation to the island and added ground, grass and sand textures to the ground. I’m more interested in things that have a realistic feel, so I made shaders that are on the realistic side, like ground and rock textures.

4 3 25

I did all the materials for the island in Substance Designer, and I spent most of my time working on the materials.

Process:

Grass_Ground Shader

twig_add-wood-texture

ground-7-%ef%bc%88pebbles%ef%bc%89final-ground-height

Sand Shader

pebbles sand-clumps sand-ripple

Grass Shader

grass grass2 %e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-27-110202

Rock Shader

rock-final rock-1 rock-2

Unity Process

terrain %e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-28-055046

 

 

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:

8

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: https://youtu.be/rZPb6lNMdnI

Final Project (Totem Vision”TV”): https://youtu.be/qJeu6yf1230

 

Final Assignment

For my final assignment I decided to expand off of my first major assignment – a shader music video, with some key evolutionary differences. The most significant difference is this piece is meant to be an exploration of alternative, interactive music videos. I find the concept of an interactive music video to be fascinating. From VR to websites, these digital spaces present entirely new way of packaging a song. With this in mind, I wanted to take a song I’m about to release (vocals still need to be recorded), and package it into a new interactive experience in which the user could toggle the video feed.

The shaders themselves include a collection of my experimentations, some new and some updated from the major assignment. Here I included amplitude as a controlling variable so each shader would be sound reactive. Such sound related animations include colour and size change either in proportion to the amplitude or when surpassing a certain threshold. Users can then click on the screen to change the shader.

Stylistically, the song is a bit coy and sassy so I went for predominately bold and feminine colours. I didn’t include many gradients as I really like the more graphic, Y2K look of solid  blocked colours.

Code/Editor: https://editor.p5js.org/kahoogie/sketches/-CPo-gO-U

Video: https://www.youtube.com/watch?v=1MRwGtRiG6o

screen-shot-2022-04-27-at-7-50-43-pm

screen-shot-2022-04-27-at-7-50-34-pm screen-shot-2022-04-27-at-7-50-20-pm screen-shot-2022-04-27-at-7-50-04-pm screen-shot-2022-04-27-at-7-49-51-pm screen-shot-2022-04-27-at-7-51-00-pm

 

 

Final Project

For the final project, Lin Yue and I create an explorable scene, players can navigate and enjoy the scene free of their will, like an open-world game scene. Our scene contains a snowy mountain terrain, a furnished wooden house and a sci-fi spaceship. Our main goal is to use Substance Designer to create realistic textures for use on these models. We got the idea from the movie “Arrival” and used World Creator, Cinema 4D and other software to help create the project. I became familiar with the operation of Substance Designer during the production process and found it to be a very useful and efficient material creation software. and I find the advantages and disadvantages of Unity, and I will try to use Substance Designer to work with other engines to find the most effective way to work.

26d3c987675c47dded36789ab0f6e68763af8b0b519156d23c6dcf1eea8aba

 

 

 

Final Porject for Shader Art

Is a group work with Jiaxi Pan.

 For the final project, we want to create an explorable scene, players can navigate and enjoy the scene free of their will, like an open-world game scene. The whole project is composed in unity. Due to the time limits, we are not able to go into detail and do the models by ourselves. The cabin and furniture models are downloaded from the unity shop, but the materials are all replaced by our own. Material and texture are generated through Substance Designer 3D. 

For me as an illustration, the student is really nice to learn shader skills that can hugely help in manipulating digital scenes because I like video games very much.

 

%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20220427180229 %e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20220427180243 %e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20220427180426 %e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20220427180445

Final Project

My last attempt to make a Doom-related thing didn’t pan out so I figured I’d try again.

fireblu

This is fireblu. It’s used later in Doom as you reach more strange and dangerous parts of Hell. It’s kind of hard to look at, and sort of funny, so I wanted to try recreating it in Substance Designer.

So I spent like 2 minutes and made this instantly whoops 

That was too easy. The red highlights are kind of gooey, and there’s no texture to the dark blue. I can do better.

Fireblu was some kind of messed up stone texture, but its contrast and brightness always struck me as a lava-like substance, so I figured I should start from there.

First, for the underlying liquid magma, I used the Cells 1 pattern, and manipulated it with warp, blur, and levels until it looked sufficiently rocky, and added a Perlin Noise to warp it around. I gave the colour a bit of texture by blending it with itself a few times and manipulating it from there. Finally, I add some animation by going into the properties of the base Cells and Perlin Noise, and adding a function within its disorder value that changes based on $time.
None of this animation shows up in Substance Designer, so I had to get Substance Viewer to see the animation at work.

For my lava’s crust I’d make a more substantial rocky pattern starting with a Hemisphere Shape. Fireblu’s rock patterns seem more splotchy to me, so for a base Shape I used a Waves pattern. This is heavily Warped, manipulated a little with another animated Perlin Noise, and Min(darken) blended with Black and White Spots, which was a really good texture to use for a more dusty or rocky look. After fine tuning it a bit more in levels and bevelling to cut down our splotchy pattern a little more, we send it over to FX-Map to make our pattern smaller, and to put it all over our shader, with variations of size, rotation, and locational offset. Before we give the top pattern a colour I added another animated Black and White Spots texture to sprinkle some more rocky texture and also to make the red colouration shift around a bit over time.

Emissive was used rather than the standard ambient occlusion. I wanted both lava and fireblu to have a little glow.

10fps 480p gifs exported from premiere pro are bigger than some games i have installed

 

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:

4

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