SBS 3D Studio

A single-file 3D scene editor for side-by-side (SBS) 3D displays — 3D TVs, 3D projectors, and anything else that accepts an SBS signal.

Add shapes to a black stage, move them anywhere in X, Y and Z, and watch them sit in front of or behind the screen plane on real stereo hardware.

See it in action: vishnuharidas.github.io/sbs-3d-studio/

First run

This requires a display that supports SBS 3D and accompanying 3D glasses.

Enable SBS 3D (or "Half-SBS 3D", or "Side-by-Side 3d") on your monitor, TV, or projector. Usually found under the display settings. Use the designated 3D glasses.

Open the website and enter Fullscreen mode.

The page opens with a short setup guide. Because a browser gets no signal from the TV about whether SBS processing is switched on, the first screen simply asks the display itself:

How many of this box do you see?

The card is drawn identically in both halves of the frame. In SBS mode the two halves fuse and you see one box; on an ordinary screen you see it drawn twice. Answer, and the guide either walks you through switching the display into Side-by-Side mode, or gives you the tour.

Press Esc to skip it, or ? in the Add panel to bring it back later.

Controls

Mouse

Both halves of the screen are live. In SBS mode the mouse pointer is a single physical dot that lands in whichever half you aim at, so every control works from either copy.

Keyboard

The panels

Everything lives inside one eye's half of the frame and is mirrored into the other, so the panels fuse at screen depth and stay comfortable to read through glasses. Increase font size by Ctrl/Cmd+PLUS if required.

Add object (top-left) — Cube, Sphere, Cone, Cylinder, Torus, Pyramid, Plane and Text. Below it, a list of everything in the scene with each object's Z depth; click a row to select it.

Display & 3D (top-right) — the stereo settings:

Object controls (bottom) — appears when something is selected. Big X, Y and Z sliders with hold-to-repeat ± buttons, plus size, opacity, colour, duplicate and delete. A badge reads pops out 1.4 or behind screen 3.2 so you always know which side of the screen plane the object is on, and Screen depth here moves the screen plane onto the selected object.

Text objects get an editable label in the same panel — click it and type.

Half SBS vs Full SBS

Half SBS (the default) is what virtually every 3D TV and projector expects: each eye is squeezed to half width and the display stretches it back out. On an ordinary monitor this looks horizontally squashed that is correct, and it resolves on the 3D display.

Full SBS keeps each eye at its own aspect ratio. Right for some players and for checking the scene on a normal monitor, wrong on most 3D televisions.

Comfortable depth

• Start with a low Eye sep. Depth that looks impressive for ten seconds is often tiring after two minutes.
• Use Convergence to place the screen plane in the middle of the action, rather than pushing everything forward with eye separation.
• Keep objects that touch the left or right edge of the frame behind the screen plane. An object popping out while it is clipped by the frame edge gives the eyes contradictory cues.
• If depth feels inverted — near things looking far — press Swap L / R rather than adjusting anything else.

Notes

The renderer is hand-written WebGL 1: geometry, lighting, picking and the stereo projection are all in the file, with no three.js or other library, which is what keeps it to one dependency-free document.

Stereo uses off-axis asymmetric frustums rather than toe-in, so an object at the convergence distance lands on exactly the same pixel in both eyes and there is no vertical parallax anywhere in the frame.

The scene is not saved. Reloading the page gives you a clean stage and the setup guide again — nothing is written to browser storage.

A small scripting hook is exposed for building scenes from the console:

SBS3D.add('sphere', { pos: [0, 1, -3], size: 1.4, color: '#4ad9ff' })
SBS3D.add('text',   { pos: [0, 2.5, 1], text: 'HELLO' })
SBS3D.state            // live scene and display settings
SBS3D.select(id)       // select by object id
SBS3D.refresh()        // redraw the panels after changing state directly

Needs a browser with WebGL and hardware acceleration enabled.

Copyright

Another AI experiment by Vishnu Haridas; built entirely with Claude Opus 5.

MIT License © 2026. See LICENSE for full details.