[💬] 겜스/야매셰이더 튜토리얼 - Fragment 가지고 놀기

[생물사랑(ugdgod)]

오늘은 드디어 셰이더에서 알짜배기 정보라고 할 수 있는 Fragment 셰이더에 대해서 알아볼꺼야.

중요하고 여러가지로 쓰일 수 있으니까 겜스 쓸꺼면 꼭 한번 읽어봐줘

그리고 읽으면 댓글좀 달아주라... 읽었는지 안읽었는지를 모르것음

1. Fragment 셰이더란 무엇인가? 

Fragment 셰이더의 기본 코드는 아래와 같아.

//

// Simple passthrough fragment shader

//

varying vec2 v_vTexcoord;

varying vec4 v_vColour;

void main()

{

    gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord );

}

Fragment 셰이더가 하는 짓은, 원래 주어지는 Draw의 그림에서 v_vTexcoord에 그릴 정보의 값(r,g,b,a)을 가져오는거야.

조금이나마 도움되라고 그림을 그려봤어... 그알못이라 봐도 이해 못할수도있음

그러면 이것을 어떻게 사용하나? 

1. 그림의 색을 조금씩 바꾸고 싶을때

2. 그림의 모양을 변형시키고 싶을 때

원래 2번은 vertex 셰이더로 하는건가 싶었는데 저번에 말했다시피 surface 써서하니까 2번에서 발생하던 문제가 없어지더라고 ㅎㅎ

그럼 1번부터 살펴보도록 하자.

2. Fragment 셰이더를 이용한 색의 변형

우선 알아야 할게, 겜스에서와는 다르게 Fragment 셰이더는 색을 0~255까지 쓰는게 아니고 0~1까지를 써. 

예제를 하나 보여줄께, 

//

// Simple passthrough fragment shader

//

varying vec2 v_vTexcoord;

varying vec4 v_vColour;

uniform vec2 uv;

uniform vec2 pq;

void main()

{

    gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord);

    gl_FragColor -= vec4(1.0,0.0,0.0,0.0);

}

좌. 기본 모양                우. 셰이더 적용 모습

이건 색의 r, 그러니까 빨강 성분을 모두 뺀 모습이야. 흰색은 빨강이 빠졌으니 g,b가 섞인 색이되고 빨강은 검정이, 빨강과 초록이 섞여있던 노랑은 그냥 초록색이 되었어. 

만약 캐릭터가 밤이 되어 약간 푸르스름하고 어두운 모습을 주고싶다면 빨강조금 빼고, 초록조금 빼고, 파랑 조금 빼면 되겠지? 

메인코드 둘째줄 vec4를 0.5,0.5,0.3,0.0으로 하면 아래와같은 결과가 나와.

약간 어두워진거 같지? 내가 색고자라 정확한 색감은 못주겠는데 알아서 잘 맞춰서 써. 반대로 약간 밝아지고 따스한 느낌을 주고싶으면 색을 조금씩 더해주면 되겠지?

이건 0.25,0.05,0.05,0.0으로 한거야. 역시 알아서 맘에드는걸루 써

3. Fragment 셰이더를 이용한 모습의 변형

이건 약간 어려운데, vertex셰이더가 원래 모습을 다른곳에 출력하는거였잖아? 

그런데 Fragment 셰이더는 한 위치에서 다른 값을 받아오는거야.

원본 코드에 v_vTexcoord 있잖아? 이게 원래 vec2(v_vTexcoord.x,v_vTexcoord.y)를 줄인거거든?

이게 나오는걸 식으로 표현하면 Xt = f(Xt), Yt=f(Yt)가 돼. 

걍 줄이면 식 넣은대로 나오면 된다고 생각하면됨...나도 모르겠어 쓰다보니 헷갈림.

그런데 이걸 변형시키면? 예를 들어서 Xt에 그릴값을 Xt대신 Yt로 넣어보자.

그러면 이렇게 좌상 우하가 뒤집힌걸 생각했겠지만 이상하게 나와! 

왜냐고? vec2안에 있는 값이 정보를 받아오는 단순한 위치가 아니라 주소이기 때문이지. C공부좀 했으면 포인터에 대해 알껀데, 포인터에다가 정수를 추가시키면 값이 엄청 이상해지면서 값이 이상하게나오잖아? 그런거야. 

아 그리고 중요한게 이게 주소를 쓰다 보니 두가지 문제점이 있어... 밑에서 다룰게

자 이제 이놈이 주소를 써서 그린다는것은 알았을꺼야. 근데 주소라는게 그렇듯 1차이로 되게 차이가 많이 나더라구... 그래서 주의할게 v_vTexcoord 를 변형시킬때 뒤에 추가시키는건 왠만하면 0과 1사이 숫자로 해야 하드라고... 그럴 때 좋은게 sin, cos이잖아? 아니면 특별히 원하는 정도가 있으면 그만큼 해도 되고.

자 그럼 sin을 써서 이놈을 기울어지게 해보자. 

쓰다가 알게된건데, 요놈은 선형으로 기울어지게 하는건 하기가 좀 힘들더라구... 그냥 선형으로 움직이는건 vertex쓰는게 나을듯... 제대로 해서 다시할게 vertex도...

흠흠... 그건 그거고 쨋든, sin을 이용해서 물결무늬를 줘보도록 하자

    gl_FragColor = v_vColour * texture2D( gm_BaseTexture, vec2(v_vTexcoord.x +sin(10.0*v_vTexcoord.y)/10.0 ,v_vTexcoord.y));

빠밤. 왜이렇게 되냐고? 

이게 바로 첫번째 문제야... 그릴려고 하는 공간은 바뀌는데 그릴 공간은 똑같아서, 밖으로 삐져나온건 안그려진다는거지

그럼 이걸 어떻게 해결하느냐? 저번에 말해줬다시피 surface기능을 쓰면 쉬워. 그러니까, 저 모습을 바로 셰이더에 넣는게 아니고, surface를 하나 만들어서 거기에다가 스프라이트를 그리고 그 surface 에다가 셰이더를 적용시키는거지!

그러면 이렇게 나와! 적용시킨 코드는 아래와 같아.

//Creation

surf=surface_create(200,200);

//Draw

surface_set_target(surf);

draw_sprite_ext(sprite_index,image_index,30,30,image_xscale,image_yscale,image_angle,c_white,1);

surface_reset_target();

shader_set(shader0);

draw_surface(surf,x-30,y-30);

shader_reset();

draw_sprite_ext안에 30하고 draw_surface안의 30은 같은 숫자야되고, surface_create 안의 200은 적당히 큰 숫자이면 돼.

오늘은 여기까지할게. 이정도 알았으면 셰이더가 어떻게 작용되는지 감 잡을수 있을꺼야.

[익명(218.55)]

오 신기