# Demoscene Effects Review - vibe.cybernoid.xyz

**Generated:** 2026-04-06  
**Total Files Analyzed:** ~80 HTML files

---

## 1. PROJECT FAMILIES OVERVIEW

The codebase contains multiple generations of demoscene projects, organized into families:

### 1.1 SYNAPSE Family (Audio-Reactive Demos)
| File | Version | Audio Sync | Resolution |
|------|---------|------------|------------|
| `synapse/index.html` | v0.13.x | Yes (JSON timeline) | 1080p |
| `synapse/synapse_13.html` | v0.13 | Yes (Web Audio API) | 1080p |
| `synapse/synapse_13_2.html` | v0.13.2 | Yes (FFT analysis) | 1080p |
| `webgpu/synapse_v0_23_0.html` | v0.23 | Yes (Streaming) | 1080p |
| `webgpu/synapse_genesis-v1_0_9.html` | v1.0.9 | Yes | 1080p |

### 1.2 NEW3D Family (Procedural Worlds)
| File | Version | Features |
|------|---------|----------|
| `webgpu/new3d-v0_0_22.html` | v0.0.22 | Monoliths, terrain, galaxy, multi-cam |
| `webgpu/new3d-v0_0_14.html` | v0.0.14 | Early version |
| `webgpu/new3d-v0_0_16.html` | v0.0.16 | Added features |
| `webgpu/new3d-v0_0_8.html` | v0.0.8 | Base version |

### 1.3 GEMINI/LANDING Family (Landing Pages)
| File | Version | Type |
|------|---------|------|
| `gemini/landing-v0_0_1-5.html` | v0.0.1-5 | Landing pages |
| `gemini/immersive_boilerplate_cyber_tunnel-v1_0_x.html` | v1.0.x | Cyber tunnel |
| `gemini/math-odyssey-dynamic-v1_0_2.html` | v1.0.2 | Math visualization |

### 1.4 LOWPOLY Family (Retro Demoscene)
| File | Version | Resolution |
|------|---------|------------|
| `lowpoly/lowpoly_demoscene_world_v0_2_6.html` | v0.2.6 | 848x420 |
| `lowpoly/lowpoly_demoscene_world_v0_2_5.html` | v0.2.5 | 848x420 |

### 1.5 RUNTIME/ENGINE Family (Player Frameworks)
| File | Purpose |
|------|---------|
| `runtime/runtime1-10.html` | Player runtimes |
| `engine/engine.html-8.html` | Effect engines |

---

## 2. SIMILARITY ANALYSIS (Code Reuse)

### 2.1 NEW3D Series (92-98% Similar)

```javascript
// Shared: Terrain generation (FBM noise)
// new3d-v0_0_22.html:1691-1699
function fbm2(x, y) {
  let value = 0;
  let amplitude = 0.5;
  for (let i = 0; i < 6; i++) {
    value += amplitude * noise2(x, y);
    x *= 2.1; y *= 2.1;
    amplitude *= 0.48;
  }
  return value;
}

// Applied identically in v0_0_24 through v0_0_29
```

**Similarity Map:**
- `new3d-v0_0_22.html` ↔ `new3d-v0_0_24.html` = **97%** (minor cam changes)
- `new3d-v0_0_24.html` ↔ `new3d-v0_0_25.html` = **96%** (added new effects)
- `new3d-v0_0_25.html` ↔ `new3d-v0_0_26.html` = **95%** (post-processing additions)
- `new3d-v0_0_27.html` ↔ `new3d-v0_0_28.html` = **94%** (mobile optimizations)

### 2.2 SYNAPSE Series (85-95% Similar)

```javascript
// Shared: Audio Engine Base Class
// synapse/index.html vs webgpu/synapse_v0_23_0.html
class AudioEngine {
  constructor() {
    this.ctx = new (window.AudioContext || window.webkitAudioContext)();
    this.analyser = this.ctx.createAnalyser();
    this.analyser.fftSize = 512;
    this.dataArray = new Uint8Array(this.analyser.frequencyBinCount);
  }
  getAnalysis() {
    this.analyser.getByteFrequencyData(this.dataArray);
    return { bass, mid, high };
  }
}
```

**Similarity Map:**
- `synapse/index.html` ↔ `synapse_13.html` = **88%** (JSON vs inline)
- `synapse_13.html` ↔ `synapse_13_2.html` = **92%** (refactored audio)
- `synapse_13_2.html` ↔ `synapse_v0_23_0.html` = **78%** (streaming vs buffered)

### 2.3 MOBILE-GEMINI ↔ NEW3D (90% Similar)

The mobile versions are derivatives of new3d with mobile profile adaptations:

```javascript
// mobile-gemini-v0_0_2.html:62-70
const profile = {
  dprMax: isMobile ? 0.92 : 1.1,
  terrainSegments: isMobile ? 110 : 150,
  cloudCount: isMobile ? 44 : 82,
  // ... identical to new3d
};
```

**Similarity:** `mobile-gemini-v0_0_2.html` ↔ `new3d-v0_0_29.html` = **90%**

---

## 3. KEY SHADER PATTERNS

### 3.1 Neon Grid Post-Processing (Most Common)

```javascript
// new3d-v0_0_22.html:1071-1100
const neonGridPass = new ShaderPass({
  uniforms: {
    tDiffuse: { value: null },
    uTime: { value: 0 },
    uResolution: { value: new THREE.Vector2() }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D tDiffuse;
    uniform float uTime;
    uniform vec2 uResolution;
    varying vec2 vUv;
    
    void main() {
      vec2 uv = vUv;
      vec4 color = texture2D(tDiffuse, uv);
      
      // Grid lines
      float gridX = abs(sin(uv.x * 80.0 + uTime * 0.5));
      float gridY = abs(sin(uv.y * 45.0 - uTime * 0.3));
      float grid = smoothstep(0.98, 1.0, max(gridX, gridY));
      
      color.rgb += vec3(0.0, 0.8, 1.0) * grid * 0.15;
      gl_FragColor = color;
    }
  `
});
```

### 3.2 Starfield Shader (Procedural)

```javascript
// new3d-v0_0_22.html:1323-1350
const starMat = new THREE.ShaderMaterial({
  uniforms: {
    uTime: { value: 0 },
    uBaseSize: { value: 1.8 },
    uDensity: { value: 4200 },
    uSpeed: { value: 0.12 }
  },
  vertexShader: `
    uniform float uTime;
    attribute float aSize;
    attribute float aPhase;
    varying float vPhase;
    void main() {
      vPhase = aPhase;
      vec3 pos = position;
      pos.y += uTime * 0.3;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
      gl_PointSize = aSize * (300.0 / -mvPosition.z);
    }
  `,
  fragmentShader: `
    varying float vPhase;
    void main() {
      float d = length(gl_PointCoord - 0.5);
      float alpha = smoothstep(0.5, 0.0, d);
      float twinkle = 0.7 + 0.3 * sin(vPhase * 6.28 + uTime * 3.0);
      gl_FragColor = vec4(1.0, 1.0, 1.0, alpha * twinkle);
    }
  `
});
```

### 3.3 Terrain Material (FBM Displacement)

```javascript
// new3d-v0_0_22.html:1641-1686
const terrainMat = new THREE.MeshStandardMaterial({
  color: 0x141922,
  roughness: 0.92,
  metalness: 0.03,
  emissive: 0x06101c,
  emissiveIntensity: 0.18
});

// Procedural displacement in createTerrain():
const nA = fbm2(x * 0.00115 + 12.4, z * 0.00115 - 9.1);
const nB = fbm2(x * 0.00335 - 21.1, z * 0.00335 + 33.2);
let y = (nA - 0.5) * 210 + (nB - 0.5) * 86;
const ridges = Math.pow(Math.max(0, nA * 0.92 + nB * 0.52 - 0.5), 2.3) * 740;
y += ridges;
```

---

## 4. AUDIO SYNCHRONIZATION SYSTEMS

### 4.1 SYNAPSE: JSON Timeline System

```javascript
// synapse/index.html:485-530
class TimelineRunner {
  computeSegment(tSeconds) {
    const segmentSeconds = this.show.meta.segmentSeconds || 6;
    return Math.floor(tSeconds / segmentSeconds);
  }
  
  update(tSeconds) {
    const currentSegment = this.computeSegment(tSeconds);
    if (currentSegment !== this.lastSegment) {
      this.lastSegment = currentSegment;
      this.runTriggers(currentSegment);
    }
  }
  
  runTriggers(segmentIndex) {
    const triggers = this.show.segments[segmentIndex]?.triggers || [];
    triggers.forEach(trigger => {
      this.targets.set(trigger.target, trigger.value);
    });
  }
}

// Audio sync via expression engine:
const expressionEngine = {
  eval: (expr, context) => {
    return new Function('t', 'bass', 'mid', 'high', 
      `return ${expr}`)(context.t, context.bass, context.mid, context.high);
  }
};
```

### 4.2 SYNAPSE v0.23: Streaming Audio with FFT

```javascript
// webgpu/synapse_v0_23_0.html:94-148
class AudioStreamer {
  constructor() {
    this.audioElement = new Audio();
    this.ctx = new (window.AudioContext || window.webkitAudioContext)();
    this.analyser = this.ctx.createAnalyser();
    this.analyser.fftSize = 512;
    this.data = new Uint8Array(this.analyser.frequencyBinCount);
  }
  
  getData() {
    this.analyser.getByteFrequencyData(this.data);
    
    // Bass (0-5) - Deep sub bass
    let bass = 0; 
    for(let i=0; i<5; i++) bass += this.data[i];
    bass = bass / 5 / 255;

    // Mid (High energy snare/synth range)
    let mid = 0; 
    for(let i=20; i<60; i++) mid += this.data[i];
    mid = mid / 40 / 255;

    return { bass, mid };
  }
}

// Usage in render loop:
function animate() {
  const { bass, mid } = audio.getData();
  
  // Map to visual parameters
  bloomPass.strength = 1.5 + bass * 2.0;
  camera.position.z = 20 + Math.sin(time * 0.5) * 5 * (1 + mid);
  
  requestAnimationFrame(animate);
}
```

### 4.3 SYNAPSE v1.0: Dual-Mode Audio (Synth + MP3)

```javascript
// webgpu/synapse_genesis-v1_0_9.html:83-130
class HybridAudio {
  async start() {
    const mode = String(this.audioConfig.mode || 'synth').toLowerCase();
    if (mode === 'mp3' && this.audioConfig.src) {
      await this.loadMp3FromUrl(this.audioConfig.src);
      this.startMp3Playback();
    } else {
      this.playStartTimeSeconds = this.ctx.currentTime;
      this.scheduleSynthSequence();
    }
  }
  
  getLevels() {
    this.analyser.getByteFrequencyData(this.dataArray);
    return {
      bass: this.dataArray.slice(0, 4).reduce((a,b) => a+b, 0) / 4 / 255,
      mid: this.dataArray.slice(20, 60).reduce((a,b) => a+b, 0) / 40 / 255,
      high: this.dataArray.slice(100, 200).reduce((a,b) => a+b, 0) / 100 / 255
    };
  }
}
```

---

## 5. POST-PROCESSING PIPELINE

### 5.1 Standard Pipeline (All NEW3D variants)

```javascript
// new3d-v0_0_22.html:738-760
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';

const composer = new EffectComposer(renderer);

// 1. Base scene render
const renderScene = new RenderPass(scene, camera);
composer.addPass(renderScene);

// 2. Bloom (glow effects)
const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(width, height),
  1.5,  // strength
  0.4,  // radius  
  0.85  // threshold
);
composer.addPass(bloomPass);

// 3. Custom neon grid
const neonGridPass = new ShaderPass(neonGridShader);
composer.addPass(neonGridPass);

// 4. Tape/Lens effects (v0.0.22+)
const tapeLensPass = new ShaderPass(tapeLensShader);
composer.addPass(tapeLensPass);
```

### 5.2 RGB Glitch Shader

```javascript
// new3d-v0_0_22.html:1124-1200
const tapeLensPass = new ShaderPass({
  uniforms: {
    tDiffuse: { value: null },
    uTime: { value: 0 },
    uResolution: { value: new THREE.Vector2() },
    uTape: { value: 0.15 },
    uLowRes: { value: 0.0 },
    uDefocus: { value: 0.0 }
  },
  fragmentShader: `
    uniform sampler2D tDiffuse;
    uniform float uTime;
    uniform float uTape;
    vec3 sampleRgbSplit(sampler2D tex, vec2 uv, vec2 offset) {
      return vec3(
        texture2D(tex, uv + offset * 0.005).r,
        texture2D(tex, uv).g,
        texture2D(tex, uv - offset * 0.005).b
      );
    }
    void main() {
      vec2 uv = vUv;
      float time = uTime * 0.5;
      
      // Chromatic aberration
      vec3 color = sampleRgbSplit(tDiffuse, uv, vec2(sin(time * 7.0), cos(time * 9.0)));
      
      // Scanlines
      float scan = sin(uv.y * 400.0 + time * 20.0) * 0.04 * uTape;
      color -= scan;
      
      // Vignette
      float vig = 1.0 - length(uv - 0.5) * 0.8;
      color *= vig;
      
      gl_FragColor = vec4(color, 1.0);
    }
  `
});
```

---

## 6. CAMERA SYSTEMS

### 6.1 Multi-Cam System (NEW3D v0.0.22+)

```javascript
// new3d-v0_0_22.html:2050-2200
const cameras = {
  main: { cam: new THREE.PerspectiveCamera(), type: 'main' },
  galaxy: { cam: new THREE.PerspectiveCamera(60, aspect, 0.1, 10000), type: 'galaxy' },
  zodiac: { cam: new THREE.PerspectiveCamera(45, aspect, 0.1, 8000), type: 'zodiac' }
};

let activeCamera = cameras.main.cam;

// Cinematic cuts logic:
function updateCamera(time, audioData) {
  const cutSchedule = [
    { time: 0, camera: 'main' },
    { time: 15, camera: 'galaxy' },
    { time: 30, camera: 'main' },
    { time: 45, camera: 'zodiac' },
    // ... more cuts
  ];
  
  const currentCut = cutSchedule.find(c => time >= c.time && time < c.time + 10);
  if (currentCut && currentCut.camera !== activeCamera.type) {
    activeCamera = cameras[currentCut.camera].cam;
    transitionCamera(activeCamera);
  }
}
```

### 6.2 Handheld Stabilized Camera (LOWPOLY)

```javascript
// lowpoly/lowpoly_demoscene_world_v0_2_6.html:800-850
const cameraShake = {
  position: { x: 0, y: 0, z: 0 },
  rotation: { x: 0, y: 0, z: 0 },
  update(time) {
    // Ultra-stabilized handheld feel
    const t = time * 0.3;
    this.position.x = Math.sin(t * 1.1) * 0.02 + Math.sin(t * 2.7) * 0.01;
    this.position.y = Math.sin(t * 0.9) * 0.015 + Math.sin(t * 3.1) * 0.008;
    this.rotation.z = Math.sin(t * 0.8) * 0.003;
  }
};
```

---

## 7. VISUAL EFFECTS CATALOG

### 7.1 Particle Systems

| Effect | Files | Implementation |
|--------|-------|----------------|
| Starfield | new3d-v0_0_22+, mobile-gemini | THREE.Points + ShaderMaterial |
| Galaxy spiral | new3d-v0_0_22 | Spiral distribution + shader |
| Fireworks | lowpoly | Point sprites + gravity |
| Cloud chunks | new3d-v0_0_22 | THREE.Group + D20 geometry |
| Searchlights | new3d-v0_0_22 | THREE.SpotLight + volumetric |
| Ambient dust | new3d-v0_0_22 | Particle system with fog |

### 7.2 Geometry Systems

| Effect | Files | Implementation |
|--------|-------|----------------|
| Monoliths | new3d-v0_0_22 | BoxGeometry + edges + emission |
| Holograms | new3d-v0_0_22 | Custom ShaderMaterial |
| Terrain | new3d-v0_0_22 | PlaneGeometry + FBM displacement |
| Neon wireframes | new3d-v0_0_22 | LineSegments + bloom |
| Grid floor | new3d-v0_0_22 | GridHelper + custom shader |

### 7.3 Post-Processing Effects

| Effect | Files | Technique |
|--------|-------|-----------|
| Bloom | All Three.js | UnrealBloomPass |
| Neon grid | new3d series | Custom ShaderPass |
| RGB glitch | new3d-v0_0_22+ | Chromatic aberration + scanlines |
| Tape distortion | new3d-v0_0_22+ | UV displacement + noise |
| Heat haze | giza-drone-flight | Refraction shader |
| Eclipse corona | giza-drone-flight | Additive blending |

---

## 8. UI/HUD SYSTEMS

### 8.1 Overlay System

```javascript
// Common pattern across all files
#hud-layer {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}

.hud-item {
  position: absolute;
  font-family: 'Share Tech Mono', monospace;
  color: rgba(0, 243, 255, 0.8);
  text-shadow: 0 0 8px var(--neon-cyan);
}
```

### 8.2 Timeline Controls

```javascript
// common in demos: some.html, synapse series
#timeline-container {
  width: 100%;
  height: 4px;
  background: #333;
  cursor: pointer;
}

#timeline-progress {
  height: 100%;
  background: #0ff;
  box-shadow: 0 0 10px #0ff;
}
```

---

## 9. FILE CONNECTIONS DIAGRAM

```
┌─────────────────────────────────────────────────────────────┐
│                    NEW3D EVOLUTION                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  new3d-v0_0_8 ──→ v0_0_14 ──→ v0_0_16 ──→ v0_0_22         │
│      │            │            │            │              │
│      └────────────┴────────────┴──────→ v0_0_24            │
│                                           │                 │
│                              ┌────────────┴────────────┐   │
│                              │                         │   │
│                         v0_0_25 ──→ v0_0_26 ──→ v0_0_27 │
│                              │            │            │
│                         v0_0_28 ──→ v0_0_29            │
│                              │                         │
│                     ┌────────┴────────┐               │
│                     │                 │               │
│              mobile-gemini       dev1-new3d            │
│               (v0_0_1, v0_0_2)     (v0_0_1, v0_0_2)    │
│                                                             │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                    SYNAPSE EVOLUTION                        │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  synapse_13 ──→ synapse_13_2 ──→ synapse_v0_23_0          │
│      │               │                  │                  │
│      │               └────────┬─────────┘                  │
│      │                        │                            │
│      │                   synapse_genesis-v1_0_9           │
│      │                        │                            │
│      └────────────┬───────────┴─────────────┐             │
│                   │                         │             │
│              synapse_merged (v1_1_2)    SYNAPSE DEMOSCENE │
│                                           STUDIO           │
│                                                             │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                    LANDING PAGE FAMILY                      │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  gemini/landing-v0_0_1 ──→ v0_0_2 ──→ v0_0_3 ──→ v0_0_4 ──→ v0_0_5
│                                                             │
│  gemini/immersive_boilerplate_cyber_tunnel-v1_0_5          │
│         ↓                                                   │
│       v1_0_6 ──→ v1_0_10                                    │
│                                                             │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                    RUNTIME/ENGINE FAMILY                    │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  engine.html ──→ engine2 ──→ engine3 ──→ engine4 ──→ ... ──→ engine8
│      │                                                       │
│  runtime1 ──→ runtime2 ──→ runtime4 ──→ runtime5 ──→ ... ──→ runtime10
│                                                             │
└─────────────────────────────────────────────────────────────┘
```

---

## 10. SUMMARY STATISTICS

| Metric | Value |
|--------|-------|
| Total HTML files | ~80 |
| WebGL/WebGPU demos | ~45 |
| Audio-sync demos | ~15 |
| Standalone engines | ~10 |
| Landing pages | ~8 |
| Average file size | 50-200KB |
| Largest file | `new3d-v0_0_22.html` (3194 lines) |
| Most used library | Three.js r160 |
| Common resolution | 1920x1080, 848x420 |

---

## 11. KEY CODE SNIPPETS COLLECTION

### A. FBM Noise Implementation
```javascript
function fbm2(x, y) {
  let value = 0, amplitude = 0.5;
  for (let i = 0; i < 6; i++) {
    value += amplitude * noise2(x, y);
    x *= 2.1; y *= 2.1;
    amplitude *= 0.48;
  }
  return value;
}
```

### B. Audio Analyzer Setup
```javascript
this.analyser = this.ctx.createAnalyser();
this.analyser.fftSize = 512;
this.analyser.smoothingTimeConstant = 0.78;
this.data = new Uint8Array(this.analyser.frequencyBinCount);
```

### C. Bloom Pass Configuration
```javascript
const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(width, height),
  1.5,  // strength
  0.4,  // radius
  0.85  // threshold
);
```

### D. Shader Uniform Update Loop
```javascript
function updateUniforms(time, audioData) {
  neonGridPass.uniforms.uTime.value = time;
  tapeLensPass.uniforms.uTime.value = time;
  bloomPass.strength = 1.5 + audioData.bass * 2.0;
  terrainMat.emissiveIntensity = 0.18 + audioData.mid * 0.3;
}
```

---

*End of Review*