lucianoandClaude Fable 5
65fb6ae895
New model3d.js: minimal GLB loader (JSON+BIN chunks, accessors with byteStride, node hierarchy baked into vertices, embedded PNG/JPEG base colour textures) and a WebGL2 renderer on the shared canvas — palette fill light, beat-pulsing fresnel rim, treble speculars, bass breathing via normal displacement, orbiting camera auto-fitted to the bounding box, gradient backdrop with a bass glow. A generated torus knot shows before any GLB is loaded. 'Carica un modello .glb' button in the SVG section; the path persists and is re-sent when the output restarts. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
56 lines
2.0 KiB
HTML
56 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="Content-Security-Policy"
|
|
content="default-src 'self'; img-src 'self' blob: data: file:; media-src 'self' blob: file:; style-src 'self' 'unsafe-inline'; script-src 'self'" />
|
|
<title>DJ Visualizer — Output</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body class="output">
|
|
<!-- LED-wall active area: every layer lives inside; black outside -->
|
|
<div id="stage">
|
|
<canvas id="gl"></canvas>
|
|
|
|
<!-- Video layer (VJ loop) that blends with the generated visuals -->
|
|
<video id="bg-video" class="bg-video" loop muted playsinline></video>
|
|
|
|
<!-- Playlist video track (full screen, with its own audio) -->
|
|
<video id="track-video" class="track-video" playsinline></video>
|
|
|
|
<!-- Image overlay layer -->
|
|
<div id="overlay-images"></div>
|
|
|
|
<!-- Per-track scene image -->
|
|
<img id="scene-image" class="scene-image" />
|
|
|
|
<!-- Two independent, freely-positioned & resizable logos -->
|
|
<img id="logo-0" class="logo" />
|
|
<img id="logo-1" class="logo" />
|
|
|
|
<!-- Scrolling text ticker -->
|
|
<div id="ticker"><div id="ticker-track"><span class="tick-copy"></span><span class="tick-copy"></span></div></div>
|
|
|
|
<!-- Side text: vertical stacked characters scrolling on both edges -->
|
|
<div id="side-text">
|
|
<div class="side-col left"><div class="side-track"><span class="side-copy"></span><span class="side-copy"></span></div></div>
|
|
<div class="side-col right"><div class="side-track"><span class="side-copy"></span><span class="side-copy"></span></div></div>
|
|
</div>
|
|
|
|
<div id="drop-hint">
|
|
<div class="big">🎛 In attesa dell'audio…</div>
|
|
<div class="small">Usa il pannello di controllo sull'altro schermo</div>
|
|
</div>
|
|
</div><!-- /#stage -->
|
|
|
|
<script src="shaders.js"></script>
|
|
<script src="effects.js"></script>
|
|
<script src="fluid.js"></script>
|
|
<script src="interactive.js"></script>
|
|
<script src="model3d.js"></script>
|
|
<script src="visualizer.js"></script>
|
|
<script src="audio.js"></script>
|
|
<script src="output.js"></script>
|
|
</body>
|
|
</html>
|