More 3D debuging widgets

[patriciogonzalezvivo]

Adding:

• little edit for 3D points to flip the coord system (not sure what's going on there)
• 2D lines
• 3D axis

How to test?

Mesh:

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D   u_scene;

uniform mat4        u_viewMatrix;
uniform mat4        u_modelMatrix;
uniform mat4        u_projectionMatrix;

uniform vec3        u_camera;
uniform vec3        u_light;

uniform samplerCube u_cubeMap;
uniform vec3        u_SH[9];

#ifdef LIGHT_SHADOWMAP
uniform sampler2D   u_lightShadowMap;
uniform mat4        u_lightMatrix;
varying vec4        v_lightCoord;
#endif

uniform vec2        u_resolution;
uniform vec2        u_mouse;
uniform float       u_time;

varying vec4        v_position;
varying vec4        v_color;
varying vec3        v_normal;

#ifdef MODEL_VERTEX_TEXCOORD
varying vec2        v_texcoord;
#endif

#define SURFACE_POSITION    v_position
#define CAMERA_POSITION     u_camera

#define LIGHT_DIRECTION     u_light
#define LIGHT_COORD         v_lightCoord

#define DIGITS_SIZE vec2(.015)
#define PIXEL_SIZE vec2(0.005)
#define PIXEL_KERNEL_SIZE 14

#include "lygia/lighting/material/new.glsl"
#include "lygia/lighting/pbrLittle.glsl"

#include "lygia/space/ratio.glsl"
#include "lygia/draw/matrix.glsl"

#include "lygia/draw/colorPicker.glsl"
#include "lygia/draw/point.glsl"
#include "lygia/draw/axis.glsl"

void main(void) {
    vec4 color = vec4(0.0, 0.0, 0.0, 1.0);
    vec2 pixel = 1.0/u_resolution;
    vec2 st = gl_FragCoord.xy * pixel;
    vec2 uv = ratio(st, u_resolution);
    vec2 mouse = u_mouse * pixel;
    
    #if defined(POSTPROCESSING)

    color = texture2D(u_scene, st);

    vec4 debug = vec4(0.0);
    // debug += colorPicker(u_scene, mouse, u_resolution, uv - ratio(mouse, u_resolution));

    mat4 M = u_projectionMatrix * u_viewMatrix;

    vec3 c = vec3(0.0);
    vec3 r = vec3(1.0, 0.0, 0.0);
    vec3 g = vec3(0.0, 1.0, 0.0);
    vec3 b = vec3(0.0, 0.0, 1.0);

    debug += axis(uv, M, c, max(pixel.x, pixel.y));
    debug += point(uv, M, r);
    debug += point(uv, M, g);
    debug += point(uv, M, b);

    color = mix(color, debug, debug.a);

    #else

    // Draw the scene
    Material material = materialNew();
    color = pbrLittle(material);
    color = linear2gamma(color);

    #endif

    gl_FragColor = color;
}

---

Raymarching:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec3        u_camera;
uniform vec3        u_light;
uniform vec3        u_lightColor;

uniform vec2        u_resolution;
uniform vec2        u_mouse;


// SPACE
#define LOOK_AT_RIGHT_HANDED
#define LIGHT_DIRECTION     u_light
#define RESOLUTION          u_resolution
#define LIGHT_COLOR         vec3(0.95, 0.65, 0.5)
#define RAYMARCH_AMBIENT    vec3(0.7, 0.9, 1.0)
#define RAYMARCH_BACKGROUND (RAYMARCH_AMBIENT + rayDirection.y * 0.8)
#define DEBUG_FLIPPED_SPACE

#define PYRAMID_POS         vec3(2.0, 0.10, 2.0)
#define CONE_POS            vec3(0.0, 0.75, -2.0)

#include "lygia/space/ratio.glsl"
#include "lygia/draw/matrix.glsl"
#include "lygia/draw/point.glsl"
#include "lygia/draw/axis.glsl"
#include "lygia/space/perspective.glsl"
#include "lygia/math/inverse.glsl"
#include "lygia/math/transpose.glsl"
#include "lygia/sdf.glsl"
#include "lygia/lighting/raymarch.glsl"
#include "lygia/color/space/linear2gamma.glsl"

float checkBoard(vec2 uv, vec2 _scale) {
    uv = floor(fract(uv * _scale) * 2.0);
    return saturate(min(1.0, uv.x + uv.y) - (uv.x * uv.y));
}

Material raymarchMap( in vec3 pos ) {
    float check = 0.5 + checkBoard(pos.xz, vec2(1.0, 1.0)) * 0.5;
    Material res = materialNew(vec3(check), 0.0, 0.5, planeSDF(pos));

    res = opUnion( res, materialNew( vec3(1.0, 1.0, 1.0), 1.0, 0.0, sphereSDF(   pos-vec3( 0.0, 0.60, 0.0), 0.5 ) ) );
    res = opUnion( res, materialNew( vec3(0.0, 1.0, 1.0), boxSDF(      pos-vec3( 2.0, 0.5, 0.0), vec3(0.4, 0.4, 0.4) ) ) );
    res = opUnion( res, materialNew( vec3(0.3, 0.3, 1.0), torusSDF(    pos-vec3( 0.0, 0.5, 2.0), vec2(0.4,0.1) ) ) );
    res = opUnion( res, materialNew( vec3(0.3, 0.1, 0.3), capsuleSDF(  pos,vec3(-2.3, 0.4,-0.2), vec3(-1.6,0.75,0.2), 0.2 ) ) );
    res = opUnion( res, materialNew( vec3(0.5, 0.3, 0.4), triPrismSDF( pos-vec3(-2.0, 0.50,-2.0), vec2(0.5,0.1) ) ) );
    res = opUnion( res, materialNew( vec3(0.2, 0.2, 0.8), cylinderSDF( pos-vec3( 2.0, 0.50,-2.0), vec2(0.2,0.4) ) ) );
    res = opUnion( res, materialNew( vec3(0.7, 0.5, 0.2), coneSDF(     pos-CONE_POS, vec3(0.8,0.6,0.6) ) ) );
    res = opUnion( res, materialNew( vec3(0.4, 0.2, 0.9), hexPrismSDF( pos-vec3(-2.0, 0.60, 2.0), vec2(0.5,0.1) ) ) );
    res = opUnion( res, materialNew( vec3(0.1, 0.3, 0.6), pyramidSDF(  pos-PYRAMID_POS, 1.0 ) ) );;

    return res;
}

void main() {
    vec3 color = vec3(0.0);
    vec2 pixel = 1.0/u_resolution;
    vec2 st = gl_FragCoord.xy * pixel;
    vec2 uv = ratio(st, u_resolution);
    vec2 mouse = ratio(u_mouse * pixel, u_resolution);

    mat4 viewMatrix = lookAtView(u_camera, vec3(0.0));

    color = raymarch(viewMatrix, uv).rgb;
    color = linear2gamma(color);

    vec4 debug = vec4(0.0);

    // matrix
    debug += matrix(uv - vec2(0.26, .05), viewMatrix);

    // 3d points
    mat4 M = perspective(1.05, 1.0, -1.0, 1.0) * inverse(viewMatrix);
    debug += point(uv, M, PYRAMID_POS + vec3(0.0, 1.0, 0.0));
    debug += point(uv, M, CONE_POS);
    debug += axis(uv, M, vec3(0.0), max(pixel.x, pixel.y));

    // 2d point
    debug += point(uv, mouse);

    color.rgb = mix(saturate(color.rgb), debug.rgb, debug.a);

    gl_FragColor = vec4( color, 1.0 );
}

[patriciogonzalezvivo]

@shadielhajj do you mind giving it a look?

[shadielhajj]

@patriciogonzalezvivo I did, but I couldn't find the issue. I guess it needs a more thorough investigation at some point. Shall we merge it and come back to it later?

[patriciogonzalezvivo]

There is an issue?

I'm all for merging. Just waiting for your approval

[patriciogonzalezvivo]

Maybe it got confuse with the previous PR #231