본문 바로가기

전체 글118

2.2 Noise 모자이크 효과 Random 함수를 사용하여 아래처럼 타일 모양의 Noise를 구현해 봅시다. Shader Book에 있는 코드를 참조 했습니다. 만들고 싶은 가로 세로타일의 개수가 10, 10 입니다. float random(float2 pt) { const float a = 12.9898; const float b = 78.233; const float c = 43758.543123; return frac(sin(dot(pt, float2(a, b))) * c); } 2.1 Noise에서 구현했던 random 함수를 그대로 사용합니다. random 함수내부 난수 생성기가 없기 때문에 결과 값이 동일한 input 이면 동일한 return이 나옵니다. 리턴값은 0 ~ 1 값 입니다. i.uv *= 10; float2 i.. 2023. 8. 9.
2.1 Noise TV 화면 만들어보기 Noise effect를 구현해 봅시다. Noise effect는 Randomness과 확률이 관련 된다. 각 픽셀이 랜덤으로 표시 하되, 특정 패턴이 생기지 않도록 해야 한다. 각 픽셀 마다 픽셀을 나타낼지 말지를 결정하는 확률을 구하는 것으로 보면 된다. 확률을 구하기 위한 특정 상수가 들어간다 이 값은 Noise를 만드는 여러 예제 소스에서 해당 값을 사용하고 있다. a = 12.9898 b = 78.233 c = 43758.543123 그리고 dot 함수가 등장하는데, 내적이라고 한다. dot(a, b)면, a b의 각 원소를 쌍쌍히 곱하고 더해서 스칼라 값을 만든다. 예를 들어 a,b가 2차원 벡터라고 하면 다음과 같습니다. a = vec2(a1, b1) b = vec2(c1, d1) dot(a.. 2023. 8. 6.
1.6 도형 - 라인 그려보기 라인도 대각선 방향으로된 사각형의 영역이라고 생각하시면 됩니다. 사각형의 경우 렌더링 방법은좌측하단 꼭지점과 우측 상단 꼭지점을 기준으로 영역을 지정하고,좌측하단 꼭지점 영역 - 우측상단 꼭지점 영역으로 구했습니다. 모르시는 분 아래 포스팅 참조!https://graphicsimon.tistory.com/12 5. Draw Rectangle - 1지난 시간 원에 이어서 사각형을 렌더링 해봅시다. 결국은 동일한 원리 이지만, 이해를 돕기 위해 2가지 방법을 설명 드립니다. 사각형을 렌더링 함수를 rect라고 정의 하겠습니다. 함수의 인자는graphicsimon.tistory.com사각형의 경우 좌측하단 꼭지점이 (-0.2, -0.2)라고 하면개념적으로 y = -0.2, x = -0.2라는 두 직선을 그어서.. 2023. 7. 20.
1.5 도형 - Draw Circle 심화 04 챕터 Draw Circle을 구현해봤습니다.- https://graphicsimon.tistory.com/11?category=1119246 조금더 응용버전으로 작성해 보겠습니다. 먼저 frag 함수에서 position * 2를 해서 -1 ~ 1 좌표계 범위로 만들어 보겠습니다.다시 말씀드리면 -0.5 ~ 0.5 좌표계에서 2를 곱한 것 입니다. radius는 0.5로 주어졌다고 가정합니다. 1) 기본 원 렌더링lenght 함수는 벡터의 크기(길이)를 구합니다.pt - center를 해서 벡터를 구한 뒤, 길이를 구하면l각 픽셀과 center과의 거리 (len)가 나옵니다. len 값과 주어진 raidus과 비교하여, len이 거리가 작으면 0을 리턴하게 됩니다.1을 빼주게 되니, 원 내부픽셀들은.. 2023. 7. 18.

티스토리툴바