갤러리 이슈박스, 최근방문 갤러리
개념글 리스트
1/3
- 부정선거 감시' 단체, '한국어 테스트'로 중국인 색출 논란 노인복지관
- 유독 특이하게 생긴 토트넘 유로파 시상대 .......ㅠ ㅇㅇ
- 팍팍한 삶에 '이것'부터 포기…진짜 0% 찍나? 암울한 미래 빌애크먼
- 개그맨 부부가 이혼이 없는 이유 ㅇㅇ
- 샤워할때 슬리퍼 신는다 vs 안신는다 굴굴스
게임 엔진 개발기 4 - 스프라이트, 메시 드로잉 (feat. 쉐이더)
https://gall.dcinside.com/mgallery/board/view?id=game_dev&no=185055 게임 엔진 개발기 3 - 렌더링 라이브러리 선택 - 인디 게임 개발 마이너 갤러리https://gall.dcinside.com/mgallery/board/view/?id=game_dev&no=185006&exception_mode=recommend&page=1 게임 엔진 개발gall.dcinside.com안녕하세요 게임 엔진을 깎고있는 에렌입니다.지난번 3개의 일지가 실베로 갔더라고요?뭣도 아닌 제가 벌써부터 실베 고로시를 당해보는 귀한 경험을 얻게 되었습니다... 고마워요 알바생!!!^^지난 글 이후로, 며칠동안 본격적인 그래픽 드로잉을 위해 열심히 코드와 씨름하는 시간을 가졌습니다.그래서 오늘은 스프라이트와 메시를 드로잉할 수 있도록 게임 엔진의 기본적인 그래픽 모듈 개발에 대한 이야기를 해보려 합니다.에렌 엔진은 게임 오브젝트들이 노드 트리를 이루는 구조를 갖고 있습니다.이는 Godot의 노드들과 비슷한 구조에요.그래서 GameObject라는 상위 노드 개념을 만들고, 스프라이트 드로잉을 위한 Sprite 노드와, 메시 드로잉을 위한 Model 노드를 각각 만들었습니다.제 게임 엔진은 TypeScript버전과 Rust버전이 있는데, 지난 글에도 밝혔듯 TypeScript 버전은 WebGL 지원을 위해 이미 널리 사용중인 렌더링 라이브러리를 기반으로 하고 있습니다.라이브러리를 가져와 쓰다보니 구조를 짜기가 매우 쉬웠어요.2d는 pixi.js를 기반으로 하고, 아래처럼 스프르라이트 드로잉을 아주 간단히 만들어봤습니다.https://erenengine.github.io/eren/eren_ts_2d/examples/test_sprite/index.html Sprite Test Sprite Testerenengine.github.io잘 나오네요.그리고 3D의 경우에도 Babylon.JS를 사용해 금방 만들었어요.glb파일을 로드해 화면에 띄워주는 예제입니다.https://erenengine.github.io/eren/eren_ts_3d/examples/test_mesh/index.html Mesh Test Mesh Testerenengine.github.io잘 뜹니다!!(참고로 여기서 사용된 모델은 CC0라이센스 무료 모델인 Kenney의 mini characters를 사용했습니다.)https://kenney.nl/assets/mini-characters-1 Mini Characters 1 · Kenney Download this package (25 assets) for free, CC0 licensed!kenney.nl이렇게 TypeScript 기반은 구조를 매우 쉽게 만들었지만, 문제는 Rust 버전이었어요.Rust 버전은 완전히 바닥(렌더링 모듈)부터 만들어야 했기 때문에 어려운 작업이었고 꽤나 시간이 걸렸습니다.무엇보다 언어도 익숙치 않았고요. (OOP 기반 언어가 아니다보니 머리가 아프더라고요 ㅋㅋ 그래도 하다보니 익숙해지는 중이네요...)렌더링 라이브러리를 별도로 쓰지 않으니, 완전 밑바닥 쉐이더부터 작성을 하게 됐어요.제 엔진은 wgpu를 기반으로 하기에, WebGPU Shading Language인 wgsl로 쉐이더 코드를 개발합니다.아래는 스프라이트 드로잉을 위한 쉐이더 코드에요.https://github.com/erenengine/eren/blob/main/eren_rs_2d/wgsl/Sprite.wgsl Rate limit · GitHub Rate limit · GitHubgithub.com이렇게 만들어진 스프라이트 렌더러를 통해, 스프라이트를 렌더링해봤습니다!https://github.com/erenengine/eren/blob/main/eren_rs_2d/examples/test_sprite.rs Rate limit · GitHub Rate limit · GitHubgithub.com잘 뜨네요!!그리고 3d 모델을 위한 쉐이더 코드도 작성합니다.https://github.com/erenengine/eren/blob/main/eren_rs_3d/wgsl/Model.wgsl Rate limit · GitHub Rate limit · GitHubgithub.com마찬가지로 3d모델을 불러와 출력해봤어요.https://github.com/erenengine/eren/blob/main/eren_rs_3d/examples/test_mesh.rs eren/eren_rs_3d/examples/test_mesh.rs at main · erenengine/eren 에렌 엔진은 코드 중심의 게임 엔진입니다. Contribute to erenengine/eren development by creating an account on GitHub.github.com잘 나오네요!!이렇게 고작 스프라이트와 메시를 출력하는 것일 뿐이지만, 좌충우돌 시행착오를 많있고, 코드가 매우 복잡해졌습니다 ㅜㅜㅜ상용 게임 엔진들이 얼마나 공을 들여서 잘 만들었는지 뼈저리게 느끼게 됐달까요?그래도 좀 적응을 하니까 자신감이 생기긴 하더라고요.아직 코드베이스가 많이 엉망이고 부족하지만, 꾸준히 발전시켜 보겠습니다.TypeScript쪽도 나중에는 렌더링 라이브러리를 제거하고 자체 버전으로 교환시켜도 될 것 같아요. 그만큼 살짝 자신감이 생겼습니다ㅋㅋ다음 글에서는 마우스 클릭이나 키보드 입력 등 이벤트 처리에 대한 내용을 작성해 보겠습니다.감사합니다.- 에렌 엔진은 코드 중심의 오픈소스 게임 엔진입니다.에렌엔진 웹사이트
작성자 : 에렌고정닉
댓글 영역
획득법
① NFT 발행
작성한 게시물을 NFT로 발행하면 일주일 동안 사용할 수 있습니다. (최초 1회)
② NFT 구매
다른 이용자의 NFT를 구매하면 한 달 동안 사용할 수 있습니다. (구매 시마다 갱신)
사용법
디시콘에서지갑연결시 바로 사용 가능합니다.