Ampandheaust
7070799862
Build Core and Handles into in-memory CDN modules, add the marketing site and tutorial docs, and provide a SQLite-backed WebGPU playground with TypeScript tooling and profiling. Amp-Thread-ID: https://ampcode.com/threads/T-01a02485-5574-707c-bff4-5668d83bee8a Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
206 lines
9.6 KiB
HTML
206 lines
9.6 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="theme-color" content="#f7fbff" />
|
||
<meta
|
||
name="description"
|
||
content="Yawn is a WebGPU engine that starts with friendly scene handles and scales down to a programmable Rust/WASM render core."
|
||
/>
|
||
<title>Yawn — a WebGPU engine that grows with you</title>
|
||
<link rel="stylesheet" href="/assets/site.css" />
|
||
<script type="module" src="/assets/site.js"></script>
|
||
</head>
|
||
<body>
|
||
<header class="site-header">
|
||
<a class="wordmark" href="/" aria-label="Yawn home">
|
||
<span class="wordmark-mark" aria-hidden="true"><i></i><i></i><i></i></span>
|
||
<span>Yawn</span>
|
||
</a>
|
||
<nav class="site-nav" aria-label="Main navigation">
|
||
<a href="/docs">Docs</a>
|
||
<a href="/playground">Playground</a>
|
||
<a href="https://git.heaust.org/heaust/yawn">Source</a>
|
||
</nav>
|
||
<a class="button button-small" href="/docs#first-scene">Get started</a>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="hero section-shell">
|
||
<div class="hero-copy">
|
||
<div class="eyebrow"><span></span> WebGPU without the ceremony</div>
|
||
<h1>Start with a scene.<br />Scale into an engine.</h1>
|
||
<p class="hero-lede">
|
||
Yawn gives you approachable TypeScript handles on day one, direct shared-memory
|
||
performance when you need it, and a programmable render core when your ideas outgrow
|
||
conventions.
|
||
</p>
|
||
<div class="hero-actions">
|
||
<a class="button" href="/playground">Open the playground <span>→</span></a>
|
||
<a class="button button-quiet" href="/docs#installation">Read the 5-minute setup</a>
|
||
</div>
|
||
<div class="hero-note">
|
||
<span class="browser-dots" aria-hidden="true"><i></i><i></i><i></i></span>
|
||
One CDN import · No framework required · Rust/WASM core
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-demo" aria-label="A short Yawn scene example">
|
||
<div class="demo-toolbar">
|
||
<span><i></i> app.ts</span>
|
||
<span class="demo-status"><i></i> 60 FPS</span>
|
||
</div>
|
||
<pre><code><span class="syntax-purple">import</span> { Scene, Mesh, PBRMaterial }
|
||
<span class="syntax-purple">from</span> <span class="syntax-green">"@yawn/handles"</span>;
|
||
|
||
<span class="syntax-purple">const</span> scene = <span class="syntax-purple">new</span> <span class="syntax-blue">Scene</span>(canvas);
|
||
<span class="syntax-purple">await</span> scene.ready;
|
||
|
||
<span class="syntax-purple">const</span> blue = <span class="syntax-purple">new</span> <span class="syntax-blue">PBRMaterial</span>(scene, {
|
||
baseColor: [<span class="syntax-orange">0.12</span>, <span class="syntax-orange">0.58</span>, <span class="syntax-orange">1</span>, <span class="syntax-orange">1</span>],
|
||
roughness: <span class="syntax-orange">0.35</span>,
|
||
});
|
||
|
||
<span class="syntax-purple">const</span> triangle = <span class="syntax-purple">new</span> <span class="syntax-blue">Mesh</span>(scene, {
|
||
material: blue,
|
||
vertexData: { positions, indices },
|
||
});</code></pre>
|
||
<div class="demo-preview" aria-hidden="true">
|
||
<div class="demo-grid"></div>
|
||
<div class="demo-glow"></div>
|
||
<div class="demo-triangle"></div>
|
||
<span>rendering on WebGPU</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="trust-strip" aria-label="Yawn principles">
|
||
<div><strong>One</strong><span>shared arena</span></div>
|
||
<div><strong>Zero</strong><span>messages for hot state</span></div>
|
||
<div><strong>Any</strong><span>render graph you can describe</span></div>
|
||
<div><strong>Small</strong><span>Rust/WASM foundation</span></div>
|
||
</section>
|
||
|
||
<section class="section-shell progression" id="progression">
|
||
<div class="section-heading">
|
||
<div class="eyebrow"><span></span> Progressive by design</div>
|
||
<h2>Use exactly as much engine as you need.</h2>
|
||
<p>
|
||
You do not have to choose between an easy API and a serious foundation. Yawn keeps
|
||
those layers separate, so learning more never means starting over.
|
||
</p>
|
||
</div>
|
||
<div class="gear-grid">
|
||
<article class="gear-card gear-card-featured">
|
||
<div class="gear-number">01</div>
|
||
<div class="gear-icon"><span class="cube-icon"></span></div>
|
||
<h3>Build with handles</h3>
|
||
<p>
|
||
Start with familiar scenes, meshes, materials, lights, cameras, glTF imports, and
|
||
post effects. Constructors are explicit and every async boundary is visible.
|
||
</p>
|
||
<a href="/docs#first-scene">Make your first scene <span>→</span></a>
|
||
</article>
|
||
<article class="gear-card">
|
||
<div class="gear-number">02</div>
|
||
<div class="gear-icon"><span class="rows-icon"></span></div>
|
||
<h3>Move through shared data</h3>
|
||
<p>
|
||
Positions, cameras, lights, materials, and your own application rows live in one
|
||
SharedArrayBuffer. Hot updates become direct typed-array writes.
|
||
</p>
|
||
<a href="/docs#shared-memory">Understand the fast path <span>→</span></a>
|
||
</article>
|
||
<article class="gear-card">
|
||
<div class="gear-number">03</div>
|
||
<div class="gear-icon"><span class="graph-icon"></span></div>
|
||
<h3>Author the whole graph</h3>
|
||
<p>
|
||
Use core directly when you need custom resources, WGSL pipelines, compute, pass
|
||
dependencies, transient aliasing, and up-front GPU loadouts.
|
||
</p>
|
||
<a href="/docs#core-deep-dive">Go beneath handles <span>→</span></a>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="architecture-section">
|
||
<div class="section-shell architecture-grid">
|
||
<div class="architecture-copy">
|
||
<div class="eyebrow eyebrow-light"><span></span> A quiet hot path</div>
|
||
<h2>Your frame should move data, not negotiate it.</h2>
|
||
<p>
|
||
Yawn pays setup costs when your scene or graph changes. During play, ordinary updates
|
||
stay in shared rows that JavaScript and the render worker can both see.
|
||
</p>
|
||
<ul class="check-list">
|
||
<li><span>✓</span> Structure-of-arrays layout with aligned rows</li>
|
||
<li><span>✓</span> Render graphs compiled before they become active</li>
|
||
<li><span>✓</span> Optional timestamp profiling for physical GPU passes</li>
|
||
</ul>
|
||
<a class="text-link-light" href="/docs#mental-model">See how the pieces connect →</a>
|
||
</div>
|
||
<div class="architecture-visual" aria-label="Yawn data flow">
|
||
<div class="flow-label">Your application</div>
|
||
<div class="flow-nodes flow-top">
|
||
<span>handles</span><span>workers</span><span>game logic</span>
|
||
</div>
|
||
<div class="flow-line"><i></i><i></i><i></i></div>
|
||
<div class="arena-card">
|
||
<div><span></span><strong>SharedArrayBuffer</strong><small>aligned SOA arena</small></div>
|
||
<div class="arena-rows"><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||
</div>
|
||
<div class="flow-line flow-line-bottom"><i></i></div>
|
||
<div class="core-card"><span>Rust / WASM</span><strong>Render graph core</strong></div>
|
||
<div class="gpu-line"></div>
|
||
<div class="gpu-card">WebGPU</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-shell steps-section">
|
||
<div class="section-heading section-heading-centered">
|
||
<div class="eyebrow"><span></span> From blank page to pixels</div>
|
||
<h2>A small API with visible boundaries.</h2>
|
||
</div>
|
||
<ol class="steps">
|
||
<li>
|
||
<span class="step-index">1</span>
|
||
<div><h3>Create a scene</h3><p>Give Yawn a canvas and await one clear readiness promise.</p></div>
|
||
<code>new Scene(canvas)</code>
|
||
</li>
|
||
<li>
|
||
<span class="step-index">2</span>
|
||
<div><h3>Add what you can see</h3><p>Materials and meshes own typed handles, not hidden global state.</p></div>
|
||
<code>new Mesh(scene, options)</code>
|
||
</li>
|
||
<li>
|
||
<span class="step-index">3</span>
|
||
<div><h3>Change values directly</h3><p>After setup, ordinary property updates write into shared rows.</p></div>
|
||
<code>mesh.position.x += 0.1</code>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<section class="cta-section section-shell">
|
||
<div>
|
||
<div class="eyebrow eyebrow-light"><span></span> The best way to understand it</div>
|
||
<h2>Change the code. Watch the passes.</h2>
|
||
<p>
|
||
The playground includes TypeScript intelligence, reusable snippets, live output,
|
||
shareable SQLite-backed revisions, and the engine’s real GPU profiler.
|
||
</p>
|
||
</div>
|
||
<a class="button button-white" href="/playground">Launch playground <span>↗</span></a>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer section-shell">
|
||
<a class="wordmark" href="/"><span class="wordmark-mark"><i></i><i></i><i></i></span><span>Yawn</span></a>
|
||
<p>Start obvious. Optimize deliberately.</p>
|
||
<nav aria-label="Footer navigation"><a href="/docs">Docs</a><a href="/playground">Playground</a><a href="https://git.heaust.org/heaust/yawn">Source</a></nav>
|
||
</footer>
|
||
</body>
|
||
</html>
|