자체 제작 3D 렌더러 제작기 episode 2. webgl과 친숙해지기

라코마코·2023년 11월 8일
1

렌더러제작

목록 보기
2/9

이전 이야기 : https://velog.io/@lacomaco/%EC%9E%90%EC%B2%B4-%EC%A0%9C%EC%9E%91-3D-%EB%A0%8C%EB%8D%94%EB%9F%AC-%EC%A0%9C%EC%9E%91%EA%B8%B0-episode-1.-%ED%8F%AC%EB%B6%80

7일전 나의 계획은 webgpu를 사용해서 렌더러를 만드는게 목표였지만 지금은 webgl2로 급 선회해서 제작하고있다.

webgpu... 성능 좋고 webgl과 다르게 Group 이라는 개념이 들어와서 텍스처 쉐이더 코드를 그룹으로 묶어서 관리할 수 있어 직관적이고 편하다고 느꼈지만

자료가 없다.

진짜로 없다... 심지어 일부 쉐이더 어트리뷰트는 구글에 검색해도 안나오고.. w3c 스펙을 읽어야 단서가 나오는 경우도 있다.

내가 렌더러를 만드는 이유는 내 스킬을 평가함과 학습을 위해서 만드는 것인데... webgpu 정보가 너무 없어서 걸림돌이 된다고 판단하여 webgl로 방향을 급선회했다.


(2일전에 급하게 돌렸다...)

여담인데... 프론트엔드 커뮤니티는 의외로 그래픽스에 대한 관심이 없는것같다. 프론트엔드 커뮤니티에서 webgpu에 대한 소개글은 넘쳐나지만 정작 정보는 없다. 웃긴건 Rust 커뮤니티가 오히려 webGpu에 관심이 정말 많다. 실질적인 구현 팁이나 wgsl 팁도 Rust 커뮤니티가 더 풍부하게 가지고 있다. WebGpu 정보는 rust 커뮤니티에서 얻는걸 추천한다... 3D 렌더러가 얼추 완성되면 WebGpu Support 버전으로 포크따서 만들어도 괜찮을것 같다.

그래서 2일간 무엇을 만들었나?

업로드중..

이걸 만들었다.

우스워 보이는 화면이지만 삼각형 찍는 코드, 이미지 2개 블렌딩하는 코드 모두 들어갔고 uniformBuffer, vertexBuffer, indexBuffer 모두 사용하는 코드이다.

기초적인 webgl api는 뗏다고 볼 수 있다.

이제 본격적인 3D 화면을 만들 예정이다.

우선 정육각형 모델을 만들고 화면에 띄어본 후 Perspective Projection을 구현할 예정이다.

그 후 .obj 파일 리더기를 바닥부터 만들어 좀 더 복잡한 모델을 찍는 모듈을 만들것이다.

다음은 3d picking 기술을 사용해 모델을 움직이는 기술을 넣고 라이팅, 큐브맵핑 등을 순차적으로 넣어서 완성시킬 예정이다.

너무 큰 그림 그리지 말고 단계별로 하나씩 고민하지 말고 바로바로 진행하자.

코드는 오픈소스이고 단계별 목표가 끝나면 제작기를 작성해 올릴것이다.

https://github.com/lacomaco/laco3DRenderer

0개의 댓글