Two players, two cameras and one extra pass: split screen

· 1 min read · webgpu, three.js, game-dev, multiplayer, odd-and-out

A split-screen view of two characters exploring an island together, each in its own half of the canvas

Odd & Out is played by two heroes, so on one screen it needs two views. The split screen is a small class with one idea: every hero has an eye.

How it works #

  • Each hero has a camera and its own post-processing chain.
  • Each chain draws into a render target half the canvas wide, and a shared view size tells the chain how big its frame is.
  • One last pass lays the two side by side on the canvas, with a thin divider.
const split = new SplitView(renderer)
split.eye(0, post0)
split.eye(1, post1)
split.present()

The final pass is a TSL node material: the left half samples the first target with a stretched u, the right half samples the second, and the divider is a small smoothstep. It is the same on WebGPU and on the WebGL2 fallback.

The analytics funnel in 30 lines #

The game also counts a small funnel: game_start with a mode of solo, local or duo, game_resume, level_reached, game_over and game_complete. It never throws, because counting must not break the game, and a level reached counts once per page load, so going up and down the lifts does not count twice.

Tests as a habit #

The repository has 43 test files in the tests folder: the gait, the fog of war, the landscape generator, the save, the spring physics, the typewriter text and more. Most of the game's logic is written as plain numbers so that Node can run it, with no browser.

The foot analysis is in the gait post, and the fog of war in its own post. The project is on its project page.

Related projects