# SYNAPSE v0.27.0 Tutorial and Reference

Source HTML: `synapse_v0_27_0.html`  
Live URL: `https://vibe.cybernoid.xyz/webgpu/synapse_v0_27_0.html`

## Overview

`synapse_v0_27_0.html` is a compact "vector failure" scene built with Three.js. Despite living in the `/webgpu/` directory, this version is not a custom WebGPU shader piece. It uses:

- `THREE.WebGLRenderer`
- `EffectComposer`
- `UnrealBloomPass`
- `GlitchPass`

The look comes from stacking simple systems across different perceptual spaces:

- Object space: a rotating wireframe icosahedron
- World space: a scrolling grid and slowly rotating particle cloud
- Screen space: bloom and timed glitch corruption

That separation is why the effect feels more advanced than the source code size suggests.

## The Core Idea

This effect is not driven by one complicated trick. It works because it combines five readable ingredients:

1. A hard geometric signal core
2. A visible coordinate system
3. Atmospheric depth cues
4. Parametric camera motion
5. Intermittent screen corruption

If you remove any one of these, the piece becomes flatter:

- Remove the grid and the object loses context
- Remove the particles and the camera move loses depth
- Remove the glitch and the scene feels decorative instead of unstable
- Remove the bloom and the lines lose electronic intensity

## Scene Anatomy

### 1. Wireframe Core

The core uses:

```js
const coreGeo = new THREE.IcosahedronGeometry(10, 1);
const coreMat = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
```

Why this works:

- `IcosahedronGeometry` gives a strong triangular topology
- Detail level `1` keeps the structure readable and low-poly
- `MeshBasicMaterial` avoids lighting complexity
- `wireframe: true` turns the surface into signal lines instead of a solid volume

This is the "wired vector" part of the effect. It is not a vector field. It is line topology.

### 2. Grid as Machine Space

The floor uses:

```js
const gridHelper = new THREE.GridHelper(200, 50, 0xff00ff, 0x0000ff);
gridHelper.position.y = -20;
```

Important detail:

- Grid size is `200`
- Divisions are `50`
- Cell size is `200 / 50 = 4`

That explains this line:

```js
gridHelper.position.z = (time * 10) % 4;
```

The modulo is matched to the cell size. This is why the grid scroll loops cleanly without a visible jump.

### 3. Particle Depth Layer

The particles are just random points in a cube:

```js
const pCount = 2000;
for (let i = 0; i < pCount * 3; i++) pPos[i] = (Math.random() - 0.5) * 200;
```

This is cheap but effective:

- It gives depth contrast against the fog
- It makes the camera orbit readable through parallax
- It prevents the scene from feeling empty between the core and the background

### 4. Fog Compression

The scene uses:

```js
scene.fog = new THREE.FogExp2(0x000000, 0.02);
```

Exponential fog is doing more than atmosphere. It compresses distant geometry into black, which makes:

- the core feel brighter
- the particles fade into depth
- the grid read as infinite but not distracting

### 5. Post-Processing

The post stack is:

```js
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new UnrealBloomPass(...));
composer.addPass(glitchPass);
```

What each layer contributes:

- `RenderPass` draws the normal scene
- `UnrealBloomPass` makes bright edges bleed and feel emissive
- `GlitchPass` intermittently corrupts the final image

This is important conceptually: the glitch in this file is screen-space distortion, not object deformation.

## Time and Motion Math

Everything is driven by a single scalar:

```txt
t = (performance.now() - startTime) / 1000
```

That single value drives rotation, camera motion, grid scrolling, palette phase, and glitch timing.

### Core Rotation

```txt
rotX(t) = 0.5 t
rotY(t) = 0.3 t
```

Two different angular speeds prevent the object from feeling mechanically repetitive.

### Particle Rotation

```txt
particleRotY(t) = 0.1 t
```

This adds slow environmental drift behind the faster core.

### Camera Orbit

```txt
x(t) = 30 sin(0.5 t)
z(t) = 40 + 10 cos(0.5 t)
lookAt(0, 0, 0)
```

This is not a circle. It is an ellipse offset forward on the Z axis:

- X amplitude is `30`
- Z amplitude is `10`
- Z center is `40`

That asymmetry makes the orbit feel more cinematic than a perfectly centered circle.

### Grid Scroll

```txt
gridZ(t) = (10 t) mod 4
```

`10` is the scroll speed.  
`4` is the cell size.

Modulo motion is a standard way to create infinite travel from finite geometry.

### Phase Quantization

```txt
phase(t) = floor(t / 3)
color(t) = PALETTES[phase mod 5]
```

The scene changes color every 3 seconds. This produces discrete states instead of smooth interpolation, which makes the scene feel like a machine mode switch.

### Glitch Gating

```txt
glitch(t) = 1 if floor(t) mod 5 == 0 and floor(t) > 0
glitch(t) = 0 otherwise
```

In practice this means:

- the glitch turns on for about 1 second
- it happens every 5 seconds
- it reads like a failure pulse rather than constant noise

## Why the Effect Feels Like Distortion

The file does not perform true mesh distortion. The core geometry stays rigid. The sense of distortion comes from the interaction of:

- orbital camera motion
- fog depth compression
- bloom edge bleed
- hard color phase shifts
- final framebuffer glitch

So the piece looks like it is deforming, but most of the instability is perceptual, not geometric.

## Rebuilding the Effect From Scratch

### Step 1

Create a black scene with fog and a perspective camera.

### Step 2

Place one readable wireframe primitive at the center. Low-poly forms are better than smooth spheres because the edge rhythm matters.

### Step 3

Add a floor grid below the core so the scene gains horizon, scale, and directional travel.

### Step 4

Scatter a moderate number of particles into a large cube. Their job is not realism. Their job is parallax.

### Step 5

Animate object rotation and camera orbit from the same time variable.

### Step 6

Make one background element scroll with modulo arithmetic to create endless motion.

### Step 7

Quantize color or state changes into phases rather than blending everything continuously.

### Step 8

Apply bloom first, then glitch. Bloom gives the signal energy. Glitch gives it instability.

## Shader Translation Reference

If you want to convert this look into real shaders, keep the same conceptual layers.

### Wireframe in a Shader

The standard approach is barycentric coordinates plus edge distance:

```glsl
float edge = min(vBary.x, min(vBary.y, vBary.z));
float wire = 1.0 - smoothstep(0.0, thickness, edge);
vec3 color = baseColor * wire;
```

This reproduces the line-structure directly in the shader instead of relying on `wireframe: true`.

### Grid in a Shader

Generate the grid analytically from repeated world coordinates:

```glsl
vec2 cell = abs(fract(worldXZ / cellSize) - 0.5);
float grid = 1.0 - smoothstep(lineWidth, lineWidth + feather, min(cell.x, cell.y));
```

This gives you an infinite procedural floor without `GridHelper`.

### Glitch in a Shader

A useful minimal glitch recipe is:

- divide the screen into horizontal bands
- randomly offset UVs in some bands
- split RGB channels slightly
- add occasional scanline emphasis

Example:

```glsl
float band = step(0.92, hash(vec2(floor(uv.y * 40.0), floor(time * 8.0))));
float shift = (hash(vec2(floor(time * 20.0), floor(uv.y * 30.0))) - 0.5) * amount * band;

vec3 col = vec3(
    texture(tDiffuse, uv + vec2( shift, 0.0)).r,
    texture(tDiffuse, uv).g,
    texture(tDiffuse, uv - vec2( shift, 0.0)).b
);
```

That produces the same family of failure aesthetic as `GlitchPass`, but under your control.

## Parameter Reference

These are the main values defining the visual identity of this version:

- Core radius: `10`
- Core detail: `1`
- Core rotation speeds: `0.5`, `0.3`
- Particle count: `2000`
- Particle spread: `200`
- Camera X amplitude: `30`
- Camera Z amplitude: `10`
- Camera Z center: `40`
- Grid size: `200`
- Grid divisions: `50`
- Grid cell size: `4`
- Grid scroll speed: `10`
- Phase duration: `3` seconds
- Glitch period: `5` seconds
- Fog density: `0.02`

## Design Lessons

- Strong topology beats high complexity when the goal is a synthetic signal aesthetic.
- A visible coordinate system makes abstract forms feel intentional.
- Parallax is often more convincing than actual deformation.
- Quantized timing creates machine behavior.
- Screen-space corruption is most effective when used as punctuation.

## Technical Identity

The cleanest description of `synapse_v0_27_0` is:

`wireframe topology + coordinate grid + particle depth + elliptical camera orbit + quantized palette mutation + intermittent framebuffer glitch`

That is the real structure of the effect.

## References

- Three.js EffectComposer: https://threejs.org/docs/pages/EffectComposer.html
- Three.js GlitchPass: https://threejs.org/docs/pages/GlitchPass.html
- Three.js UnrealBloomPass: https://threejs.org/docs/pages/UnrealBloomPass.html
- Three.js GridHelper: https://threejs.org/docs/pages/GridHelper.html
- Three.js post-processing manual: https://threejs.org/manual/en/how-to-use-post-processing.html