# Diagnostic 3D performance logs

This build restores the last functional Product 3D hover behavior and adds opt-in structured timing logs. It is intentionally a diagnostic build: it does not claim that the underlying performance bottleneck is fixed yet.

## Enable diagnostics

Open the browser console on the page that embeds AsukaDesigner and run:

```js
localStorage.setItem('asuka:3d-perf-debug', '1');
location.reload();
```

The same mode can be enabled temporarily by adding `?asuka3dperf=1` to the page URL.

After reload, verify the logger:

```js
__ASUKA_3D_PERF__.status();
```

Expected result:

```js
{ enabled: true, entries: /* number */ }
```

## Reproduction sequence

Clear previous entries immediately before reproducing the issue:

```js
__ASUKA_3D_PERF__.clear();
```

Then reproduce in this order:

1. Select `scene-nike-complete(1).glb` in the Product 3D element editor.
2. Wait until the detected parts are displayed.
3. Click **Add**.
4. Move the pointer slowly across several product parts.
5. Move it rapidly across the same parts.
6. Rotate the camera, then repeat the hover test.
7. Apply one variation from the Variations/Elements module.
8. Stop interacting for two seconds.

## Export the result

Download a JSON report:

```js
__ASUKA_3D_PERF__.download();
```

Or copy it to the clipboard:

```js
await __ASUKA_3D_PERF__.copy();
```

Display the aggregate timing table in the console:

```js
console.table(__ASUKA_3D_PERF__.summary());
```

The downloaded JSON includes:

- browser and page information;
- an aggregate timing summary;
- the complete ordered event timeline;
- durations in milliseconds;
- compact model metadata without embedding full GLB data URLs.

## Logged categories

| Category | What it measures |
| --- | --- |
| `form-model` | FileReader, model preload request, GLB part inspection and form synchronization |
| `model` | Babylon model preload, cache use, loader/parser and instantiation |
| `element-editor` | Add/update action initiated by the Product 3D editor |
| `add` | Complete Product 3D addition and its main substeps |
| `hover` | ActionManager entry, fallback raycast, part resolution, opacity update and event emission |
| `hover-ui` | Reception of the hover event and scheduling of the Preact tooltip state |
| `variation` | Part/product variation application and material work |
| `history` | Snapshot preparation, signatures, asset storage and commit |
| `render` | Long render frames and rolling FPS/render-duration windows |
| `camera` | Time between camera input and the next rendered frame |

## Important hover markers

The most useful entries for the reported problem are:

- `hover.action-enter:start/end`
- `hover.pick-product-mesh:start/end`
- `hover.visual-applied`
- `hover.changed-emitted`
- `hover-ui.changed-state-scheduled`
- `render.long-frame`
- `render.window`

These markers distinguish four possible bottlenecks:

1. Babylon pointer picking before the action callback;
2. mesh/part resolution inside the callback;
3. opacity or GPU render cost after the hover visual is applied;
4. tooltip/UI propagation after the engine event.

## Important add markers

The most useful entries for slow Product 3D insertion are:

- `form-model.file-read-data-url:start/end`
- `model.preload:start/end`
- `model.load-asset-container:start/end`
- `model.instantiate-preloaded:start/end`
- `add.apply-product:start/end`
- `add.import-product-meshes:start/end`
- `history.commit:start/end`
- `render.long-frame`

## Disable diagnostics

```js
__ASUKA_3D_PERF__.disable();
location.reload();
```

The logger is disabled by default. Timing and console output are only active when explicitly enabled.