소개

Safari 12에서 WebGL Shader Debugging이라는 기능이 추가 된 것 같습니다.

공식 페이지 아래로 이동하면 ....

이렇게 썼는데

우선 사용해 보자

Developper Tools를 열면 Canvas 탭이 있습니다.

이것을 클릭하면 사용할 수있는 것 같습니다.

Shadertoy 보았다.

이런 느낌이 들고 있습니다 (오른쪽)
이 이미지의 Canvas 2는 주요 Canvas이고 다른 텍스처는 Canvas입니다.
이것입니다


우선 canvas 2를 클릭합니다.
그러면 이런 느낌이 듭니다.

왼쪽은 WebGLContext에 연결된 프로그램입니다.
오른쪽에서는 사용 메모리라든지 속성의 onoff, 사용하고 있는 확장 기능을 볼 수 있는 것 같습니다

왼쪽 프로그램을 클릭하십시오.

glsl의 코드를 볼 수있는 것 같습니다.
실제로 ShaderToy는 결국 이런 식으로 실행하고 있습니다.

코드 만지면 실시간으로 그리기 결과도 바뀝니다.
라이브 프로그래밍 가능
놀라운

왼쪽 상단의 빨간색 원을 클릭하면,



어쨌든 녹화와 같은 일이 이루어집니다.



처리가 끝나면 이와 같은 상태가 되어, 1 프레임마다의 화상을 볼 수 있는 것 같습니다
그리고 예를 들어 프레임 1을 클릭하면



이렇게
즉, 그 프레임시에 무엇이 어떤 순서로 실행되고 있어, glsl측에 구체적으로 어떤 값이 보내지고 있는지 볼 수 있네요

소감

WebGL의 디버그 툴은 지금까지 사용하지 않고 개발했지만, 브라우저의 표준으로 제공되는 것이 굉장히 좋네요, 사용해 가려고 생각합니다