[Shader] Step, Mix, SmoothStep

기본

void main() {
  vec3 colour = vec3(0.0);

  colour = vec3(vUvs.x);
  gl_FragColor = vec4(colour, 1.0);
}

Step

step(edge,x): x를 edge로 비교를 해서 step 함수를 생성

if(x<edge) return 0.0;
return 1.0;

  //step(0.5,0.0) => 0.0
  //step(0.5,0.51) => 1.0 
  
  colour = vec3(step(0.5,vUvs.x));

 

 

 

Mix

mix(a,b,t): a와 b 사이를 t를 퍼센트로 사용하여 선형으로 보간.

Unreal, Unity에서 사용하는 lerp와 같음.

return a+t(b-a);

//mix(10.0,20.0,0.25) =>  12.5
//mix(10.0,20.0,1) => 20.0

vec3 red = vec3(1.0, 0.0, 0.0);
vec3 blue = vec3(0.0, 0.0, 1.0);

//main 내부
 colour =mix(red,blue,vUvs.x);

 

 

SmoothStep

smoothStep(edge1,edge2,x): smooth Hermite interpolation을 사용하여 x가 [edge1,edge2] 범위 내 일때 0-1사이로 리턴

증가폭이 빠르게 증가하다가 도착지점에서 가속도가 낮아진다.

t= clamp(
					(x - edge0) / (edge1 - edge0),
					,0.0,1.0
					);
	return t*t*(3.0-2.0*t);
	
	//smoothstep(10.0,20.0,12.5) => 0.156
	//smoothstep(10.0,20.0,20.0) => 1.0
	colour = vec3(smoothstep(0.0,1.0,vUvs.x));
	colour = vec3(mix(red,blue,smoothstep(0.0,1.0,vUvs.x)));

종합

void main() {
  vec3 colour = vec3(0.0);
  vec3 colourM = vec3(0.0);
  float smoothValue = smoothstep(0.0,1.0,vUvs.x);

  	float line = smoothstep(0.0,0.25,abs(vUvs.y-0.5));
    float linearLine = smoothstep(0.0,0.0095,abs(vUvs.y - mix(0.5,1.0,vUvs.x)));
    float smoothLine = smoothstep (0.0,0.0095,abs(vUvs.y-mix(0.0,0.5,smoothValue)));
    if(vUvs.y>0.5)
    {
      colour = mix(red,blue,vUvs.x);
    }
    else
    {
      colour = mix(blue,red, smoothstep(0.0,1.0,vUvs.x));
      
    }
    colourM = vec3(step(0.5,smoothstep(0.0,1.0,vUvs.x)));
   
    
  colour = mix(colourM,colour,line);
  colour = mix(white,colour,linearLine);
 colour = mix(white,colour,smoothLine);

  //colour = vec3(smoothstep(0.0,0.095,abs(vUvs.y - mix(0.5,1.0,smoothValue))));
  gl_FragColor = vec4(colour, 1.0);
}