@vib3code/sdk 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +118 -0
- package/DOCS/BLUEPRINT_EXECUTION_PLAN_2026-01-07.md +34 -0
- package/DOCS/CI_TESTING.md +38 -0
- package/DOCS/CLI_ONBOARDING.md +75 -0
- package/DOCS/CONTROL_REFERENCE.md +64 -0
- package/DOCS/DEV_TRACK_ANALYSIS.md +77 -0
- package/DOCS/DEV_TRACK_PLAN_2026-01-07.md +42 -0
- package/DOCS/DEV_TRACK_SESSION_2026-01-31.md +220 -0
- package/DOCS/ENV_SETUP.md +189 -0
- package/DOCS/EXPORT_FORMATS.md +417 -0
- package/DOCS/GPU_DISPOSAL_GUIDE.md +21 -0
- package/DOCS/LICENSING_TIERS.md +275 -0
- package/DOCS/MASTER_PLAN_2026-01-31.md +570 -0
- package/DOCS/OBS_SETUP_GUIDE.md +98 -0
- package/DOCS/PROJECT_SETUP.md +66 -0
- package/DOCS/RENDERER_LIFECYCLE.md +40 -0
- package/DOCS/REPO_MANIFEST.md +121 -0
- package/DOCS/SESSION_014_PLAN.md +195 -0
- package/DOCS/SESSION_LOG_2026-01-07.md +56 -0
- package/DOCS/STRATEGIC_BLUEPRINT_2026-01-07.md +72 -0
- package/DOCS/SYSTEM_AUDIT_2026-01-30.md +738 -0
- package/DOCS/SYSTEM_INVENTORY.md +520 -0
- package/DOCS/TELEMETRY_EXPORTS.md +34 -0
- package/DOCS/WEBGPU_STATUS.md +38 -0
- package/DOCS/XR_BENCHMARKS.md +608 -0
- package/LICENSE +21 -0
- package/README.md +426 -0
- package/docs/.nojekyll +0 -0
- package/docs/01-dissolution_of_euclidean_hegemony.html +346 -0
- package/docs/02-hyperspatial_ego_death.html +346 -0
- package/docs/03-post_cartesian_sublime.html +346 -0
- package/docs/04-crystalline_void_meditation.html +346 -0
- package/docs/05-quantum_decoherence_ballet.html +346 -0
- package/docs/06-dissolution_of_euclidean_hegemony.html +346 -0
- package/docs/07-hyperspatial_ego_death.html +346 -0
- package/docs/08-post_cartesian_sublime.html +346 -0
- package/docs/09-crystalline_void_meditation.html +346 -0
- package/docs/10-quantum_decoherence_ballet.html +346 -0
- package/docs/11-dissolution_of_euclidean_hegemony.html +346 -0
- package/docs/12-hyperspatial_ego_death.html +346 -0
- package/docs/13-post_cartesian_sublime.html +346 -0
- package/docs/index.html +794 -0
- package/docs/test-hub.html +441 -0
- package/docs/url-state.js +102 -0
- package/docs/vib3-exports/01-quantum-quantum-tetrahedron-lattice.html +489 -0
- package/docs/vib3-exports/02-quantum-quantum-hypersphere-matrix.html +489 -0
- package/docs/vib3-exports/03-quantum-quantum-hypertetra-fractal.html +489 -0
- package/docs/vib3-exports/04-faceted-faceted-crystal-structure.html +407 -0
- package/docs/vib3-exports/05-faceted-faceted-klein-bottle.html +407 -0
- package/docs/vib3-exports/06-faceted-faceted-hypertetra-torus.html +407 -0
- package/docs/vib3-exports/07-holographic-holographic-wave-field.html +457 -0
- package/docs/vib3-exports/08-holographic-holographic-hypersphere-sphere.html +457 -0
- package/docs/vib3-exports/09-holographic-holographic-hypertetra-crystal.html +457 -0
- package/docs/vib3-exports/index.html +238 -0
- package/docs/webgpu-live.html +702 -0
- package/package.json +367 -0
- package/src/advanced/AIPresetGenerator.js +777 -0
- package/src/advanced/MIDIController.js +703 -0
- package/src/advanced/OffscreenWorker.js +1051 -0
- package/src/advanced/WebGPUCompute.js +1051 -0
- package/src/advanced/WebXRRenderer.js +680 -0
- package/src/agent/cli/AgentCLI.js +615 -0
- package/src/agent/cli/index.js +14 -0
- package/src/agent/index.js +73 -0
- package/src/agent/mcp/MCPServer.js +950 -0
- package/src/agent/mcp/index.js +9 -0
- package/src/agent/mcp/tools.js +548 -0
- package/src/agent/telemetry/EventStream.js +669 -0
- package/src/agent/telemetry/Instrumentation.js +618 -0
- package/src/agent/telemetry/TelemetryExporters.js +427 -0
- package/src/agent/telemetry/TelemetryService.js +464 -0
- package/src/agent/telemetry/index.js +52 -0
- package/src/benchmarks/BenchmarkRunner.js +381 -0
- package/src/benchmarks/MetricsCollector.js +299 -0
- package/src/benchmarks/index.js +9 -0
- package/src/benchmarks/scenes.js +259 -0
- package/src/cli/index.js +675 -0
- package/src/config/ApiConfig.js +88 -0
- package/src/core/CanvasManager.js +217 -0
- package/src/core/ErrorReporter.js +117 -0
- package/src/core/ParameterMapper.js +333 -0
- package/src/core/Parameters.js +396 -0
- package/src/core/RendererContracts.js +200 -0
- package/src/core/UnifiedResourceManager.js +370 -0
- package/src/core/VIB3Engine.js +636 -0
- package/src/core/renderers/FacetedRendererAdapter.js +32 -0
- package/src/core/renderers/HolographicRendererAdapter.js +29 -0
- package/src/core/renderers/QuantumRendererAdapter.js +29 -0
- package/src/core/renderers/RendererLifecycleManager.js +63 -0
- package/src/creative/ColorPresetsSystem.js +980 -0
- package/src/creative/ParameterTimeline.js +1061 -0
- package/src/creative/PostProcessingPipeline.js +1113 -0
- package/src/creative/TransitionAnimator.js +683 -0
- package/src/export/CSSExporter.js +226 -0
- package/src/export/CardGeneratorBase.js +279 -0
- package/src/export/ExportManager.js +580 -0
- package/src/export/FacetedCardGenerator.js +279 -0
- package/src/export/HolographicCardGenerator.js +543 -0
- package/src/export/LottieExporter.js +552 -0
- package/src/export/QuantumCardGenerator.js +315 -0
- package/src/export/SVGExporter.js +519 -0
- package/src/export/ShaderExporter.js +903 -0
- package/src/export/TradingCardGenerator.js +3055 -0
- package/src/export/TradingCardManager.js +181 -0
- package/src/export/VIB3PackageExporter.js +559 -0
- package/src/export/index.js +14 -0
- package/src/export/systems/TradingCardSystemFaceted.js +494 -0
- package/src/export/systems/TradingCardSystemHolographic.js +452 -0
- package/src/export/systems/TradingCardSystemQuantum.js +411 -0
- package/src/faceted/FacetedSystem.js +963 -0
- package/src/features/CollectionManager.js +433 -0
- package/src/gallery/CollectionManager.js +240 -0
- package/src/gallery/GallerySystem.js +485 -0
- package/src/geometry/GeometryFactory.js +314 -0
- package/src/geometry/GeometryLibrary.js +72 -0
- package/src/geometry/buffers/BufferBuilder.js +338 -0
- package/src/geometry/buffers/index.js +18 -0
- package/src/geometry/generators/Crystal.js +420 -0
- package/src/geometry/generators/Fractal.js +298 -0
- package/src/geometry/generators/KleinBottle.js +197 -0
- package/src/geometry/generators/Sphere.js +192 -0
- package/src/geometry/generators/Tesseract.js +160 -0
- package/src/geometry/generators/Tetrahedron.js +225 -0
- package/src/geometry/generators/Torus.js +304 -0
- package/src/geometry/generators/Wave.js +341 -0
- package/src/geometry/index.js +142 -0
- package/src/geometry/warp/HypersphereCore.js +211 -0
- package/src/geometry/warp/HypertetraCore.js +386 -0
- package/src/geometry/warp/index.js +57 -0
- package/src/holograms/HolographicVisualizer.js +1073 -0
- package/src/holograms/RealHolographicSystem.js +966 -0
- package/src/holograms/variantRegistry.js +69 -0
- package/src/integrations/FigmaPlugin.js +854 -0
- package/src/integrations/OBSMode.js +754 -0
- package/src/integrations/ThreeJsPackage.js +660 -0
- package/src/integrations/TouchDesignerExport.js +552 -0
- package/src/integrations/frameworks/Vib3React.js +591 -0
- package/src/integrations/frameworks/Vib3Svelte.js +654 -0
- package/src/integrations/frameworks/Vib3Vue.js +628 -0
- package/src/llm/LLMParameterInterface.js +240 -0
- package/src/llm/LLMParameterUI.js +577 -0
- package/src/math/Mat4x4.js +708 -0
- package/src/math/Projection.js +341 -0
- package/src/math/Rotor4D.js +637 -0
- package/src/math/Vec4.js +476 -0
- package/src/math/constants.js +164 -0
- package/src/math/index.js +68 -0
- package/src/math/projections.js +54 -0
- package/src/math/rotations.js +196 -0
- package/src/quantum/QuantumEngine.js +906 -0
- package/src/quantum/QuantumVisualizer.js +1103 -0
- package/src/reactivity/ReactivityConfig.js +499 -0
- package/src/reactivity/ReactivityManager.js +586 -0
- package/src/reactivity/SpatialInputSystem.js +1783 -0
- package/src/reactivity/index.js +93 -0
- package/src/render/CommandBuffer.js +465 -0
- package/src/render/MultiCanvasBridge.js +340 -0
- package/src/render/RenderCommand.js +514 -0
- package/src/render/RenderResourceRegistry.js +523 -0
- package/src/render/RenderState.js +552 -0
- package/src/render/RenderTarget.js +512 -0
- package/src/render/ShaderLoader.js +253 -0
- package/src/render/ShaderProgram.js +599 -0
- package/src/render/UnifiedRenderBridge.js +496 -0
- package/src/render/backends/WebGLBackend.js +1108 -0
- package/src/render/backends/WebGPUBackend.js +1409 -0
- package/src/render/commands/CommandBufferExecutor.js +607 -0
- package/src/render/commands/RenderCommandBuffer.js +661 -0
- package/src/render/commands/index.js +17 -0
- package/src/render/index.js +367 -0
- package/src/scene/Disposable.js +498 -0
- package/src/scene/MemoryPool.js +618 -0
- package/src/scene/Node4D.js +697 -0
- package/src/scene/ResourceManager.js +599 -0
- package/src/scene/Scene4D.js +540 -0
- package/src/scene/index.js +98 -0
- package/src/schemas/error.schema.json +84 -0
- package/src/schemas/extension.schema.json +88 -0
- package/src/schemas/index.js +214 -0
- package/src/schemas/parameters.schema.json +142 -0
- package/src/schemas/tool-pack.schema.json +44 -0
- package/src/schemas/tool-response.schema.json +127 -0
- package/src/shaders/common/fullscreen.vert.glsl +5 -0
- package/src/shaders/common/fullscreen.vert.wgsl +17 -0
- package/src/shaders/common/geometry24.glsl +65 -0
- package/src/shaders/common/geometry24.wgsl +54 -0
- package/src/shaders/common/rotation4d.glsl +85 -0
- package/src/shaders/common/rotation4d.wgsl +86 -0
- package/src/shaders/common/uniforms.glsl +44 -0
- package/src/shaders/common/uniforms.wgsl +48 -0
- package/src/shaders/faceted/faceted.frag.glsl +129 -0
- package/src/shaders/faceted/faceted.frag.wgsl +164 -0
- package/src/shaders/holographic/holographic.frag.glsl +406 -0
- package/src/shaders/holographic/holographic.frag.wgsl +185 -0
- package/src/shaders/quantum/quantum.frag.glsl +513 -0
- package/src/shaders/quantum/quantum.frag.wgsl +361 -0
- package/src/testing/ParallelTestFramework.js +519 -0
- package/src/testing/__snapshots__/exportFormats.test.js.snap +24 -0
- package/src/testing/exportFormats.test.js +8 -0
- package/src/testing/projections.test.js +14 -0
- package/src/testing/rotations.test.js +37 -0
- package/src/ui/InteractivityMenu.js +516 -0
- package/src/ui/StatusManager.js +96 -0
- package/src/ui/adaptive/renderers/webgpu/BufferLayout.ts +252 -0
- package/src/ui/adaptive/renderers/webgpu/PolytopeInstanceBuffer.ts +144 -0
- package/src/ui/adaptive/renderers/webgpu/TripleBufferedUniform.ts +170 -0
- package/src/ui/adaptive/renderers/webgpu/WebGPURenderer.ts +735 -0
- package/src/ui/adaptive/renderers/webgpu/index.ts +112 -0
- package/src/variations/VariationManager.js +431 -0
- package/src/viewer/AudioReactivity.js +505 -0
- package/src/viewer/CardBending.js +481 -0
- package/src/viewer/GalleryUI.js +832 -0
- package/src/viewer/ReactivityManager.js +590 -0
- package/src/viewer/TradingCardExporter.js +600 -0
- package/src/viewer/ViewerPortal.js +374 -0
- package/src/viewer/index.js +12 -0
- package/src/wasm/WasmLoader.js +296 -0
- package/src/wasm/index.js +132 -0
- package/tools/agentic/mcpTools.js +88 -0
- package/tools/cli/agent-cli.js +92 -0
- package/tools/export/formats.js +24 -0
- package/tools/math/rotation-baseline.mjs +64 -0
- package/tools/shader-sync-verify.js +937 -0
- package/tools/telemetry/manifestPipeline.js +141 -0
- package/tools/telemetry/telemetryEvents.js +35 -0
- package/types/adaptive-sdk.d.ts +185 -0
- package/types/advanced/AIPresetGenerator.d.ts +81 -0
- package/types/advanced/MIDIController.d.ts +100 -0
- package/types/advanced/OffscreenWorker.d.ts +82 -0
- package/types/advanced/WebGPUCompute.d.ts +52 -0
- package/types/advanced/WebXRRenderer.d.ts +77 -0
- package/types/advanced/index.d.ts +46 -0
- package/types/core/ErrorReporter.d.ts +50 -0
- package/types/core/VIB3Engine.d.ts +204 -0
- package/types/creative/ColorPresetsSystem.d.ts +91 -0
- package/types/creative/ParameterTimeline.d.ts +74 -0
- package/types/creative/PostProcessingPipeline.d.ts +109 -0
- package/types/creative/TransitionAnimator.d.ts +71 -0
- package/types/creative/index.d.ts +35 -0
- package/types/integrations/FigmaPlugin.d.ts +46 -0
- package/types/integrations/OBSMode.d.ts +74 -0
- package/types/integrations/ThreeJsPackage.d.ts +62 -0
- package/types/integrations/TouchDesignerExport.d.ts +36 -0
- package/types/integrations/Vib3React.d.ts +74 -0
- package/types/integrations/Vib3Svelte.d.ts +63 -0
- package/types/integrations/Vib3Vue.d.ts +55 -0
- package/types/integrations/index.d.ts +52 -0
- package/types/reactivity/SpatialInputSystem.d.ts +173 -0
- package/types/reactivity/index.d.ts +394 -0
- package/types/render/CommandBuffer.d.ts +169 -0
- package/types/render/RenderCommand.d.ts +312 -0
- package/types/render/RenderState.d.ts +279 -0
- package/types/render/RenderTarget.d.ts +254 -0
- package/types/render/ShaderProgram.d.ts +277 -0
- package/types/render/UnifiedRenderBridge.d.ts +143 -0
- package/types/render/WebGLBackend.d.ts +168 -0
- package/types/render/WebGPUBackend.d.ts +186 -0
- package/types/render/index.d.ts +141 -0
|
@@ -0,0 +1,457 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Holographic Hypertetra Crystal</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body { background: #000; overflow: hidden; font-family: 'Segoe UI', system-ui, sans-serif; }
|
|
10
|
+
canvas { display: block; width: 100vw; height: 100vh; }
|
|
11
|
+
.info {
|
|
12
|
+
position: fixed;
|
|
13
|
+
bottom: 20px;
|
|
14
|
+
left: 20px;
|
|
15
|
+
background: rgba(0,0,0,0.8);
|
|
16
|
+
border: 1px solid rgba(100,255,150,0.3);
|
|
17
|
+
border-radius: 8px;
|
|
18
|
+
padding: 15px 20px;
|
|
19
|
+
color: #fff;
|
|
20
|
+
font-size: 12px;
|
|
21
|
+
backdrop-filter: blur(10px);
|
|
22
|
+
max-width: 320px;
|
|
23
|
+
}
|
|
24
|
+
.info h3 { color: #64ff96; margin-bottom: 8px; font-size: 14px; }
|
|
25
|
+
.info p { opacity: 0.8; line-height: 1.4; margin-bottom: 8px; }
|
|
26
|
+
.info .meta { font-size: 10px; opacity: 0.6; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 8px; }
|
|
27
|
+
.audio-btn {
|
|
28
|
+
position: fixed;
|
|
29
|
+
top: 20px;
|
|
30
|
+
right: 20px;
|
|
31
|
+
background: rgba(0,0,0,0.8);
|
|
32
|
+
border: 1px solid rgba(100,255,150,0.3);
|
|
33
|
+
border-radius: 8px;
|
|
34
|
+
padding: 10px 15px;
|
|
35
|
+
color: #64ff96;
|
|
36
|
+
cursor: pointer;
|
|
37
|
+
font-size: 12px;
|
|
38
|
+
}
|
|
39
|
+
.audio-btn:hover { background: rgba(100,255,150,0.2); }
|
|
40
|
+
</style>
|
|
41
|
+
</head>
|
|
42
|
+
<body>
|
|
43
|
+
<canvas id="vib3"></canvas>
|
|
44
|
+
<div class="info">
|
|
45
|
+
<h3>Holographic Hypertetra Crystal</h3>
|
|
46
|
+
<p>Hypertetrahedron crystal lattice - 5-cell pentatope projection with crystalline holographic shimmer</p>
|
|
47
|
+
<div class="meta">
|
|
48
|
+
System: HOLOGRAPHIC<br>
|
|
49
|
+
Geometry: 23 (Hypertetra)<br>
|
|
50
|
+
VIB3+ Export • 1/26/2026
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
<button class="audio-btn" onclick="toggleAudio()">🎵 Enable Audio</button>
|
|
54
|
+
|
|
55
|
+
<script>
|
|
56
|
+
// VIB3+ Exported Visualization
|
|
57
|
+
// System: holographic
|
|
58
|
+
// Generated: 2026-01-26T22:37:57.879Z
|
|
59
|
+
|
|
60
|
+
const CONFIG = {
|
|
61
|
+
system: 'holographic',
|
|
62
|
+
geometry: 23,
|
|
63
|
+
params: {
|
|
64
|
+
"gridDensity": 24,
|
|
65
|
+
"morphFactor": 1.7,
|
|
66
|
+
"chaos": 0.25,
|
|
67
|
+
"speed": 0.6,
|
|
68
|
+
"hue": 300,
|
|
69
|
+
"intensity": 0.85,
|
|
70
|
+
"saturation": 0.8,
|
|
71
|
+
"dimension": 3.5,
|
|
72
|
+
"rot4dXY": 0,
|
|
73
|
+
"rot4dXZ": 0,
|
|
74
|
+
"rot4dYZ": 0,
|
|
75
|
+
"rot4dXW": 1.1,
|
|
76
|
+
"rot4dYW": 0.9,
|
|
77
|
+
"rot4dZW": 1.3
|
|
78
|
+
},
|
|
79
|
+
reactivity: {
|
|
80
|
+
"audio": {
|
|
81
|
+
"enabled": true,
|
|
82
|
+
"sensitivity": 1.5
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
const canvas = document.getElementById('vib3');
|
|
88
|
+
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
|
|
89
|
+
|
|
90
|
+
if (!gl) {
|
|
91
|
+
document.body.innerHTML = '<div style="color:#64ff96;padding:40px;text-align:center;"><h2>WebGL Required</h2><p>Please enable WebGL to view this visualization.</p></div>';
|
|
92
|
+
throw new Error('WebGL not supported');
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// Compile shaders
|
|
96
|
+
function createShader(type, source) {
|
|
97
|
+
const shader = gl.createShader(type);
|
|
98
|
+
gl.shaderSource(shader, source);
|
|
99
|
+
gl.compileShader(shader);
|
|
100
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
101
|
+
console.error('Shader error:', gl.getShaderInfoLog(shader));
|
|
102
|
+
return null;
|
|
103
|
+
}
|
|
104
|
+
return shader;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
const vs = createShader(gl.VERTEX_SHADER, `
|
|
108
|
+
attribute vec2 a_position;
|
|
109
|
+
void main() {
|
|
110
|
+
gl_Position = vec4(a_position, 0.0, 1.0);
|
|
111
|
+
}`);
|
|
112
|
+
const fs = createShader(gl.FRAGMENT_SHADER, `
|
|
113
|
+
precision highp float;
|
|
114
|
+
|
|
115
|
+
uniform vec2 u_resolution;
|
|
116
|
+
uniform float u_time;
|
|
117
|
+
uniform vec2 u_mouse;
|
|
118
|
+
uniform float u_geometry;
|
|
119
|
+
uniform float u_gridDensity;
|
|
120
|
+
uniform float u_morphFactor;
|
|
121
|
+
uniform float u_chaos;
|
|
122
|
+
uniform float u_speed;
|
|
123
|
+
uniform float u_hue;
|
|
124
|
+
uniform float u_intensity;
|
|
125
|
+
uniform float u_rot4dXY, u_rot4dXZ, u_rot4dYZ;
|
|
126
|
+
uniform float u_rot4dXW, u_rot4dYW, u_rot4dZW;
|
|
127
|
+
uniform float u_mouseIntensity;
|
|
128
|
+
uniform float u_clickIntensity;
|
|
129
|
+
uniform float u_bass, u_mid, u_high;
|
|
130
|
+
|
|
131
|
+
mat4 rotateXY(float t){float c=cos(t),s=sin(t);return mat4(c,-s,0,0,s,c,0,0,0,0,1,0,0,0,0,1);}
|
|
132
|
+
mat4 rotateXZ(float t){float c=cos(t),s=sin(t);return mat4(c,0,s,0,0,1,0,0,-s,0,c,0,0,0,0,1);}
|
|
133
|
+
mat4 rotateYZ(float t){float c=cos(t),s=sin(t);return mat4(1,0,0,0,0,c,-s,0,0,s,c,0,0,0,0,1);}
|
|
134
|
+
mat4 rotateXW(float t){float c=cos(t),s=sin(t);return mat4(c,0,0,-s,0,1,0,0,0,0,1,0,s,0,0,c);}
|
|
135
|
+
mat4 rotateYW(float t){float c=cos(t),s=sin(t);return mat4(1,0,0,0,0,c,0,-s,0,0,1,0,0,s,0,c);}
|
|
136
|
+
mat4 rotateZW(float t){float c=cos(t),s=sin(t);return mat4(1,0,0,0,0,1,0,0,0,0,c,-s,0,0,s,c);}
|
|
137
|
+
|
|
138
|
+
vec3 project4Dto3D(vec4 p) {
|
|
139
|
+
float w = 2.5 / (2.5 + p.w);
|
|
140
|
+
return vec3(p.x * w, p.y * w, p.z * w);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
vec3 warpHypersphereCore(vec3 p, int gi) {
|
|
144
|
+
float r = length(p);
|
|
145
|
+
float morph = clamp(u_morphFactor * 0.6 + 0.3, 0.0, 2.0);
|
|
146
|
+
float w = sin(r * (1.3 + float(gi) * 0.12) + u_time * 0.0008 * u_speed) * (0.4 + morph * 0.45);
|
|
147
|
+
vec4 p4d = vec4(p * (1.0 + morph * 0.2), w);
|
|
148
|
+
p4d = rotateXY(u_rot4dXY)*rotateXZ(u_rot4dXZ)*rotateYZ(u_rot4dYZ)*
|
|
149
|
+
rotateXW(u_rot4dXW)*rotateYW(u_rot4dYW)*rotateZW(u_rot4dZW)*p4d;
|
|
150
|
+
return mix(p, project4Dto3D(p4d), clamp(0.45 + morph * 0.35, 0.0, 1.0));
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
vec3 warpHypertetraCore(vec3 p, int gi) {
|
|
154
|
+
vec3 c1=normalize(vec3(1,1,1)),c2=normalize(vec3(-1,-1,1)),c3=normalize(vec3(-1,1,-1)),c4=normalize(vec3(1,-1,-1));
|
|
155
|
+
float morph = clamp(u_morphFactor * 0.8 + 0.2, 0.0, 2.0);
|
|
156
|
+
float bm = dot(p,c1)*0.14+dot(p,c2)*0.1+dot(p,c3)*0.08;
|
|
157
|
+
float w = sin(bm*5.5+u_time*0.0009*u_speed)*cos(dot(p,c4)*4.2-u_time*0.0007*u_speed)*(0.5+morph*0.4);
|
|
158
|
+
vec3 off = vec3(dot(p,c1),dot(p,c2),dot(p,c3))*0.1*morph;
|
|
159
|
+
vec4 p4d = vec4(p+off, w);
|
|
160
|
+
p4d = rotateXY(u_rot4dXY)*rotateXZ(u_rot4dXZ)*rotateYZ(u_rot4dYZ)*
|
|
161
|
+
rotateXW(u_rot4dXW)*rotateYW(u_rot4dYW)*rotateZW(u_rot4dZW)*p4d;
|
|
162
|
+
vec3 proj = project4Dto3D(p4d);
|
|
163
|
+
float pi = min(min(abs(dot(p,c1)),abs(dot(p,c2))),min(abs(dot(p,c3)),abs(dot(p,c4))));
|
|
164
|
+
vec3 bl = mix(p, proj, clamp(0.45+morph*0.35,0.0,1.0));
|
|
165
|
+
return mix(bl, bl*(1.0-pi*0.55), 0.2+morph*0.2);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
vec3 applyCoreWarp(vec3 p, float gt) {
|
|
169
|
+
int core = int(floor(gt/8.0));
|
|
170
|
+
int gi = int(mod(gt, 8.0));
|
|
171
|
+
if(core==1) return warpHypersphereCore(p, gi);
|
|
172
|
+
if(core==2) return warpHypertetraCore(p, gi);
|
|
173
|
+
return p;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
float tetraLattice(vec3 p, float gs) {
|
|
177
|
+
vec3 q = fract(p*gs)-0.5;
|
|
178
|
+
float d1=length(q),d2=length(q-vec3(0.35,0,0)),d3=length(q-vec3(0,0.35,0)),d4=length(q-vec3(0,0,0.35));
|
|
179
|
+
float verts = 1.0-smoothstep(0.0,0.03,min(min(d1,d2),min(d3,d4)));
|
|
180
|
+
float shimmer = sin(u_time*0.002)*0.02;
|
|
181
|
+
float edges = max(max(
|
|
182
|
+
1.0-smoothstep(0.0,0.015,abs(length(q.xy)-(0.18+shimmer))),
|
|
183
|
+
1.0-smoothstep(0.0,0.015,abs(length(q.yz)-(0.18+shimmer*0.8)))),
|
|
184
|
+
1.0-smoothstep(0.0,0.015,abs(length(q.xz)-(0.18+shimmer*1.2))));
|
|
185
|
+
float interf = sin(d1*25.0+u_time*0.003)*sin(d2*22.0+u_time*0.0025)*0.1;
|
|
186
|
+
float vol = exp(-length(q)*3.0)*0.15;
|
|
187
|
+
return max(verts, edges*0.7)+interf+vol;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
float hyperLattice(vec3 p, float gs) {
|
|
191
|
+
vec3 g = fract(p*gs), q = g-0.5;
|
|
192
|
+
vec3 e = 1.0-smoothstep(0.0,0.025,abs(q));
|
|
193
|
+
float wire = max(max(e.x,e.y),e.z);
|
|
194
|
+
float verts = 0.0;
|
|
195
|
+
for(int i=0;i<8;i++){
|
|
196
|
+
float fi=float(i);
|
|
197
|
+
vec3 c = vec3(mod(fi,2.0)-0.5,mod(floor(fi/2.0),2.0)-0.5,float(i/4)-0.5);
|
|
198
|
+
verts = max(verts, 1.0-smoothstep(0.0,0.04,length(q-c*0.4)));
|
|
199
|
+
}
|
|
200
|
+
float interf = sin(length(q)*20.0+u_time*0.002)*0.08;
|
|
201
|
+
float glow = exp(-length(q)*2.5)*0.12;
|
|
202
|
+
return wire*0.8+verts+interf+glow;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
float sphereLattice(vec3 p, float gs) {
|
|
206
|
+
vec3 q = fract(p*gs)-0.5;
|
|
207
|
+
return 1.0-smoothstep(0.2,0.5,length(q));
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
float torusLattice(vec3 p, float gs) {
|
|
211
|
+
vec3 q = fract(p*gs)-0.5;
|
|
212
|
+
float r1 = sqrt(q.x*q.x+q.y*q.y);
|
|
213
|
+
float r2 = sqrt((r1-0.3)*(r1-0.3)+q.z*q.z);
|
|
214
|
+
return 1.0-smoothstep(0.0,0.1,r2);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
float kleinLattice(vec3 p, float gs) {
|
|
218
|
+
vec3 q = fract(p*gs);
|
|
219
|
+
float u = q.x*6.28318, v = q.y*6.28318;
|
|
220
|
+
float x = cos(u)*(3.0+cos(u/2.0)*sin(v)-sin(u/2.0)*sin(2.0*v));
|
|
221
|
+
return 1.0-smoothstep(0.0,0.05,abs(length(vec2(x,q.z))-0.1));
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
float fractalLattice(vec3 p, float gs) {
|
|
225
|
+
vec3 q = p*gs;
|
|
226
|
+
float scale = 1.0, fract_val = 0.0;
|
|
227
|
+
for(int i=0;i<4;i++){
|
|
228
|
+
q = fract(q)-0.5;
|
|
229
|
+
fract_val += abs(length(q))/scale;
|
|
230
|
+
scale *= 2.0;
|
|
231
|
+
q *= 2.0;
|
|
232
|
+
}
|
|
233
|
+
return 1.0-smoothstep(0.0,1.0,fract_val);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
float waveLattice(vec3 p, float gs) {
|
|
237
|
+
vec3 q = p*gs;
|
|
238
|
+
float wave = sin(q.x*2.0)*sin(q.y*2.0)*sin(q.z*2.0+u_time);
|
|
239
|
+
return smoothstep(-0.5,0.5,wave);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
float crystalLattice(vec3 p, float gs) {
|
|
243
|
+
vec3 q = fract(p*gs)-0.5;
|
|
244
|
+
float d = max(max(abs(q.x),abs(q.y)),abs(q.z));
|
|
245
|
+
return 1.0-smoothstep(0.3,0.5,d);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
float getDynamicGeometry(vec3 p, float gs, float gt) {
|
|
249
|
+
vec3 w = applyCoreWarp(p, gt);
|
|
250
|
+
int bg = int(mod(gt, 8.0));
|
|
251
|
+
float var = floor(gt/8.0)/4.0;
|
|
252
|
+
float vgs = gs*(0.5+var*1.5);
|
|
253
|
+
if(bg==0) return tetraLattice(w,vgs);
|
|
254
|
+
else if(bg==1) return hyperLattice(w,vgs);
|
|
255
|
+
else if(bg==2) return sphereLattice(w,vgs);
|
|
256
|
+
else if(bg==3) return torusLattice(w,vgs);
|
|
257
|
+
else if(bg==4) return kleinLattice(w,vgs);
|
|
258
|
+
else if(bg==5) return fractalLattice(w,vgs);
|
|
259
|
+
else if(bg==6) return waveLattice(w,vgs);
|
|
260
|
+
else return crystalLattice(w,vgs);
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
vec3 hsv2rgb(vec3 c) {
|
|
264
|
+
vec4 K = vec4(1.0,2.0/3.0,1.0/3.0,3.0);
|
|
265
|
+
vec3 p = abs(fract(c.xxx+K.xyz)*6.0-K.www);
|
|
266
|
+
return c.z*mix(K.xxx,clamp(p-K.xxx,0.0,1.0),c.y);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
void main() {
|
|
270
|
+
vec2 uv = gl_FragCoord.xy/u_resolution.xy;
|
|
271
|
+
float ar = u_resolution.x/u_resolution.y;
|
|
272
|
+
uv.x *= ar;
|
|
273
|
+
uv -= 0.5;
|
|
274
|
+
|
|
275
|
+
float time = u_time*0.0004*u_speed;
|
|
276
|
+
vec2 moff = (u_mouse-0.5)*u_mouseIntensity*0.25;
|
|
277
|
+
|
|
278
|
+
vec4 p4d = vec4(uv+moff*0.1, sin(time*0.1)*0.15, cos(time*0.08)*0.15);
|
|
279
|
+
p4d = rotateXY(u_rot4dXY+time*0.1)*rotateXZ(u_rot4dXZ+time*0.12)*rotateYZ(u_rot4dYZ+time*0.08)*
|
|
280
|
+
rotateXW(u_rot4dXW+time*0.2+moff.y*0.5+u_bass*0.3)*
|
|
281
|
+
rotateYW(u_rot4dYW+time*0.15+moff.x*0.5+u_mid*0.2)*
|
|
282
|
+
rotateZW(u_rot4dZW+time*0.25+u_clickIntensity*0.3+u_high*0.4)*p4d;
|
|
283
|
+
|
|
284
|
+
vec3 p = project4Dto3D(p4d);
|
|
285
|
+
float density = u_gridDensity*(1.0+u_bass*0.5);
|
|
286
|
+
float morphedGeo = u_geometry+u_morphFactor*3.0+u_mid*1.5;
|
|
287
|
+
float lattice = getDynamicGeometry(p, density, morphedGeo);
|
|
288
|
+
|
|
289
|
+
float hue = u_hue/360.0+u_mid*0.3;
|
|
290
|
+
vec3 baseColor = hsv2rgb(vec3(hue, 0.8, u_intensity));
|
|
291
|
+
vec3 color = baseColor*(0.2+lattice*0.8);
|
|
292
|
+
|
|
293
|
+
vec3 shimmer1 = baseColor*lattice*0.5;
|
|
294
|
+
vec3 shimmer2 = baseColor*sin(lattice*8.0+u_time*0.001)*0.2;
|
|
295
|
+
color += shimmer1+shimmer2;
|
|
296
|
+
color += vec3(lattice*0.6)*baseColor;
|
|
297
|
+
|
|
298
|
+
float depth = 1.0-length(p)*0.3;
|
|
299
|
+
color *= (0.7+depth*0.3);
|
|
300
|
+
|
|
301
|
+
float moire = sin(uv.x*12.0)*sin(uv.y*14.0)*(u_chaos+u_high*0.4)*0.15;
|
|
302
|
+
color += vec3(moire);
|
|
303
|
+
|
|
304
|
+
float mouseDist = length(uv-(u_mouse-0.5)*vec2(ar,1.0));
|
|
305
|
+
float mouseGlow = exp(-mouseDist*1.2)*u_mouseIntensity*0.25;
|
|
306
|
+
float mouseRipple = sin(mouseDist*15.0-u_time*0.003)*exp(-mouseDist*2.0)*u_mouseIntensity*0.1;
|
|
307
|
+
color += vec3(mouseGlow+mouseRipple)*baseColor*0.8;
|
|
308
|
+
|
|
309
|
+
float clickPulse = u_clickIntensity*exp(-mouseDist*1.8)*0.4;
|
|
310
|
+
color += vec3(clickPulse, clickPulse*0.6, clickPulse*1.2);
|
|
311
|
+
|
|
312
|
+
gl_FragColor = vec4(color, 0.95);
|
|
313
|
+
}`);
|
|
314
|
+
|
|
315
|
+
const program = gl.createProgram();
|
|
316
|
+
gl.attachShader(program, vs);
|
|
317
|
+
gl.attachShader(program, fs);
|
|
318
|
+
gl.linkProgram(program);
|
|
319
|
+
|
|
320
|
+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
321
|
+
console.error('Link error:', gl.getProgramInfoLog(program));
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
gl.useProgram(program);
|
|
325
|
+
|
|
326
|
+
// Fullscreen quad
|
|
327
|
+
const positions = new Float32Array([-1,-1, 1,-1, -1,1, 1,1]);
|
|
328
|
+
const buffer = gl.createBuffer();
|
|
329
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
330
|
+
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
|
|
331
|
+
|
|
332
|
+
const posLoc = gl.getAttribLocation(program, 'a_position');
|
|
333
|
+
gl.enableVertexAttribArray(posLoc);
|
|
334
|
+
gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
|
|
335
|
+
|
|
336
|
+
// Get uniform locations
|
|
337
|
+
const uniforms = {};
|
|
338
|
+
const uniformNames = [
|
|
339
|
+
'u_time', 'u_resolution', 'u_mouse', 'u_geometry',
|
|
340
|
+
'u_gridDensity', 'u_morphFactor', 'u_chaos', 'u_speed',
|
|
341
|
+
'u_hue', 'u_intensity', 'u_saturation', 'u_dimension',
|
|
342
|
+
'u_rot4dXY', 'u_rot4dXZ', 'u_rot4dYZ',
|
|
343
|
+
'u_rot4dXW', 'u_rot4dYW', 'u_rot4dZW',
|
|
344
|
+
'u_mouseIntensity', 'u_clickIntensity',
|
|
345
|
+
'u_bass', 'u_mid', 'u_high'
|
|
346
|
+
];
|
|
347
|
+
uniformNames.forEach(name => {
|
|
348
|
+
uniforms[name] = gl.getUniformLocation(program, name);
|
|
349
|
+
});
|
|
350
|
+
|
|
351
|
+
// State
|
|
352
|
+
let mouseX = 0.5, mouseY = 0.5, mouseIntensity = 0, clickIntensity = 0;
|
|
353
|
+
let bass = 0, mid = 0, high = 0;
|
|
354
|
+
let audioContext, analyser, dataArray, audioEnabled = false;
|
|
355
|
+
const startTime = performance.now();
|
|
356
|
+
|
|
357
|
+
// Mouse tracking
|
|
358
|
+
document.addEventListener('mousemove', e => {
|
|
359
|
+
mouseX = e.clientX / window.innerWidth;
|
|
360
|
+
mouseY = 1 - e.clientY / window.innerHeight;
|
|
361
|
+
mouseIntensity = Math.min(1, mouseIntensity + 0.1);
|
|
362
|
+
});
|
|
363
|
+
document.addEventListener('click', () => {
|
|
364
|
+
clickIntensity = 1;
|
|
365
|
+
});
|
|
366
|
+
|
|
367
|
+
// Audio setup
|
|
368
|
+
window.toggleAudio = async function() {
|
|
369
|
+
if (audioEnabled) {
|
|
370
|
+
audioEnabled = false;
|
|
371
|
+
document.querySelector('.audio-btn').textContent = '🎵 Enable Audio';
|
|
372
|
+
return;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
try {
|
|
376
|
+
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
377
|
+
audioContext = new AudioContext();
|
|
378
|
+
analyser = audioContext.createAnalyser();
|
|
379
|
+
analyser.fftSize = 256;
|
|
380
|
+
const source = audioContext.createMediaStreamSource(stream);
|
|
381
|
+
source.connect(analyser);
|
|
382
|
+
dataArray = new Uint8Array(analyser.frequencyBinCount);
|
|
383
|
+
audioEnabled = true;
|
|
384
|
+
document.querySelector('.audio-btn').textContent = '🔊 Audio Active';
|
|
385
|
+
} catch (e) {
|
|
386
|
+
console.log('Audio not available:', e);
|
|
387
|
+
alert('Could not access microphone');
|
|
388
|
+
}
|
|
389
|
+
};
|
|
390
|
+
|
|
391
|
+
function updateAudio() {
|
|
392
|
+
if (!audioEnabled || !analyser) return;
|
|
393
|
+
analyser.getByteFrequencyData(dataArray);
|
|
394
|
+
|
|
395
|
+
// Bass: 0-8, Mid: 8-32, High: 32-64
|
|
396
|
+
let bassSum = 0, midSum = 0, highSum = 0;
|
|
397
|
+
for (let i = 0; i < 8; i++) bassSum += dataArray[i];
|
|
398
|
+
for (let i = 8; i < 32; i++) midSum += dataArray[i];
|
|
399
|
+
for (let i = 32; i < 64; i++) highSum += dataArray[i];
|
|
400
|
+
|
|
401
|
+
bass = (bassSum / 8 / 255) * (CONFIG.reactivity?.audio?.sensitivity || 1);
|
|
402
|
+
mid = (midSum / 24 / 255) * (CONFIG.reactivity?.audio?.sensitivity || 1);
|
|
403
|
+
high = (highSum / 32 / 255) * (CONFIG.reactivity?.audio?.sensitivity || 1);
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
// Resize
|
|
407
|
+
function resize() {
|
|
408
|
+
const dpr = Math.min(window.devicePixelRatio, 2);
|
|
409
|
+
canvas.width = window.innerWidth * dpr;
|
|
410
|
+
canvas.height = window.innerHeight * dpr;
|
|
411
|
+
gl.viewport(0, 0, canvas.width, canvas.height);
|
|
412
|
+
}
|
|
413
|
+
window.addEventListener('resize', resize);
|
|
414
|
+
resize();
|
|
415
|
+
|
|
416
|
+
// Render loop
|
|
417
|
+
function render() {
|
|
418
|
+
const time = performance.now() - startTime;
|
|
419
|
+
|
|
420
|
+
updateAudio();
|
|
421
|
+
mouseIntensity *= 0.95;
|
|
422
|
+
clickIntensity *= 0.92;
|
|
423
|
+
|
|
424
|
+
gl.uniform1f(uniforms.u_time, time);
|
|
425
|
+
gl.uniform2f(uniforms.u_resolution, canvas.width, canvas.height);
|
|
426
|
+
gl.uniform2f(uniforms.u_mouse, mouseX, mouseY);
|
|
427
|
+
gl.uniform1f(uniforms.u_geometry, CONFIG.geometry);
|
|
428
|
+
gl.uniform1f(uniforms.u_gridDensity, CONFIG.params.gridDensity);
|
|
429
|
+
gl.uniform1f(uniforms.u_morphFactor, CONFIG.params.morphFactor);
|
|
430
|
+
gl.uniform1f(uniforms.u_chaos, CONFIG.params.chaos);
|
|
431
|
+
gl.uniform1f(uniforms.u_speed, CONFIG.params.speed);
|
|
432
|
+
gl.uniform1f(uniforms.u_hue, CONFIG.params.hue);
|
|
433
|
+
gl.uniform1f(uniforms.u_intensity, CONFIG.params.intensity);
|
|
434
|
+
gl.uniform1f(uniforms.u_saturation, CONFIG.params.saturation || 0.8);
|
|
435
|
+
gl.uniform1f(uniforms.u_dimension, CONFIG.params.dimension || 3.5);
|
|
436
|
+
gl.uniform1f(uniforms.u_rot4dXY, CONFIG.params.rot4dXY || 0);
|
|
437
|
+
gl.uniform1f(uniforms.u_rot4dXZ, CONFIG.params.rot4dXZ || 0);
|
|
438
|
+
gl.uniform1f(uniforms.u_rot4dYZ, CONFIG.params.rot4dYZ || 0);
|
|
439
|
+
gl.uniform1f(uniforms.u_rot4dXW, CONFIG.params.rot4dXW || 0);
|
|
440
|
+
gl.uniform1f(uniforms.u_rot4dYW, CONFIG.params.rot4dYW || 0);
|
|
441
|
+
gl.uniform1f(uniforms.u_rot4dZW, CONFIG.params.rot4dZW || 0);
|
|
442
|
+
gl.uniform1f(uniforms.u_mouseIntensity, mouseIntensity);
|
|
443
|
+
gl.uniform1f(uniforms.u_clickIntensity, clickIntensity);
|
|
444
|
+
gl.uniform1f(uniforms.u_bass, bass);
|
|
445
|
+
gl.uniform1f(uniforms.u_mid, mid);
|
|
446
|
+
gl.uniform1f(uniforms.u_high, high);
|
|
447
|
+
|
|
448
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
449
|
+
requestAnimationFrame(render);
|
|
450
|
+
}
|
|
451
|
+
render();
|
|
452
|
+
|
|
453
|
+
console.log('VIB3+ HOLOGRAPHIC visualization initialized');
|
|
454
|
+
console.log('Config:', CONFIG);
|
|
455
|
+
</script>
|
|
456
|
+
</body>
|
|
457
|
+
</html>
|
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>VIB3+ Real Shader Exports</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 50%, #0a1a1a 100%);
|
|
11
|
+
min-height: 100vh;
|
|
12
|
+
font-family: 'Segoe UI', system-ui, sans-serif;
|
|
13
|
+
color: #fff;
|
|
14
|
+
padding: 40px;
|
|
15
|
+
}
|
|
16
|
+
h1 {
|
|
17
|
+
font-size: 2.5rem;
|
|
18
|
+
background: linear-gradient(90deg, #64ff96, #00ffff, #ff64ff);
|
|
19
|
+
-webkit-background-clip: text;
|
|
20
|
+
-webkit-text-fill-color: transparent;
|
|
21
|
+
margin-bottom: 10px;
|
|
22
|
+
}
|
|
23
|
+
.subtitle {
|
|
24
|
+
color: #888;
|
|
25
|
+
margin-bottom: 40px;
|
|
26
|
+
font-size: 1.1rem;
|
|
27
|
+
}
|
|
28
|
+
.grid {
|
|
29
|
+
display: grid;
|
|
30
|
+
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
|
31
|
+
gap: 30px;
|
|
32
|
+
}
|
|
33
|
+
.card {
|
|
34
|
+
background: rgba(20, 20, 40, 0.8);
|
|
35
|
+
border: 1px solid rgba(100, 255, 150, 0.2);
|
|
36
|
+
border-radius: 16px;
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
transition: all 0.3s ease;
|
|
39
|
+
}
|
|
40
|
+
.card:hover {
|
|
41
|
+
border-color: rgba(100, 255, 150, 0.5);
|
|
42
|
+
transform: translateY(-5px);
|
|
43
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
|
|
44
|
+
}
|
|
45
|
+
.preview {
|
|
46
|
+
width: 100%;
|
|
47
|
+
height: 250px;
|
|
48
|
+
border: none;
|
|
49
|
+
background: #000;
|
|
50
|
+
}
|
|
51
|
+
.info {
|
|
52
|
+
padding: 20px;
|
|
53
|
+
}
|
|
54
|
+
.info h3 {
|
|
55
|
+
font-size: 1.2rem;
|
|
56
|
+
color: #64ff96;
|
|
57
|
+
margin-bottom: 8px;
|
|
58
|
+
}
|
|
59
|
+
.info p {
|
|
60
|
+
font-size: 0.9rem;
|
|
61
|
+
color: #aaa;
|
|
62
|
+
line-height: 1.5;
|
|
63
|
+
margin-bottom: 12px;
|
|
64
|
+
}
|
|
65
|
+
.meta {
|
|
66
|
+
display: flex;
|
|
67
|
+
gap: 15px;
|
|
68
|
+
font-size: 0.8rem;
|
|
69
|
+
}
|
|
70
|
+
.meta span {
|
|
71
|
+
background: rgba(100, 255, 150, 0.15);
|
|
72
|
+
padding: 4px 10px;
|
|
73
|
+
border-radius: 4px;
|
|
74
|
+
color: #64ff96;
|
|
75
|
+
}
|
|
76
|
+
.meta .system { background: rgba(0, 255, 255, 0.15); color: #00ffff; }
|
|
77
|
+
.meta .geo { background: rgba(255, 100, 255, 0.15); color: #ff64ff; }
|
|
78
|
+
a.view {
|
|
79
|
+
display: inline-block;
|
|
80
|
+
margin-top: 15px;
|
|
81
|
+
padding: 10px 20px;
|
|
82
|
+
background: linear-gradient(90deg, #64ff96, #00ffff);
|
|
83
|
+
color: #000;
|
|
84
|
+
text-decoration: none;
|
|
85
|
+
border-radius: 8px;
|
|
86
|
+
font-weight: bold;
|
|
87
|
+
transition: opacity 0.2s;
|
|
88
|
+
}
|
|
89
|
+
a.view:hover { opacity: 0.8; }
|
|
90
|
+
.footer {
|
|
91
|
+
margin-top: 60px;
|
|
92
|
+
text-align: center;
|
|
93
|
+
color: #555;
|
|
94
|
+
font-size: 0.9rem;
|
|
95
|
+
}
|
|
96
|
+
.footer a { color: #64ff96; text-decoration: none; }
|
|
97
|
+
</style>
|
|
98
|
+
</head>
|
|
99
|
+
<body>
|
|
100
|
+
<h1>VIB3+ Real Shader Exports</h1>
|
|
101
|
+
<p class="subtitle">
|
|
102
|
+
9 visualizations using ACTUAL Quantum, Faceted, and Holographic shaders<br>
|
|
103
|
+
Full 24-geometry system with 6D rotation and audio reactivity
|
|
104
|
+
</p>
|
|
105
|
+
|
|
106
|
+
<div class="grid">
|
|
107
|
+
|
|
108
|
+
<div class="card">
|
|
109
|
+
<iframe class="preview" src="01-quantum-quantum-tetrahedron-lattice.html" loading="lazy"></iframe>
|
|
110
|
+
<div class="info">
|
|
111
|
+
<h3>Quantum Tetrahedron Lattice</h3>
|
|
112
|
+
<p>Base tetrahedron geometry with quantum lattice shader - 4D rotation creates volumetric interference patterns</p>
|
|
113
|
+
<div class="meta">
|
|
114
|
+
<span class="system">QUANTUM</span>
|
|
115
|
+
<span class="geo">Geometry 0</span>
|
|
116
|
+
</div>
|
|
117
|
+
<a href="01-quantum-quantum-tetrahedron-lattice.html" class="view" target="_blank">View Fullscreen →</a>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<div class="card">
|
|
122
|
+
<iframe class="preview" src="02-quantum-quantum-hypersphere-matrix.html" loading="lazy"></iframe>
|
|
123
|
+
<div class="info">
|
|
124
|
+
<h3>Quantum Hypersphere Matrix</h3>
|
|
125
|
+
<p>Hypersphere-warped hypercube - creates complex 4D projection effects with S³ manifold topology</p>
|
|
126
|
+
<div class="meta">
|
|
127
|
+
<span class="system">QUANTUM</span>
|
|
128
|
+
<span class="geo">Geometry 9</span>
|
|
129
|
+
</div>
|
|
130
|
+
<a href="02-quantum-quantum-hypersphere-matrix.html" class="view" target="_blank">View Fullscreen →</a>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<div class="card">
|
|
135
|
+
<iframe class="preview" src="03-quantum-quantum-hypertetra-fractal.html" loading="lazy"></iframe>
|
|
136
|
+
<div class="info">
|
|
137
|
+
<h3>Quantum Hypertetra Fractal</h3>
|
|
138
|
+
<p>Hypertetrahedron core with fractal base - 5-cell pentatope projection creates recursive self-similar structures</p>
|
|
139
|
+
<div class="meta">
|
|
140
|
+
<span class="system">QUANTUM</span>
|
|
141
|
+
<span class="geo">Geometry 21</span>
|
|
142
|
+
</div>
|
|
143
|
+
<a href="03-quantum-quantum-hypertetra-fractal.html" class="view" target="_blank">View Fullscreen →</a>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
<div class="card">
|
|
148
|
+
<iframe class="preview" src="04-faceted-faceted-crystal-structure.html" loading="lazy"></iframe>
|
|
149
|
+
<div class="info">
|
|
150
|
+
<h3>Faceted Crystal Structure</h3>
|
|
151
|
+
<p>Clean SDF crystal geometry - sharp faceted edges with 4D rotation projection</p>
|
|
152
|
+
<div class="meta">
|
|
153
|
+
<span class="system">FACETED</span>
|
|
154
|
+
<span class="geo">Geometry 7</span>
|
|
155
|
+
</div>
|
|
156
|
+
<a href="04-faceted-faceted-crystal-structure.html" class="view" target="_blank">View Fullscreen →</a>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<div class="card">
|
|
161
|
+
<iframe class="preview" src="05-faceted-faceted-klein-bottle.html" loading="lazy"></iframe>
|
|
162
|
+
<div class="info">
|
|
163
|
+
<h3>Faceted Klein Bottle</h3>
|
|
164
|
+
<p>Non-orientable surface with faceted rendering - mathematically impossible 4D object projected to screen</p>
|
|
165
|
+
<div class="meta">
|
|
166
|
+
<span class="system">FACETED</span>
|
|
167
|
+
<span class="geo">Geometry 12</span>
|
|
168
|
+
</div>
|
|
169
|
+
<a href="05-faceted-faceted-klein-bottle.html" class="view" target="_blank">View Fullscreen →</a>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<div class="card">
|
|
174
|
+
<iframe class="preview" src="06-faceted-faceted-hypertetra-torus.html" loading="lazy"></iframe>
|
|
175
|
+
<div class="info">
|
|
176
|
+
<h3>Faceted Hypertetra Torus</h3>
|
|
177
|
+
<p>Hypertetrahedron-warped torus - creates complex toroidal structures through 5-cell projection</p>
|
|
178
|
+
<div class="meta">
|
|
179
|
+
<span class="system">FACETED</span>
|
|
180
|
+
<span class="geo">Geometry 19</span>
|
|
181
|
+
</div>
|
|
182
|
+
<a href="06-faceted-faceted-hypertetra-torus.html" class="view" target="_blank">View Fullscreen →</a>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<div class="card">
|
|
187
|
+
<iframe class="preview" src="07-holographic-holographic-wave-field.html" loading="lazy"></iframe>
|
|
188
|
+
<div class="info">
|
|
189
|
+
<h3>Holographic Wave Field</h3>
|
|
190
|
+
<p>Holographic wave interference patterns - 5-layer glassmorphic rendering with shimmer effects</p>
|
|
191
|
+
<div class="meta">
|
|
192
|
+
<span class="system">HOLOGRAPHIC</span>
|
|
193
|
+
<span class="geo">Geometry 6</span>
|
|
194
|
+
</div>
|
|
195
|
+
<a href="07-holographic-holographic-wave-field.html" class="view" target="_blank">View Fullscreen →</a>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<div class="card">
|
|
200
|
+
<iframe class="preview" src="08-holographic-holographic-hypersphere-sphere.html" loading="lazy"></iframe>
|
|
201
|
+
<div class="info">
|
|
202
|
+
<h3>Holographic Hypersphere Sphere</h3>
|
|
203
|
+
<p>Hypersphere-warped sphere - creates S³ manifold projection with holographic depth layers</p>
|
|
204
|
+
<div class="meta">
|
|
205
|
+
<span class="system">HOLOGRAPHIC</span>
|
|
206
|
+
<span class="geo">Geometry 10</span>
|
|
207
|
+
</div>
|
|
208
|
+
<a href="08-holographic-holographic-hypersphere-sphere.html" class="view" target="_blank">View Fullscreen →</a>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
|
|
212
|
+
<div class="card">
|
|
213
|
+
<iframe class="preview" src="09-holographic-holographic-hypertetra-crystal.html" loading="lazy"></iframe>
|
|
214
|
+
<div class="info">
|
|
215
|
+
<h3>Holographic Hypertetra Crystal</h3>
|
|
216
|
+
<p>Hypertetrahedron crystal lattice - 5-cell pentatope projection with crystalline holographic shimmer</p>
|
|
217
|
+
<div class="meta">
|
|
218
|
+
<span class="system">HOLOGRAPHIC</span>
|
|
219
|
+
<span class="geo">Geometry 23</span>
|
|
220
|
+
</div>
|
|
221
|
+
<a href="09-holographic-holographic-hypertetra-crystal.html" class="view" target="_blank">View Fullscreen →</a>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
<div class="footer">
|
|
228
|
+
<p>
|
|
229
|
+
Generated by VIB3+ ShaderExporter •
|
|
230
|
+
<a href="https://github.com/Domusgpt/Vib3-CORE-Documented01-">GitHub</a>
|
|
231
|
+
</p>
|
|
232
|
+
<p style="margin-top: 10px;">
|
|
233
|
+
Each visualization uses the REAL shader code from VIB3+ systems:<br>
|
|
234
|
+
Quantum (complex lattice), Faceted (clean SDF), Holographic (5-layer glassmorphic)
|
|
235
|
+
</p>
|
|
236
|
+
</div>
|
|
237
|
+
</body>
|
|
238
|
+
</html>
|