webgl debugutill webgl inspector webgl디버거!!!! isntall 및 사용법

웹지엘 인스펙터

 

대부분 javascript 개발자들은 크롬 개발자 도구를 이용하여 개발을 진행한다.

 

그러나 이러한 일반적인 도구들은 일반적인 웹 개발에 적합하고, 웹지엘에 특화되어있지는 않다.

 

웹지엘을 위해 특별히 제작된 도구가 바로 웹지엘 인스펙터이다. 이것은 Direct3D의 PIX나 오픈지엘의 gDEBugger와

비슷한 기능을 제공하는 웹지엘 디버거다.

 

 

benvanik.github.io/WebGL-Inspector/

WebGL Inspector

들어가서 

설치한후 알집을 푼다.

 

알집을 풀고 난후 core폴더에 buildextensions.sh를 실행시켜준다.

 

그후 자신이 debuger 하고싶은 webgl script에 경로를 맞추어 삽입해주면

 

<script> var gliEmbedDebug = true; </script> 
<script src = "../../core/embed.js"> </script>

 

아래와 같은 화면이나오고 capture를 클릭하면 웹지엘 애플리케이션의 하나의 프레임이 기록되며, 프레임이 기록되고 나면, 웹지엘 인스펙터를 이용해 웹지엘 애플리케이션을 디버깅하여 유용한 정보를 살펴볼수있따.

 

웹지엘 인스펙터는 6개의 툴바 아이템을 가지고있다.

-트레이스

-타임라인

-스테이트

-텍스처

-버퍼

-프로그램

 

 

6개의 툴바아이템중 유용하게 자주쓰이는 기능을 설명한다.

 

1.트레이스 패널

  트레이스 패널은 프레임을 캡처하는 동안 기록되는 모든 웹지엘 호출을 보여준다. 그리고 기록된 명령어를 따라 하나씩 직접 실행해 볼수있다.

 

f8:소스 코드 한 단계 전지

f9: 기록된 모든 장면을 재성

f6:하나의 호출을 취소

f7:다음호출 생략

f10:프레임이의 처음부터 다시시작

 

트레이스 패널은 웹지엘 애플리케이션이 특정 버퍼에 바인딩되거나 셰이더 프로그램을 로드하는 순간을 기록해 보여준다.

 

버퍼나 셰이더 프로그램을 클릭하면, 클릭한 아이템에 대한 상세한 정보를 가지는 새로운 패널을 보여준다.

 

트레이스 패널이 특히 유용한것은 여분의 호출을 강조해준다는 점이다. 여분의 호출은 호출이 되더라도 웹지엘의 특정 상태 변화를 일으키지 않는 호출을 의미한다.

 

예를들어 유니폼을 기존 값과 동일하게 세팅허나느 것 등이 트레이스 패널상에서 강조된다. 웹지엘 애플리케이션의 성능을 최적화 할 필요가 있을 때먄, 이러한 여분의 호출 제거해 성능을 향상시키자.

 

2.타임라인 패널

웹지엘 애플리케이션의 실시간 통계치를 보여준다

 

3.스테이트 패널

스테이트 패널은 웹지엘 애플리케이션 특정 상태의 정보를 담고 있는 스냅샷을 보여준다.

 

4.텍스처 패널

텍스처 패널은 웹지엘 애플리케이션에서 사용하는 텍스처에 대한 유용한 정보를 다양하게 보여준다.

 

텍스처로 설정한 이미지와 해당 텍스처가 2D 텍스처인지 큐브맵텍스처인지도 구분할수 있는 정보가 제공된다.

 

또한 텍스처 랩모드,텍스처 필터링,그리고 어느 주소로부터 텍스처를 로드했는지도 보여준다.

 

 

5.버퍼 패널

여러 버퍼에 대한 정보를 보여주며, 어디에 바인딩 되었는지에 대한 정보를 포함한다.

 

6.프로그램 패널

모든 셰이더 프로그램에 대한 정보를 보여준다.