Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Rose Window

A great Gothic rose window of stained glass in dark stone, the sun passing behind it and dust turning in the light. Loops perfectly.

Background, V1 Effects3DSeamless loop, verified517 lines of codev1.0.0

In Science & maths, Light, glass & shine, Patterns & illusions, Art & illustration styles

Next: Particle GalaxySurprise me

Rose Window preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

12

Petals in the inner ring, an even number: the next ring has twice as many and the outer ring four times as many round windows.

1

How fiercely the sun behind the window blazes through the glass.

1
1
1

How thick the ribs of stone tracery are.

1

How visible the lead lines between the shards of glass are.

1
4

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 4.4 MB)
Info

What it is

A cathedral's rose window seen head-on: a star at the heart, a ring of lens-shaped petals, a ring of twice as many, a ring of round windows, all held by ribs of dark stone, every pane cut into shards of jewel-coloured glass and leaded. The sun goes once round behind the window, blazing the glass white-hot where it stands, catching the stone and sending shafts of light across the dark wall, with motes of dust turning in them. Choose how many petals the window has, the glass (cathedral, jewel, sunset or indigo), the fierceness of the sun, the shafts of light, the dust, the thickness of the stone, the lead and the brightness.

Reuse it in your own idea

  • Reverent backdrop for a choir or organ piece: Cathedral, twelve petals.
  • Fantasy title scene: Jewel glass.
  • Evening documentary title: Sunset glass.

Which part is reusable

src/rose-window.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • The window is always seen head-on and centred: no perspective or tilt.
  • The pattern is a fixed design of a star and three rings; only the number of petals changes.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/rose-window.js
Exports
  • createRoseWindow({ petals?, glass?, sun?, rays?, dust?, tracery?, lead?, brightness?, seed? }) => { scene, camera, material, setSize(width, height), update(time, loopSeconds), dispose() }
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • GLASS: { cathedral, jewel, sunset, indigo }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, the full-screen shader and the bloom targets.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: The window is a circle centred on the frame, 90% of its half-height in radius; its rings are the star (0 – 0.15), the petals (0.15 – 0.47), the double ring (0.47 – 0.735) and the roundels (0.735 – 0.985) of that radius.

Lighting: Self-lit: the glass glows from the sun behind it, the stone and wall catch a little of the glow; the bloom adds the halo.

Timing: update(time, loopSeconds) sets the loop phase; frames render in any order.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — The sun goes exactly once round its circle per loop, the shimmer of the glass and the shafts of light move on circles of a noise, and each mote of dust drifts in sines of whole cycles, so the last frame meets the first.
Tested
Rendered 360 frames on 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
One full-screen pass with a distance field of about thirty shapes, a Voronoi lookup and 64 motes per pixel, then a small bloom. A few milliseconds a frame at 1080p on an integrated Intel GPU. Software WebGL (no GPU) renders in a couple of seconds a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- rose-window/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:ba977bb06629dd5b…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
Provenance
Adapted from the owner's threejs-sketches/architecture-structure/webgpu-gothic-rose-window and light-atmosphere/stained-glass-sun (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original shader: ring and sector tracery as a signed-distance field, Voronoi shards with lead, the sun exactly once round behind the glass, shafts of light and dust on exact loops, and the frame/time contract.
BinMore like this

More like this

Play these full screen

String Art

Background3DSeamless loop12 seconds