드디어! 우리는 이 순간을 위해 기술을 쌓아왔다! 대부분의 GLSL 기초이론, 자료형 및 함수들을 배웠다. 다양항 쉐이핑 함수들을 반복해서 연습했다.
이제 이 모든 것을 종합해야 할 때 이므로 도전해보아라!
드디어! 우리는 이 순간을 위해 기술을 쌓아왔다! 대부분의 GLSL 기초이론, 자료형 및 함수들을 배웠다. 다양항 쉐이핑 함수들을 반복해서 연습했다.
이제 이 모든 것을 종합해야 할 때 이므로 도전해보아라!
이 챕터에서는 간단한 도형을 병렬/절차적 방식으로 그리는 방법에 대해 알아볼 것이다.
### 직사각형
우리에게 정사각형을 그리는 숙제가 주어졌고, 수학수업에서 사용했던 모눈 종이를 갖고있다고 상상해보자.
용지 크기는 10x10이고 정사각형은 8x8이어야 한다. 어떻게 할 것인가?
우리에게 정사각형을 그리는 숙제가 주어졌고, 수학수업에서 사용했던 모눈 종이를 갖고있다고 상상해보자.
용지 크기는 10x10이고 정사각형은 8x8이어야 한다. 어떻게 할 것인가?
첫 번째 행과 마지막 행, 첫 번째 열과 마지막 열을 제외한 모든 것을 칠할 것이다. 그렇지 않은가?
첫 번째 행과 마지막 행, 첫 번째 열과 마지막 열을 제외한 모든 것을 칠할 것이다. 그렇지 않은가?
이것이 쉐이더와 어떤 관계가 있나? 그리드 용지의 각각의 작은 정사각형은 쓰레드(픽셀)이다. 각각의 작은 사각형은 체스판의 좌표처럼 자신의 위치를 알고 있다. 이전 챕터에서는 *x*와 *y*를 *빨간색*과 *녹색* 컬러 채널에 매핑하고 0.0과 1.0 사이의 좁은 2차원 영역을 사용하는 방법을 배웠다. 어떻게 이걸 이용해서 빌보드 중앙에 있는 정사각형을 그릴 수 있는가?
먼저, 전 영역에 걸치는 `if` 문 의사 코드를 작성해보자. 이를 위한 원리는 그리드 페이퍼 시나리오에 대한 우리의 생각과 매우 유사하다.
@ -44,15 +44,15 @@ void main(){
}
```
[`step()`](../glossary/?search=step) 함수는 0.1 미만의 모든 픽셀을 검은색(`vec3(0.0)`)으로, 나머지 픽셀을 흰색(`vec3(1.0`)으로 바꾼다.
`left`와 `bottom`의 곱셈은 논리 `AND` 연산으로 작동하며, 둘 다 1.0이어야 1.0을 반환한다.
[`step()`](../glossary/?search=step) 함수는 0.1 미만의 모든 픽셀을 검은색(`vec3(0.0)`)으로, 나머지 픽셀을 흰색(`vec3(1.0`)으로 바꾼다.
`left`와 `bottom`의 곱셈은 논리 `AND` 연산으로 작동하며, 둘 다 1.0이어야 1.0을 반환한다.
이렇게 하면 캔버스의 아래쪽과 왼쪽에 두 개의 검은색 선이 그려지게 된다.
위 코드에서는 각 축(왼쪽 및 아래쪽)이 서로 중복되는 부분이 있다.
다음과 같이 두 개의 값을 [`step()`](../glossary/?search=step)으로 직접 한번에 전달함으로써 더 짧은 코드를 작성할 수 있다. 그 코드는 다음과 같다.
위 코드에서는 각 축(왼쪽 및 아래쪽)이 서로 중복되는 부분이 있다.
다음과 같이 두 개의 값을 [`step()`](../glossary/?search=step)으로 직접 한번에 전달함으로써 더 짧은 코드를 작성할 수 있다. 그 코드는 다음과 같다.
거리를 계산하는 방법에는 여러 가지가 있는데, 가장 쉬운 방법은 두 점(이 경우는 픽셀좌표들과 캔버스의 중심)의 차이의 [`length()`](../glossary/?search=length)를 내부적으로 계산하는 [`distance()`](../glossary/?search=distance) 함수를 사용하는 것이다.
거리를 계산하는 방법에는 여러 가지가 있는데, 가장 쉬운 방법은 두 점(이 경우는 픽셀좌표들과 캔버스의 중심)의 차이의 [`length()`](../glossary/?search=length)를 내부적으로 계산하는 [`distance()`](../glossary/?search=distance) 함수를 사용하는 것이다.
[`length()`](../glossary/?search=length) 함수는 특별한것은 없고, 내부적으로 제곱근([`sqrt()`](../glossary/?search=sqrt))을 사용하는 빗변 방정식일 뿐이다.
[`distance()`](../glossary/?search=distance), [`length()`](../glossary/?search=length) 또는 [`sqrt()`](../glossary/?search=sqrt)를 사용하여 평면의 중앙까지의 거리를 계산할 수 있다.
[`distance()`](../glossary/?search=distance), [`length()`](../glossary/?search=length) 또는 [`sqrt()`](../glossary/?search=sqrt)를 사용하여 평면의 중앙까지의 거리를 계산할 수 있다.
아래 코드는 이 세 가지 함수가 정확히 동일한 결과를 반환한다는 당연한 사실을 포함하고 있다.
거리장은 거의 모든 것을 그리는 데 사용될 수 있다. 당연히 더 복잡한 형태일수록 방정식도 복잡해질것이지만, 일단 특정한 모양의 거리장을 만드는 공식을 갖게 되면, 매끄러운 가장자리나 다중 윤곽선과 같은 효과들과 조합하거나 응용할 수 있을 것이다. 그것들에 결합하거나 효과를 적용하기가 매우 쉽다. 이 때문에 다음 사례들에서 알 수 있듯, 거리장은 글꼴 렌더링에 널리 사용된다.
거리장은 거의 모든 것을 그리는 데 사용될 수 있다. 당연히 더 복잡한 형태일수록 방정식도 복잡해질것이지만, 일단 특정한 모양의 거리장을 만드는 공식을 갖게 되면, 매끄러운 가장자리나 다중 윤곽선과 같은 효과들과 조합하거나 응용할 수 있을 것이다. 그것들에 결합하거나 효과를 적용하기가 매우 쉽다. 이 때문에 다음 사례들에서 알 수 있듯, 거리장은 글꼴 렌더링에 널리 사용된다.
* 이 예제를 사용하여 원하는 도형의 모서리 위치와 갯수를 입력하고 거리장을 반환하는 함수를 만들어보자.
* [`min()`](../glossary/?search=min), [`max()`](../glossary/?search=max) 함수를 사용하여 거리장들을 조합해보자.
* 거리장을 사용하여 복제해볼 만한 기하학적인 로고를 골라보자.
축하드린다! 여러분은 힘든 부분을 잘 헤쳐왔다! 잠시 쉬면서 이러한 개념들을 정착시켜라 - Processing에서 간단한 도형을 그리는 것은 쉽지만 여기서는 그렇지 않다. 쉐이더-랜드에서의 도형그리기는 복잡하고, 새로운 패러다임의 코딩에 적응하는것은 약간 지칠 수도 있다.
이 장의 끝부분에는 [PixelSpirit Deck](https://patriciogonzalezvivo.github.io/PixelSpiritDeck/)에 대한 링크가 소개 돼있다. 이 자료는 새로운 SDF 기능을 학습하고 여러분만의 디자인으로 구성하고 쉐이더를 사용하는데에 도움이 될 것이다. 이 자료에는 점진적인 학습 곡선이 있기 때문에, 하루 한 장의 카드를 공부한다면 여러분의 스킬은 도전을 통해 몇 달 동안 발전할 것이다.
이 장의 끝부분에는 [PixelSpirit Deck](https://patriciogonzalezvivo.github.io/PixelSpiritDeck/)에 대한 링크가 소개 돼있다. 이 자료는 새로운 SDF 기능을 학습하고 여러분만의 디자인으로 구성하고 쉐이더를 사용하는데에 도움이 될 것이다. 이 자료에는 점진적인 학습 곡선이 있기 때문에, 하루 한 장의 카드를 공부한다면 여러분의 스킬은 도전을 통해 몇 달 동안 발전할 것이다.
이제 도형을 그릴 줄 알았으니 새로운 아이디어가 떠오를 거라고 확신한다. 다음 장에서는 도형을 이동, 회전 및 축소하는 방법에 대해 알아 볼 것이다. 그럼 또 새로운 구성을 할 수 있게 될 것이다!
이제 도형을 그릴 줄 알았으니 새로운 아이디어가 떠오를 거라고 확신한다. 다음 장에서는 도형을 이동, 회전 및 축소하는 방법에 대해 알아 볼 것이다. 그럼 또 새로운 구성을 할 수 있게 될 것이다!
Brad Erickson
1 year ago