8lue 8bit @dissound - Tumblr Blog

GLSL을 이용한 FBM(Fractal Brownian Motion)구현

GLSL이란? GLSL(OpenGL Shading Language, OpenGL 셰이딩 언어)는 C 언어를 기초로 한, 상위 레벨 셰이딩 언어이다. 이 언어는 어셈블리 언어나 하드웨어에 의존한 언어를 사용하지 않고, 개발자가 그래픽스 파이프라인을 직접 제어할 수 있다.

FBM은 진폭은 줄이고, 주기는 증가된 서로 다른 Sin그래프또는 Noise 여러개를 겹쳐서 만드는 원리이다. 흔히 이런원리는 주파수개념에서 AM(진폭을 조절하는 방식), FM(주기를 조절하는 방식) 2개를 섞어놨다고 보면 이해하는데 도움이 될것이다.

float fbm(vec2 st){

float amp = .7;

float freq = 2.1;

float value;

#define OCTA 5

for(int i = 0; i < OCTA; i++){

value += amp * noise(st);

amp *= .5;

st = st * freq;

}

return value;

}

이 코드에선 fbm을 이용한 함수를 만들어 준 것이다. OCTA는 몇개의 noise를 겹칠것인지 정해준다. for문을 이용해서 value에 계속 진폭,주기가 서로 다른 noise를 더해준다.

vec2 q;

q.x = fbm(coord + fbm(coord) + sin(u_time * 1.5) * 1.5);

q.y = fbm(coord + fbm(coord) + sin(u_time * 1.5) * 1.8);

vec2 q값에는 좌표 coord를 fbm(coord)를 더해줌으로써 배경을 만들어 준다. 이때 sin(u_time)을 해줌으로서 물가처럼 일렁이는 효과를 추가시켜줬다. 이 움직이는 효과는 sin(u_time)에 곱해진 값으로 속력을 조절할 수 있다.

이 코드는 이전에 했던 세포벽의 중점 즉, 저 하얀점들이 원으로 도는 모습을 만들어 보았습니다. 이전에 원으로 움직이는건 x엔 sin값, Y엔 cos 값을(반대로 해도 됨) 이용해 만들었던 기억이 있어서 다음번엔 sin만이 아니라 cos까지도 이용하는걸 만들어 볼 수도 있을 것 같다.

이 코드와 이미지에 있는 모양은 Cellular Noise의 기본적인 형태이다. 마치 세포벽같은 형태이다. 이런 코드의 원리는 point로 정해둔 점들이 기준으로, 각각의 위치들이 거리를 따져서 가장 가까운 point의 범위에 들어간다. 그럼 가장 가까운 point와의 거리를 색으로 출력시키면 저런 세포벽 모양으로 나온다.

이 코드는:노이즈를 이용하여 사각형의 변을 쭈글쭈글하게 만들고, 가운데에 틈이 생겼다,막혔다를 반복하여 만들었다. 이를 통해 노이즈를 통하여 붓글씨나 벽돌의 옆면처럼 울퉁불퉁한 모양을 만들어 낼 수 있겠다는 생각을 했다. 허나, 여러개를 분리 시키려 하려했던 작업에서 원하는 모양이 아직 나오질 않아서 좀더 고민해보겠다.

이 코드는?: 좌표 coord를 noise해준 값을 색을 나타내는 col에 smoothstep으로 원래 좌표에 더해줌으로 빗방울같은 무늬를 만들어 준다. 이후 좌표를 왜곡시켜줌으로 더욱 불균형적이게 만들어 준 뒤, time을 이용하여 계속해서 움직이게 만들었다. 허나 우측상단에서 좌측하단으로 이동하는 것이 너무나도 잘 보인다는 점이 문제다

NOISE의 이용 - 2

uniform float time;

uniform vec2 resolution;

uniform vec2 mouse;

uniform vec3 spectrum;

uniform sampler2D texture0;

uniform sampler2D texture1;

uniform sampler2D texture2;

uniform sampler2D texture3;

uniform sampler2D prevFrame;

uniform sampler2D prevPass;

in VertexData

{

vec4 v_position;

vec3 v_normal;

vec2 v_texcoord;

} inData;

out vec4 fragColor;

vec2 random(vec2 st){

st = vec2( dot(st,vec2(127.1,311.7)),

dot(st,vec2(269.5,183.3)) );

return -1.0 + 2.0*fract(sin(st)*43758.5453123);

}// -1 ~ +1

float noise(vec2 st) {

vec2 i = floor(st);

vec2 f = fract(st);

vec2 u = f*f*(3.0-2.0*f);

return mix( mix( dot( random(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),

dot( random(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),

mix( dot( random(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),

dot( random(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);

}

void main(void)

{

vec2 coord = inData.v_texcoord;

coord.x *= resolution.x/resolution.y;

coord *= noise(coord*2.)*(1. - sin(time * .1)) * 5.;

vec3 col ;

col += smoothstep(.0, .05, noise(coord * 20.));

col -= smoothstep(.2, .23, noise(coord * 20.));

fragColor = vec4(1 - col, 1.);

}

먼저 vec2 random을 만들어서 vec2 값을 랜덤시킬 수 있게 한다.

그다음 noise를 만들어서 coord 즉, 좌표를 무작위로 바꾼다.

41.은 시간에 따라 생김새가 왔다갔다하는것을 만들어 준것이다.

44.는 noise로 생긴값에서 특정위치안의 값을 하얀색으로 만들어주고,

45.에서는 44.에서 만든크기보다 더 큰 값을 가진 위치를 빼쥐서 마블링과 같은 모양을 한다.

46.에서 1 - col은 색을 반전시켜준 것이다.

NOiSE 이용 -1

noise를 이용한 예시이다. 어두운 부분이 많은 이유는 0에서 1로가면 밝아지지만, 1에서 0으로가면 어두워지는데 랜덤범위가 -1 ~ +1 까지라서 -1에서 0은 검정색으로 되기때문에 검은색 비중이 더 크다. noise는 이렇게 좌표의 기준이 뭔지 알수없게 흩뜨려져 있어서 랜덤보다 더 규칙성이 없어졌다.

NOISE

noise란?: 자연의 무작위함과 자연스러운 현상들을 컴퓨터에서 구연해 보는 것이다. 랜덤보다 더욱 규칙이 없고, 완전히 예측이 불가능한 함수이지만, 그만큼 이해하는 것도 어려운 부분이 noise다

Random응용-1

#ifdef GL_ES

precision mediump float;

#endif

uniform vec2 u_resolution;

uniform vec2 u_mouse;

uniform float u_time;

float random(vec2 coord){

return fract(

sin(

dot(coord, vec2(0.890,0.830))

)*432.312

);

}

void main() {

vec2 coord = gl_FragCoord.xy/u_resolution;

coord.x *= u_resolution.x/u_resolution.y;

coord *= 10.;

coord = floor(coord);

vec3 col = vec3(random(coord));

gl_FragColor = vec4(col,1.);

}

coord를 10배를 시켜서 10*10의 넓이로 만든후 내림을 해줬다. 그러면 1이상, 2미만의 수들은 모두 같은수가된다. 그렇게 랜덤에 넣어주면 이런 모자이크처럼 일정한 크기가 랜덤하게 만들어진다.(랜덤에서 dot의 수를 바꾸면 역시 랜덤하게 바뀐다.)

Random

#ifdef GL_ES

precision mediump float;

#endif

uniform vec2 u_resolution;

uniform vec2 u_mouse;

uniform float u_time;

float random(vec2 coord){

return fract(

sin(

dot(coord, vec2(523.52, 875.123))

)*432.312

);

}

void main() {

vec2 coord = gl_FragCoord.xy/u_resolution;

coord.x *= u_resolution.x/u_resolution.y;

vec3 col = vec3(random(coord));

gl_FragColor = vec4(col,1.);

}

sin함수를 fract로 0과 1사이 소수로 옮긴후 dot을 써서 내가정한수와 그옆의 수의 차이를 알 수 업게 만들어서 만든다 허나 보기엔 랜덤처럼 보여도 사실 규칙성이 있지만 우리가 느끼지 못할뿐이다.

Pattern

코드 위치:http://thebookofshaders.com/edit.php?log=180903102715

#ifdef GL_ES precision mediump float; #endif

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

#define PI 3.14159265358979323846

vec2 coord;

vec2 rotate2D(vec2 _st, float _angle){ _st -= 0.5; _st = mat2(cos(_angle),-sin(_angle), sin(_angle),cos(_angle)) * _st; _st += 0.5; return _st; }

float square(vec2 loc, float size){ float x1 = loc.x - size/2.; float x2 = loc.x + size/2.; float y1 = loc.y - size/2.; float y2 = loc.y + size/2.;

float width = step(x1, coord.x) - step(x2, coord.x); float height = step(y1, coord.y) - step(y2, coord.y);

return width*height; }

vec2 tile(float a){ coord *= a; coord = fract(coord);

return coord; }

void main() { coord = gl_FragCoord.xy/u_resolution; coord.x *= u_resolution.x/u_resolution.y;

tile(5.);

coord = rotate2D(coord, PI*0.25);

vec3 col = vec3(square(vec2(.5), sqrt(.5)));

gl_FragColor = vec4(col, 1.); }

rotate 2D는 작동 원리이해가 어려워서 시간을 두고 더 관찰해 봐야되서 끌어 가지고 왔다 ;(

square은 사각형을 만들어주고, tile은 한줄에 몇개를 만들건지 선택할 수 있는 함수이다.

Translate 실행

실행되는 이미지:http://player.thebookofshaders.com/?log=180901021852

#ifdef GL_ES

precision mediump float;

#endif

uniform vec2 u_resolution;

uniform vec2 u_mouse;

uniform float u_time;

vec2 coord;

float square(vec2 loc, vec2 size){

float x1 = loc.x - size.x/2.;

float x2 = loc.x + size.x/2.;

float y1 = loc.y - size.y/2.;

float y2 = loc.y + size.y/2.;

float leng = step(x1, coord.x) - step(x2, coord.x);

float height = step(y1, coord.y) - step(y2, coord.y);

return leng * height;

}

float cross(vec2 loc, vec2 diff){

float s1 = square(loc, diff);

float s2 = square(loc, vec2(diff.y, diff.x));

float judge = s1 + s2 > 0. ? 1. : 0.;

return judge;

}

void main() {

coord = gl_FragCoord.xy/u_resolution;

coord.x *= u_resolution.x/u_resolution.y;

coord = coord *2. - 1.;

vec3 col = mix(vec3(.0), vec3(1.), cross(vec2(sin(u_time*2.)*.5, cos(u_time*2.)*.5), vec2(0.1,.5)));

gl_FragColor = vec4(col, 1.);

}

좌표에 sin과 cos을 이용하여 십자가가 원을그리며 돌고, 도는 속도를 늘이기 위해 *2. 을 해주었다.

Rotate와 fract를 이용한 화장실 타일 만들기

위에 있는 그림은 십자선과 상자 2개를 만들어 준뒤, 상자를 Rotate시켜서 마름모 꼴로 만들어 준것이다. 자세히 보면 마름모안에 십자선이 안보이는것은 마름모 모양의 상자를 1개 더 덮어줌으로써 안보이는것이다.

coord = rotate2D(coord, PI * .25);

col += vec3(tile(vec2(.5), thick));

col -= vec3(box(vec2(.5), r));

이렇게 1개의 모형은 fract를 이용해서 함수를 만들어줘서 여러 모양으로 보이게 하는 것이다.

st *= a;

return fract(st);

Length와 Fract를 이용한 물결파 만들기

위 사진에 그려진 파란 선 경계와 연해지는 효과는 Fract를 이용하여 만들었다.

float f_p = fract(p * 10.);

특정 점에서 다른 점과의 거리를 구해주려면 distance를 쓰지만, 어느 점과 모든 좌표간의 거리를 비교해준다고 하면 일일히 해줄 수 밖에 없다. 하지만 Length를 이용하면 좌표가 (0,0)을 기준으로 모든 좌표간의 거리를 구해준다. 이를 이용하면 좀 더 편하게 원과 같은 도형을 그릴 수 있다.

float p = length(coord);

#shader #Length #Fract

MIX를 활용한 사각형 색 만들기

위에 그려진 그림의 공통점은 범위를 나눈 후 작은 사각형이 보이도록 배경 레이어에 작은 사각형을 MIX를 사용했다. Mix를 사용할 땐 어느 것 부터 올려야 하는지 먼저 생각을 하고 차곡차곡 쌓아올린다는 개념을 계속 잊지 말아야 한다.

#shader #OpenGL #MIX #Square

Smoothstep과 Mix 활용하기

위 사진에서 그려진 그래프의 선은 Smoothstep을 활용하여 만드는데, 구체적인 알고리즘은 아래와 같다.

float plot (vec2 st, float pct){

return smoothstep( pct-0.01, pct, st.y) -

smoothstep( pct, pct+0.01, st.y);

}

원래, 기존에 그려진화면위에, 무언가를 그리려하면, 기존까지 그려진 화면이 없어지고 새로운 화면으로 덮혀지기 마련인데, 위와같이 무언가 그리려는 대상을 층층히 쌓아올리기 위해서(마치 포토샵의 레이어)는 mix함수를 적절히 활용할 수 있어야 한다.

col.r = mix(col.r, colorA.r, sm);

col.g = mix(col.g, colorB.g, s );

col.b = mix(col.b, colorC.b, p);

#shader #Smoothstep #Mix #Glsl

그럼 메모리를 써야할땐 어떻게 할까?

GLSL은 메모리의 특정 주소로 접근하고, 값을 빼오는 일이 불가능하다. 그러나shader를 이용하다보면 메모리를 이용하는 경우가 생긴다. 예를 들어 마우스의 좌표, 시간의 흐름, 회면 해상도등등... 이런 경우엔 어떻게 해야 데이터를 가져올 수 있을까?

해답은 Uniform을 이용하면 된다. Uniform은 CPU의 특정한 값을 모든 GPU파이프라인에 동일하게 넣어주는 역할을 한다. 이렇게 들어온 CPU값은 바꿀수 없이 read only하다.

uniform데이터에는 float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D, samplerCube등등의 데이터 타입을 쓸 수 있다.

uniform데이터는 다른 데이터와 차별점을 주기 위해 변수명에 u_를 붙여쓰는것이 관습이다. 즉,u_time, u_resolution, u_mouse 이런식으로 말이다.

#Shader #Uniform #GPU #CPU

Trending Blogs

Recently Viewed Blogs

8lue 8bit