3dtours
1d4c6b1d66
The super-resolution export ran single-threaded because the site was not cross-origin isolated and the runtime had no SharedArrayBuffer to spread a tile over. nginx now sends COOP and COEP — on the document, and on the script responses a nested worker fetches, which Chromium checks the same way and blocks as `coep-frame-resource-needs-coep-header` without them — and the loader asks for `min(8, hardwareConcurrency)` threads whenever the page is isolated, falling back to one if the headers ever go missing. A worker script is also why the landing's QR image needed `crossOrigin`: COEP refuses a cross-origin image that did not opt in with CORS. The unpack was the other half. Each tile was clamped a channel at a time and painted whole, padded ring and all; it now writes straight into the Uint8ClampedArray, which clamps and rounds on assignment, and skips the ring rather than drawing it and clipping it away. 640x480 to 4096: 39.0s to 16.2s. 1000x750 to 4096: 89.6s to 30.9s. One 256px tile through the model: 6.8s to 1.8s. Measured on the wasm path — the test browser has no GPU adapter — so a WebGPU export, still per-tile inference, keeps its own times.
27 lines
1.1 KiB
TypeScript
27 lines
1.1 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
// A QR code, drawn by the one public image service the landing already used:
|
|
// no QR library and no extra bytes in the bundle. `url` is the whole payload —
|
|
// whatever the phone reads on a scan is exactly this string.
|
|
// ponytail: a remote image means a third-party request and a blank frame while
|
|
// it loads. Render the matrix in-bundle only if the QR must work offline.
|
|
export function QrCode({ url, size = 180, className }: { url: string; size?: number; className?: string }) {
|
|
const [ok, setOk] = useState(true);
|
|
if (!ok) return null;
|
|
// `crossOrigin`: the page is cross-origin isolated (COEP), which rejects a
|
|
// cross-origin image unless it opted in with CORS — qrserver answers `*`.
|
|
return (
|
|
<img
|
|
className={className}
|
|
width={size}
|
|
height={size}
|
|
alt=""
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer"
|
|
crossOrigin="anonymous"
|
|
onError={() => setOk(false)}
|
|
src={`https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(url)}`}
|
|
/>
|
|
);
|
|
}
|