컬러 디버그

수치를 색으로서 출력하는 것으로, 간단하게 싹둑 상태를 확인할 수 있는 상처 수단입니다만, 0.0 ~ 1.0의 범위에서밖에 보이지 않기 때문에 주의가 필요합니다. 예를 들어, 음수 또는 1.0보다 큰 숫자를 인식할 수 없습니다. 또, 부동 소수점의 정밀도 떨어짐도 판별하기 어렵습니다.

아래의 예에서는 반경 1의 원의 거리 필드를 묘화하고 있습니다만 원의 외주는 0이 아니고

precision mediump float;
uniform vec2  m;       // mouse
uniform float t;       // time
uniform vec2  r;       // resolution
uniform sampler2D smp; // prev scene

void main(void){
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    float l= 1.-length(p);
    gl_FragColor = vec4(vec3(l), 1.0);
}

출력값을 마이너스로 해 출력하면 마이너스의 영역이 보입니다.

    gl_FragColor = vec4(vec3(-l), 1.0);

반경 1의 원의 거리 필드를 그리는 것만으로 끝나면 문제 없습니다만, 이 후에 복수의 도형을 합성하는 경우에는, 이 마이너스치가 크게 영향을 줍니다. 색 디버그로 정상인 것 같아서 힘들어요. 색상 디버깅으로 정상적으로 보이는데 문제가 해결되지 않으면 마이너스 값이나 1 이상의 값을 의심해 봅시다. 출력값을 마이너스로 해 확인하는 주제를 붙여 두면 좋다고 생각합니다. 또는 아래와 같이 빨간색을 플러스 영역, 녹색을 마이너스 영역으로 나누어 표시하는 방법도 추천합니다.

    gl_FragColor = vec4(vec3(l,-l,0.), 1.0);

참고, 1 이상의 값을 분홍색으로 흔들어진 버전

    float l= 1.5-length(p);
        vec3 color = vec3(-l,max(l-1.,0.),l*step(l,1.));
    gl_FragColor = vec4(color 1.0);

glsl로 print 디버깅

glsl에서 비트맵 데이터로 숫자를 만들고 숫자를 확인하는 방법입니다.

htp : // js. 아니 t/cx20/아 mgk

소수점 이하의 수치를 확인하는데 매우 편리합니다.

플롯 함수

float plot(vec2 p, float v){
  return  smoothstep( v-0.02, v, p.y) -
          smoothstep( v, v+0.02, p.y);
}

그래프화하여 함수 등을 시각화합니다.

glsl 디버그

각종 브라우저용 디버커의 확장을 넣으면 쓸 수 있습니다.

WebGL Inspector

Shader Editor

소스 레벨 디버커

실시간으로 값을 확인하고 싶다면 이것으로 할 수 있습니다.
Windows Linux용으로 소스 컴파일이 필요합니다.

ht tp // glsl-에서 부푼 r. 기주 b. 이오/

참고

쉐이더 에디터를 이용해 셰이더를 실시간 디버깅하고 싶은 것이 어쩌면 있을지도 모르는 사람을 위한 쓸데없이 긴 문장

WebGL 개발 및 디버깅에 편리한 브라우저 확장 기능을 사용해 봅시다.