Draw posture avatar

Render the front and side posture avatar for a Bodygram Scanner Platform response with two method calls.

Overview

Once you've captured a scan and called getBodygramScannerPlatformPhotoEstimation, the response includes both the avatar mesh (entry.avatar) and posture analysis (entry.posture). DrawUtils combines the two into a single drawing call per view, giving you the avatar with the posture overlay lines baked on top.

There are two methods, one per view:

drawFrontPosture(response, options) — renders the front-view avatar with shoulder, hip, and ear-tilt posture lines.
drawSidePosture(response, options) — renders the right-view avatar with the body-line segments.

Both methods take the full response object returned by the photo-estimation call (not just the avatar field) and a draw-options object.

Usage

const utils = new BodygramSDKDrawUtils({ locale: 'en' });

utils.drawFrontPosture(response, { container: 'front-posture' });
utils.drawSidePosture(response, { container: 'side-posture' });

<div id="front-posture"></div>
<div id="side-posture"></div>

The methods return the rendered DOM node, so you can also append it yourself if you prefer:

const node = utils.drawFrontPosture(response, { container: null });
myCustomMount.appendChild(node);

Reference

Full method signatures, parameter tables, return values, and throws semantics → drawFrontPosture(...) and drawSidePosture(...) in the API reference.
Mount target and presentation options → DrawOptions, including the container resolution table.

Localization

Posture overlays render any text labels (when present in the avatar canvas template) in the locale passed to the DrawUtils constructor. See the supported locales table for the full list of accepted codes — the playground below exposes the selector.

Playground

Try it with the sample response, or upload your own. Each render pulls entry.avatar and entry.posture from the response and hands them to DrawUtils — no extra wiring required.

Interactive Demo

Scan response

Fetched from /success-response/platform-success-response-2.json.

Locale

Locale is forwarded to the rendered avatar canvas and reflected in the snippet on the right.

Front posture

Loading…

Side posture

Loading…

index.html · UMD

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Bodygram DrawUtils — Posture</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 24px; }
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .grid > div { aspect-ratio: 3 / 4; background: #ffffff; border: 1px solid #e5e5e5; }
  </style>

  <!-- 1. Bodygram Headless SDK (UMD) — produces the estimation response -->
  <script src="https://headless.body2fit.bodygram.com/sdk.umd.js"></script>

  <!-- 2. three.js — UMD requires three <= 0.160.0 -->
  <script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script>

  <!-- 3. DrawUtils (UMD build) — reads `entry.avatar` and `entry.posture` -->
  <script src="https://headless.body2fit.bodygram.com/sdk.drawutils.umd.js"></script>
</head>
<body>
  <div class="grid">
    <div id="front-posture"></div>
    <div id="side-posture"></div>
  </div>

  <script>
    (async () => {
      // 1. Run a scan and estimate measurements with the main SDK.
      //    `token` comes from your server, where your API key lives.
      const sdk = new BodygramSDK({ clientKey: 'YOUR_CLIENT_KEY', locale: 'en' });
      const { front, side } = await sdk.scan();
      const response = await sdk.getBodygramScannerPlatformPhotoEstimation({
        token,
        front,
        side,
        age: 25,
        gender: 'male',
        height: 1800,
        weight: 70000,
      });

      // 2. Hand the full response to DrawUtils.
      const utils = new BodygramSDKDrawUtils({ locale: 'en' });
      utils.drawFrontPosture(response, { container: 'front-posture' });
      utils.drawSidePosture(response, { container: 'side-posture' });

      // Alternatively, if you already have a successful estimation
      // response stored on your server, fetch it and pass it straight in:
      //
      //   const saved = await fetch('/api/scans/abc123').then(r => r.json());
      //   utils.drawFrontPosture(saved, { container: 'front-posture' });
      //   utils.drawSidePosture(saved, { container: 'side-posture' });
      //
      // DrawUtils throws if `entry.status !== "success"` or if the
      // response shape is invalid — always pass the full envelope as
      // returned by `getBodygramScannerPlatformPhotoEstimation`.
    })();
  </script>
</body>
</html>

How it works

The playground does exactly what the snippet on the right does:

Load three.js and DrawUtils. The UMD example loads three@0.160.0 first (the last UMD release on npm) so it attaches to window.THREE, then loads sdk.drawutils.umd.js which reads THREE off the global. The ES example skips both globals and uses an importmap to resolve the bare import "three" inside the ES build.
Fetch the scan response. In production you call your own server endpoint that proxies getBodygramScannerPlatformPhotoEstimation so your API key never reaches the browser. The playground uses a static sample at /success-response/platform-success-response-2.json.
Construct DrawUtils. A single instance is reused for both views.
Draw the front and side posture. Each call mounts an interactive avatar canvas inside the target container and returns the node.

DrawUtils API reference — full method signatures, options, and types.
Loading DrawUtils — script URLs and the three.js peer-dependency rules.
getBodygramScannerPlatformPhotoEstimation — the call that produces the response DrawUtils consumes.
Visualizing the avatar — render the raw .obj avatar yourself with three.js (no DrawUtils).