본문 바로가기

전체 글393

[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.
여유를 잃는 것의 위험성(타인의 마음 서평) 자기계발에 열중하기 시작하면서 시간을 잘 쓰고 싶다는 생각을 하게 됐다. 계획을 짜고 시간을 쪼개 쓰다 보니 부작용이 생긴다. 바로 여유를 잃는 것이다. 이러한 마음이 소시오패스 성향이 강해지는 길 일수 있음을 깨닫게 되었다. 점점 더 지인들과의 대화 중에도 다음 일정 있는데, 다음 공부 해야하는데... 하는 생각을 할 때가 늘어났기 때문이다. 이런 태도에 반성하고, 무엇이 인생에 있어서 정말 중요한 것인지 다시 생각해볼 계기가 되었다. // 메모 소시오패스가 이런 성향을 보이는 가장큰 이유는 시간을 아까워 하기 때문이다. 자기 외의 사람들에게 시간을 쓰는 것을 극단적으로 싫어한다. 공감도 하기 싫고, 공유도 싫고, 배려의 말을 할 시간도 없다. 공감하지 못하는 것은 상대에게 질문하고 대답할 시간을 안 .. 2023. 3. 28.
[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.
[HLSL] 챕터8 - 환경매핑 환경매핑 (environment mapping) 셰이더 제작하기 // 환경매핑이란? 주위환경이 거울처럼 표면에 반사되는 것을 재현하는 기법이다. 표면이 입사광 전혀 흡수하지 않고 반사하면 거울이 된다. 끝없는 빛의 반사 구하는 것 어렵다. 따라서 이를 속임수를 써서 표현하는 것이다. 주위환경 미리 텍스쳐안에 저장해놓는다. 이 텍스쳐를 입힌다. // 주위환경을 360도 전부 텍스쳐에 담는 방법은 무엇인가? 여러방법이 있을 수 있다. 그 중에서 상하, 좌우, 전후 6개의 텍스쳐를 만들어 물체 주위를 감싸는 방법이 있다. 마치 스카이박스 원리와 같다. // 이 텍스쳐를 어떻게 사용하는가? 반사한 빛이 표면에 정반사 되어 눈에 들어온다. 이 방향성을 뒤집는 것이다. 아래와 그림과 같이 된다. 이를 이용해 부딪힌.. 2023. 3. 20.

티스토리툴바