WebGL에서 ELSL 쉐이더 디버깅

Question

WebGL의 인쇄 명령이나 그 기능을 지원하는 확장 프로그램이나 API를 지원하는 API가 있습니까?

Answer 1

GLSL을 단계별로 실행하려면 아무 것도 모른다. WebGL API 호출을 통해 단계별로 수행하려는 경우 WebGL inspector과 Web Tracing Framework 모두 해당 작업을 수행합니다.

GLSL의 경우 무엇이 있는지 잘 모릅니다. 일반적으로 GLSL을 디버그하려면 간단하게

1 단계 : 조각 쉐이더에서 단색을 출력합니다. 내가 가지 문제가 내 조각 쉐이더 나의 버텍스 쉐이더에서 가정 할 수있는 올바른 장소에서 화면에 빨간색이 표시되면

난 그냥 일반적으로 조각 쉐이더로 이동

gl_FragColor = vec4(1,0,0,1); 
return; 

를 추가합니다.

2 단계 : 나는 문제가 나는 다른 입력을 표시하는 시도 할 수있는 프래그먼트 쉐이더에서 생각하는 가정 데이터

의 각 부분을 표시합니다. 예 :

디스플레이 법선은

gl_FragColor = vec4(normal * 0.5 + 0.5, 1); 

디스플레이 일부 텍스처 좌표

gl_FragColor = vec4(texCoord, 0, 1); 

등 그때 내가 무엇을보고보고 그것이 내가 기대 일치하는지 확인. 조명이 있다면 건너 뛸 수도 있고 텍스처를 그릴 수도 있습니다. 텍스처가 비어 있다면 텍스처 설정 문제 일 수 있습니다. 질감이 맞다면 아마도 조명 문제 일 것입니다.

등 ...

3 단계 : 나는 문제가 아마 여전히 가능 간단한 일에 조각 쉐이더를 설정하려는 버텍스 쉐이더에서 생각한다면 버텍스 쉐이더를

을 간소화 할 수 있습니다. 어쩌면 단색이나 텍스처, 또는 법선 일 수도 있습니다. 그런 다음 버텍스 쉐이더에서 물건을 꺼내기 시작합니다. 위치를 통과 시키거나 법선이 없거나 다른 데이터를 전달하지 마십시오. 행렬 수학을하고 있습니까? 그것을 제거하고, 하나의 행렬을 전달하고, 내가 작동해야하는 것으로 화면에 무언가를 얻도록하십시오.