Watch a basketball replay from a courtside seat in a VR headset
basketball.casa is a basketball league where every game is simulated. Nobody scripts the plays. Each one comes out of who the players are at that moment: how tall, fast and tired they are, what they can see, and what they decide. You can watch any game back exactly as it happened. Now you can also watch it from a seat beside the court, in a VR headset.
How to get in
Open any replay on its own page in your headset's web browser. Where the browser supports virtual reality (the WebXR standard that headset browsers build in), an Enter VR button appears. Press it and you are standing at the side of the court, level with the half-way line, a metre and a half back from the sideline, facing the play. There is nothing to install. On a phone or a computer without a headset the button never shows and the replay is exactly as it was.
Real size, not a model on a table
The game already measures everything in metres: where each player stands, how tall they are, how high the rim is. The headset's world is in metres too, so nothing is scaled. A player two metres tall stands two metres tall a few steps from you, and the rim is three metres up. The only work was turning one frame into the other: the headset counts "up" along a different direction from the court and looks along its own forward direction, so the seat is a quarter turn and a heading:
export const rigPose = (seat, floor = true) => ({
position: [seat.stand[0], seat.stand[1], seat.stand[2] + (floor ? 0 : STANDING_EYE_M)],
quaternion: then(about(0, Math.PI / 2), about(2, seatYaw(seat.stand, seat.look) - Math.PI / 2)),
});
Headsets that know where your floor is put your feet on the court's floor. One that does not still places you at the seat, with your eyes 1.6 metres up, the height of a standing viewer.
Drawn from the same numbers
Every body, ball and hand in the headset is placed by the same code that draws the flat replay, from the values that decided each play. Only the camera changed: on a screen the picture is drawn when something moves, and in a headset it is drawn on every frame, because your head moves even when the players do not.
How it was tested without a headset
Every check runs in a browser with no screen, with an emulated headset standing in for a real one. The tests enter VR the way you would, then read back what each eye was shown. The two eyes are 6.3 centimetres apart, as the headset's are, and each sees a slightly different picture. The floor fills the lower part of the view and the dark hall the upper part, so the seat stands the right way up. Another test checks that a browser with no headset is never offered the button. The picture above is one eye's view, read straight from such a test.