Top

컴퓨터 그래픽 모음

래스터, 복셀, 벡터 그래픽스

raster graphics

img

voxel graphics

![Voxel background 스톡 벡터, 이미지 및 벡터 아트 Shutterstock](https://image.shutterstock.com/image-vector/vector-graphic-3d-rendering-fox-260nw-2131782771.jpg)

의료영상 복셀 예시

vector graphics

img

래스터 그래픽 디자인 도구

복셀 그래픽 도구

벡터 그래픽 도구

3차원 그래픽

와이어 프레임 - 셰이딩 - 텍스처 매핑

![3D 아티스트를위한 최고의 리소스 웹 사이트 크리에이티브 온라인](https://www.creativosonline.org/wp-content/uploads/2016/08/modelos3d.jpg)

3D 모델링

![게임 캐릭터 모델링의 모든 것 초격차 패키지 Online. 패스트캠퍼스](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/130124-474/gcm-9-2-bg-0.5x.png)

텍스쳐 및 매핑

Textures and Samplers in Metal – Metal by Example

Meet Spot.

3D 모델링 도구

색공간

RGB 색공간

Red, Green, Blue

rgb color space cube at maximum values

rgb color space cube at minimum values시시시시시

HSV 색공간

Hsv Cylinder - Free Transparent PNG Clipart Images Download

배경이 무슨 색인가?

RGBA 컬러모델

img

그래픽 라이브러리

  개발사 표준화 링크  
OpenGL 실리콘 그래픽스 SGI 크로노스 그룹 https://www.opengl.org/ C
OpenGLES   크로노스 그룹 https://www.opengl.org/ C
Mesa       C
Vulkan   크로노스 그룹 https://www.opengl.org/ C++
DirectX Microsoft   https://docs.microsoft.com/ko-kr/windows/win32/directx C++
Metal Apple   https://developer.apple.com/kr/metal/ Objective-C

OpenGL/ES/DirectX/Vulkan/Metal 등의 기반 위에서 동작하는 개발 도구

용어

img

정점(vertex)이란?

공간상에서의 위치(position)를 나타내는 것으로, 일반적으로 여러 개가 모여서 특정 형태의 오브젝트를 구성하는 요소를 정점 이라고 한다.

변(edge)란?

폴리곤에서 정점과 정점을 연결하는 직선을 변 또는 모서리라고 한다.

폴리곤(polygon)이란?

최소 3개의 정점이 모이면 하나의 면(face)을 만들 수 있다. 이렇게 3개의 정점으로 만들어진 삼각형을 폴리곤이라고 한다. 삼각형은 3D 물체의 기본 구성 요소이다.

메시(mesh)란?

니오넬 메시?

![바르샤 원클럽맨 ‘메시’ 지난 4년간 얼마 받았나 아주경제](http://image.ajunews.com//content/image/2021/01/31/20210131151524361000.jpg)

폴리곤이 모여서 하나의 3차원 물체를 만들게 되는데 이것을 메시라고 한다. 즉, 메시는 폴리곤이 모여서 만들어진 3차원 공간상의 객체(object)이다.

메시의 삼각형은 우리가 모델링하는 물체의 기본적인 구성 성분이 되며, 메시 삼각형을 폴리곤(polygon) 혹은 기본형(primitive) 이라고도 부른다.

폴리곤에서 두 개의 변이 만나는 지점을 정점(vertex) 이라고 한다.

하나의 삼각형을 만들기 위해서는 삼각형의 세 정점에 해당하는 세 개의 포인트 위치를 저장해야하며, 이 삼각형을 지정하여 물체를 묘사한다.

Vertices - edges - faces - polygons - surfaces

Elements of polygonal mesh modeling.

고급 과정 - Polygon mesh

OpenGL Primitives

https://blog.naver.com/gomdev/220106219575

http://www.dgp.toronto.edu/~ah/csc418/fall_2001/tut/ogl_draw.html

실제에서는 사용되지 않는다. OpenGL 프리미티브는 한줄로 그리기 같은 퍼즐. 실제 모델들은 복잡하기 때문이다.

Unity Mesh 클래스 : https://docs.unity3d.com/ScriptReference/Mesh.html

공간 또는 좌표계

공간이 바뀌며 좌표가 변환 된다.

image-20220524131129321

모델 공간 (Model space 또는 Local space), 모델 좌표계

(3D) 모델 또는 객체가 자체적인 좌표 공간을 가진다.

예를 들자면 병이 있다. 병 바닥 중심에 원점이 있고, 이 원점을 기준으로 정점(Vertex)들이 위치한다.

Coca Cola Bottle 3D Model

월드 공간 (World space), 월드 좌표계

세계를 하나의 통일된 절대적인 좌표계로 표현, 모든 객체를 동일한 하나의 좌표계에 배치한다. 객체들의 위치와 방향을 표현하기 위한 좌표계다. 모델 좌표계로 표현된 모델(객체)들은 월드 좌표계에서 그 방향과 위치가 표현되어야 하는데, 이때 모델 좌표계로 표현된 매시는 월드 좌표계로 변환되어야 한다. 이때 월드 변환 행렬이 적용된다.

![좌표계들의 변환 ( 로컬 공간 월드 변환 뷰 변환) : 다 행렬 곱 이다. : 네이버 블로그](/technical_articles/computer_graphics/links_of_computer_graphics.assets/1537346957051.jpg)

뷰포트 좌표계 (NDC; Normalized Device Coordinates)

img

예를 들어 월드 공간에 위치한 특정 정점이 카메라 공간 안으로 연산이 되면 정규 장치 좌표계 (뷰포트 좌표계)로 변환 된다.

스크린 공간 (screen space)

My Programming Box: Screen Transform (화면 변환)

뷰포트 좌표계는 장치(화면)에 중립적인 좌표계를 가지고 있다. 최종적으로 화면에 그려지기 위해서는 화면 공간으로 변환되어야 한다.

공간 변환 과정

로컬 공간의 특정 정점은 - 월드 공간 - 카메라 공간 (뷰포트) - 스크린 공간을 거쳐서 변환 된다.

화면상의 특정 위치는 스크린 공간 - 카메라 공간 (뷰포트) - 월드 공간 - 로컬 공간을 거쳐서 변환 된다.

어느 경우에?

오버워치 2 핵심 모드 '밀기'가 화물 운반과 다른 점 : 네이버 포스트

![Blender: How to Select All Objects – Simply Explained All3DP](/technical_articles/computer_graphics/links_of_computer_graphics.assets/Feature-1.jpg)

참조

렌더링 파이프 라인

왼손 좌표계, 오른손 좌표계

왼손 좌표계(Left-handed coordinate system)와 오른손 좌표계(Right-handed coordinate system) :: 갓우리코딩

왼손 좌표계

스크린에서 비롯되었다. 화면 위가 Y이고, 앞이 Z로 추가 되었다고 보면 이해 하기 쉽다. 주로 게임들이 사용하는 좌표계.

오른손 좌표계

책상에 놓은 종에 위에서 비롯 되었다. 종이 위에서 도면을 그린다. 종이 위쪽에 Y 종이 오른쪽이 X. 종이 위로 Z축이 추가 되었다. 주로 설계 소프트웨어들이 사용.

미국 항공 설계 분야는 종이 좌측 기수가 X, 종이 위쪽 (오른쪽 날개)이 Y, 바퀴 쪽이 Z축이다.

러시아는 다르다고 하는데 러시아어를 몰라서 검색 할 수 없었다. 영어로 검색해도 나오지 않는다.

삼각 함수

![수학 공식 고등학교 > 삼각함수의 뜻과 그래프 – MATH FACTORY](/technical_articles/computer_graphics/links_of_computer_graphics.assets/%EC%82%BC%EA%B0%81%ED%95%A8%EC%88%98-%EA%B3%B5%EC%8B%9D-%EB%AA%A8%EC%9D%8C-04.png)

간단히 표현 하자면:

각도 $\theta$ 와 반지름이 1인 원지 주어질때 y의 길이는 $\sin$ x의 길이는 $\cos$.

img

image-20220523170348545

벡터 (Vector)

\[\begin{bmatrix} x \\ y \\ \end{bmatrix}\] \[\begin{bmatrix} x \\ y \\ z \\ \end{bmatrix}\]

3D 그래픽에서 벡터는 $U, V, W$ 로 표기

3D 그래픽에서 위치와 벡터는 구분하지 않고 둘다 벡터를 사용

위치도 원점으로부터의 벡터로 간주 - 식과 코드가 단순해지는 효과가 있음.

동차좌표계 (homogenious)

\[\begin{bmatrix} x \\ y \\ z \\ w \\ \end{bmatrix}\]

요약하면 - 특정 좌표가 여러가지(무한대) 좌표로 나타낼 수 있다.

컴퓨터 그래픽에서 여러가지 이유로 동차좌표계를 사용

동차좌표 (1, 1, 1, 1), (2, 2, 2, 2), (0.5, 0.5, 0.5, 0.5) 는 모두 같은 좌표를 나타낸다.

$w$가 1이 되도록 $w$로 나누면 비교 가능.

왜 동차 좌표계를 사용하느냐?

참조

행렬 (Matrix)

3차원 그래픽에서 4x4 행렬을 사용.

4x4 단위 행렬 \(\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{bmatrix}\)

그래픽에서 행렬은 $L, M, N$ 사용.

참조

인공지능에서

벡터는 볼드 소문자 사용 \(\mathbf v, \mathbf w, \mathbf x\) 행렬은 볼드 대문자 사용 \(\mathbf M, \mathbf N, \mathbf L\) 2차원 그래픽도 해야 하는데…?

\[\begin{bmatrix} x & y & z \end{bmatrix} ^ \top\]

행렬과 벡터의 곱 (Product)

곱 할 수 있는가? \(\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \times \begin{bmatrix} x \\ y \\ z \\ \end{bmatrix}\)

Nop \(\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \times \begin{bmatrix} x \\ y \\ z \\ w \\ \end{bmatrix}\)

프로그래밍에서 벡터도 행렬로 간주

class Matrix {
    float *m;
}

class Matrix4x4 : public Matrix {
    Matrix4x4() {
        m = new float[4*4];
    }
}

class Vector4 : public Matrix {
    Vector4() {
        m = new float[4];않음
    }
}

void main() {
    Matrix4x4 m;
    Vector4 v;
    Matrix n = v * m;
}

의외로 3차원 공간/좌표계와 변환을 사용하는 (프레임워크) 라이브러리

iOS

CALayer 를 통해 실제 UI 객체들이 3차원 공간에서 표현 된다.

Android

Qt

Flutter

오일러 각

3차원 공간에서 회전을 표현하는 방법 - 인간에게 친숙 하다. But… \(\begin{bmatrix} r_x \\ r_y \\ r_z \\ \end{bmatrix}\)

Orientation coordonnees spheriques generalisees.png

Eulerangles.svg

짐벌락 (2분 30초)

img

사원수 (Quaternion)

참고 : 영상이나 음성 같은 신호 처리시 코사인이 사용되는데 복소 평면과 코사인은 단짝이다.

3D 그래픽에서 회전을 표현하는 방법에는 3가지가 있다.

  1. 오일러 각 - 짐벌락 문제가 있다.
  2. 사원수
  3. 회전 행렬 - 4x4로 덩치가 크다.

복소수: \(a + bi\) 사원수: \(a + bi +cj +dk\) 실수부 1개, 허수부 1개.

그래픽 라이브러리들은 사원수 관련 클래스들이 정의 되어 있고, 오픈소스들도 활용할 수 있다. 이해는 나중에 해도 된다.

이런게 있다고 알고 넘어가도 개발 가능하다.

다시 벡터

정규 벡터

길이가 1인 벡터.

내적 (dot product)

두 벡터의 내적을 구하는 식이나 코드는 검색해 보면 많다. 벡터의 내적을 어떨 경우에 사용하는가?

두 벡터의 내적은 두 벡터가 어느 정도 다른 방향을 가리키는지 알 수 있게 한다.

벡터의 내적은 두벡터 방향의 코사인 값이다.

방향이 같으면 1, 방향이 수직이면 0, 방향이 전혀 다르면 -1이다.

코사인 값은 $\arccos \theta$ 로 호도법(라다인)을 구할 수 있고, 다시 라디안은 사람에게 친숙한 육십분법으로 변환 할 수 있다.

img

벡터의 사영(프로젝션) 크기를 알 수 있다. 설군의 연구소

image-20220523160746707

벡터 A를 B에 프로젝션한 길이를 알 수 있다.

법선벡터 (Normal Vector)

어떤 평면이 있을때 평면에 수직인 벡터.

법선벡터는 항상 정규벡터다.

DirectX 3D - 기초 용어 -

3D 그래픽에서 평면은 법선벡터로 표현 한다.

삼각형을 그리는 순서

img

벡터의 외적 (cross product)

두 벡터의 외적을 구하는 식이나 코드는 검색해 보면 많다. 벡터의 외적을 언제 사용하는가?

조금은 느리게 살자: 좌표계 기반 벡터(Vector)

두 벡터의 외적은 두 벡터에 수직인 단위 벡터를 얻는다. 이처럼 평면 등에 수직인 벡터를 법선벡터(Normal Vector) 이라고 한다. 평면의 방향을 기술 할때는 법선벡터로 표현 한다. FINDMEAN

벡터의 외적 – findmean

이 법선벡터와 다른 벡터를 dot를 하면 평면의 방향을 알 수 있다.

예를 들어 카메라가 특정 면을 보고 있을때, 그면의 법선벡터와 카메라와의 방향 베터를 비교하면 그 면을 그릴지 말지를 결정 할 수 있다.

img

Direct3D : 카메라 (Camera) 1 - 뷰행렬 (View Matrix)

img

img

img

위 그림에서 카메라의 Z축을 View Vector라고도 한다.

카메라

img

FOV (Field Of View) 시야각

img

카메라의 이미지 평면

img

카메라의 절두체 (Frustum), Near clipping plane, Far clipping plane

img

(주의: 이 카메라의 좌표는 다른 라이브러리와 반대로 표현 되어 있음)

직교 투영 (Orthographical Projection)

image-20220524133901159

원근 투영 (Perspective Projection)

image-20220524134015307

컬링 (Culling)

그래픽 라이브러리에서 해주므로 나중에 이해 해도 된다.

후면제거

그래픽 라이브러리에서 해주므로 나중에 이해 해도 된다.

후면제거를 할 것인가 말것인가?

void glEnable(GL_CULL_FACE);
void glCullFace(GLenum mode);
void glDisable(GL_CULL_FACE);

은면제거, 은선제거

깊이 버퍼 (Depth buffer, Z-Buffer)

그래픽 라이브러리에서 해주므로 나중에 이해 해도 된다.

가시성 판단

다시 벡터

벡터의 내적

벡터의 외적

사영 벡터 : 설군의 연구소 https://m.blog.naver.com/seolgoons/221389075503

다시 행렬

그래픽에서는 왜 4x4를 사용하는가?

왜 동차좌표계를 사용하는가?

행렬의 곱 (product)

A의 열의 갯수와 B의 행의 갯수가 같아야 한다.

결과는 A의 행 갯수 x B의 열 갯수 \(M = A \times B\) img

행렬 곱셈 - 위키백과, 우리 모두의 백과사전

변환 (Transform)

OpenGL에서 모델 공간을 변환

glMatrixMode(GL_MODELVIEW);
glLoadIdentity();

비례 변환 (Scale 확대축소)

그냥 곱해도 되지만, \(q_x = s_x * p_x \\ q_y = s_y * p_y \\ q_z = s_z * p_z \\\) 행렬을 사용하는데, 3x3 행렬로도 충분하지만 \(S = \begin{bmatrix} s_x & 0 & 0 \\ 0 & s_y & 0 \\ 0 & 0 & s_z \end{bmatrix}\) 실제는 4x4 행렬 사용. \(S = \begin{bmatrix} s_x & 0 & 0 & 0\\ 0 & s_y & 0 & 0\\ 0 & 0 & s_z & 0\\ 0 & 0 & 0 & 1 \end{bmatrix}\) 벡터 $V$를 스케일 하려면 \(U = S \cdot V\)

회전 변환 (Rotation transform)

회전 변환 행렬도 3x3으로 충분하지만, 4x4 행렬을 사용한다. \(R_x = \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos \theta & \sin \theta & 0 \\ 0 & - \sin \theta & \cos \theta & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}\) \(R_y = \begin{bmatrix} \cos \theta & 0 & - \sin \theta & 0 \\ 0 & 1 & 0 & 0 \\ \sin \theta & 0 & \cos \theta & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}\)

\[R_z = \begin{bmatrix} \cos \theta & \sin \theta & 0 & 0 \\ -\sin \theta & \cos \theta & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}\]

벡터 $V$를 회전하고 싶다면 \(R = R_x \cdot R_y \cdot R_z \\ U = R \cdot V\)

이동 변환 (Translation transform)

이동 변환 행렬은 4x4 행렬이다. \(T = \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ t_x & t_y & t_z & 1 \end{bmatrix}\) 벡터 V를 이동하려면 \(U = T \cdot V\) 위 이동행렬의 전치 행렬 \(T^\top = \begin{bmatrix} 1 & 0 & 0 & t_x \\ 0 & 1 & 0 & t_y \\ 0 & 0 & 1 & t_z \\ 0 & 0 & 0 & 1 \end{bmatrix}\)

투영

OpenGL에서 투영 행렬을 조작시

glMatrixMode(GL_PROJECTION);
glLoadIdentity();

직교 투영 행렬

image-20220524134116887

원근 투영 행렬

image-20220524134157724

행렬의 전치

\[\begin{bmatrix} 0 & 1 \\ 2 & 3 \\ 4 & 5 \\ \end{bmatrix} ^ \top\] \[\begin{bmatrix} 0 & 2 & 4 \\ 1 & 3 & 5 \\ \end{bmatrix}\]

변환행렬의 전치 관계

자료에 따라 회전행렬, 이동행렬이 전치되어 다를 수 있다. \(T = \begin{bmatrix} 1 & 0 & 0 & t_x \\ 0 & 1 & 0 & t_y \\ 0 & 0 & 1 & t_z \\ 0 & 0 & 0 & 1 \end{bmatrix}\) \(T = \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ t_x & t_y & t_z & 1 \end{bmatrix}\)

이 차이는

다르다.

왜 행렬을 사용하는가?

병렬 컴퓨팅을 사용할 수 있다.

OpenGL 에서 행렬

glLoadMatrix : https://www.khronos.org/registry/OpenGL-Refpages/gl2.1/xhtml/glLoadMatrix.xml

glMatrixMode : https://www.khronos.org/registry/OpenGL-Refpages/gl2.1/xhtml/glMatrixMode.xml

glLoadIdentity, glPushMatrix, glPopMatrix : 실제 거의 사용하지 않음.

…

텍스처

https://extra-ordinary.tv/2021/01/19/tiling-for-expressions-with-vroid-characters/

3D 그래픽 처리 단계

https://gameqa.tistory.com/60 - 설명 좋은 문서

img

셰이더 프로그래밍

대부분의 많은 셰이더 소스코드가 공개 되어 있다

대표적인 데이터 구조

타입 설명  
float, vec2, vec3, vec4 2차원, 3차원, 4차원 벡터  
mat2, mat3, mat4 2x2, 3x3, 4x4 행렬  

함수: https://www.khronos.org/registry/OpenGL-Refpages/gl4/index.php

abs : 절대값

atan : 아크탄젠트

clamp : 범위 제약

dot : 내적

…

커스텀 셰이더

https://docs.unity3d.com/kr/2021.1/Manual/SL-VertexFragmentShaderExamples.html

물리엔진

유니티 물리엔진 예시

물리엔진의 종류 https://www.tapirgames.com/blog/open-source-physics-engines

유명 물리 엔진

Octree

Octomap

충돌 검사

참조