2017년에 만든 Grimoire.js의 샘플을 되돌아 본다

이 기사는 Grimoire.js Advent Calendar 2017의 3 일째 기사입니다.

소개

Grimoire.js은 일본에서 시작한 WebGL 프레임 워크입니다.
이 1년을 되돌아 보면, Grimoire.js 에는 표현력을 강화하는 구조가 많이 실장된 해가 아니었을까 생각합니다.
조속하지만 샘플을 몇 가지 소개하고 싶습니다.

2017년에 지원되는 주요 기능

셰이더 태그

인스턴싱

다중 카메라 설치

PBR

glTF 2.0

셰이더 태그

이전에는 셰이더를 외부 파일로 준비해야 했지만, 이 기능을 사용하면 HTML의 script 태그(type="text/sort")로 셰이더를 설명할 수 있게 되었습니다. jsdo.it 등으로 셰이더를 확인하면서 코딩할 수 있으므로 개인적으로 편리한 기능입니다.

h tp : // js. t / cx 20 / 9

h tp : // js. t/cx20/chM

h tp : // js. t/cx20/4 에 ztL

인스턴싱

복수의 메쉬를 1회의 드로우 콜로 그릴 수 있게 되는 편리한 기능입니다. 다루기 위해서는 데이터 구조를 의식할 필요가 있기 때문에 조금 연습이 필요할지도 모릅니다.

htp : // js. t/cx20/u 3rD

다중 카메라 설치

어쩌면 전부터 어떤 기능이었을지도 모릅니다. 여러 카메라를 설정할 수 있음을 올해 알았습니다.

htp : // js. t/cx20/K ぃg

PBR

PBR (은)는 물리 베이스 렌더링의 약어로, 별로 상세하게는 이해할 수 없습니다만, 현실의 라이팅에 가까운 표현을 할 수 있는 구조인 것 같습니다.

h tp : // js. t/cx20/89C8

h tp : // js. 아니 t/cx20/아 TDR

glTF 2.0

glTF은 Khronos가 제안하는 3D 형식입니다. glTF 2.0 보다 PBR 에 대응해, 보다 표현력이 향상된 포맷으로 되어 있습니다.

htp : // js. t/cx20/kurl

htp : // js. t/cx20/오 GhR

기타 라이브러리 / API 조합

Effekseer

Effekseer 은 파티클 등의 이펙트를 제작하기 위한 툴입니다. 이펙트 파일을 WebGL에서도 사용할 수 있기 때문에 사용해 보았습니다.

htp : // js. t/cx20/Q3 5

Draco 형식 파일

Draco 형식은 Google이 제안하는 새로운 3D Mesh 압축 형식입니다. 디코드하는 라이브러리가 제공되고 있으므로 사용해 보았습니다. 데이터에 따라 다르지만 상당히 높은 압축을 기대할 수 있습니다. 아래 샘플에서 사용하는 모델은 obj 형식에 비해 약 1/30으로 압축 (6.6MB → 212KB)되는 것을 확인하고 있습니다.