본문 바로가기

분류 전체보기92

2.4 Noise 함수 사용해보기 http://editor.thebookofshaders.com/ ** The Book of Shaders Editor ** editor.thebookofshaders.com 유니티에서 쉐이더를 수정하고 빌드 타임이 약간 소모가 되기도 하고, 애니메이션이 editor에서는 확인이 어려운데, Noise와 같은 effect들은 바로바로 이전 프레임과 비교하는 일이 많습니다. 그래서 shaderbook에서 지원하는 반응형 웹에서 아래 코드를 실행해 보겠습니다. 이후 예제에서도 unity 대신 사용할 생각인데, 헷갈릴수 있으니 코드 윗 부분에 적어 놓겠습니다. editor.thebookofShader.com 에서 사용하는 Uniform 변수 들입니다. 자주 해당 변수들을 사용을 하니, 상단에 선언만 하면 사용할 .. 2023. 8. 12.
2.3 Noise 미로 만들기 이번에 Random 함수를 사용해서 아래 모양을 만들어 봅시다. 위 그림을 처음 보면 복잡해 보여서 미로를 구성하는 벽이 굉장히 다양하게 있을것 같습니다. 선의 방향이 달라지는 부분을 기준으로 칸을 나누어 보면 한칸에 해당하는 선은 y=x 방향 y=-x+1 두개의 직선만 존재하는 것을 알수 있습니다. 음 2개 제외하고 다른 직선은 없습니다. 먼저 라인을 그려보는 것을 복습해 봅시다. 모르시는 분은 아래 링크 클릭! https://graphicsimon.tistory.com/18 10. Draw Lines 라인도 대각선 방향으로된 사각형의 영역이라고 생각하시면 됩니다. 사각형의 경우 렌더링 방법은 좌측하단 꼭지점과 우측 상단 꼭지점을 기준으로 영역을 지정하고, 좌측하단 꼭지점 영역 - graphicsimo.. 2023. 8. 11.
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.

티스토리툴바