shaders.js

// © 2026 Epic Games, Inc. RealityScan® is a trademark of Epic Games, Inc.
// This tool is provided under the RealityScan End User License Agreement:
// https://www.realityscan.com/eula

// GLSL shaders for equirect -> perspective sampling.
//
// Pipeline per output pixel:
//   1. NDC (-1..+1) + tan(fov/2) -> camera-space ray
//   2. Apply per-face yaw/pitch rotation -> world-space ray
//   3. atan2/asin -> longitude (theta), latitude (phi)
//   4. Map to equirect UV: u = theta/(2*pi)+0.5, v = 0.5 - phi/pi
//   5. Sample with LINEAR filter (bilinear)

const VERT_SHADER = `#version 300 es
in vec2 a_pos;
out vec2 v_ndc;
void main() {
    v_ndc = a_pos;
    gl_Position = vec4(a_pos, 0.0, 1.0);
}
`;

const FRAG_SHADER = `#version 300 es
precision highp float;

uniform sampler2D u_equirect;
uniform float u_yaw;       // radians
uniform float u_pitch;     // radians
uniform float u_tanHalfFov;

in vec2 v_ndc;
out vec4 fragColor;

const float PI = 3.14159265358979323846;

void main() {
    // Camera-space ray. Output covers FOV horizontally; camera looks +Z, X right, Y up.
    // x_cam = u, y_cam = -v, z_cam = f, then divide by f equivalently
    // means dir = (ndc.x * tanHalf, ndc.y * tanHalf, 1).
    // Note: WebGL's clip-space Y points up, image-space Y points down. The usual
    // y_cam = -v flip (where v is image-y) is already handled here: v_ndc.y
    // points up (we draw a fullscreen quad with y in clip space), so we use it
    // directly without an extra flip.
    vec3 dir_cam = vec3(v_ndc.x * u_tanHalfFov, v_ndc.y * u_tanHalfFov, 1.0);

    // Apply pitch (around X), then yaw (around Y).
    float cp = cos(u_pitch), sp = sin(u_pitch);
    float cy = cos(u_yaw),   sy = sin(u_yaw);

    // After R_pitch: (x, cp*y - sp*z, sp*y + cp*z)
    float x1 = dir_cam.x;
    float y1 = cp * dir_cam.y - sp * dir_cam.z;
    float z1 = sp * dir_cam.y + cp * dir_cam.z;

    // After R_yaw: (cy*x + sy*z, y, -sy*x + cy*z)
    float xw = cy * x1 + sy * z1;
    float yw = y1;
    float zw = -sy * x1 + cy * z1;

    // Spherical
    float theta = atan(xw, zw);                    // longitude, [-pi, pi]
    float r = length(vec3(xw, yw, zw));
    float phi = asin(clamp(yw / r, -1.0, 1.0));    // latitude, [-pi/2, pi/2]

    // Equirect UV. u wraps via REPEAT, v clamps via CLAMP_TO_EDGE (set on texture).
    float u = theta / (2.0 * PI) + 0.5;
    float v = 0.5 - phi / PI;

    fragColor = texture(u_equirect, vec2(u, v));
}
`;