GTA 5 Style Characters for a Browser Game

Lesson 1

The Result: What GTA Style Actually Means

When players say a browser game feels like Grand Theft Auto, they almost never mean the graphics budget. They mean a short list of behaviours. The camera floats behind the character and a little above, so you see your person in the world instead of seeing through their eyes. The character idles with a bit of life in them, walks, breaks into a run, jumps, sits down in vehicles and on benches, and waves at people. A minimap sits in the corner. The whole thing responds instantly, on a phone, in a browser tab, with no install.

That list is good news. It means the hard part is not modelling a movie quality human. The hard part is motion that blends: a walk that starts and stops without popping, a run that grows out of the walk, a jump that takes off and lands, a wave that rides on top of whatever the legs are doing. Get the motion system right and even a modest character reads as GTA style. Get it wrong and a beautiful model still moves like a shop mannequin.

This course is the full case study of one game that made that jump: E2 World, a free browser island game whose cast are real people. The three finished models are pictured at the top of this page: the player character in a blue sweater and khaki chinos, Sam in a cream knit and jeans, and Harsh in a pink floral shirt and a straw hat. They shipped in the game's V 0.13 release on November 13, 2026. Everything below is exactly how they were made, including the routes that failed first.

Lesson 2

Start With a Rig Standard, Not a Model

The single most valuable decision in this whole project was made before any character existed: one skeleton for everybody. Every character in the game, however their mesh is made, stands on the same 19 joint human rig, with the same joint names, in the same units. A model that does not match the standard does not ship, full stop.

The rest of the standard is five lines long, and every one of them earned its place by breaking something when it was ignored:

• Units are metres, Y is up, the character faces +Z, and their feet sit at the origin. A model that arrives in centimetres is a hundred times too big, and the game will not rescue it.
• The rest pose has the arms hanging straight down, not out in a T. Pose copying (Lesson 8) does its maths relative to the rest pose, so a surprise rest pose twists every copied pose.
• Joint names are exact: LeftUpLeg, RightForeArm, and so on. Retargeting and pose copying find bones by name. One renamed joint is one silently frozen limb.
• Each character is one GLB file with the mesh, the textures and all six clips inside. One file, one download, nothing to assemble at run time.
• The file's root node carries extras: the character's height in metres, which clips loop, and the ground speed the walk and run were animated at. The loader reads these to scale the character and pace the steps (Lesson 7).

With the standard fixed, characters become interchangeable parts. A body from any source can be converted onto the rig, any clip can be retargeted onto any character, and the game code never learns where a body came from. That is what made the fifth route in Lesson 4 possible: when a better body source turned up, only the files changed.

Lesson 3

The Animation Set: Six Clips

Six clips cover almost everything a person does in a friendly open world game. Every character carries the same six, with these exact names, all animated in place: the character walks on the spot, and the game moves the body through the world. In place animation is what lets one clip serve any speed, any slope, any vehicle-free moment, because the motion and the movement are separate dials.

Lengths and speeds above are the player character's; Sam and Harsh carry the same set at their own heights and paces (their walks are animated at 1.18 and 0.88 metres per second). Three details separate clips that blend from clips that fight:

• The wave is an overlay, not a takeover. In the game, waving fades in on top of idle or walking for the upper body while the legs keep doing their job, so a character can greet you without stopping dead.
• The jump is played as a held pose in the air. The loader parks the clip at 52 percent, mid-flight, for as long as the character is airborne, so a long jump and a short hop both look right.
• Walk and run are phase locked. Both clips advance from one shared stride clock, the run offset by half a cycle, so speeding up never restarts the step pattern mid-stride.

Lesson 4

Five Routes to a Character

This is the honest history, because the failures are where the tuition is. The game needed its real cast, recognisable people, moving properly, in a browser. Five routes were tried.

Route 1: flat art cards. The game began with illustrated 2D characters, portrait art on cards that glide around the world. Charming, cheap, and instantly recognisable, but they cannot turn, sit in a car, or cast a shadow, and the moment the world went fully 3D they looked like paper cutouts in a diorama. They survive as an optional look in the game's phone settings.

Route 2: bodies built from code. A function in the game builds a person from shapes (a lathe-turned torso, capsule arms and legs) dressed by a colour recipe per character, with their real face as a texture. This worked from day one and still runs underneath everything (Lesson 9). Its ceiling is style: it reads as a friendly toy person, not a GTA person.

Route 3: hand-built 3D masters. Next, full GLB masters were built programmatically to the rig standard: correct skeleton, all six clips, the right outfits, and each person's real face mapped onto the head. On paper, perfect. On screen, stiff low-poly bodies wearing photograph faces, and the verdict from the game's owner was two words: not good. The lesson cost a day and is worth a fortune: a technically correct character that looks wrong is wrong. Correct rig, correct clips, wrong art direction.

Route 4: image-to-3D services. The fashionable route: upload a character picture to Meshy or Tripo, get a textured mesh, auto-rig it, add animations. Three problems. Both services need your own account and spend credits, so an AI agent cannot simply go and do it for you. The likeness is a lottery: a generated sculpt of a real person comes back as a cousin, not the person. And the skeleton you get is the service's skeleton, not your standard, so every model still needs conversion before the game can use its motion. For invented characters this route is genuinely good (Lesson 10 prices it). For a cast of real people, it was the wrong tool.

Route 5: an open avatar library, restyled. Microsoft Research published the Rocketbox library: 115 professionally made human avatars, fully rigged and textured, with 417 animations, under the MIT licence. Pick the avatar whose build and face shape are closest to your person, restyle the outfit and hair to match their look, retarget the six standard clips onto the rig standard, and the character is suddenly a real 3D person with broadcast quality motion, for zero dollars and a clear licence. That is what shipped. Lesson 5 is the recipe.

One more thread ran through every route: faces kept breaking. Crops drifted, textures landed rotated, a fix for one character slid another's face sideways. Faces got their own contact sheets and their own fix rounds, three strips of test renders in a row, before they behaved. Budget for faces as a separate job (Lesson 6), not as a detail of the body job.

Lesson 5

The Winning Recipe, Step by Step

Here is the exact pipeline that produced the three shipped characters. It assumes your rig standard (Lesson 2) and clip list (Lesson 3) already exist.

1. Pick the closest avatar. Rocketbox ships 115 avatars in four levels of detail, from ultra-low to high poly. For a browser game, take a low or mid level: enough shape to read as a real person, small enough to download fast. Match on build, face shape and hair first; clothes can change, skulls cannot.
2. Convert FBX to GLB. The library ships as FBX. One pass through Blender (or an FBX converter) produces a GLB with the mesh and textures embedded, the format the web loads natively.
3. Restyle to the person. Recolour and swap the outfit textures to the character's signature look, and adjust hair. The three shipped looks: a blue sweater over a white tee with khaki chinos and brown sneakers; a cream knit with blue jeans and white sneakers, hair in a black ponytail; a pink floral shirt with cream trousers, a straw hat and sunglasses.
4. Retarget the motion. Take the library's idle, walk, run, wave and sit animations and retarget them onto the 19 joint standard skeleton, trimming each clip to a clean loop. The library's own skeleton is close to standard humanoid, which is what makes this a mapping job instead of a research project.
5. Key the jump by hand. The one clip with no library source in the right shape: a 1 second arc, crouch, launch, tuck, land, keyed pose by pose. Half a day of the whole job was this one second, and it is the clip players feel most.
6. Compress for the web. Textures re-encoded as WebP inside the file, geometry stored with KHR mesh quantization, clips trimmed to the frames that matter. The results: about 330 KB for the player character, about 400 KB for Sam, about 380 KB for Harsh. Each downloads in about a second on a ordinary connection, and only when needed (Lesson 7).
7. Stamp the extras. Write the character id, height, looping clips, walk and run ground speeds, and the licence credit into the root node's extras, where the loader can read them.

The full asset list for one finished character is short enough to print on the course page:

Lesson 6

Faces: Keeping a Real Person Recognisable

Players forgive a generic body instantly. They never forgive a wrong face. The game's cast are real people, so the face rules were set in writing before any modelling:

• Original faces are protected. Three of the cast have original portrait art that must never be regenerated or replaced by an AI likeness. If a pipeline cannot keep the original face, the pipeline is wrong, not the face.
• Each face has one named source. One person's face comes from their photo, one from her character sheet, one is a generated portrait made for the game. One source per face, written down, so nobody improves a face by accident.
• Outfits carry identity too. The pink floral shirt and straw hat do as much recognition work as any cheekbone. When the mesh is a restyled library avatar, the signature outfit is what makes the character that person at gameplay distance.

Mechanically, the face lives in two places. The code-built body wears the real face as a texture on its head, painted or photographed, kept bright and unlit so it matches the picture. The GLB model carries its own head, chosen and restyled to be as close as selection allows. At the distance the GTA camera actually sits, face shape, hair, skin tone and outfit agree, and recognition lands.

The craft lesson from the fix rounds: test faces on a contact sheet, all of them, every time. One render with every character's head in a row shows a drifted crop or a rotated texture in seconds. Testing one character at a time is how a fix for one face quietly slides another.

Lesson 7

The Loader: New Bodies in a Running Game

The models would be worthless if wiring them in meant rewriting the game. Instead, one small module, e2-models.js, sits between the game and the files, and the game talks to it in exactly two calls:

Everything else is the module's problem, and it is engineered around one principle: the game must never wait for a model, and never break without one.

• Lazy, visible-only downloads. Nothing downloads during start-up. A sweep every 600 milliseconds checks which characters are actually on stage and visible; only those models are fetched. Reserve bodies the game keeps off screen cost zero bandwidth.
• The old body shows until the model lands, and stays forever if the download fails. The swap hides the code-built meshes (held items the game added still show) and drops the model in their place.
• Every instance gets its own bones. The file is parsed once, then cloned per character with a private skeleton bound to the shared geometry and textures, so ten copies of one character animate independently for the price of one download.
• Materials are translated to the game's lighting. The game lights everything with simple Lambert materials and no colour management, so the loader rebuilds the model's materials as Lambert with the same textures. Skip this and the new bodies glow against the world like stickers.
• Height is normalised from the extras. The code-built body stands 2.02 world units tall; a full height model is 1.82 metres. Each model is scaled by that ratio and by its own stamped height, so a 1.49 metre character and a 1.71 metre character keep their real proportions next to each other.

Adding a character, once their file exists, is one line in the module's file table and one GLB dropped in the models folder. Sally, Chadwick, Dinesh and the rest of the cast still wear their code-built bodies today, and each can graduate the same way whenever a file is ready.

Lesson 8

Two Ways to Move: Clips and Pose Copying

A GTA character does two kinds of moving. Ordinary life (standing, walking, running, jumping) is repetitive and belongs to motion clips. Posed moments (waving is the borderline case, plus emotes, sitting in a car, holding the train rail) are one-offs the game invents on the fly. The loader runs both systems on the same bones and blends between them:

Clip mode. Four clips carry weights that slide with speed. Idle owns the character at rest. Walking fades in as speed rises from 0.3 to 2.2 metres per second. Running takes over from walking between 5.5 and 12. The step rate is not fixed: the stride clock speeds up with the character, from 0.85 times at a stroll to 1.75 times at a sprint, capped so feet slide a little rather than moonwalk a lot. Waving fades in and out over the top, and the jump weight follows how airborne the body is. The game's own bounce is cancelled out of the model, because the clips carry their own.

Rig mode. The game has always posed its code-built bodies directly: a handful of pivots with names like lL (left hip), kL (left knee), aR (right shoulder), eR (right elbow) and head. The loader keeps a translation table from those nine pivots to the model's real bones, precomputed against the rest pose, so when the game poses its simple body (an emote, a driving pose, sitting on the train), the loader copies the pose onto the model's skeleton in the model's own axes. Every animation the game ever had keeps working, unmodified, on the new bodies.

The blend. Switching modes is not a cut. The loader snapshots the bone rotations, flips mode, and eases across 0.16 seconds with a smoothstep. That small number is the difference between a character who glides from a wave into a walk and one who snaps like a folding ruler. Detecting which mode should be live is equally plain: if the game posed a pivot since the last frame, or an emote is active, rig mode wins; otherwise clips run.

Lesson 9

The Body Underneath: Characters Built From Code

Under every GLB in the game stands a complete character built from raw geometry, and it deserves its own lesson, because for most of the cast it is still the only body they have. The builder, makeRigChar, assembles a person from turned and stretched shapes: a lathe profile for the torso (eleven points from hip to neck), capsules for arms and legs, spheres for hands, ears and shoes, a shaped head with the character's face texture on the front, and hair built to a named style: short, messy, ponytail, bun, long, or a hat over any of them.

What each character wears is data, not code. One recipe per person in a table called LOOK:

Shirt, trousers, hem, skin, hair, hairstyle, sleeves, knitwear, hat, shoes: read the two entries and you can see the two people. Stripes, jackets, collars, decals, necklaces and beards are options in the same table. Changing a character's outfit is editing one line, which is why the game's phone can offer a Look setting at all.

Its animation, animChar, is one sine wave. A phase advances with speed; hips and knees swing against each other, shoulders counter-swing, the head bobs, and emotes layer extra rotations on top. It is roughly forty lines, it has never crashed, and it makes a toy person walk convincingly enough that the game shipped on it for months. The GLB models did not replace it. They stand on it: it builds the character, poses the character, and hands over to the model only when the model is ready.

Lesson 10

Motion Libraries, Character Sources, and the Bill

Everything the shipped route used is free. That was a choice, not a constraint: here is the honest map of the alternatives, so you can choose with your eyes open. Prices checked November 13, 2026, and they move; treat every figure as an estimate.

Motion and rig sources

Character sources

The Claude bill. The conversion, restyling, retargeting checks, loader module and its fixes were done by Claude working in the game's repository (Claude Code), directed by a person. There are two ways to pay for that, and the right one depends on how often you do it:

The arithmetic, so you can check it: a job like V 0.13 (three characters converted and verified, a loader written into a game file of about 625 KB, then several rounds of render, inspect and fix) burns roughly 3 to 8 million tokens in total, most of them cached input reads at a tenth of the input price. Multiply your own token guess by the rates above and you have your estimate. On a subscription the same work is simply inside the flat month: Claude Code comes with Pro at $20 a month, Max at $100 or $200, and this build was done that way, across about two days of back and forth, most of it waiting on renders and verdicts rather than on the model. The practical guidance: prototype and convert on Sonnet, call Opus in for the loader and the stubborn bugs, and let Haiku do renames, tables and other clerical work. Hiring the same outcome the human way (a freelance character artist to model, rig and animate one original character) is normally quoted in days per character and hundreds of dollars per character, which is the comparison that makes the table above look the way it does.

Total cash spent on the shipped characters: zero dollars in assets, a share of one Claude subscription, and about two days of a person's direction, testing and taste. The taste, it turns out, was the scarce input all along.

Sources

The shelves this course was built from

• Microsoft Rocketbox avatar library, the avatars, rigs and motion used for the shipped models (github.com), github.com/microsoft/Microsoft-Rocketbox. MIT licence; the library paper is Gonzalez-Franco et al., "The Rocketbox library and the utility of freely available rigged avatars", Frontiers in Virtual Reality, 2020.
• The game itself: E2 World, live and free, including the models folder notes and loader described in Lessons 5 to 8 (openarcade.lol), openarcade.lol/e2world
• Meshy pricing and credit costs, from Meshy's own pages as read by Bake3D's pricing guide, October 2026 (bake3d.ai), bake3d.ai/guides/meshy-ai-pricing
• Meshy and Tripo rigging, animation and credit comparison (bake3d.ai), bake3d.ai/guides/meshy-vs-tripo
• Tripo rigging and animation pricing, 20 credits per rig and per animation, presets free (tripo3d.ai), tripo3d.ai/blog/rigging-animation
• Claude API prices per million tokens, Anthropic's published rates as collected November 2026 (infro.io), infro.io/blog/claude-api-pricing-2026
• Claude Code subscription prices, Pro $20, Max $100 and $200 a month (max.nardit.com), max.nardit.com/articles/claude-code-cost