본문 바로가기
도전

3D Computer Graphics (2)

by oncerun 2023. 4. 1.
반응형

2023.04.01 - [도전] - 3D Computer Graphics (1)

 

3D Computer Graphics (1)

멋진 3D 인터랙티브 홈페이지를 발견했다. 나도 한번 만들고 싶었다. https://zero.tech/ ZERO - Distribute the Future zero.tech 이를 위해 무엇이 필요한지 정보를 수집하던 도중 여러 키워드가 나왔다. 1. Three.

chinggin.tistory.com

 

이어서 알아보자.

 

 

Rigging

 

 

가끔 움직임을 표현해야 하는데, 이를 위해 skeleton을 사용한다.

 

이러한 뼈를 만들게 되면 폴리곤 메시에 넣고 움직임(애니메이션)을 구현한다. 

 

뼈와 폴리곤 메시의 상관관계를 정하는 작업을 간단하게 Rigging이라고 한다. 

 

이후 뼈를 통해 애니메이션을 만들 수 있다. 이후 런타임에 애니메이션이 재생된다. 

 

이러한 작업을 위해 여러 프로그램이 있는데 보통 3ds Max나 Maya를 사용한다고 한다. 

 

유니티로도 작업하는 걸 봤던 것 같다. 

 

 

Rendering

 

이러한 모델을 만들었다면 이를 2D로 런타임에 표현해야 한다. 

 

이 과정에서는 lighting과 texturing이 필수적이다.  

 

Three.js는 모델을 읽을 때 많은 작업을 해주는 것 같은데 sketchfab에서 모델을 받고 이를 로드하여 로그를 보면 

매우 복잡하게 설정된 경우도 있고 텍스처는 기본적으로 자동으로 매핑해 주는 것 같기도 하다. 

아마 모델을 특정 파일로 추출할 때 빛이나 텍스처도 포함되서 파일로 추출되는 것으로 보인다. 

 

 

Post-processing

 

필수적인 작업은 아니지만 더 사실적인 효과를 위해 적용하는 기법이다. 

 

https://threejs.org/examples/?q=post#webgl_postprocessing 

 

three.js examples

 

threejs.org

 

Three.js는 특정 파이프라인에 필터를 추가해서 렌더링하기전에 효과를 적용하는 것으로 보인다.

 

 

 

Graphics API

 

 

모델링, 리깅, 애니메이션으로 모델을 만들고 결국 이 모델은 컴퓨터에 의해 시각화된다. 

 

게임 같은 경우 보통 game engine을 많이 사용하는데, 이는 개발 툴로서 제공되는 경우가 많고 이를 활용해 애니메이션, 렌더링, 후처리 작업을 진행할 수 있다. 

 

이쪽 분야는 잘모르는데, 유니티나 언리얼을 많이 사용하는 것 같다. 아마 엔진이라고 불리는 것이 API Interface이고

이를 개발자가 사용하여 개발하는 것 같다. 

 

 

이러한 game engine 하위에는 graphics API가 존재한다. 대표적으로 Direct3D, Khronos OpenGL이 대표적이다. 

혹은 임베디드 시스템 OpenGL ES를 만들었다. 

 

WebGL은 웹 브라우저 내에서 interactive 2D 및 3D 그래픽을 렌더링 하기 위한 Javascript API이다. 

WebGL은 OpenGL ES을 기반으로 하는데 이를 통해 실제 HTML5, CSS, JS만으로도 interactive 3D 콘텐츠를 만들 수 있긴 하다.  이를 사용하면 복잡한 그래픽과 애니메이션을 실시간 렌더링할 수 있어 비디오 게임, 가상 및 증강 현실, 과학적 시각화와 같은 애플리케이션에 적합할 수 있다. 

 

다만 코드량이 매우 많다고 알려지고, 그 과정도 매우 복잡해 Three.js는 WebGL 위에 구축한 오픈 소스 JS 라이브러리이다. 

 

매우 단순하고 쉽게 시작할 수 있도록 예제와 공식문서가 잘되어 있고 기능을 확장하는 플러그인도 별도로 안내해주고 있습니다. 

 

 

GPU

 

Graphics API 하위에는 GPU가 있습니다. 즉 그래픽 API를 사용한다는 것은 GPU에게 명령어를 전달한다는 것입니다. 

 

CPU가 아닌 GPU를 사용하는 이유는 매우 다양한데 한가지는 병렬연산이지 않을까 싶다. 

 

픽셀 단위마다 계산을 하는 작업은 CPU에게 적합하지 않다. 하지만 GPU에게는 이러한 작업이 더 효율적으로 구성되었다고 한다. 

 

이 내용은 다음 링크로 대체한다.

 

https://thebookofshaders.com/01/?lan=kr 

 

The Book of Shaders

Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.

thebookofshaders.com

 

Math

 

수학에 대해선 딱히 할말이 없다. 

 

특정 무언갈 카피하는데 필요한 수학의 범위는 정해져 있지만 추후 미래에는 없던 것 혹은 내가 만들고 싶은 무언가를 위해선 광범위한 꾸준한 노력이 필요해 보인다. 

 

그래서 나는 기초를 복습한다고 생각하고 다음 아카데미를 수업을 듣고 문제를 풀고 있다 .

https://ko.khanacademy.org/

 

실제 이를 통해 필요한 기초 개념을 정리하고 있고 shader를 다루다 보면 여러 수학적인 함수에 대한 공식문서를 읽어야 할 때가 있는데 그때마다 keyword가 나오기 때문에 이를 검색해서 공부하고 있다. 

 

그리고 가끔 시간이 남으면 다음 영상을 본다.

https://www.youtube.com/@3blue1brown

 

3Blue1Brown

3Blue1Brown, by Grant Sanderson, is some combination of math and entertainment, depending on your disposition. The goal is for explanations to be driven by animations and for difficult problems to be made simple with changes in perspective. For more inform

www.youtube.com

 

 

이 영상은 복잡한 계산보다는 직관적인 이해를 기반으로 알려준다.  이를 통해 새로운 시야를 얻고 다시 문제를 풀거나 구현을 하려고 노력하다 보면 답이 보이더라.. 

 

 

 

 

 

https://inhibitor1217.github.io/2019/04/19/webgl-introduction.html

 

WebGL 소개, 스택, OpenGL과 비교 · inhibitor.log

WebGL 기본 튜토리얼 보러가기 그래픽스 라이브러리? 많은 개발자들이 Unity나 Unreal Engine과 같은 게임 엔진을 활용하여 자신만의 게임을 만듭니다. 게임 엔진은 게임 개발의 입문 난이도를 엄청나

inhibitor1217.github.io

https://www.youtube.com/@gisdeveloper

 

GIS DEVELOPER

안녕하세요, GIS Developer 김형준입니다. 지리정보시스템(GIS) 분야에서 활동하고 있는 소프트웨어 개발자입니다. GIS는 현실 세계의 공간 데이터에 기반한 데이터 처리와 분석 그리고 시각화를 위

www.youtube.com

 

반응형

'도전' 카테고리의 다른 글

기억장치와 PLD(2)  (0) 2023.04.04
기억장치, PLD (1)  (0) 2023.04.02
3D Computer Graphics (1)  (0) 2023.04.01
레지스터와 카운터(2)  (0) 2023.03.26
레지스터와 카운터(1)  (0) 2023.03.26

댓글