Per-zone effects in projection mapping

New 'Zona Effetto': each zone runs its own preset on an independent
offscreen Visualizer (960x540, own WebGL context), stepped with the
shared clock and audio so every panel dances to the same music with a
different effect (fluid presets included; interactive/3D excluded).
Zone row gains family/preset selectors; engines are created/destroyed
as zones change and their canvases uploaded as zone textures each
frame. Guide updated with the performance note.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/output.js

@@ -333,7 +333,9 @@ djv.onControl(async (m) => {
         ensureMapping().setZones((m.zones || []).map(z => Object.assign({}, z,
           { src: z.src && z.src.type === 'image'
             ? { type: 'image', url: toFileURL(z.src.path), path: z.src.path }
-            : { type: 'visual' } })));
+            : (z.src && z.src.type === 'effect'
+              ? { type: 'effect', effectIndex: z.src.effectIndex }
+              : { type: 'visual' }) })));
       } catch (e) { djv.report({ type: 'error', message: 'Mappatura: ' + e.message }); }
       break;
     case 'mapOn':
@@ -594,7 +596,7 @@ function frame() {
   const a = audio.values;
   avTick(performance.now());
   viz.render(t * speed, a);
-  if (mapOn && mapping) mapping.render();
+  if (mapOn && mapping) mapping.render(t * speed, a);
 
   // Interactive family: tell the control panel if the camera didn't start
   // (permission denied / missing device). Mouse interaction still works.
@@ -661,7 +663,9 @@ function ensureMapping() {
     // corner drags on the output flow back to the panel, which persists them
     mapping.onChange = (zones) => djv.report({ type: 'mapZones',
       zones: zones.map(z => ({ id: z.id, name: z.name,
-        src: z.src.type === 'image' ? { type: 'image', path: z.src.path } : { type: 'visual' },
+        src: z.src.type === 'image' ? { type: 'image', path: z.src.path }
+          : (z.src.type === 'effect' ? { type: 'effect', effectIndex: z.src.effectIndex }
+            : { type: 'visual' }),
         corners: z.corners, srcRect: z.srcRect, opacity: z.opacity })) });
   }
   return mapping;