Author: Mark Lin

For this last assignment, I want to do something more artistic than the house demo we did during the class. So I came up with an idea of texturing a human figure or statue for this assignment. Then I found a man falling figure which I think I can make some artistic things from it. Since the assignment required me to do 2-3 texture separately for each part, so I came up with detaching body parts to make it like this human figure is falling apart into pieces. The texture choices are from my idea of combining traditional statue with technology. Although, the one I chose is not really traditional statue, I still want to do the experiment to see what’s gonna happen. Here are the outcomes:

I think the final results looks good at least it’s not ugly (personal opinion)

After finish creating and texturing my 3D model, I trying to render the texture. I encountered an issue that says error for rendering the color part. I tried to do some search online and solve it but it won’t work out for me. Besides, when I trying to apply my rendered curvature map, position and other map to the model it won’t showing up for me. It is all just black color on the model. I tried to solve this problem as well but I don’t know why it is happening.

Progress and graph screenshots:

Model:

https://www.turbosquid.com/zh_cn/3d-models/3d-anatomy—model-1420481

Learning resources:

https://www.youtube.com/watch?v=ZpTJxN6jqSk

https://www.youtube.com/watch?v=M0McqKrcezg

https://www.youtube.com/watch?v=OdXdmDw2tHM

Ethan Day and Mark Lin Shader Final Project Reflection

Motion capture with superpowers

This is a playable third person action game demo

Game play video:https://youtu.be/iX-sbuzr99A

Itch.io page: https://ethanday.itch.io/shader-art-final-2023-mocap-with-superpowers

***CONTROLS*** 

If at any point the demo is bugging out or seems to be glitching in some way, press R on the keyboard to reset the scene.

Basics:

WASD to run

Mouse movement to rotate camera

Attacks: (can be performed while running)

Hold left click to perform a combo

Stop holding left click to cut the combo short during one of the 5 moves

Press right click to perform a powerful jump kick

Press right click at any point while holding down the left click combo button to perform a jump kick mid combo

Defensive movements: (stationary)

Hold spacebar to enter defensive posture

Press WASD while holding spacebar to perform a quick dodge in various directions

Left click while holding spacebar to perform a quick jab

Right click while holding spacebar to block

Quick jab while blocking to cancel the animation

Hit X when prompted to perform a cinematic takedown on an enemy and reset the scene afterwards.

List of shaders:

Ethan – Fire effect, lightning shader and VFX, nature ground

Mark – Mud, Water blue, water red

Our final project is to make a game in which players are able to move characters to do different martial art moves and an ability to execute enemies with a series of moves. We begin with using the mocap project that Ethan created in the past. It included the motion capture animation bundle with characters. To make this look great, we want to add some effects to enhance the feeling of powerful moves like punches and kicks. 

We first did the basic thing which is to choose what kind of texture we want to do. We decided to do the punches with water and kicks with fire. Then I start to make a water texture in the substance designer while Ethan is trying to figure out how to add the effect when our character is punching. Besides, Ethan came up with an idea of using the arm guard to indicate the element. So I did a bit of modeling for our arm guard. Then he applied the finished water texture on the guard. It doesn’t make any sense if the water arm guard is here all the time. Then Ethan figures out a way to make the guard only appear when using the punches. Meanwhile I’m working on how to make our fighting environment look good. Since everything is going to the material arts aspect, I’m going to make something in the same style as that. Then Ethan gave me a great idea to make a Dojo setting. 

One of the most challenging aspects was creating visual effects based on Unity Shader Graphs from scratch. We created a fire shader and a lightning VFX/shader combination effect. The lightning had to be a VFX and a shader because the lightning had to show up in a certain shape and animate in a certain way, whereas the fire we placed on a 3D object as a material. Even though we used tutorials it was tough to understand the UI and make sure we missed no steps while staying organized. Also, never underestimate the difficulty of dealing with small text when having 2 tabs open that already have small text. 

I searched up some assets online and got our scene set up. To make this look good I added some textures for the road and included two textures me and Ethan created from substance designer, Mud and Nature/grass. I also added many lights to improve our scene views. Ethan is working on the legs and using the texture I changed from water to fire. He figured out how to make guards disappear and reappear depending on what kind of attacking style. Besides, he also added a fire effect on the enemy when he got punched and kicked. To make it cooler, Ethan also made a lighting effect that will appear from the sky to strike the enemy when the player finishes the execution.

I will say there are many challenges we encountered. We first lost some part of our project by trying to use GitHub but we spent some time fixing it. I had some trouble setting up the lighting, then I took some time to learn more about lighting online. Result is I’m able to make the lights in the scene render shadows real time. It took ,e a long time to find the models I needed to set up the scene since the environment is Japanese style and it took me some time to choose the right texture. For Ethan’s part, he struggled a lot with making the effects since his work is mostly coding and shader graphs. He has to figure out many things because there are many things that the tutorial didn’t mention at all.

In summary, we are really happy with what we did for this project. There are a few things we want to add into the sense but it is too hard and is going to take a long time to do it. The reason why it took so long for us to finish is that we want to do something cool.

 

Textures and models:

https://www.turbosquid.com/zh_cn/3d-models/3d-model-paper-structure-dojo-shigeru-ban-style-2001638

https://www.turbosquid.com/zh_cn/3d-models/xfrogplants-weeping-cherry-prunus-pendula-3d-model-1737617

https://www.turbosquid.com/zh_cn/3d-models/japanese-stone-lantern-3d-model-1725972

https://www.turbosquid.com/zh_cn/3d-models/stand-katana-3d-model-1428923

https://www.turbosquid.com/zh_cn/3d-models/3d-sword-weapon-1683820

https://sketchfab.com/3d-models/japanese-standing-lantern-70aed3dc12274120809c97ee26e78fdb

https://sketchfab.com/3d-models/japanese-lamp-aae37f2c1dc848378f37f4c5fd6255f0

https://sketchfab.com/3d-models/japanese-maple-tree-b6eb627413ed40fdb8b0a1e1c9038fa9

https://sketchfab.com/3d-models/japanese-lamp-e816f01aa14b4af99a582b4d6a8cbdd0

https://sketchfab.com/3d-models/japanese-style-fence-67067ff587424f4b825c7e56c8f02c26#download

https://sketchfab.com/3d-models/japanese-style-lantern-bedd61104d3b458b93fe2c78874ae8e0#download

https://sketchfab.com/3d-models/japanese-torii-gate-2027a248de1b4b70985ff97e708fb50d#download

https://www.textures.com/download/PBR0605/139079

https://www.textures.com/download/PBR1048/142582

Youtube tutorials: 

https://www.youtube.com/watch?v=glSsaRpHKos&list=PLpPd_BKEUoYjcFaqriaMchx5gOqBs2tDh&index=4 

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

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

https://www.youtube.com/watch?v=JNLE42VlfqEYouTube

https://www.youtube.com/watch?v=40m_HUENh3E&t=517s 

Mixamo models used: David and Josh

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

For this week’s assignment, I thought about making these textured materials into a scene instead of simply lining them up. I took the idea I did before which is to create a vapor wave sunset that is also my idea of choosing the sunset(pink) skybox for my scene. In order to fit more to my theme, I chose sculpture for my center focus because I think it fits more to my scene. Besides, the marble texture looks great with the pink tone. I added a plant after because I think it gives a more relaxing feeling and it is more organic than hard shapes. I think adding some basic shapes works well with sculpture as if I’m in an art studio doing some paintings. I sculpted a cube in Maya into an irregular shape because I think the curved surface works well with smooth and strong reflective material. Lastly, I used post processing and bloom components to make the ring glow to enhance the vaporwave feeling.

Skybox 

https://polyhaven.com/a/pink_sunrise

3D models:

Sculpture

https://polyhaven.com/a/marble_bust_01

pillar

https://www.cgtrader.com/free-3d-models/architectural/decoration/anc-f3236555-5392-469e-a0d3-f98e7cc714d3

plants

https://www.textures.com/download/3DFoliage0053/143969

Texture:

Chess board

https://www.textures.com/download/PBR1065/142918

Dark marble

https://www.textures.com/download/PBR0492/138503

Old aluminum

https://www.textures.com/download/PBR0938/140604

Reinforced metal

https://freepbr.com/materials/reinforced-metal/

Black granite

https://www.textures.com/download/PBR0812/139288

Fine gold

https://www.textures.com/download/PBR0194/133232

Polished marble

https://freepbr.com/materials/stringy-marble-pbr/

Speckled marble

https://freepbr.com/materials/polished-speckled-marble-top-pbr-material/

For this week’s assignment I was inspired by the example that shared with us this week. There are two sliders which is controlling the depth and frequency of the image. Then I’m think I can make more slider to control more variables which will be interesting. I decided to do a slider that will change the height of certain color by adding another color picker panel under the sliders using the java scripts.  The reason why I chose to use deep sky images is because it is easier to see the changes and deep sky images always have a clear channels. The result is what I found most interesting. By changing the color that will change height, it gives more depth to the image which made it more like in a 3D model view.

I created shader 2 in P5 file. I used Simplex noise(snoise) to make it wavy. I used sin and tan to make wavy effect on RGB values.

The RGB color is animated using shaping functions and background texture is altered through noise and amplitude.

We want to make something to connect with a song using the amplitude variable to change the waves based on the noses. Is similar to the other two shaders because we are doing the different types of distortions that  Add or multiply to the amplitude of the song.

We struggle to make all 3 shaders to loop forever but we used the millisecond and if statement in js files to create a time line that says if milliseconds is greater than certain number then switch shader. The project will play the loop of our three shaders one time, after that we have to refresh the page to see the loop again.

Change the value of the snoise return number to be 17 multiply amplitude rather than triple digit number in order to make the waves slightly larger and more prevalent. If the number is too high and the waves are small there will be too many of them. Whenever the beat in the song wave becomes denser because amplitude value is higher Rgb numbers using tan and sin and time value to animate and/or oscillate over time.

I had trouble figuring out how to do the timeline and Arteya and Ethan helped out. we each have played a part in creating the timeline. And they each created a shader that’s why we have 3 in total. We also gave some feedback to improve our individual shaders. I think working in a group is very helpful to me because I’m not really good at coding. Arteya chose the song to best fit our shader disco and dance floor vibe. 

https://editor.p5js.org/dayethan14/sketches/1VKvupWzp

For this week’s example I found it is very interesting, I test around with the cat example and came up with an idea of changing the value of distance to increase the value of RGB. Besides, I changed mouse movement to use uTime as the animator. After I test out the result, I found out that some value is going off 100 so I added a clamp function to restrain the value from 0-100. To make my result even more interesting, I decided to use Starry Night by Van Gogh.

The reason why result is different through out the time is because as the uTime increases the cumulation of  offset is also increasing. Therefore, most pixel will eventually reach the maximum of RGB. That’s why last result variety of color is limited. The pattern is the final product of base offset, first octave and second octave. Because the speeds of the three noises moving up are 0.05, 0.25 and 0.1, but each snoise only contains limited information and repeats itself, so when we run my code long enough (when the three pictures overlap again) , the accumulation of offsets will stop, causing the final pattern to be fixed.

 

For this week’s assignment, I start with the example professor give us that is the fours circles. Then I start to think about what I should make for shader#1. From the circular shape, the first thing come to my mind is planets and sun. After I tried put many circles into the shader, I think it is too boring just staring at circles. Then I come up with an idea which is to make a aesthetic vapor wave style which will colored with pink and blue that I usually put to my artworks. I also discover these shapes with different colors to see interesting result.

For this assignment, I used many layer to set each shapes in different order. I also have functions to draw circles and rectangles which will be easy to call for later shape creation. Then I used mix function to create the colors for each shapes. At first, I colored these shapes only with the plane color without gradient. After I finish align shapes I found it is too boring and bit ugly, thus I chose to add gradient to the color by using +st.y or +st.x to create depend on which way I want gradient goes.

For the second shader I didn’t spend a lot time on it but I did some experiments. I used create grid bricks as the base and did some number editing to it and this is what I got.

We are talking about HSB this week and I understand that RGB is mixed color by Red, Green and Blue. By mixing these three colors we are able to create other colors. HSB on the other hand, is using Hue, Saturation and Brightness to describe color. When I experience with HSB I found there is a big difference which is that HSB is more straight forward to me compare to RGB. For RGB, I have to remember which color is which number that I think is too complex.

For this weeks assignment, I tried HSB with sin function and add a new function Pow to make it more complicated. Then I test numbers around and tried adding, minus and multiply to change the look of the result. After I keep the result I want, I add u_time to animate the colors.

Hi everyone, similar to other classmates, I don’t have any experience with The Book of Shaders Editor before but I do find some familiar element with P5.js on the webpage which is showing the canvas on the right in order to see the direct result and editing the code on the left.

Gradient #1: RGB channels

 For the first exercise, I was inspired by the default example on the editor in which they used u_time to animate the shader. Therefore, I was wondering if I would do the same thing, so I made my gradient shader to move by using abs(sin(u_time)). Then I did some changes with division and it looks really cool than multiply so I kept it this way. Then I thought about what could happen if I add sin and time to it. That is what I have for my final look.

It is really interesting to see how the intersection line moving across the canvas while color is mixing together to create new color.

Gradient #2: Using mix()

For the mix exercise, I used the similar thoughts u_time to animate the result.

However, did it twice makes me feel bored so I messing around with sin cos and tan to create something like this.

The second one I added u_time on it and the the color is moving along with time which is very interesting.