Category: Uncategorized

For this week I was pretty amazed at how easy shader graph makes things.

Magma Shader

I created this Magma shader after experimenting with a rock texture I found online. I had originally wanted to make a sphere have cracks with energy seeping out of them, but then I got the idea to make magma instead. I’m also using some bloom to achieve the bright spots.

Cloaking Shader

I got inspired to make a shader depicting a common game mechanic of “cloaking” after watching the alpha clip lesson.

For this weeks homework it was eye opening to finally be able to port our shaders to Unity as well as learn more about how rendering in Unity works. Previously the graphics and shader side of Unity has kind of been a black box to me but it was great finally being able to understand it all.

I found it a bit confusing converting my shaders to HLSL, having to get used to the new structure as well as all the new keywords and functions.

Pictured is some primitives with different surface shaders applied and the top cube is one of my Week 1 shaders converted to HLSL.

 

The biggest thing I learn while making this was how to start making displacement shaders and how to control the intensity of the shader by the luminosity.

Link to Code: https://editor.p5js.org/notbrian/sketches/H0XLUHgHq

This week I had a lot of fun working with simplex noise and adding randomness to my sketches. I experimented with the complex shape function I used in my previous sketches and integrated noise into it, I found it started to look really interesting so I kept on messing around until I got to what you see below. Noise and randomness are very powerful tools to add complexity to a shader and I’m excited to see what else is possible.

// Author: Brian Nguyen
// Title: Random Noise Shape without Grid

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.14159265359
#define TWO_PI 6.28318530718

float random (vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))*
43758.5453123);
}

vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
float snoise(vec2 v){
const vec4 C = vec4(0.211324865405187, 0.366025403784439,
-0.577350269189626, 0.024390243902439);
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod(i, 289.0);
vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+ i.x + vec3(0.0, i1.x, 1.0 ));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
dot(x12.zw,x12.zw)), 0.0);
m = m*m ;
m = m*m ;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}

float drawSidedShape(vec2 st, vec2 pos, float size, int sides, vec2 indices) {
float d = 0.0;
// st = st *2.-1.;
st -= pos;

// Number of sides of your shape
int N = sides;

// Angle and radius from the current pixel
float a = atan(st.x,st.y)+PI;
float r = TWO_PI/float(N);

// Shaping function that modulate the distance
d = cos(floor(sin(u_time+snoise(st + indices)*2.096)*1.0+a/r)*r-a)*length(st);

d = smoothstep( 0.734 ,1.0-size, 1.0-d);

return d;
}

vec3 hsv2rgb(vec3 c)
{
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

void main() {

vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

vec2 indices;

// st = createGrid( st, vec2(5.), indices);

vec3 color = vec3(0.);

float r = 0.0;
r += drawSidedShape(st,vec2(.5,.5),0.016,9, indices);
float bg = snoise(st+vec2(u_time+snoise(st), u_time+snoise(st)))*0.2-0.1;

color = mix( color, hsv2rgb(vec3(float(st.y+u_time),1.0,1.00)), bg);
color = mix( color, hsv2rgb(vec3(float(st.x),0.336,1.00)), r);

gl_FragColor = vec4(color,1.0);
}

For this shader I tried out a lot of different patterns and shapes. I started with using rectangles that span across cells but I later turned to circles as I thought they were more mesmerizing especially when in motion.

While working on it I got more comfortable with the 4 cell system where at first it was kind of confusing me.

// Author: Brian Nguyen
// Title: 2D Pattern

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

#define PI 3.14159265359
#define TWO_PI 6.28318530718

vec2 createGrid(in vec2 st,in vec2 grid,out vec2 indices){
 
 // multiply by the number of cells
 // [0,1] range => [0,10] (for example)
 st*=grid;
 
 // get the cell indices
 // for example, in a grid of 10x10:
 // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
 indices=floor(st);
 
 // use fract to get the fractional amount of st
 // 9.5 => 0.5
 // shows the xy coordinate in each cell
 st=fract(st);
 
 return st;
}

float drawSidedShape(vec2 st,vec2 pos,float size,int sides,vec2 indices){
 float d=0.;
 // st = st *2.-1.;
 st-=pos;
 
 // Number of sides of your shape
 int N=sides;
 
 // Angle and radius from the current pixel
 float a=atan(st.x,st.y)+PI;
 float r=TWO_PI/float(N);
 
 // Shaping function that modulate the distance
 d=cos(floor(sin(u_time)*1.+a/r)*r-a)*length(st);
 
 d=smoothstep(.734,1.-size,1.-d);
 
 return d;
}

float drawCircle(vec2 st,vec2 pos,float size){
 float d=distance(st,pos);
 // step shows values > argument 1, and we want the opposite
 // so we invert the results by subtraction 1.0 - the value
 return 1.-step(size,d);
}
void main(){
 
 vec2 st=gl_FragCoord.xy/u_resolution.xy;
 st.x*=u_resolution.x/u_resolution.y;
 
 vec2 indices;
 
 st=createGrid(st,vec2(5.),indices);
 
 vec3 color=vec3(0.);
 
 if(mod(indices.x,2.)==0.&&mod(indices.y,2.)==0.){
 
 // lower left cell - triangle fan
 
 color=vec3(0.);
 float r=0.;
 r+=drawSidedShape(st,vec2(.5,.5),.016,3,indices);
 color=mix(color,vec3(1.),r);
 
 }else if(mod(indices.x,2.)==1.&&mod(indices.y,2.)==0.){
 
 // lower right cell - orange bg with blue circles
 color=vec3(.945,.549,.001);
 float r=0.;
 
 for(int k=0;k<20;k++){
 for(int i=0;i<20;i++){
 r+=drawCircle(st,vec2(0.+float(i)*.2,0.+float(k)*.2)+vec2(0.,sin(u_time))-1.,.05);
 }
 
 }
 
 color=mix(color,vec3(.023,.530,.905),r);
 
 }else if(mod(indices.x,2.)==0.&&mod(indices.y,2.)==1.){
 
 // upper left - cyan with blue scircles
 color=vec3(.320,.945,.733);
 float r=0.;
 
 for(int k=0;k<20;k++){
 for(int i=0;i<20;i++){
 r+=drawCircle(st,vec2(0.+float(i)*.2,0.+float(k)*.2)+vec2(0.,sin(u_time))-1.,.05);
 }
 
 }
 
 color=mix(color,vec3(.023,.530,.905),r);
 
 }else{
 
 // upper right - white bg with black circles
 
 color=vec3(.940,.940,.940);
 float r=0.;
 
 for(int k=0;k<20;k++){
 for(int i=0;i<20;i++){
 r+=drawCircle(st,vec2(0.+float(i)*.2,0.+float(k)*.2)+vec2(0.,sin(u_time))-1.,.05);
 }
 
 }
 
 color=mix(color,vec3(0.),r);
 }
 
 gl_FragColor=vec4(color,1.);
}

This week I got an overall re-introduction into shaders and having to re-learn concepts and understanding of the basic functions. One part I particularly struggled on was the exercise on the colors chapter where you’re supposed to make a flag. My code wasn’t working when I was sure it was supposed to. It turned out to be a problem with the order of operations.

My favorite shader was created was after creating an HSV gradient and then experimenting with different shaping functions. Eventually I settled on an interesting combination using sin() to control the mixing and mixing between HSV functions. One of the functions is influenced by the y axis, and the other by the x axis which resulted in some interesting combinations when they were mixed. This shader incorporates a lot of motion and creates new random patterns overtime that can’t be experienced from screenshots so I recommend loading it up yourself.

// Author: Brian Nguyen
// Title: Gradient Shader Trippy 2

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

vec3 colorA = vec3(0.155,0.903,0.912);
vec3 colorB = vec3(0.983,0.029,1.000);

vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
6.0)-3.0)-1.0,
0.0,
1.0 );
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * mix(vec3(1.0), rgb, c.y);
}

void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
color = mix(hsb2rgb(vec3(st.x - u_time * 0.1,1.0,1.0)), hsb2rgb(vec3(st.y + u_time * 0.1,1.0,1.0)), sin(u_time * 1.0) * 10.0);
color = mix(color, vec3(0.905,0.008,0.138), sin(u_time * 2.0) * 10.0);
gl_FragColor = vec4(color,1.0);
}

 

My second shader also incorporates motion but I somehow ended up creating an effect of the colors looping over themselves.

// Author: Brian Nguyen
// Title: Gradient Shader HSV - Wild 3

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

vec3 colorA = vec3(0.155,0.903,0.912);
vec3 colorB = vec3(0.983,0.029,1.000);

vec3 hsb2rgb( in vec3 c ){
 vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
 6.0)-3.0)-1.0,
 0.0,
 1.0 );
 rgb = rgb*rgb*(3.0-2.0*rgb);
 return c.z * mix(vec3(1.0), rgb, c.y);
}

void main() {
 vec2 st = gl_FragCoord.xy/u_resolution.xy;
 vec3 color = vec3(0.0);

 vec3 pct = vec3(st.x);

 // pct.r = smoothstep(0.0,1.0, st.x);
 // pct.g = sin(st.x*PI);
 // pct.b = pow(st.x,0.5);

 color = mix(hsb2rgb(vec3(u_time,1.0,3.776)), hsb2rgb(vec3(st.y + u_time,1.0,4.496)), pct);



 gl_FragColor = vec4(color,1.0);
}

My third shader is a mix of two color functions moving in opposite vertical directions and then I’m using sin() to fade the sketch in and out.

// Author: Brian Nguyen
// Title: Gradient Shader Fading

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

vec3 colorA = vec3(0.155,0.903,0.912);
vec3 colorB = vec3(0.983,0.029,1.000);

vec3 hsb2rgb( in vec3 c ){
 vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
 6.0)-3.0)-1.0,
 0.0,
 1.0 );
 rgb = rgb*rgb*(3.0-2.0*rgb);
 return c.z * mix(vec3(1.0), rgb, c.y);
}

void main() {
 vec2 st = gl_FragCoord.xy/u_resolution.xy;
 vec3 color = vec3(0.0);

 vec3 pct = vec3(st.x);

 // pct.r = smoothstep(0.0,1.0, st.x);
 // pct.g = sin(st.x*PI);
 // pct.b = pow(st.x,0.5);

 color = mix(hsb2rgb(vec3(st.y - u_time,1.0,1.0)), hsb2rgb(vec3(st.y + u_time * 2.0,1.0,1.0)), pct);
 color = color * abs(sin(u_time));


 gl_FragColor = vec4(color,1.0);
}

This week I tried using as many ShaderGraph nodes as possible to get familiar with the available functions. I also tried out various post processing effects and ended up using lens distortion, bloom, and some colour processing. For the image texture shader, I added animated noise to a base texture map, as well as a coloured emission.

For the reveal shader, I used the swirl UV node to alter the alpha map, and animated both the swirl and the alpha threshold using a time sine function.

For this week I followed all the prompts to create various simple 3d objects in a scene. I experimented with animating textures and colours in various ways. For example, in the two screenshots below which show the scene at two different points in time, there is a sphere where I animated the colour and intensity mixed with the height map to imitate a glowing hot rock (where the thinnest parts would glow brightest). Also shown below is a cube with vertex displacement according to x position.

Then, I successfully ported over a fragment shader from an earlier week. With the sphere, I added an animation of a moving area of glossiness.

Here is a post processing shader I applied which added a purple hue and sin displacement.

I was entirely unfamiliar with the unity shader editor, so I mostly focused on figuring out the workflow, and following the tutorial. I based my project on the holographic demo, and made some changes – such as animated noise and different animation. I ended up figuring out a lot of how the shader graph worked, as well as how to use post processing effects.

 

I am relatively  new – and very rusty in Unity, so I spent most of the time working on catching up and remembering the controls, scripting and everything else. I did all 3 prompts in one scene – porting one of my shaders, playing with post processing colors and relearning shaders.