8dd58bb293
Projection mapping editable desde el navegador, sin herramientas externas: - web/stage/mapper.js (nuevo): compositor WebGL que texturiza el motor activo sobre superficies deformables (homografia por vertice: keystone correcto). - Editor con raton en el escenario (crear, arrastrar esquinas, mover, borrar) y previsualizacion arrastrable en el panel (raton/tactil) para editar desde el movil sin tocar la ventana de visuales. - Backend: estado "mapping" + evento set_mapping, persistido en data/mapping.json (ignorado en git). Seccion "Mapping" en el panel + texto de ayuda. - Solo motores web (butterchurn/hydra/shaders/mixer); projectM no se mapea. - .gitignore: excluye config de runtime (mapping.json, pm-favoritos.json). Incluye ademas trabajo en curso previo sin commitear (server.py, stage.js, panel.js/css, ayuda.json, hydra-sketches.json, problemas.md, start-projectm.sh), subido junto a peticion del autor. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
396 lines
14 KiB
JavaScript
396 lines
14 KiB
JavaScript
/*
|
|
* FOSFENO :: Mapper (projection mapping en el navegador)
|
|
* --------------------------------------------------------------------------
|
|
* Coge el canvas del motor activo (butterchurn/hydra/shaders/mixer) como
|
|
* TEXTURA y lo pinta deformado sobre una o varias SUPERFICIES (cuadriláteros)
|
|
* en un canvas WebGL a pantalla completa (#output). Cada superficie se ajusta
|
|
* con el ratón: crear, arrastrar esquinas, mover, borrar. La geometría se
|
|
* guarda en el servidor (data/mapping.json) y se sincroniza por WebSocket.
|
|
*
|
|
* Deformación: homografía "cuadrado unidad -> cuadrilátero" (Heckbert),
|
|
* evaluada por vértice sobre una malla subdividida => keystone/perspectiva
|
|
* correctos. La base ya sirve para crecer a malla curva y máscaras.
|
|
*
|
|
* API global (la usa stage.js):
|
|
* FosMapper.init({ onChange }) arranca (crea contextos y el bucle)
|
|
* FosMapper.setSource(canvas) canvas del motor activo (o null)
|
|
* FosMapper.setMapping(m) { enabled, edit, surfaces:[{id,corners}] }
|
|
* onChange(surfaces) se llama al editar (arrastrar) para guardar
|
|
*
|
|
* corners = [ [x,y] x4 ] en 0..1 (TL, TR, BR, BL), origen arriba-izquierda.
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
|
|
const GRID = 12; // subdivisiones de la malla (perspectiva suave)
|
|
const HANDLE = 11; // radio del tirador de esquina (px CSS)
|
|
|
|
const M = { enabled: false, edit: false, surfaces: [] };
|
|
let source = null; // canvas del motor activo
|
|
let onChange = null;
|
|
|
|
let outputEl, editEl, gl, ectx;
|
|
let prog, aUV, uH, uTex, tex, quadBuf, idxBuf, idxCount;
|
|
let dpr = 1;
|
|
|
|
// interacción
|
|
let selected = null; // id de superficie seleccionada
|
|
let drag = null; // { id, corner|null, startX, startY, orig }
|
|
let dragged = false; // hubo movimiento real (para no emitir de más)
|
|
|
|
// ------------------------------------------------------------------ utils
|
|
const clamp01 = (v) => (v < 0 ? 0 : v > 1 ? 1 : v);
|
|
|
|
function defaultSurface(cx, cy, s) {
|
|
// cuadrilátero centrado en (cx,cy) de semilado s (en 0..1)
|
|
cx = cx == null ? 0.5 : cx;
|
|
cy = cy == null ? 0.5 : cy;
|
|
s = s == null ? 0.28 : s;
|
|
return {
|
|
id: 's' + Math.floor(performance.now()) + '_' + Math.floor(Math.random() * 1e4),
|
|
corners: [
|
|
[clamp01(cx - s), clamp01(cy - s)],
|
|
[clamp01(cx + s), clamp01(cy - s)],
|
|
[clamp01(cx + s), clamp01(cy + s)],
|
|
[clamp01(cx - s), clamp01(cy + s)],
|
|
],
|
|
};
|
|
}
|
|
|
|
// Homografía cuadrado unidad -> cuadrilátero (corners TL,TR,BR,BL, y hacia
|
|
// abajo). Devuelve mat3 en orden por columnas para WebGL. (Heckbert 1989)
|
|
function squareToQuad(c) {
|
|
const x0 = c[0][0], y0 = c[0][1];
|
|
const x1 = c[1][0], y1 = c[1][1];
|
|
const x2 = c[2][0], y2 = c[2][1];
|
|
const x3 = c[3][0], y3 = c[3][1];
|
|
const dx1 = x1 - x2, dx2 = x3 - x2, dx3 = x0 - x1 + x2 - x3;
|
|
const dy1 = y1 - y2, dy2 = y3 - y2, dy3 = y0 - y1 + y2 - y3;
|
|
let a, b, cc, d, e, f, g, h;
|
|
if (Math.abs(dx3) < 1e-9 && Math.abs(dy3) < 1e-9) {
|
|
a = x1 - x0; b = x2 - x1; cc = x0;
|
|
d = y1 - y0; e = y2 - y1; f = y0;
|
|
g = 0; h = 0;
|
|
} else {
|
|
const den = dx1 * dy2 - dy1 * dx2 || 1e-9;
|
|
g = (dx3 * dy2 - dy3 * dx2) / den;
|
|
h = (dx1 * dy3 - dy1 * dx3) / den;
|
|
a = x1 - x0 + g * x1; b = x3 - x0 + h * x3; cc = x0;
|
|
d = y1 - y0 + g * y1; e = y3 - y0 + h * y3; f = y0;
|
|
}
|
|
// columnas: col0=(a,d,g) col1=(b,e,h) col2=(cc,f,1)
|
|
return new Float32Array([a, d, g, b, e, h, cc, f, 1]);
|
|
}
|
|
|
|
// ------------------------------------------------------------------ WebGL
|
|
function initGL() {
|
|
gl = outputEl.getContext('webgl', { alpha: false, antialias: true, premultipliedAlpha: false })
|
|
|| outputEl.getContext('experimental-webgl');
|
|
if (!gl) { console.error('[FOSFENO] mapper: sin WebGL'); return false; }
|
|
|
|
const vs = `
|
|
attribute vec2 aUV;
|
|
uniform mat3 uH;
|
|
varying vec2 vUV;
|
|
void main() {
|
|
vec3 p = uH * vec3(aUV, 1.0);
|
|
vec2 d = p.xy / p.z; // destino 0..1, y hacia abajo
|
|
gl_Position = vec4(d.x * 2.0 - 1.0, 1.0 - d.y * 2.0, 0.0, 1.0);
|
|
vUV = aUV;
|
|
}`;
|
|
const fs = `
|
|
precision mediump float;
|
|
varying vec2 vUV;
|
|
uniform sampler2D uTex;
|
|
void main() { gl_FragColor = texture2D(uTex, vUV); }`;
|
|
|
|
prog = link(vs, fs);
|
|
if (!prog) return false;
|
|
aUV = gl.getAttribLocation(prog, 'aUV');
|
|
uH = gl.getUniformLocation(prog, 'uH');
|
|
uTex = gl.getUniformLocation(prog, 'uTex');
|
|
|
|
// malla GRIDxGRID de vértices con uv en 0..1
|
|
const verts = [];
|
|
for (let j = 0; j <= GRID; j++)
|
|
for (let i = 0; i <= GRID; i++)
|
|
verts.push(i / GRID, j / GRID);
|
|
const idx = [];
|
|
const row = GRID + 1;
|
|
for (let j = 0; j < GRID; j++)
|
|
for (let i = 0; i < GRID; i++) {
|
|
const p = j * row + i;
|
|
idx.push(p, p + 1, p + row, p + 1, p + row + 1, p + row);
|
|
}
|
|
idxCount = idx.length;
|
|
|
|
quadBuf = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
|
|
idxBuf = gl.createBuffer();
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, idxBuf);
|
|
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(idx), gl.STATIC_DRAW);
|
|
|
|
tex = gl.createTexture();
|
|
gl.bindTexture(gl.TEXTURE_2D, tex);
|
|
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);
|
|
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
|
|
return true;
|
|
}
|
|
|
|
function link(vsSrc, fsSrc) {
|
|
const c = (t, s) => {
|
|
const sh = gl.createShader(t);
|
|
gl.shaderSource(sh, s); gl.compileShader(sh);
|
|
if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS))
|
|
console.error('[FOSFENO] mapper shader:', gl.getShaderInfoLog(sh));
|
|
return sh;
|
|
};
|
|
const p = gl.createProgram();
|
|
gl.attachShader(p, c(gl.VERTEX_SHADER, vsSrc));
|
|
gl.attachShader(p, c(gl.FRAGMENT_SHADER, fsSrc));
|
|
gl.linkProgram(p);
|
|
if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
|
|
console.error('[FOSFENO] mapper link:', gl.getProgramInfoLog(p));
|
|
return null;
|
|
}
|
|
return p;
|
|
}
|
|
|
|
function renderGL() {
|
|
gl.viewport(0, 0, outputEl.width, outputEl.height);
|
|
gl.clearColor(0, 0, 0, 1);
|
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
if (!source || !source.width) return;
|
|
|
|
// sube el frame actual del motor a la textura
|
|
gl.bindTexture(gl.TEXTURE_2D, tex);
|
|
try {
|
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
} catch (e) { return; }
|
|
|
|
gl.useProgram(prog);
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
|
|
gl.enableVertexAttribArray(aUV);
|
|
gl.vertexAttribPointer(aUV, 2, gl.FLOAT, false, 0, 0);
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, idxBuf);
|
|
gl.activeTexture(gl.TEXTURE0);
|
|
gl.bindTexture(gl.TEXTURE_2D, tex);
|
|
gl.uniform1i(uTex, 0);
|
|
|
|
const surfs = M.surfaces.length
|
|
? M.surfaces
|
|
: [{ corners: [[0, 0], [1, 0], [1, 1], [0, 1]] }]; // sin superficies: pasada directa
|
|
for (const s of surfs) {
|
|
gl.uniformMatrix3fv(uH, false, squareToQuad(s.corners));
|
|
gl.drawElements(gl.TRIANGLES, idxCount, gl.UNSIGNED_SHORT, 0);
|
|
}
|
|
}
|
|
|
|
// ------------------------------------------------------------------ editor
|
|
function drawEditor() {
|
|
const w = window.innerWidth, h = window.innerHeight;
|
|
ectx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
ectx.clearRect(0, 0, w, h);
|
|
ectx.font = '600 14px system-ui, sans-serif';
|
|
ectx.textAlign = 'center';
|
|
ectx.textBaseline = 'middle';
|
|
|
|
M.surfaces.forEach((s, i) => {
|
|
const pts = s.corners.map(([x, y]) => [x * w, y * h]);
|
|
const sel = s.id === selected;
|
|
// relleno + contorno
|
|
ectx.beginPath();
|
|
ectx.moveTo(pts[0][0], pts[0][1]);
|
|
for (let k = 1; k < 4; k++) ectx.lineTo(pts[k][0], pts[k][1]);
|
|
ectx.closePath();
|
|
ectx.fillStyle = sel ? 'rgba(0,229,255,0.12)' : 'rgba(180,255,0,0.06)';
|
|
ectx.fill();
|
|
ectx.lineWidth = sel ? 3 : 2;
|
|
ectx.strokeStyle = sel ? '#00e5ff' : '#b4ff00';
|
|
ectx.stroke();
|
|
// número de superficie en el centro
|
|
const cx = (pts[0][0] + pts[1][0] + pts[2][0] + pts[3][0]) / 4;
|
|
const cy = (pts[0][1] + pts[1][1] + pts[2][1] + pts[3][1]) / 4;
|
|
ectx.fillStyle = sel ? '#00e5ff' : 'rgba(180,255,0,0.85)';
|
|
ectx.fillText(String(i + 1), cx, cy);
|
|
// tiradores de esquina
|
|
pts.forEach(([px, py], ci) => {
|
|
ectx.beginPath();
|
|
ectx.arc(px, py, HANDLE, 0, Math.PI * 2);
|
|
ectx.fillStyle = sel ? '#00e5ff' : '#ffffff';
|
|
ectx.fill();
|
|
ectx.lineWidth = 2;
|
|
ectx.strokeStyle = '#000';
|
|
ectx.stroke();
|
|
void ci;
|
|
});
|
|
});
|
|
|
|
// ayuda
|
|
ectx.textAlign = 'left';
|
|
ectx.fillStyle = 'rgba(255,255,255,0.6)';
|
|
ectx.font = '13px system-ui, sans-serif';
|
|
ectx.fillText('MAPPING · arrastra esquinas · mueve dentro · doble clic: nueva · Supr: borrar', 16, h - 18);
|
|
}
|
|
|
|
function pick(mx, my) {
|
|
const w = window.innerWidth, h = window.innerHeight;
|
|
// primero esquinas (de la más reciente/encima hacia atrás)
|
|
for (let i = M.surfaces.length - 1; i >= 0; i--) {
|
|
const s = M.surfaces[i];
|
|
for (let c = 0; c < 4; c++) {
|
|
const px = s.corners[c][0] * w, py = s.corners[c][1] * h;
|
|
if (Math.hypot(mx - px, my - py) <= HANDLE + 6)
|
|
return { id: s.id, corner: c };
|
|
}
|
|
}
|
|
// luego interior de una superficie
|
|
for (let i = M.surfaces.length - 1; i >= 0; i--) {
|
|
const s = M.surfaces[i];
|
|
if (pointInQuad(mx / w, my / h, s.corners)) return { id: s.id, corner: null };
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function pointInQuad(x, y, c) {
|
|
let inside = false;
|
|
for (let i = 0, j = 3; i < 4; j = i++) {
|
|
const xi = c[i][0], yi = c[i][1], xj = c[j][0], yj = c[j][1];
|
|
if (((yi > y) !== (yj > y)) &&
|
|
(x < ((xj - xi) * (y - yi)) / ((yj - yi) || 1e-9) + xi)) inside = !inside;
|
|
}
|
|
return inside;
|
|
}
|
|
|
|
const surfaceById = (id) => M.surfaces.find((s) => s.id === id);
|
|
|
|
function onDown(ev) {
|
|
const mx = ev.clientX, my = ev.clientY;
|
|
const hit = pick(mx, my);
|
|
dragged = false;
|
|
if (!hit) { selected = null; drag = null; return; }
|
|
selected = hit.id;
|
|
const s = surfaceById(hit.id);
|
|
drag = {
|
|
id: hit.id, corner: hit.corner,
|
|
startX: mx, startY: my,
|
|
orig: s.corners.map((p) => p.slice()),
|
|
};
|
|
ev.preventDefault();
|
|
}
|
|
|
|
function onMove(ev) {
|
|
if (!drag) return;
|
|
const w = window.innerWidth, h = window.innerHeight;
|
|
const dx = (ev.clientX - drag.startX) / w;
|
|
const dy = (ev.clientY - drag.startY) / h;
|
|
if (Math.abs(ev.clientX - drag.startX) + Math.abs(ev.clientY - drag.startY) > 1) dragged = true;
|
|
const s = surfaceById(drag.id);
|
|
if (!s) return;
|
|
if (drag.corner == null) {
|
|
for (let c = 0; c < 4; c++) {
|
|
s.corners[c][0] = clamp01(drag.orig[c][0] + dx);
|
|
s.corners[c][1] = clamp01(drag.orig[c][1] + dy);
|
|
}
|
|
} else {
|
|
s.corners[drag.corner][0] = clamp01(drag.orig[drag.corner][0] + dx);
|
|
s.corners[drag.corner][1] = clamp01(drag.orig[drag.corner][1] + dy);
|
|
}
|
|
scheduleEmit();
|
|
}
|
|
|
|
function onUp() {
|
|
if (drag && dragged) emitNow();
|
|
drag = null;
|
|
}
|
|
|
|
function onDblClick(ev) {
|
|
const s = defaultSurface(ev.clientX / window.innerWidth, ev.clientY / window.innerHeight, 0.2);
|
|
M.surfaces.push(s);
|
|
selected = s.id;
|
|
emitNow();
|
|
}
|
|
|
|
function onKey(ev) {
|
|
if (!M.edit) return;
|
|
if ((ev.key === 'Delete' || ev.key === 'Backspace') && selected) {
|
|
M.surfaces = M.surfaces.filter((s) => s.id !== selected);
|
|
selected = null;
|
|
emitNow();
|
|
ev.preventDefault();
|
|
}
|
|
}
|
|
|
|
// emisión (throttle durante el arrastre, inmediata al soltar)
|
|
let emitTimer = null;
|
|
function scheduleEmit() {
|
|
if (emitTimer) return;
|
|
emitTimer = setTimeout(() => { emitTimer = null; emitNow(); }, 60);
|
|
}
|
|
function emitNow() {
|
|
if (emitTimer) { clearTimeout(emitTimer); emitTimer = null; }
|
|
if (onChange) onChange(M.surfaces.map((s) => ({ id: s.id, corners: s.corners })));
|
|
}
|
|
|
|
// ------------------------------------------------------------------ tamaños
|
|
function fit(el, wantGL) {
|
|
const w = Math.round(window.innerWidth * dpr);
|
|
const h = Math.round(window.innerHeight * dpr);
|
|
if (el.width !== w || el.height !== h) { el.width = w; el.height = h; }
|
|
void wantGL;
|
|
}
|
|
|
|
// ------------------------------------------------------------------ bucle
|
|
function loop() {
|
|
requestAnimationFrame(loop);
|
|
dpr = Math.min(2, window.devicePixelRatio || 1);
|
|
const editing = M.enabled && M.edit;
|
|
outputEl.style.display = M.enabled ? 'block' : 'none';
|
|
editEl.style.display = editing ? 'block' : 'none';
|
|
editEl.style.pointerEvents = editing ? 'auto' : 'none';
|
|
document.body.style.cursor = editing ? 'crosshair' : 'none';
|
|
if (!M.enabled) return;
|
|
fit(outputEl, true);
|
|
fit(editEl, false);
|
|
renderGL();
|
|
if (editing) drawEditor();
|
|
}
|
|
|
|
// ------------------------------------------------------------------ API
|
|
const API = {
|
|
init(opts) {
|
|
opts = opts || {};
|
|
onChange = opts.onChange || null;
|
|
outputEl = document.getElementById('output');
|
|
editEl = document.getElementById('mapedit');
|
|
if (!outputEl || !editEl) { console.error('[FOSFENO] mapper: faltan #output/#mapedit'); return; }
|
|
ectx = editEl.getContext('2d');
|
|
if (!initGL()) return;
|
|
editEl.addEventListener('mousedown', onDown);
|
|
window.addEventListener('mousemove', onMove);
|
|
window.addEventListener('mouseup', onUp);
|
|
editEl.addEventListener('dblclick', onDblClick);
|
|
window.addEventListener('keydown', onKey);
|
|
requestAnimationFrame(loop);
|
|
},
|
|
setSource(canvas) { source = canvas || null; },
|
|
setMapping(m) {
|
|
m = m || {};
|
|
M.enabled = !!m.enabled;
|
|
M.edit = !!m.edit;
|
|
// no piso la geometría mientras se está arrastrando en esta pantalla
|
|
if (!drag && Array.isArray(m.surfaces)) {
|
|
M.surfaces = m.surfaces.map((s) => ({
|
|
id: s.id, corners: s.corners.map((p) => [p[0], p[1]]),
|
|
}));
|
|
if (selected && !surfaceById(selected)) selected = null;
|
|
}
|
|
},
|
|
getMapping() { return M; },
|
|
};
|
|
window.FosMapper = API;
|
|
})();
|