Month: March 2023

Proposal:

   For my final project proposal, I want to make a music player for my final project using Unity and Substance Designer. Below is my inspiration as well as my conceptual image which is picked up on Pinterest.  I think this picture brings a quiet and mysterious atmosphere, so my intention is that users can enjoy music quietly in such a relaxing environment. This project is also a challenge for me because I have never used Substance Designer to make materials before, but I have seen some works made by previous students, which is very inspiring and makes me look forward to making excellent materials through this powerful software.

Final showcase:

In my final project, I created five materials totally using Substance designer, which are the texture of the plane, column top, column bottom, rock and character. To interact with the project, players should click each column top to trigger the audio clip( which continues for about 10 to 15 seconds). The skybox(Unity assets), character model(Mixamo), rock models(Unity assets) and petal particle(Unity assets) are all online assets. Some of them were not in my project schedule but were added finally to increase the visual enjoyment. 

  I followed the tutorials on Youtube but adjusted a little bit to keep the harmony rather than completely copy what is taught in videos. I used to meet the lighting problem in Unity, in which the light doesn’t work except for the directional light. Afterwards, I found that this is caused by enormous model sizes. Specifically, if the model is larger than the standard cube too much, many functions will meet problems when run(mine was 100 times larger). For example, once I imported the texture to the model, it looked different from how it looked in the texture ball, which becomes rough and graceless(so the solution is narrowing them down and the light system restores after then).

Full project recording: https://youtu.be/jIv003CTy-A

Tutorial Link:

column top_the lawn with tiny flowers:https://youtu.be/srW8hk85uQ4

character_ crystal:https://youtu.be/M0McqKrcezg

plane&rock_glacier：https://youtu.be/guHMAbI7mUI

 

Materials(self-made) showcase:

character_ crystal

column top_the lawn with tiny flowers

 

plane&rock_glacier

*The substance designer file of this texture is missing, here is the unity material.

column bottom

 

 

 

 

 

To accomplish this project, I wish to  get comfortable working with the fundamentals of P5.js and GLSL editor. I plan to start creating different GLSL editors focusing on different calming elements such as sunsets, rain, and cherry blossom trees.

I will use visual techniques such as linear interpolation, noise generation, texture generation, and color manipulation to create visual effects. I will also add an audio file containing calming sounds like waterfalls, rain, and birds to add an immersive and relaxing feel to the video. I may also consider using one of my favourite OST/music over it to create a music video

I believe this project can be a great way to learn and master p5.js while also creating something that is visually appealing and calming for people to enjoy.

I want to make a good blender practice assignment to finish my final project. Here is the tutorial that I learned from youtube.

https://www.youtube.com/watch?v=LrEHoaq6QFE&list=PLXtkbHxe1LJ0hvz0xEioILyv3LdRrsWBn&index=4&t=519s&ab_channel=JoeyCarlino

This is the tutorial to teach me how to make every 3D object into a lego texture shape, which was fun by adding a base colour and adding lego geometry into the geometry editor, adding mesh to volume to distribute points in the book, for instance, on issues. And covered the material from the website of the beach balls; I really like the blender’s power; you can add your costume texture to the object even if the materials are not changed.

 

The Beach ball

https://skfb.ly/6ENE8

 

 

Although I couldn’t get better pictures of the renderer than 1400×750 (ish), as you can see I created a shader/texture that has a lot of details and little pieces to it. I used Chunck’s forest ground tutorial on YouTube as seen in the assignment post, and this tutorial took a very long time but was very rewarding to get through. I learned a TON about how these magical seeming graphics are actually created from scratch, and it gave me a lot of insight into the origin of 3D graphics, similar to when I presented on a GDC talk about Anthem’s shader creation process in the weekly shaders presentation. Here I saw node based programming turning abstract shapes into a lifelike and believable nature surface, and actually did it myself while understanding it.

The hardest part of following the tutorial was organization, since I didn’t have the cubic node connections that the tutorial had, and needed to use the bending wire connections, which made finding important nodes for connections in blends very very tedious. I would sometimes spend minutes trying to find the correct node I needed to plug in on the other side of the shader graph. Other than that, it went really smoothly and I took into consideration every aspect of how the shader was made from using gradients to create proper colour, to carefully adjusting height, or using patterns to actually turn a small blade of grass in a triangle shape into clumps of realistic grass growing out of the ground. I found it all very interesting and I look forward to using Substance Designer with more YouTube tutorials on my final project which will be a Unity game.

In terms of my final product, the grass is slightly thick and clumpy compared to what I would have liked, but the variety is nice to have a bit of distinction from the original – it sort of makes it my own. The rocks are a lot more noticeable than the tutorial version because of their size and placement, and the grass looks more like moss due to the colour and shape of the patches. I would need to play around with the pattern node to fix the grass. All in all I would be happy to use this nature ground in an area of a Unity project I’m working on – I think it looks extremely convincing with all it’s small details, down to edges on rocks.

Tutorial: https://www.youtube.com/watch?v=VZwji9UIfXA

Since the theme of  my final work is relative with the natural and forest features, I chose the cobblestones tutorials of substance designers for learning. Since it includes part of the leaves which belongs to another video, I did not include the leaves features in this assignment.

The process of making cobblestones path could be broken down in to several main parts. The first steps is to create the basic cobblestones shapes by using arc pavement, and flood fill series are helpful on making variations on the patterns, gradients and shapes, which also been used a lot in other steps.

Then we use some textures to generate the edges wear for the textures of cobblestones, and dirt ground. Blend is widely used in the project for changeably and appropriately mixtures between two nodes. Then we could generate the scene that parts of the cobble stones are sink into the dirt ground. I do not do the leaves, so I only make the twigs and also blend them with the dirt ground. An important hint here is that, when we use the tile generators to making abundant random twigs, for natural-like twigs, changing the blend mode in parameters page into Max is helpful on making lively intersecting twigs.

And finally, the most complex part for me is the setting of base colors and cavity for the map. Some questions here come into my mind while making them. If we would like to give different parts of the textures with specific colors, what could we do for splitting colors and distributing them on different part of textures? There is a part that to give specific color to the twigs, we could use mask. There are too many connections happened so these are pretty hard for me to completely understand how it works.

I did not completely follow the tutorials, and I changed some parameters based on my preference and some consideration of my final works. It does take me a long time to carefully follow every single step, or it may cause some missing nodes and effects. But I learn a lot through it! The process is very interesting and organized.

And here is the video link cited of tutorials: https://youtu.be/A1lEgPv8sNM

 

 

For the final assignment I was confused at first as to if I should focus on first half of the semester or not, I think it would be good opportunity to learn and improve p5.js editor.

I remember seeing similar example shown for the music video  as Danny Rozins shared in class, in Museum of Illusions in Chicago, where the keyboard keys change as I came near the artwork.

I started experimenting with the GLSL and p5.js editors and thought it will be great idea to work on the music video to understand the editors better.

I wanted to create a music video which showcases different feelings and things that I like, for the first fragment I used one of weekly homework assignment that I submitted which looks like sunrise/sunset.

I wanted the music video to progress into from rain effect to galaxy so based on the rectangle randomness that was taught in class. I started working on the code.

The code was set up to loop but I wanted the shapes to be stable and changes colours in order to show that water is going down by changing colour. I experimented a bit if it should be water droplets or water kind of flowing and changed the x and y axis.

 

And then I made from generative concept taught in class I was able to make thunder effect

As I was working more on the shaders thought it will be great to consider more shaders like galaxy etc, have more (7-10) designs

Rainbow:

Eclipse:

Cherry Blossoms:

Then I preloaded and set up my files in p5.js

For some reason, I was unable to load the song as mp3, so I decided to have a separate js file and organize the code in a better manner.

After that I worked on the scenes, I also tried adding interaction with the mouse.

 

Link to the final video: https://drive.google.com/file/d/1NP_-RZBptH7llDqXyA-qK_w2ohMts-fv/view?usp=share_link

 

For this week’s homework we dived into the 3D Substance Designers. It always fun to me to see how the texture is being made but begin with a new software is always kind of hard. Good thing we are able to follow along with tutorial online. I was thinking to make some realistic ground with water puddles then I found a video teaching me how to make a wet mud with some small water puddles. This video is an hour long but I think it really worth it because the guy speaks slow and in a very detailed way for every step. Although, there are many things I don’t get why he is doing that but I understand the main idea is to add as much details as we can and adjust each small unfit things as we can. And this is the reason I followed whole hour to see each nodes function in order to create my own detailed texture in the future. Here are some notes I took that I think is helpful for me:

Decreasing opacity will always help

Remap the tone too much information use histogram scan or level

Transformation 2d is perfect for change the size of a noise

Tile generator is great for creating block texture and adjusting for many details

Tutorial: https://www.youtube.com/watch?v=uDcI-9vtTlg

I decided to try and make a sandy texture in Substance Designer following this tutorial: https://www.youtube.com/watch?v=4pIVtZSaGwI

 

I have very little experience with substance designer, so following this tutorial greatly helped me get a better understanding of how to work with the program. I had a lot of fun experimenting with all the different values in the shader graph, and can definitely see how one could sink countless hours into creating different materials using this program.

Here is what my final render looks like on a sphere:

 

Here is my shader graph with annotated nodes

 

And here is the material displayed on numerous shapes

 

For my final project I am likely going to create a photorealistic environment that requires a sandy beach, so discovering how to create sandy materials in Substance Designer has helped me get a better understanding of how I want the final product to look.