how this works

sumerian squares is a trivia game played with animated 3D hosts. a narrator reads each question, the hosts react, and the camera moves like a small broadcast: wide to set the scene, close when someone speaks. this page explains the craft behind that in plain language, and points outward to public references for each idea.

animated hosts

the hosts start from an open-source character kit built for the web: the amazon sumerian hosts project, which pairs animated 3D characters with speech and chatbot services. the kit shows the general shape of the solution — a rigged model, a set of named poses and gestures, and a voice pipeline driving them.

cristine

fiona

grace

maya

alien

luke

jay

preston

wes

real-time 3D on the web

everything renders live in the browser with webgl, the web standard for drawing 2D and 3D graphics on a page. an experienced graphics programmer will recognize the usual pieces: a scene, lights, cameras, meshes, materials, and a frame loop that redraws many times per second. nothing is pre-rendered video; every frame is drawn on your device.

the scene engine

scenes, cameras, lights, and animation playback are managed with babylon.js, an open game and rendering engine for the web. its documentation is the right place to learn how web 3D engines organize animation: clips grouped and blended, weights faded between poses, and cameras scripted around the action.

gestures and emotes

a host performance is a vocabulary of short named movements — a wave, a nod, a shrug, a celebratory cheer — layered over a calm idle pose. professional animation teams build these vocabularies the same way. the blender studio open movies publish their production files and show how performances are constructed clip by clip, which is the best public reference for the discipline.

camerawork

the camera speaks its own language. a wide shot establishes the room, a medium shot carries a conversation, and a close-up lands a reaction. game engines document these patterns well; the unreal engine camera documentation describes stationary cameras, cinematic cameras, and rigs such as cranes and rails. our beats follow the same grammar with our own staging.

voice, visemes, and mouth movement

speech is sound plus timing. a phoneme is a unit of sound; a viseme is the mouth shape that matches it. speech services can return timing metadata alongside audio — for example, amazon polly speech marks include word, sentence, and viseme timings — so a character’s mouth can move in step with the words. pronunciation can be tuned with custom lexicons.

connections to aws and other services

a talking host is several services cooperating: text-to-speech for the voice, timing metadata for the mouth, and conversational services for unscripted replies. the hosts kit’s own description names the pattern — speech plus chatbot services behind one character — and any cloud with those building blocks can host it.

audio on the web

all sound — speech, effects, and music — plays through the browser’s web audio api, the standard interface for routing and mixing sound on a page. volume, ducking under speech, and starting or stopping cues on game events are ordinary applications of that interface.

looking ahead: signing hosts

next with this technology is sign language: a host that signs the question while it reads it aloud, so deaf and hard-of-hearing players get the same performance, not a caption strip. GenASL points the way: generative AI turning speech or text into expressive ASL avatar animation, with fingerspelling as the fallback when a phrase has no canned sign.

the work starts with the hands. a signing host needs finger-level articulation — every sign is a handshape plus a location plus a movement — so the repeatable asset is a sign library: each sign captured once as a short clip, indexed by its gloss, plus the 26 alphabet poses for the fingerspelling fallback. build that library and every sentence becomes a playlist.

the hosts kit already has the machinery for playlists. its gesture feature maps words to named animations and fires them from script or from speech-mark timing, and its animation layers blend override and additive motion with weights and transitions. signs slot into that exact shape: a gesture vocabulary of sign clips, sequenced by sign-timing metadata the way mouth shapes already ride speech timing, with transitions carrying the hands between signs. the face rides along on an additive layer — raised brows, mouth morphemes — without disturbing what the hands are doing.

the build, in general terms: speech or text goes to a signing service in the GenASL pattern, which returns a gloss sequence with timings; the host plays each sign clip as a gesture state, blends through the transitions, and fingerspells whatever has no sign. delivery is the same web pipeline that already serves the voices.