Unity WebGL에서 투명(HTML 배경 표시)

전치

정보가 적고, 일본어 참고 사이트가 발견되지 않고,,, 고생했기 때문에,,,

참고 사이트 등

트위터 기사
※굉장히 도와 주셨습니다! ! ! ! ! ! ! ! !

Unity Forums 기사

Unity Support 기사

전제 조건

Unity 2018.3.5f1 (64-bit)

jslib에 대해 설명하지 않음

WebGL을 표시하는 방법에 대한 설명은 없다

IIS에 빌드 결과를 배치하고 'Chrome'에서 표시 확인

사용 모델 검은 고양이 양품점 - 순열

절차

1. 새 프로젝트 만들기

"New"를 누르십시오.

Project name, Location에 임의의 값을 설정하고 Create project를 누르십시오.

2. 카메라 설정

항목 이름
변경 전
변경 후

Clear Flag
Skybox
Solid Color

배경
-
모든 RGBA 0

변경 전

변경 후

3. 폴더 만들기

Project 탭의 Assets에서 마우스 오른쪽 버튼을 클릭하고 Create -> Folder를 누릅니다.
다음 폴더를 만듭니다.

WebGLTemplates

Plugins

4. WebGL 출력용 템플릿 만들기

템플릿 복사

아래 디렉토리의 "Default"를 "Test"로 변경하여 복사
※디폴트는 「C:\Program Files」하하에 인스톨 되어 있을 것

Unity\Hub\Editor\2018.3.5f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates

표시 확인을 위해 'index.html' 수정

「index.html」에 다음을 추가

<style>
    body { background-color: #D0D0D0;}
</style>

변경 전

변경 후

5. Unity의 알파 버퍼 처리 재정의

WebGL API

"Plugins"에 "clear.jslib"라는 이름으로 파일 만들기

R, G, B, 알파 컴퍼넌트에의 기입 유무를 취득해,
배열이 「0001」로 취득할 수 있었을 경우, 처리를 스킵(투명 유지)

var LibraryGLClear = {
    glClear: function(mask)
    {
        if (mask == 0x00004000)
        {
            var v = GLctx.getParameter(GLctx.COLOR_WRITEMASK);
            if (!v[0] && !v[1] && !v[2] && v[3])
                // We are trying to clear alpha only -- skip.
                return;
        }
        GLctx.clear(mask);
    }
};
mergeInto(LibraryManager.library, LibraryGLClear);