Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Glass Container

A clear glass box with real wall thickness, set up so objects inside it look right.

3D object, V2 Objects3DSeamless loop, verified72 lines of codev1.0.0

In Light, glass & shine

Next: Physical LightsSurprise me

Glass Container 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

Colour the glass picks up through its thickness.

0.03

0 is crystal clear; higher is frosted.

1.5

1.5 is window glass, 1.33 water, 2.4 diamond.

0.07
1

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

View code Sample video (default settings, 651 KB)
Info

What it is

A see-through glass box (open top by default) made of solid panes with real thickness, and a physically based glass material that bends the light behind it. Glass is easy to get wrong in 3D: this one is configured the way the renderer needs it, so you can drop things inside, pour balls into it, or turn it on a turntable. Its inside measurements line up with the Bouncing Balls simulation by default.

Reuse it in your own idea

  • Pour Bouncing Balls into it — the default inner size is the same 4 × 3 × 4 box (see Bouncing Marbles in a Box).
  • Use createGlassMaterial alone on a sphere or a bottle shape.
  • Close the lid (open: false) for a display case around a product.

Which part is reusable

src/glass-container.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

See it combined with other ingredients in Bouncing Marbles in a Box.

Good to know

  • No glass-behind-glass: the back pane is not visible through the front pane.
  • No caustics (light focused through glass onto the floor).

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/glass-container.js
Exports
  • createGlassMaterial({ tint?, roughness?, thickness?, ior?, attenuationDistance? }) => THREE.MeshPhysicalMaterial
  • createGlassBox({ width?, height?, depth?, wall?, open?, material? }) => THREE.Group
  • disposeGlassBox(group) => void
Dependencies (exact)
  • three@0.185.1 (source) — WebGL rendering (MeshPhysicalMaterial transmission).
  • chrome-material@1.0.0 (demo) — Demo uses createStudioEnvironment for reflections and a chrome ball. Any environment map works with the glass.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Y-up. Floor top at y = 0, centred on the origin. Matches Bouncing Balls' default box when width 4, height 3, depth 4.

Lighting: Image-based: set scene.environment (e.g. createStudioEnvironment from Chrome Material). Tone mapping recommended.

Timing: Static object. The demo rotates a turntable group.

Output
1080×1080, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — Whole turntable turns over the clip (seamless when Turns per clip is a whole number, which it always is).
Tested
Rendered 240 frames on 2026-10-02 in Chrome 151.0.7922.137 headless on Linux 7.0.0-31-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 extra render pass for transmission. Fine on laptops; heavy on low-end phones at 4K. Avoid many separate transmissive objects; each one still shares the single transmission pass but overdraw adds up.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- glass-container/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:e49102f806f213e2… · other versions: 1.1.0
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
Original code written for AI Pixel Wizard in October 2026. No external textures or models.
BinMore like this

More like this

Play these full screen

Resin Pour

3D object3DSeamless loop14 seconds

Snow Globe

3D object3DSeamless loop12 seconds