Enhance CDN packages and playground
Amp-Thread-ID: https://ampcode.com/threads/T-01a02485-5574-707c-bff4-5668d83bee8a Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
This commit is contained in:
Amp
+104
-37
@@ -9,13 +9,17 @@
|
||||
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>
|
||||
<script src="/assets/theme.js"></script>
|
||||
<link rel="stylesheet" href="/assets/site.css" />
|
||||
<link rel="stylesheet" href="/assets/theme.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 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">
|
||||
@@ -23,6 +27,11 @@
|
||||
<a href="/playground">Playground</a>
|
||||
<a href="https://git.heaust.org/heaust/yawn">Source</a>
|
||||
</nav>
|
||||
<select class="theme-select" data-theme-select aria-label="Color theme">
|
||||
<option value="auto">Auto</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
<a class="button button-small" href="/docs#first-scene">Get started</a>
|
||||
</header>
|
||||
|
||||
@@ -32,17 +41,24 @@
|
||||
<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.
|
||||
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>
|
||||
<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
|
||||
<span class="browser-dots" aria-hidden="true"
|
||||
><i></i><i></i><i></i
|
||||
></span>
|
||||
Separate Core + Handles modules · No framework required · Rust/WASM
|
||||
core
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -78,7 +94,9 @@
|
||||
<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>Any</strong><span>render graph you can describe</span>
|
||||
</div>
|
||||
<div><strong>Small</strong><span>Rust/WASM foundation</span></div>
|
||||
</section>
|
||||
|
||||
@@ -87,8 +105,9 @@
|
||||
<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.
|
||||
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">
|
||||
@@ -97,8 +116,9 @@
|
||||
<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.
|
||||
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>
|
||||
@@ -107,18 +127,22 @@
|
||||
<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.
|
||||
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>
|
||||
<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.
|
||||
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>
|
||||
@@ -128,18 +152,30 @@
|
||||
<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>
|
||||
<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.
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -148,11 +184,18 @@
|
||||
</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>
|
||||
<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="core-card">
|
||||
<span>Rust / WASM</span><strong>Render graph core</strong>
|
||||
</div>
|
||||
<div class="gpu-line"></div>
|
||||
<div class="gpu-card">WebGPU</div>
|
||||
</div>
|
||||
@@ -167,17 +210,30 @@
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -185,21 +241,32 @@
|
||||
|
||||
<section class="cta-section section-shell">
|
||||
<div>
|
||||
<div class="eyebrow eyebrow-light"><span></span> The best way to understand it</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.
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user