https://sketchit.tistory.com/entry/glTF-GL-Transmission-Format%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

 

[정보관리 기술사] glTF (GL Transmission Format)란 무엇인가?

glTF의 정의 glTF(GL Transmission Format)는 3차원 장면과 모델을 표현하는 파일 포멧이며, 3D 모델 정보를 JSON(JavaScript Object Notation)표준으로 저장하는 파일형식이다. "Kronos Group"이 개발을 리드하는 무료

sketchit.tistory.com

 

.Gltf 는 크로노스 그룹에서 개발을 리드하는 무료 국제 표준 확장자이며

Gltf를 3D 모델계의 JPGE 라는 슬로건과 함께 최적화를 내세우며 2016년 부터 사용하게 되었다.

 

많은 개발 및 디자인 툴에서 최적화를 위해 널리 보급되어 사용되고 있으며,

최종 최적화 단계에서 컨버팅 하고 사용하고 있다.

 

https://www.youtube.com/watch?v=tonSNnEj-ow&ab_channel=TheKhronosGroup

 

.GLTF 의 특징으로는 3D 좌표계인 Geometry 정보와 Texture를 하나의 파일로 묶어 저장한다는 특징을 가지고 있으며,

그 밖에 애니메이션(+몰프타겟 및 Skin) 및 카메라 정보값을 하나의 파일로 가지고 있다는 장점이 있다.

 

*단 많은 DCC 툴에서 공식적으로 지원하는 것이 아니기 때문에 개인 개발자의 노력으로 서브 플러그인을 만들어 사용하는 경우가 많았다.

이 내용은 Web 3D 콘텐츠를 제작하며 최대의 효율(시간과 퀄리티)을 낼 수 있는 방법에 대해 서술하고자 한다.
시간이 지나면서 많은 툴에서 지원한다면... 다시 바뀔수도 있다!!!

 

1. Maya Setting

Main으로 사용하는 Dcc Tool의 경우 Maya를 사용하고 있어 Maya 사용자를 기준으로 작성을 이어가고자 한다.


(Mesh + Ani 30Fps)

 

(Mtl Setting)

 

** FBX에서 지원되는 Material을 사용하는 것을 권장하며, Lambert 를 추천 한다.
***Vray, Anrold Mtl 은 지원하지 않는다.

**** 3Ds max 최신버전에서는 Gltf Export를 지원하지만 애니메이션이 출력되지 않는 단점이 존재한다.

***** Maya의 경우에는 Plugin을 통해 GLTF로 출력은 가능하다 (하지만 안쓰는 이유는...)

****** Export의 경우 최대한의 최적화를 위해 Blender를 거치게 된다. (Maya 도 공식지원 됬으면,,,,)

 

2. Blender Setting

 

Maya에서 Export한 FBX를 확인하게 된다면 그래프 값이 깨져서 들어오는 것을 확인 할 수 있다.

가장 좋은 방법은 Maya FBX Export 시에 확인해서 넘겨받는 것이 Best이지만 상황상 할수없다면 Window 3D Viewer를 활용하여 GLB로 컨버팅해오는 것이 정신건강에 이롭다. 

Window 3D Viewr

*가장 좋은 방법은 Maya에서 지원하거나 Blender에서 모든 애니메이션 세팅을 끝내는 것이 좋다.

**Key가 Bake 되기 때문에 불필요한 Key 값이 늘어나 용량이 늘어난다는 단점이 있다.

*** 30Fps로 작업된 Animation이 24Fps로 변경되어 저장되며

 

 

익스포트 세팅을 확인하게되면 크게 2가지를 확인해야된다.

 

(1) Animation NLA

 

Blender에서는 NLA라는 시스템을 사용하고 있다. 이를 통해 애니메이션이 1개로 익스포트 되는것이 아닌 오브젝트마다 애니메이션이 따로 출력되는 문제가 발생된다. 그렇기에 기본 체크박스가 셀랙되어 있는 부분을 풀어서 저장해주어야 FBX에 1개의 애니메이션 트랙만 저장이 된다.

 

(2) Compress

 

Geometry 부분을 확인하게 되면 Compression 항목이 있을 것이다 이것은 Draco 코덱을 활용하여 압축하는 방식이며

기존 GLTF보다 더 높은 압축률을 자랑한다.

 

GLTF로 압축하게된다면 이미지 데이터를 RGB -> Index Color Sapce로 변경해주고,

Draco의 경우 저장되어있는 이미지 데이터를 WebP 변경 해준다.

 

그밖에 알고리즘을 통해 Vertex 및 Animation을 압축하는 것으로 예상되며 Draco를 사용하게 된다면 모바일과 PC 플랫폼에서 낮은 리소스 사용량을 발생시켜 프로젝트에 사용이 가능하다면 사용하는 것이 좋다.

*프로젝트 상황에 따라 Draco를 사용하지 못하는 경우가 존재한다.
*컴프레션 레벨 7이상의 경우 Vertex가 변경되는 문제가 간혹있어 6정도로 압축하는 것이 정신건강에 이롭다.

 

 Q&A

Morph, Blend Shape
>>> FBX에 정상적으로 담기면 다행이겠지만,,, 그렇지 못하다... Blender로 작업해서 Export하는 것이 정신건강에 이롭다.

Image resource

>>> 단순하게 컬러만 사용되는 경우를 제외하고 실사 텍스처가 사용될 경우 GLTF에 담아내는 것이 아닌 따로 임포트 받는것이 퀄리티를 지킬 수 있는 방법니다
*GLTF + Draco를 사용한다면 Export 시에 알고리즘으로 인해 Textuer 퀄리티 저하가 발생되기 때문에 이점은 꼭 유념해야된다.

 

Scale Error

>>> Maya, 3Ds Max에서 작업이 진행된다면 스케일 값이 1/100으로 줄어있는 문제가 발생되게 된다.

Pivot Error

>>> 간혹 오브젝트 Pivot이 0,0,0으로 수정되는 버그가 있어 따로 Null Grp을 상위에 감싸서 사용하는 것이 정신건강에 이롭다.

arcoreimg.exe
4.35MB

 

https://developers.google.com/ar/develop/augmented-images/arcoreimg?hl=ko

 

arcoreimg 도구  |  ARCore  |  Google for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 arcoreimg 도구 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. arcoreimg는 참조

developers.google.com

 

AR Image Target을 진행해야되는 마커의 퀄리티는 매우 중요한 요소중에 하나이다.

구글 디벨롭먼트는 75점이상 되는 마커를 사용하는 것을 권장하고 있으며,

 

위에 링크와 파일은 윈도우 개발환경에서 마커의 퀄리티 체크를 진행하는 툴이다.

 

 

< 사용방법 >

 

1. Arcoreimg.exe. 를 다운받은 후, 윈도우 + R 키를 눌러 실행창에 CMD를 입력한다.

 

2. CMD 창을 연다음 아래와 같이 이미지 품질을 확인하는 명령어를 입력한다.

*데이터의 경우 D드라이브의 2.Android라는 디록토리에 arcoreimg.exe를 다운로드 하여 저장하였다.

 

테스트를 위해 test.jpg 데이터를 활용하여 설명하고자 한다.

D드라이브로 이동하기 위한 명령어 = d:
D드라이브에서 폴더로 이동하기 위한 명령어 = cd 2.Android

 

Sample /// arcoreimg.exe eval-img --input_image_path=이미지경로\이미지이름.확장자명
arcoreimg.exe eval-img --input_image_path=D:\2.Android\test.jpg

 

 

태극기 이미지로 하였을 경우 복잡성이 있음에도 불구하고 50점이라는 점수를 받았다.

 

구글 디벨롭먼트 내에 문서를 확인하고 실제 Exe를 활용하여 테스트해본 결과

고품질의 마커를 이끌어 내기위해서는 다음과 같은 세팅이 필요하다.

 

 

https://developers.google.com/ar/develop/augmented-images?hl=ko%EF%BB%BF#unity-ar-foundation

 

 

< Tip >

(1) 300x300 이상의 이미지 데이터

>> 활용되는 마커 이미지의 경우 비율에 상관없이 300 x 300 이상의 이미지 데이터를 활용해야된다.
* 결국 최적화의 영역이기 때문에 알맞은 크기를 세팅하는 것이 좋으며 용량 이슈로 인해 최대 2024 x 2024를 넘지않는 것을 추천한다.

 

(2) Gray Sclae

>> Image Target 로직의 경우 RGB Color Space를 기준으로 진행하는 것이 아닌 Gray Sclae Color Space로 마커를 인식하기 때문에 여러 컬러를 사용하여 이미지를 만든다고해서 점수가 높아지는 것이 결코 아니다.

 

(3) 소통

>> 결국 마커의 경우 디자이너가 제작하는 이미지를 따르기 때문에 이와 관련한 내용을 공유하여 디자이너와 싱크를 맞추는 작업이 필요하다.
*마케팅으로 사용되는 마커의 경우 퀄리티 문제가 발생되는 경우가 많아 선행적으로 프로젝트의 PM 및 클라이언트에게 이 내용을 이해시키는 것이 필수적으로 요구된다 생각한다.

 

https://nukesaq88.github.io/Pngyu/

 

Pngyu

 

nukesaq88.github.io


TA, 클라이언트 (웹)프로그래머에 이르기까지 이미지 리소스는

어떤 프로젝트이건 간에 사용이 되게 된다.

 

특히 Alpha가 지원되는 이미지의 경우 PNG, GIF, A-PNG, WebP를 사용할 수 있으나,

각각의 문제점이 도출되게 된다.

 

PNG 기본적으로 사용되는 이미지 확장자이며 범용성이 높다
A-PNG GIF와 같이 애니메이션과 Alpha가 지원되는 장점이 있으나, 사용가능의 여부는 개발자와 상담이 필요하다.
GIF 애니메이션과 Alpha를 지원하지만 색공간의 제안으로 계단현상이 발생되며 Alpha는 0과 1만 지원하기때문에 물방울과 같은 투명도를 가질 수 없다.
WebP 범용적으로 사용되는 확장자이나 프로젝트에서 사용가능한지의 여부는 개발자와 상담이 필요하다.

 

이와 같이 4가지의 확장자의 경우 비교적 범용적으로 사용되나, 개발 편의성과 비주얼을 고려한다면

결국 PNG, WebP를 사용하는 것이 현실적일 것이며,

 

결국 후가공의 영역으로 들어서게 된다면 원본 PNG 시퀀스에 의거하여 최적화를 진행하기 때문에
근본 PNG를 최적화 하는 것을 다뤄보고자 한다.

 

1. 색상 모드

PNG를 기본적으로 압축하기 위해서는 포토샵의 색상모드를 이해하고 있어야 한다.

픽셀의 경우 R (0~255), G (0~255), B (0~255) 의 값을 가지고 있기 때문에 우리 눈에 보이는 색상이 표현되고 있다.

다시 말하자면 그 색상을 표현하는 값이 다 데이터이며 용량에 직접적으로 영향을 준다는 것이다.

 

포토샵의 경우 여러 모드가 있으나 최적화 영역으로 가야되기 때문에 Index 컬러에 대해 설명하고자 한다.

 

 

<Indexed Color>

 

디스플레이 업데이트 및 파일 전송 속도를 높이면서 메모리 및 저장공간을 절약하기 위해 제한된 방식으로 디지털 이미지 색상을 관리하는 기술이며 일종의 벡터 양자화 압축 방식입니다.
*결론적으로 색상을 팔레트라 불리는 별도의 데이터 배열에 저장하는 방식을 말한다.

 

이 것을 통해 기존 RGB에 전체 색상을 저장하는 것이 아닌 사용되는 색상만 일부 추출하여 이미지에 저장하여 저장공간을 압축시키는 방식이며 이를통해 용량 압축을 진행할 수 있다.

 

하지만

 

이렇게 하는 방법은 1차적인 압축방식이며 이 과정을 진행한뒤 Pngyu를 진행한다면 2차적인 색상손실이 나기때문에

포토샵에서 익스포팅 되는 이미지 데이터의 경우 RGB 색역 공간에서 작업된 이미지를 활용하는 것을 추천한다.

 

2. Pngyu

 

이미지를 드래그앤 드롭하게 된다면 다음과 같은 화면을 볼수있으나 Default를 추천하며

단순하게 Compress Start 버튼만으로 Indexed Color Space로 변경 및 저장을 진행하는 툴이며,

 

육안상으로 보았을때 퀄리티를 지키며 최적화를 진행할 수 있다.

*PNG만 지원한다

3. Q&A

Unity, Unreal 과 같은 게임 앤진 임포트시

>>> Pngyu를 추천하지 않는다. 결론적으로 보았을때 유니티를 기준으로 앤진에서 GPU로 보내는 컴프레스를 따로 진행하고 있기 때문에 인앱으로 사용하는 경우에는 사용하는 것을 추천하지 않는다. (결국 앤진에서 컴프레스를 또 걸기때문에 2차 손실이 발생한다)
*단 외부에서 다운받거나 링크를 받아와서 사용하는 경우 용량 절약을 위해 사용하는 것은 바람직하다고 판단된다.

 

After Effect를 이용한 영상제작 사용시

>>> 애팩을 통해 영상을 압축한다고 가정할 경우 2차 컬러 손실이 발생하기 때문에 차라리 이전에 포스팅한 HandBreke를 이용하여 최적화는 진행하는 것이 바람직하다고 판단된다.

*단 별도의 인코더를 사용하는 경우 필요에 따라 사용하는 것이 바람직할 수 있다.

 

Web 콘텐츠 사용시

>>> 적극 적으로 활용하는 것을 추천한다.

 

 

Web콘텐츠와 관련하여 Mp4, MKV, WebM을 압축하는 방식은 기존에 인코더 프로그램으로 진행 할 수 있지만

더욱 최적화 하여 사용하는 방법으로는 HandBrake를 추천한다.

*이 툴의 존재를 공유해주신 S사 개발자분께 존경을 표한다.


https://handbrake.fr/

 

HandBrake: Open Source Video Transcoder

HandBrake is a open-source tool, built by volunteers, for converting video from nearly any format to a selection of modern, widely supported codecs. Reasons you’ll love HandBrake: Convert video from nearly any format Free and Open Source Multi-Platform (

handbrake.fr

 

https://handbrake.fr/

 

해당 툴의 경우 한국어 번역도 의외로 잘되어있어 사용하기 편한장점을 가지고 있으며,

맥, 윈도우에서 무료로 사용할 수 있는 장점을 가지고 있다.

테스트를 위해서 영상하나를 준비하여 진행하였다.

360 X 480
24.65Fps
1.6Mb

 

 

해당 데이터를 불러오게 되면 다음과 같은 화면으로 실행되게 된다.


각 환경에 맞게 바로 세팅이 가능하며 해상도 및 자막 오디오 등 세팅이 가능하다.
*프리셋도 존재하나 이 부분의 경우 필요에 따라 저장하고 사용하는 것을 추천한다.

 


비디오 부분에서 화질(퀄리티)를 조정할 수 있으며, 사용해본 경과 25정도의 퀄리티면 준수한 압축을 이끌어 낼 수 있다.

 

중요

 

핸드브레이커에서는 자막을 자동으로 생성하는 불필요한 기능을 가지고 있다.

그렇기에 인코딩을 진행하기 전 이부분은 삭제하여 진행하는 것을 추천한다.

 

테스트로 진행한 영상을 인코딩할 경우 다음과 같이 인코딩을 마칠 수 있다.

*이미지를 참고할경우 비트레이트와 프레임이 조절된 것을 확인 할 수 있으나 눈에 띌정도로 화질 저하가 발생하지 않은 것을 확인 할 수 있다.

 

 

1.6Mb 357Kb

 

마치며

핸드브레이커를 사용하게되면 비트레이트와 프레임 수정을 통해 인코딩을 진행할 수 있으며,
Unity, Unreal과 같이 툴 자채에서 GPU로 보내기 위해 컴프레스를 진행하는 방식 외에

Web 콘텐츠에서 우수한 수준으로 최적화를 진행 할 수 있다.
*특히 일러스트와 같이 벡터를 사용한 영상콘텐츠의 경우 압도적인 용량 압축을 이뤄낼 수 있다.

 

 



영상디자이너 또는 디자이너라면 영상 확장자에 대한 고민이 존재할 것이다.

제작된 영상의 퀄리티를 최대한으로 노출시키고 싶은 욕구는 충만하지만

 

각 플랫폼 및 디바이스의 환경 및 스트리밍에 따라 여러 확장자를 사용할 수 있으며

크게 사용하는 확장자의 경우 3가지의 포맷이 존재한다.

 

MP4, MOV, WebP, WebM

 

이러한 영상 확장자의 경우 경우 여러 이미지를 각 Frame 에 맞춰 초당 이미지를 순차적으로 재생하며

음성과 같이 이것을 사용자에게 노출하는 파일을 일컬어 영상 파일이라 말하며

 

영상 파일을 만들기 위해서는 컨테이너코덱이라는 것이 필요하다.

 

1. 동영상 확장자 컨테이너

컨테이너 포맷이란 비디오 및 오디오 데이터를 하나이상 가지고 있는 것을 컨테이너 포맷 또는 래퍼 포맷이라 지칭한다.

*단 음성만 존재할 경우 동영상 확장자로 사용할 수는 있으나 불필요한 이미지 데이터를 가지고 있게되어 Mp3, WMV와 같은 확장자로 저장하여 사용하는 것이 정신건강에 이롭다.

 

출처 : https://bradbury.tistory.com/211


비디오 및 오디오 스트림을 가진 데이터를 컨테이너가 감싸고 이를 코댁으로 가공하여 데이터를 활용한다.

2. 코덱

코댁은 인코더와 디코더의 앞글자를 딴 합성어로 압축하고 복원하는 역활을 하며

손실압축과 무손실 압축을 일반적으로 사용한다.

 

이를 통해 어떠한 알고리즘을 사용하느냐에 따라 압축정도와 손실정도의 차이를 가지게 되며,

최종으로 나가야되는 환경에 따라 선택하여 사용하게 된다.

 

3. 컨테이너와 코덱

크게 보았을때 각 컨테이너마다 지원되는 코덱의 종류가 다르며 사용하는 플레이어에 따라 재생이 불가한 경우도 있다. 
*과거에는 이러한 문제로 인해 통합코덱이라는 불필요한 데이터를 다운받아 사용하는 경우도 있었다.

 

출처 : https://www.w3.org/



 

 

 

다운로드

스마트 메터리얼의 경우 HNINE에서 빠른 에셋 작업을 위해 제작한 메터리얼이며,
서브스텐스 페인터 18년도 버전에서 제작된 메터리얼 입니다.

 

AO와 각종 Position Map을 활용하여 오브젝트의 그림자 및 노멀의 디테일을 올려주는 메터리얼이며,
사용자의 편의에 맞게 수정하며 사용하는 것을 권고드립니다.

 

사용법

1. Mesh Map에 베이킹이 되어있어야 됩니다.
2. Smart materials 항목에서 ## H9_Detail_master_JY를 검색 및 Layer에 추가
3. 각 Fill 레이어를 확인하며 디테일한 수치값 조절
*디테일 이란 오파시티, 블러, 레벨의 벨류값

Unity Game Viewer에서 프레임을 체크할 수 있는 코드이다.

단점으로는 실제 빌드를 하였을때와 에디터 상에서 프레임의 차이가 발생되는 문제가 있으며,

단순하게 에디터 상에서 확인하기에는 이만한 친구가 없다.

* 해당 코드의 경우 구글링을 통해서 습득한 코드이기 때문에 최초 작성자는 알 수 없다.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class FrameChecker : MonoBehaviour
{
    [Range(1, 200)]
    public int fFont_Size;
    [Range(0, 1080)]
    public float xPos;
    [Range(0, 2400)]
    public float yPos;
    [Range(0, 1)]
    public float Red, Green, Blue;

    float deltaTime = 0.0f;

    private void Start()
    {
       
    }

    void Update()
    {
        deltaTime += (Time.unscaledDeltaTime - deltaTime) * 0.1f;
    }

    void OnGUI()
    {
        int w = Screen.width, h = Screen.height;

        GUIStyle style = new GUIStyle();

        Rect rect = new Rect(xPos, yPos, w / 2, h * 2 / 100);
        style.alignment = TextAnchor.UpperLeft;
        style.fontSize = h * 2 / fFont_Size;
        style.normal.textColor = new Color(Red, Green, Blue, 1.0f);
        float msec = deltaTime * 1000.0f;
        float fps = 1.0f / deltaTime;
        string text = string.Format("{0:0.0} ms ({1:0.} fps)", msec, fps);
        GUI.Label(rect, text, style);
    }
}

'Unity > Script' 카테고리의 다른 글

[Unity] Frame Checker On Editor  (0) 2024.06.18
[Unity] Camare Position Move v1.0  (1) 2024.06.18

+ Recent posts