@oeave/bakery3 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Oeave
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,563 @@
-# Temporary Holding Version
+# @oeave/bakery3
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Path trace your Three.js scene.** Turn the scene you're already rendering
+into a studio-quality image.
+
+<p align="center">
+  <img src="https://cdn.bakery3.com/sdk/readme/before-after-258272869e.gif" width="720" alt="Three rooms, each shown first as the Three.js viewport draws it and then as the same scene rendered by Bakery3">
+</p>
+<p align="center">
+  <sub>Each room as the Three.js viewport draws it, then the same scene rendered by Bakery3.</sub>
+</p>
+
+```bash
+npm install @oeave/bakery3
+```
+
+```tsx
+const { render } = useBakery3({ apiKey: 'bk_sk_...' });
+
+const job = await render({ quality: 'studio' });
+const image = await job.result();
+```
+
+No 3D-suite workflow.
+No manual export.
+No scene recreation.
+
+```
+2048 × 2048
+7 sec
+$0.12
+```
+
+---
+
+## Requirements
+
+- `three` r171 or newer is recommended, and every entry works with it. Older
+  releases work for some entries: r160 for the core, `/r3f`, `/node`, `/bake`,
+  `/devtools` and `/hotspots`, r161 for `/presets` and `/catalog`, and r170
+  for `/tsl`. `/environments` and `/shapes` need r171.
+- `react` 18+ and `@react-three/fiber` 8.18+, only if you import `/r3f`.
+- Node 20+ for `/node`.
+- An account at [bakery3.com](https://bakery3.com) to render. The SDK asks for
+  a key only when it first calls the API, so `check()`, `inspect()` and
+  `capture()` work without one.
+
+## Quickstart
+
+**1. Get a key.** Sign up at [bakery3.com](https://bakery3.com), confirm your
+email address and create a secret key on the
+[Keys page](https://bakery3.com/keys). It starts with `bk_sk_`. Confirming the
+address also adds $2 of free credit.
+
+**2. Render.** Pass the key straight to the SDK. This is the fastest way to
+see your own scene rendered, and it is fine on your own machine. Before the
+page goes live, switch to a token: see
+[Taking it to production](#taking-it-to-production).
+
+### React Three Fiber
+
+```tsx
+import { Canvas } from '@react-three/fiber';
+import { Bakery3Devtools, useBakery3 } from '@oeave/bakery3/r3f';
+
+const apiKey = 'bk_sk_...'; // from bakery3.com/keys
+
+function RenderButton() {
+  const { render, isRendering, result } = useBakery3({ apiKey });
+
+  return (
+    <>
+      <button
+        disabled={isRendering}
+        onClick={() => render({ quality: 'studio' })}
+      >
+        Create studio render
+      </button>
+      {result && <img src={result.url} alt="Studio render" />}
+    </>
+  );
+}
+
+export function App() {
+  return (
+    <>
+      <Canvas>
+        <Scene />
+      </Canvas>
+      <RenderButton />
+      <Bakery3Devtools apiKey={apiKey} />
+    </>
+  );
+}
+```
+
+Put the button next to your `<Canvas>`, not inside it. The hook finds the
+scene in your canvas and reads its camera, materials, lights, environment and
+color settings. You don't pass any of them. `<Bakery3Devtools>` adds a panel
+in the corner with the price of a render before you start it, and every
+render your button starts.
+
+With several canvases on one page, put a `<Bakery3Provider apiKey="…">` inside
+the one to render, and call `useBakery3()` and `<Bakery3Devtools />` without
+options anywhere on the page.
+
+### Vanilla Three.js
+
+```ts
+import { createBakery3 } from '@oeave/bakery3';
+
+const bakery3 = createBakery3({ apiKey: 'bk_sk_...' });
+bakery3.attach({ scene, camera, renderer });
+
+const job = await bakery3.render({ quality: 'studio' });
+const result = await job.result();
+
+console.log(result.url);
+```
+
+`attach()` connects your scene once. Passing `renderer` makes the render use
+your tone mapping and color space, so it is as bright as your viewport.
+
+## Taking it to production
+
+In production the key should stay on your server, and the browser gets a
+short-lived token from it instead. That is one endpoint and one changed line.
+
+**1. A token endpoint** on your server, with the key in an environment
+variable:
+
+```ts
+// app/api/bakery3-token/route.ts
+import { Bakery3Server } from '@oeave/bakery3/node';
+
+const bakery3 = new Bakery3Server(process.env.BAKERY3_SECRET_KEY!);
+
+export async function POST() {
+  const token = await bakery3.tokens.create({
+    expiresInSeconds: 300,
+    maxRenders: 1,
+    maxCost: 1,
+    allowedOrigins: ['https://shop.example.com'],
+  });
+  return Response.json(token);
+}
+```
+
+A token expires, starts at most `maxRenders` renders, spends at most `maxCost`
+dollars and only works from the origins you list. It can still follow and
+cancel the renders it started for 24 hours after that, so a page sees its one
+render through to the end. See
+[bakery3.com/docs/auth](https://bakery3.com/docs/auth) for every option.
+
+**2. Swap `apiKey` for `token`.** The SDK calls it whenever it needs a fresh
+token:
+
+```tsx
+const getToken = () =>
+  fetch('/api/bakery3-token', { method: 'POST' }).then((r) => r.json());
+
+useBakery3({ token: getToken }); // React Three Fiber
+createBakery3({ token: getToken }); // vanilla Three.js
+```
+
+`<Bakery3Provider token={getToken}>` and `<Bakery3Devtools token={getToken} />`
+take it the same way. The SDK warns in the console while a secret key is in
+browser code.
+
+`render()` captures a live scene, so it runs in the browser. To render from a
+server or a script, give `renderBatch()` from `@oeave/bakery3/node` the URLs of
+your `.glb` files: see [A catalog from your server](#a-catalog-from-your-server).
+
+## Entry points
+
+Each part has its own import path, so an app only bundles what it uses.
+
+| Import                        | What it is                                                   |
+| ----------------------------- | ------------------------------------------------------------ |
+| `@oeave/bakery3`              | `createBakery3()`: render, video, bake, estimate, check      |
+| `@oeave/bakery3/r3f`          | `<Bakery3Provider>`, `useBakery3()`, `<Bakery3Devtools>`     |
+| `@oeave/bakery3/node`         | `Bakery3Server`: browser tokens, webhooks, catalogs by URL   |
+| `@oeave/bakery3/bake`         | Apply, compare and revert baked light on live meshes         |
+| `@oeave/bakery3/presets`      | Rooms, pedestals, PBR materials and HDR environments         |
+| `@oeave/bakery3/environments` | Shader-lit backdrops whose glow is real light in the render  |
+| `@oeave/bakery3/shapes`       | Abstract shapes, finishes and motions for creative coding    |
+| `@oeave/bakery3/tsl`          | Renderer-only TSL nodes: noise, Voronoi, traced AO, bevel    |
+| `@oeave/bakery3/hotspots`     | Clickable markers on a model, left out of every render       |
+| `@oeave/bakery3/catalog`      | A whole catalog (products × finishes × cameras) as one batch |
+| `@oeave/bakery3/devtools`     | The floating Render · Video · Bake panel, without React      |
+
+## Progressive previews
+
+If your app is user facing, don't make them stare at "Rendering…".
+
+```ts
+const job = await render();
+
+job.on('preview', ({ url }) => setImage(url)); // ~2s, low sample
+job.on('progress', ({ percent }) => setProgress(percent));
+job.on('complete', ({ result }) => setImage(result.url)); // ~8s
+```
+
+Listening is enough: the job starts following the render on the first `on()`,
+and a listener added late still gets the latest preview and progress.
+`job.stop()` stops following it on this page. `job.cancel()` stops the render
+itself.
+
+The URLs in a result are signed and work for 24 hours (`result.expiresAt`).
+Copy the file if you keep it. `bakery3.getRender(id)` gives you the render
+again, with fresh URLs, after a reload or from a webhook.
+
+## Know the cost before you spend it
+
+```ts
+const estimate = await bakery3.estimate({
+  quality: 'studio',
+  width: 2048,
+  height: 2048,
+});
+// {
+//   estimatedCost: 0.12,
+//   maximumCost: 0.16,
+//   estimatedSeconds: 7,
+//   compatibilityScore: 0.97,
+// }
+```
+
+`maxCost` is enforced: a render that could cost more is refused before any
+GPU work starts, so nothing is charged.
+
+```ts
+await render({ maxCost: 0.14 });
+// RenderBudgetExceeded: This render could cost up to $0.16,
+// which exceeds maxCost $0.14 (estimated $0.12)
+```
+
+See [bakery3.com/docs/cost](https://bakery3.com/docs/cost).
+
+## Check compatibility locally, for free
+
+Runs in your browser. No account, no upload, no cost.
+
+```ts
+const report = bakery3.check();
+// { score: 0.97, issues: [...], counts: { warning: 1, ... } }
+```
+
+Anything the renderer cannot reproduce faithfully comes back as a named,
+located warning with a fix, never as a silently gray object:
+
+```
+Unsupported material
+
+Name:      CarPaintFlakes
+Type:      ShaderMaterial
+Location:  <Car>/<Body>/<Paint>
+
+Why:       Arbitrary GLSL cannot currently be translated.
+Fix:       Add a MeshPhysicalMaterial render fallback.
+Docs:      https://bakery3.com/docs/material-fallbacks
+```
+
+Declare what the renderer should use instead:
+
+```tsx
+import { Bakery3Material } from '@oeave/bakery3/r3f';
+
+<Bakery3Material
+  web={<CarPaintShader />}
+  render={
+    <meshPhysicalMaterial
+      color="#830000"
+      metalness={0.9}
+      roughness={0.14}
+      clearcoat={1}
+    />
+  }
+/>;
+```
+
+`web` is a material element, or a component that forwards its ref to one. The
+SDK warns in the console when it does not. Without React, set
+`material.userData.bakery3 = { fallback: { … } }` with the same properties.
+
+Every error the SDK throws prints its fix: an uncaught one shows the message,
+why it happened, the fix and a docs link in your console.
+
+## Render a video from a timeline
+
+```ts
+bakery3.attach({ scene, camera, renderer });
+
+const tl = bakery3.timeline({ duration: 5, fps: 30 });
+
+tl.push({ object: 'camera', orbitY: 90 }); // swing 90° around
+tl.to(
+  mesh,
+  { color: '#ff2d95' },
+  { at: 1, duration: 2, easing: 'ease-in-out' },
+);
+
+tl.seek(2.5); // your scene IS the preview
+const job = await bakery3.renderVideo({
+  timeline: tl,
+  format: 'mp4',
+});
+```
+
+`seek()` drives your actual Three.js objects, so what you scrub to is what
+gets rendered. Already animating with gsap or Theatre.js? `timelineFromGsap()`
+samples it. See [bakery3.com/docs/animation](https://bakery3.com/docs/animation).
+
+## Bake path-traced light onto your live meshes
+
+A render gives you a picture. A **bake** gives your running scene the light
+from that picture: the SDK applies it to the meshes you already have, and
+can take it off again.
+
+<p align="center">
+  <img src="https://cdn.bakery3.com/sdk/readme/baked-room-0aa7175bc3.jpg" width="720" alt="The living_evening preset room in a live Three.js viewport, first with its own lights and then with its light baked">
+</p>
+<p align="center">
+  <sub>A preset room in a live Three.js viewport: with its own lights, then with its light baked.</sub>
+</p>
+
+```ts
+import { createBakeSession } from '@oeave/bakery3/bake';
+
+const job = await bakery3.bake({ scene, camera });
+const { bundle } = await job.result();
+
+const session = createBakeSession({ scene });
+const generation = session.addGeneration(bundle);
+await session.apply(generation); // lit
+session.revert(); // exactly as it was
+```
+
+Only the light is baked, so your textures, roughness and custom shaders keep
+working, and reflections and clearcoat stay live on top. Name the objects you
+bake (`mesh.userData.bakery3Id = 'pedestal'`) and a bake still fits after a
+reload. See [bakery3.com/docs/bake](https://bakery3.com/docs/bake).
+
+## Devtools
+
+```tsx
+<>
+  <Canvas>
+    <Scene />
+  </Canvas>
+  {import.meta.env.DEV && <Bakery3Devtools apiKey="bk_sk_..." />}
+</>
+```
+
+A floating **Render · Video · Bake** panel in the corner of your own app. It
+shows the price next to every button before you press it, the compatibility
+score, and a row with a cancel button for every running render, including the
+ones your own `useBakery3()` button starts. What you made stays in a Recent
+list, through reloads, until its links expire. A missing key or an empty
+balance shows in the panel, with a link to fix it.
+
+The Video tab films a timeline on your live camera: frame a shot and press
+Keyframe camera. Pass `timeline={tl}` to film your own. Without React:
+
+```ts
+import { mountBakery3Devtools } from '@oeave/bakery3/devtools';
+
+const panel = mountBakery3Devtools({
+  bakery3, // the client from createBakery3()
+  scene,
+  camera,
+  renderer,
+});
+```
+
+See [bakery3.com/docs/devtools](https://bakery3.com/docs/devtools).
+
+## Several cameras, every variant
+
+One capture, several cameras, the pictures back in the order you gave them:
+
+```ts
+const shots = await bakery3.render({
+  cameras: ['hero', 'front', 'detail'],
+});
+const [hero, front, detail] = await shots.result();
+```
+
+If a picture is refused, `result()` rejects with `RenderSetRefused`, which
+names it and the reason, so the array never shifts. `shots.images()` still
+walks the pictures that were accepted.
+
+`renderVariants()` does that for a whole catalog. `apply` puts your scene in
+each variant's state, the way a customer clicking would:
+
+```ts
+const run = await bakery3.renderVariants({
+  key: 'fall-2026',
+  variants: products, // an array, a generator, an async cursor
+  apply: (product) => configurator.show(product),
+  cameras: ['hero', 'front', 'detail'],
+  maxCost: 600,
+});
+
+await run.wait();
+for await (const image of run.images()) {
+  await save(image.variant, image.camera, image.url);
+}
+```
+
+Only one variant is in memory at a time, and running it again with the same
+`key` picks up where it stopped. See
+[bakery3.com/docs/batches](https://bakery3.com/docs/batches).
+
+## A catalog from your server
+
+When the models already sit on a CDN, no page is involved. From Node, with
+your secret key:
+
+```ts
+import { Bakery3Server } from '@oeave/bakery3/node';
+
+const api = new Bakery3Server(process.env.BAKERY3_SECRET_KEY!);
+
+const options = {
+  key: 'fall-2026',
+  products: [
+    {
+      id: 'chair-aria',
+      url: 'https://cdn.shop.com/models/chair-aria.glb',
+    },
+  ],
+  shots: [
+    'three-quarter',
+    'front',
+    { kind: 'video', from: 'front', to: 'back', seconds: 4 },
+  ],
+  room: { preset: 'loft_golden' },
+};
+
+// Three products, every shot, small and fast
+const test = await api.testBatch(options);
+console.log(await test.result());
+
+const run = await api.renderBatch({ ...options, maxCost: 600 });
+```
+
+On the Production and Scale plans. See
+[bakery3.com/docs/catalog](https://bakery3.com/docs/catalog) and
+[bakery3.com/docs/batches](https://bakery3.com/docs/batches).
+
+## Webhooks
+
+```ts
+import { verifyWebhook } from '@oeave/bakery3/node';
+
+const event = await verifyWebhook({
+  body: await request.text(), // the raw body, before parsing
+  signature: request.headers.get('bakery3-signature')!,
+  secret: process.env.BAKERY3_WEBHOOK_SECRET!,
+});
+```
+
+See [bakery3.com/docs/webhooks](https://bakery3.com/docs/webhooks).
+
+## Quality presets
+
+```ts
+quality: 'preview'; // fast and noisy, for iterating
+quality: 'studio'; // the default
+quality: 'ultra'; // for the hero image
+```
+
+Leave out `width` and `height` and the long edge is the preset's (1024, 2048
+or 4096) in your camera's shape, so a 16:9 viewport renders 16:9. Give one side
+and the other follows the camera. `advanced: { samples, maxBounces, … }` is
+there if you want it. See
+[bakery3.com/docs/quality](https://bakery3.com/docs/quality).
+
+## Preset rooms, pedestals and materials
+
+A finished interior with furniture, plants and designed light, in one line:
+
+```ts
+import { createPresetRoom } from '@oeave/bakery3/presets';
+
+scene.add(createPresetRoom('living_evening'));
+```
+
+Your page shows a light stand-in of the room, and the renderer rebuilds it at
+full quality, so a render uploads only your product. The same entry has
+pedestals (`createPedestal('pedestal_column')`), 4k PBR materials, a
+parametric room and HDR environments. See
+[bakery3.com/docs/presets](https://bakery3.com/docs/presets).
+
+## What's supported
+
+|                      |                                                                                             |
+| -------------------- | ------------------------------------------------------------------------------------------- |
+| **Cameras**          | Perspective, orthographic                                                                   |
+| **Geometry**         | Static meshes, instanced meshes, skinned meshes, morph targets                              |
+| **Materials**        | Standard and physical, with clearcoat, transmission, sheen                                  |
+| **Node materials**   | Standard and physical node materials with TSL graphs                                        |
+| **Approximated**     | Basic, Lambert, Phong, Toon, Matcap; Normal, Depth, Distance as flat gray (each warns once) |
+| **Not translatable** | `ShaderMaterial`, `RawShaderMaterial`: declare a fallback                                   |
+| **Lighting**         | Directional, point, spot, area, hemisphere, ambient, HDRI, IES                              |
+| **Output**           | PNG, JPEG, WebP, EXR. Transparent background by default                                     |
+
+The full list is at
+[bakery3.com/docs/compatibility](https://bakery3.com/docs/compatibility).
+
+## Custom shaders (TSL)
+
+The SDK walks your TSL graph and the renderer rebuilds it node for node, so a
+node material renders as it looks:
+
+```ts
+import { positionLocal, mix, color, smoothstep } from 'three/tsl';
+
+const material = new MeshStandardNodeMaterial();
+material.colorNode = mix(
+  color('#7a1810'),
+  color('#e0e6ee'),
+  smoothstep(-0.2, 0.4, positionLocal.y),
+);
+```
+
+`@oeave/bakery3/tsl` adds nodes only the renderer can do exactly (fractal
+noise, Voronoi, traced AO, bevel, curvature), with an approximate preview in
+your viewport. See
+[bakery3.com/docs/shader-nodes](https://bakery3.com/docs/shader-nodes).
+
+## Privacy
+
+Scenes and outputs are private by default, encrypted in transit and at rest,
+retained briefly, deletable immediately, and never used to train anything.
+`await bakery3.inspect()` returns exactly what a render would send. See
+[bakery3.com/privacy](https://bakery3.com/privacy).
+
+## Developing
+
+```bash
+bun install
+bun test              # unit tests, no network
+bun run check-types
+bun run build         # dist/, one entry per import path
+bun run check:three   # every entry against the oldest three it promises
+bun run format
+```
+
+`bun run check` runs the format check, the types and the tests together, and
+`prepublishOnly` adds the build and the three.js check.
+
+## License
+
+The SDK is MIT licensed.
+
+The preset library it loads is not part of that license. The HDRIs, six of the
+materials and some of the models in the rooms come from
+[Poly Haven](https://polyhaven.com) under CC0. The pedestals and the other
+materials are ours. Some of the furniture and plants in the rooms are licensed
+models: they appear in your renders and as a lighter stand-in in the viewport,
+and are not available to download.

package/dist/animation-B1h0Ryvj.d.ts

@@ -0,0 +1,97 @@
+/**
+ * Animation: authored as keyframes, shipped as baked frames.
+ *
+ * The SDK's `Timeline` is keyframes, easings and orbit segments; this is
+ * not. What travels is one exact value per output frame, and the renderer
+ * sets one keyframe per frame with linear interpolation, so there is nothing
+ * left for it to interpolate and nothing for the two sides to disagree
+ * about. Easing curves and orbit math exist in one implementation, and the
+ * browser preview and the traced frame agree on where everything is at
+ * frame N. It costs little: 10 s at 30 fps of camera motion is 300 frames of
+ * 7 floats.
+ */
+/**
+ * What a channel drives. The camera is not an object id: it may never have
+ * been in the scene graph at all (see `CameraSpec`). Neither is the
+ * environment: `scene.environment`, its intensity and rotation, and the
+ * scene's ambient light are scene state, not objects (see `EnvironmentSpec`).
+ */
+type AnimationTarget = {
+    type: 'camera';
+} | {
+    type: 'object';
+    objectId: string;
+} | {
+    type: 'environment';
+};
+/**
+ * One animated property, sampled at every frame.
+ *
+ * `values` is flat: `frameCount * size` numbers, row-major, frame 0's
+ * components and then frame 1's. Nested arrays would cost two bytes of JSON
+ * per frame per channel, which for a long sequence is the larger part of
+ * the manifest.
+ */
+type AnimationChannel = {
+    target: AnimationTarget;
+    /**
+     * `position` | `quaternion` | `scale` | `fov` | `color` | `emissive` |
+     * `emissiveIntensity` | `roughness` | `metalness` | `opacity` | `intensity`
+     * | `target` | `groundColor`, and on the environment target the four in
+     * `ENVIRONMENT_CHANNEL_PROPERTIES`.
+     *
+     * `target` is a directional or spot light's aim, a WORLD point, as three's
+     * `light.target` holds it. Such a light is aimed from its position to its
+     * target at every frame, as three aims it, so animating either one turns
+     * the beam; `quaternion` on one is refused, because three ignores a
+     * directional or spot light's rotation.
+     *
+     * A property the renderer does not implement is refused with the name,
+     * the object's path and a fix, never dropped.
+     */
+    property: string;
+    /** Components per frame: 3 position/scale/color, 4 quaternion, 1 scalar. */
+    size: number;
+    values: number[];
+};
+/**
+ * The baked sequence.
+ *
+ * Frame `i` is sampled at `i / fps` seconds, so a `frameCount / fps` second
+ * clip never repeats its first pose at the end, which is what makes a 360
+ * degree orbit loop without a duplicated frame.
+ */
+type AnimationSpec = {
+    fps: number;
+    frameCount: number;
+    channels: AnimationChannel[];
+    /**
+     * Where the browser actually put things: see `WorldCheck`. Optional on the
+     * wire so an older worker reads straight through it; a worker that
+     * implements it refuses a clip whose frames disagree with the browser's.
+     */
+    checks?: WorldCheck[];
+};
+/**
+ * A target's world matrix at a few of the clip's frames, straight off three
+ * (`Object3D.matrixWorld` after a seek; the camera's pose composed), in
+ * three's own Y-up frame, column-major, sixteen numbers per frame.
+ *
+ * The channels say what the browser did; this says where it ended up. The
+ * worker rebuilds every animated object from the channels through its own
+ * up-axis conversion and parent chain, then sets each of these frames, reads
+ * its own world matrices back, and refuses the job if they do not match the
+ * browser's: a refusal instead of a plausible clip with the motion in the
+ * wrong place. Five frames are enough (a convention error shows on the
+ * first, an axis error on any, a drift on the last) and cost eighty numbers
+ * per target.
+ */
+type WorldCheck = {
+    target: AnimationTarget;
+    /** Frame indices, ascending, each in `[0, frameCount)`. */
+    frames: number[];
+    /** `frames.length * 16` numbers. */
+    matrices: number[];
+};
+
+export type { AnimationSpec as A, AnimationChannel as a, AnimationTarget as b };