main.js

import {
  imageDitheringFragmentShader,
  getShaderColorFromString
} from 'https://esm.sh/@paper-design/shaders';

// DOM elements
const canvas = document.getElementById('canvas');
const video = document.getElementById('video');
const playBtn = document.getElementById('play-btn');
const pauseBtn = document.getElementById('pause-btn');
const fileInput = document.getElementById('file-input');

// Canvas setup
canvas.width = 640;
canvas.height = 360;

// WebGL2 context
const gl = canvas.getContext('webgl2');
if (!gl) {
  alert('WebGL2 not supported');
  throw new Error('WebGL2 not supported');
}

// Vertex shader for full-screen quad
const vertexShaderSource = `#version 300 es
  in vec2 a_position;
  out vec2 v_uv;
  void main() {
    v_uv = a_position * 0.5 + 0.5;
    gl_Position = vec4(a_position, 0.0, 1.0);
  }
`;

/**
 * Create and compile a shader
 */
function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error('Shader compile error:', gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
  return shader;
}

/**
 * Create and link a shader program
 */
function createProgram(gl, vertexShader, fragmentShader) {
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error('Program link error:', gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
    return null;
  }
  return program;
}

// Create shaders and program
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, imageDitheringFragmentShader);
const program = createProgram(gl, vertexShader, fragmentShader);

if (!program) {
  throw new Error('Failed to create shader program');
}

// Setup geometry (full-screen quad)
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  -1, -1,
   1, -1,
  -1,  1,
  -1,  1,
   1, -1,
   1,  1,
]), gl.STATIC_DRAW);

const positionLoc = gl.getAttribLocation(program, 'a_position');

// Create video texture
const videoTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, videoTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 255]));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Get uniform locations
gl.useProgram(program);
const uniforms = {
  // Sizing/Transform
  u_resolution: gl.getUniformLocation(program, 'u_resolution'),
  u_pixelRatio: gl.getUniformLocation(program, 'u_pixelRatio'),
  u_originX: gl.getUniformLocation(program, 'u_originX'),
  u_originY: gl.getUniformLocation(program, 'u_originY'),
  u_worldWidth: gl.getUniformLocation(program, 'u_worldWidth'),
  u_worldHeight: gl.getUniformLocation(program, 'u_worldHeight'),
  u_fit: gl.getUniformLocation(program, 'u_fit'),
  u_scale: gl.getUniformLocation(program, 'u_scale'),
  u_rotation: gl.getUniformLocation(program, 'u_rotation'),
  u_offsetX: gl.getUniformLocation(program, 'u_offsetX'),
  u_offsetY: gl.getUniformLocation(program, 'u_offsetY'),
  // Image
  u_image: gl.getUniformLocation(program, 'u_image'),
  u_imageAspectRatio: gl.getUniformLocation(program, 'u_imageAspectRatio'),
  // Colors
  u_colorFront: gl.getUniformLocation(program, 'u_colorFront'),
  u_colorBack: gl.getUniformLocation(program, 'u_colorBack'),
  u_colorHighlight: gl.getUniformLocation(program, 'u_colorHighlight'),
  // Dithering
  u_type: gl.getUniformLocation(program, 'u_type'),
  u_pxSize: gl.getUniformLocation(program, 'u_pxSize'),
  u_colorSteps: gl.getUniformLocation(program, 'u_colorSteps'),
  u_originalColors: gl.getUniformLocation(program, 'u_originalColors'),
  u_inverted: gl.getUniformLocation(program, 'u_inverted'),
};

// Dithering colors
const colorFront = getShaderColorFromString('#94ffaf');
const colorBack = getShaderColorFromString('#000c38');
const colorHighlight = getShaderColorFromString('#eaff94');

let animationId = null;

/**
 * Main render loop
 */
function render() {
  // Update video texture if video has data
  if (video.readyState >= video.HAVE_CURRENT_DATA) {
    gl.bindTexture(gl.TEXTURE_2D, videoTexture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
  }

  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.useProgram(program);

  const videoAspect = (video.videoWidth || 640) / (video.videoHeight || 360);

  // Set uniforms
  gl.uniform2f(uniforms.u_resolution, canvas.width, canvas.height);
  gl.uniform1f(uniforms.u_pixelRatio, window.devicePixelRatio || 1);
  gl.uniform1f(uniforms.u_originX, 0.5);
  gl.uniform1f(uniforms.u_originY, 0.5);
  gl.uniform1f(uniforms.u_worldWidth, canvas.width);
  gl.uniform1f(uniforms.u_worldHeight, canvas.height);
  gl.uniform1f(uniforms.u_fit, 2.0); // cover
  gl.uniform1f(uniforms.u_scale, 1.0);
  gl.uniform1f(uniforms.u_rotation, 0.0);
  gl.uniform1f(uniforms.u_offsetX, 0.0);
  gl.uniform1f(uniforms.u_offsetY, 0.0);

  // Image
  gl.uniform1i(uniforms.u_image, 0);
  gl.uniform1f(uniforms.u_imageAspectRatio, videoAspect);

  // Colors
  gl.uniform4fv(uniforms.u_colorFront, colorFront);
  gl.uniform4fv(uniforms.u_colorBack, colorBack);
  gl.uniform4fv(uniforms.u_colorHighlight, colorHighlight);

  // Dithering
  gl.uniform1f(uniforms.u_type, 4.0); // 8x8 dithering
  gl.uniform1f(uniforms.u_pxSize, 2.0);
  gl.uniform1f(uniforms.u_colorSteps, 2.0);
  gl.uniform1i(uniforms.u_originalColors, 0);
  gl.uniform1i(uniforms.u_inverted, 0);

  // Bind texture
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, videoTexture);

  // Draw
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.enableVertexAttribArray(positionLoc);
  gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
  gl.drawArrays(gl.TRIANGLES, 0, 6);

  animationId = requestAnimationFrame(render);
}

/**
 * Setup video source and event handlers
 */
function setupVideo(src) {
  video.src = src;
  video.load();

  video.onloadedmetadata = () => {
    console.log('Video metadata loaded:', video.videoWidth, 'x', video.videoHeight);
    video.play().catch(e => console.log('Autoplay blocked:', e));
  };

  video.onplay = () => {
    console.log('Video playing, starting render loop');
    if (!animationId) {
      render();
    }
  };

  video.onerror = (e) => {
    console.error('Video error:', e);
  };
}

// Default sample video
const sampleVideo = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
setupVideo(sampleVideo);

// Controls
playBtn.onclick = () => video.play();
pauseBtn.onclick = () => video.pause();

// File upload
fileInput.onchange = (e) => {
  const file = e.target.files[0];
  if (file) {
    const url = URL.createObjectURL(file);
    setupVideo(url);
  }
};