본문 바로가기

셰이더 (Shader)89

[GLSL] Starfield - 5(완) : 마우스 상호작용, 별 팍 사라지는 이슈 수정 #define NUM_LAYERS 8.0 mat2 Rot(float a) { float s = sin(a), c = cos(a) ; return mat2(c, -s, s, c) ; } float Star(vec2 uv, float flare) { float d = length(uv) ; float m = 0.02/d ; m*= 1.5 ; float rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0)) ; m += rays * flare ; // 대각선 레이 uv *= Rot(3.1415/4.0) ; rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0)) ; m += rays * 0.3 * flare ; m *= smoothstep(1.0, 0.2, d) ; r.. 2023. 4. 8.
[GLSL] Starfield - 4 : 별 깊이감, 움직임 추가 #define NUM_LAYERS 6.0 mat2 Rot(float a) { float s = sin(a), c = cos(a) ; return mat2(c, -s, s, c) ; } float Star(vec2 uv, float flare) { float d = length(uv) ; float m = 0.02/d ; m*= 1.0 ; // 십자 레이 float rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0)) ; m += rays * flare ; // 대각선 레이 uv *= Rot(3.1415/4.0) ; rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0)) ; m += rays * 0.3 * flare ; m *= smoothstep(1.0, 0... 2023. 4. 8.
[GLSL] Starfield - 3 : 별 여러개 만들기 (2) mat2 Rot(float a) { float s = sin(a), c = cos(a) ; return mat2(c, -s, s, c) ; } float Star(vec2 uv, float flare) { float d = length(uv) ; float m = 0.02/d ; m*= 2.0 ; // 블러빛 밝기 // 십자 레이 float rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0)) ; m += rays * flare ; // 대각선 레이 uv *= Rot(3.1415/4.0) ; rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0)) ; m += rays * 0.3 * flare ; m *= smoothstep(1.0, 0.2, d) ; // 무한.. 2023. 4. 8.
[GLSL] Starfield - 2 : 별 여러개 만들기 (1) mat2 Rot(float a) { float s = sin(a), c = cos(a) ; return mat2(c, -s, s, c) ; } float Star(vec2 uv, float flare) { // flare = 섬광(밝기) float d = length(uv) ; float m = 0.02/d ; // 0.02까지는 완전히 1, 0.02 이후부터는 서서히 falloff // 십자 레이 float rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0)) ; m += rays * flare ; // 대각선 레이 uv *= Rot(3.1415/4.0) ; rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0)) ; m += rays * 0.3 * flare.. 2023. 3. 30.
[GLSL] Starfield - 1 : 별 만들기 void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = (fragCoord-(iResolution.xy*0.5))/iResolution.y ; uv *= 3.0; // 결과적으로 별의 크기가 된다. 값이 클수록 별이 작아진다. vec3 col = vec3(0.0); // 동그라미 글로우 float d = length(uv) ; float m = 0.02/d ; // 동그란 모양. // 0.02까지는 완전히 1, 0.02 이후부터는 서서히 falloff되면서 글로우 형태가 된다. // 별모양 float rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0)) ; // x 그라데이션, y 그라데이션을 서로 곱하고, 강하게 .. 2023. 3. 30.
[HLSL] 챕터12 - 외곽선 찾기 / 양각 효과 외곽선 찾기 // 외곽선이란? 3D 공간을 2D 이미지에 그려넣으면 물체 개념이 없다. 외곽선 정확히 찾기 힘들다. 그러나 명암이나 색조가 다르면 외곽선을 인식할 수 있다. 명암이 확 바뀌는 픽셀을 찾아 외곽선이라 해주자. 비교할 대상이 필요해진다. 주위 픽셀들을 모두 살펴야한다. 살펴보는 픽셀 많아지면 느려진다. 상하 좌우 대각선 한단계만 찾아보는 것을 3x3 두단계 살펴보는 것을 5x5 텍셀을 살펴본다고 표현하겠다. // 컨벌루젼 사용 3x3, 5x5 픽셀 한번에 계산하기 편하게끔 컨벌루션을 사용한다. (convolution) 현재 픽셀 중심으로 그 주위에 있는 픽셀마다 가중치를 곱한다. 그 결과를 모두 더한다. 이 값으로 현재 픽셀의 값을 변경하는 연산이다. 행렬 형태로 저장한 가중치의 집합을 커널.. 2023. 3. 21.
[HLSL] 챕터11 - 흑백/세피아 사진 만들기 // 원리 2D 이미지를 가져다 한번에 고쳐버리기 마치 포토샵에 여러가지 필터 적용하듯이. 이를 포스트프로세싱이라고 한다. (post processing) 렌더링 결과 2D 이미지로 저장하려면? 렌더타킷 사용한다. 여기에 그려두고 다른 색으로 인화하는 것이 쉽다. 포스트프로세싱 기법을 어떻게 입히나? 3D 그래픽 파이프라인 관점에서. 화면을 차지하는 모든 픽셀마다 픽셀셰이더를 호출한다. 하지만 임의로 픽셀셰이더 호출할 수 있는 방법 없다. 래스터라이저의 도움을 받아야하기 때문이다. 래스터라이저가 작동하려면 정점셰이더에서 정점 출력해주어야한다. 그래서 화면을 꽉 채우는 사각형을 그린다. 여기에 2D 텍스쳐를 씌운다. 화면 가득 채우는 사각형은 곧바로 화면공간(투영공간)에 있다고 가정한다. 개념상 화면에 존.. 2023. 3. 21.
[HLSL] 챕터10 - 그림자매핑 새로 등장하는 그림자 기법 대부분은 그림자매핑 개량판이다. // 원리 (a), (d), (f)는 가로막는 물체 X, 햇빛 O (b), (c), (e) 가로막는 물체 O, 햇빛 X, 그림자 O 즉 그림자란 빛과 어떤 물체 사이에 다른 물체가 있을 때, 입사광선을 가로막아서 생기는 현상이다. 1, 2, 3 점선 화살표를 보라. 1번은 가로막는 물체 0개, 2번은 1개, 3번은 2개다. 2번이나 3번이나 그림자 생기는 것은 똑같다. 따라서 빛을 가로막는 물체가 몇 개가 있던, 제일 처음 가로막는 물체만이 중요하다. 입사광선을 가로막는 첫번째 물체가 그림자를 드리운다. 이 정리를 이용한 것이 그림자 매핑이다. 빛 사이에 물체가 있다는 것을 어떻게 알 수 있을까? 두 단계에 걸쳐 기법을 구현한다. // 1단계 :.. 2023. 3. 20.
[HLSL] 챕터9 - UV애니메이션과 울렁효과 강물, 마그마 흘러가는 모습. UV애니메이션을 사용한 것이다. 표면에 정점마다 UV 좌표를 지정한다. 이것을 한쪽으로 이동시킨다. // 시간의 흐름에따라 UV를 변경 그렇다면 현재 시간을 알아야한다. 셰이더는 GPU상에서 실행되어 시간을 구하는 함수가 없다. 그래픽 카드에는 시스템 클럭이 안달려있기 때문이다. 현재시간은 CPU에서 계산한 값 넘겨 받는다. 정점셰이더 float4x4 gWorldMatrix; float4x4 gViewMatrix; float4x4 gProjectionMatrix; float4 gWorldLightPosition; float4 gWorldCameraPosition; float gTime; float gWaveHeight; float gSpeed; float gWaveFrequ.. 2023. 3. 20.

티스토리툴바