본문 바로가기

분류 전체보기116

1.3 도형 - Rotation & Scailing Rect opengles를 공부했을때 rotation, scale matrix를 사용해본적이 있으실 겁니다. position에 matrix 행렬을 곱해서 회전을 시켜봅시다. 회전행렬 공식은 다음과 같습니다. float2x2 getRotationMatrix(float theta) { float s = sin(theta); float c = cos(theta); return float2x2(c, -s, s, c); } float2x2 타입은 라는 것은 2 by 2 행렬 입니다. 계산 유도 과정 입니다. 회전 매트릭스를 position에 곱하면 됩니다. 곱하기만 하면 원점 중심으로 회전합니다. float2 pt = mul(mat, pos); 회전축을 설정하려면 어떻게 하냐면 회전 축 값을 빼주었다가 다시 더해 줍니다... 2023. 7. 11.
1.2 도형 - Draw Rectangle - 2 이전에 Rectangle 그리는 방법을 배웠습니다. 다른 방식의 사각형 렌더링 예제를 구현 해보도록 하겠습니다. 그리고 두개의 사각형을 그려보도록 하겠습니다. 전 예제에서는 사각형을 그리기 위해서는 좌측하단, 우측상단 두개의 좌표를 구하면서 시작을 했었습니다. 이번에는 소스를 보면서 시작 하도록 하겠습니다. float rect(float2 pt, float2 size, float2 center) { float2 p = pt - center; float2 halfSize = size * 0.5; float2 result = step(-halfSize, p) - step(halfSize, p); return result.x * result.y; } pt에서 center를 빼주게 되면 position p는 c.. 2023. 7. 9.
1.2 도형 - Draw Rectangle - 1 지난 시간 원에 이어서 사각형을 렌더링 해봅시다. 결국은 동일한 원리 이지만, 이해를 돕기 위해 2가지 방법을 설명 드립니다. 사각형을 렌더링 함수를 rect라고 정의 하겠습니다. 함수의 인자는 3가지 입니다. 1) float2 position 2) float2 size 3) float2 center 첫 번째는 모든 픽셀 정점의 위치 값 두 번째는 사각형의 가로 세로 길이 세 번째는 사각형의 중심 rect함수의 리턴값이 1이면 해당 픽셀이 사각형 내부로 정의 합니다. 사각형의 영역을 정의하기 위해서는 2개의 정보가 필요합니다. 사각형 기준으로 좌측하단 좌표와, 우측상단 좌표, 이 두가지 좌표만 있으면 사각형을 그릴수 있습니다. 1> 먼저 좌표를 구해봅시다. 좌측 하단좌표 A지점의 좌표는 center 좌표.. 2023. 7. 9.
1.1 도형 - draw Circle 지난시간 step 함수를 사용해서 정점 범위 기준으로 4분면 렌더링을 해보고, smoothstep을 사용해서 특정 부분 블렌딩을 해보았습니다. 이번엔 원을 그려봅시다. 원 정점좌표를 만드는 것이 아니라, 원에 해당하는 픽셀들을 선택한 후 픽셀의 색을 입히는 과정입니다. step함수와 length 함수를 사용해서 작성합니다. 클립스페이스 좌표계의 정중앙은 원점 입니다. 원점과 픽셀 간 길이를 내가 원하는 반지름과 비교하여 작은 경우만 색을 칠해주면 됩니다. isCircle = 1 - step(radius, length(position)); length 함수를 사용해서 원점과 픽셀간 거리를 구하고, step함수를 사용하면 다음과 같은 리턴값을 얻습니다. radius < 원점과 픽셀간 거리 : 원 외부 영역 .. 2023. 7. 9.

티스토리툴바