Repository navigation
Expand file tree
/
Copy pathshowcase.html
More file actions
475 lines (422 loc) · 39.6 KB
/
Copy pathshowcase.html
File metadata and controls
475 lines (422 loc) · 39.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Showcase - CNA Demos & Real-World Usage</title>
<meta name="description" content="CNA showcase - browser-playable demos, verification against the real XNA runtime, real-world game ports, XNA sample ports, and platform validation status.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="CNA">
<meta property="og:url" content="https://libcna.com/showcase.html">
<meta property="og:title" content="Showcase - CNA Demos & Real-World Usage">
<meta property="og:description" content="CNA showcase - browser-playable demos, verification against the real XNA runtime, real-world game ports, XNA sample ports, and platform validation status.">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="canonical" href="https://libcna.com/showcase.html">
<link rel="stylesheet" href="css/prism-tomorrow.min.css">
<script>(function(){try{var t=localStorage.getItem("cna-theme");if(t==="light"||t==="dark")document.documentElement.setAttribute("data-theme",t);}catch(e){}})();</script>
</head>
<body>
<a class="skip-link" href="#main-content">Skip to content</a>
<nav class="nav">
<div class="nav-container">
<a href="index.html" class="nav-brand">CNA</a>
<button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<div class="nav-menu">
<a href="index.html" class="nav-link">Home</a>
<a href="about.html" class="nav-link">About</a>
<a href="features.html" class="nav-link">Features</a>
<a href="architecture.html" class="nav-link">Architecture</a>
<a href="documentation.html" class="nav-link">Documentation</a>
<a href="development/index.html" class="nav-link">Development</a>
<a href="deep-dives/index.html" class="nav-link">Deep Dives</a>
<a href="tutorials.html" class="nav-link">Tutorials</a>
<a href="demos.html" class="nav-link">Demos</a>
<a href="showcase.html" class="nav-link">Showcase</a>
<a href="videos.html" class="nav-link">Videos</a>
<a href="roadmap.html" class="nav-link">Roadmap</a>
<a href="contact.html" class="nav-link">Contact</a>
<a href="network.html" class="nav-link">Network</a>
<a href="search.html" class="nav-link">Search</a>
<a href="https://github.com/libcna/cna" class="nav-link nav-link--github" target="_blank" rel="noopener">GitHub</a><a href="https://blog.libcna.com/" class="nav-link nav-link--blog" target="_blank" rel="noopener">Blog</a>
<a href="https://www.youtube.com/@libcna" class="nav-link nav-link--youtube" target="_blank" rel="noopener">YouTube</a>
<a href="https://discord.gg/vrnc4n6DaE" class="nav-link nav-link--discord" target="_blank" rel="noopener">Discord</a>
</div>
<button class="theme-toggle" type="button" aria-label="Switch to light theme" title="Switch to light theme">
<svg class="theme-icon-light" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.5 4.9l1.4-1.4 2.1 2.1-1.4 1.4L3.5 4.9zm13.5 13.5l1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1zM19.1 3.5l1.4 1.4-2.1 2.1-1.4-1.4 2.1-2.1zM5.6 17l1.4 1.4-2.1 2.1-1.4-1.4L5.6 17zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
<svg class="theme-icon-dark" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.3 22a10 10 0 0 1-1.6-19.9c.6-.1 1 .5.8 1a7.9 7.9 0 0 0 9.7 10.6c.5-.2 1 .3.9.8A10 10 0 0 1 12.3 22z"/></svg>
</button>
</div>
</nav>
<main id="main-content">
<div class="page-header">
<div class="container">
<span class="section-label">Showcase</span>
<h1>Showcase</h1>
<p>Browser-playable demos, real-world game ports, XNA sample ports, and platform validation — CNA in action across multiple targets.</p>
</div>
</div>
<!-- ================================================================
Section 1: Browser Demos
================================================================ -->
<section class="section">
<div class="container">
<h2>🌐 Browser Demos</h2>
<p>CNA compiles to WebAssembly via Emscripten and its <code>WEBGL2</code> renderer (an EasyGL profile, the Emscripten default) renders via WebGL 2. The demos below run directly in a modern browser — no installation required. They also double as manual smoke tests for the Emscripten/WebGL 2 target: if they load and respond to input, that target is healthy. They are prebuilt binaries whose CNA revision is not recorded, so they show what CNA can do, not the behavior of the documented snapshot; <a href="demos.html">twelve more browser builds</a> and the <a href="https://samples.libcna.com/" target="_blank" rel="noopener">samples gallery</a> are on the Demos page.</p>
<div class="cards cards--2x2" style="margin-top:1.75rem;">
<div class="card">
<span class="card-icon">🏠</span>
<div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;">
<h3 style="margin:0;">House 3D Demo</h3>
<span class="status-badge status-done">Live</span>
</div>
<p>A 3D procedural house scene built entirely from CNA primitives: exterior walls, a pitched roof, windows, a door, interior floors, and surrounding ground. The player can walk and jump with full gravity. Rendered via <code>BasicEffect</code> and the EasyGL renderer, compiled to WebAssembly with Emscripten.</p>
<p>Validates 3D matrix transforms, camera projection, per-vertex lighting, player physics, and the game loop — all running in-browser at interactive frame rates.</p>
<div style="margin-top:auto; padding-top:1rem;">
<a href="https://demos.libcna.com/cna_demo_house_3d/cna_house3d_demo.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">▶ Play in Browser</a>
</div>
</div>
<div class="card">
<span class="card-icon">🎨</span>
<div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;">
<h3 style="margin:0;">CNA 2D Demo</h3>
<span class="status-badge status-done">Live</span>
</div>
<p>A 2D sprite demo exercising the <code>SpriteBatch</code> API: texture loading, draw calls with position/rotation/scale, tinted sprites, and layered rendering. Runs in the browser via the same Emscripten/WebGL 2 pipeline as the 3D demo.</p>
<p>Acts as a manual regression check for 2D rendering correctness on the Emscripten target. Also validates the content loading pipeline for PNG textures under WebAssembly.</p>
<div style="margin-top:auto; padding-top:1rem;">
<a href="https://demos.libcna.com/cna_demo_2d/cna_demo_2d.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">▶ Play in Browser</a>
</div>
</div>
</div>
<div class="callout callout--info" style="margin-top:2rem;">
<span class="callout-icon">📌</span>
<p><strong>Note:</strong> the documented snapshot contains 18 workflow files (24 jobs), including focused Emscripten multi-renderer, platform, Apple/Metal, C API header-level and subsystem gates; the Windows Direct3D lanes remain manual, no workflow builds the C API library or runs the XNA oracle corpus, and the platform workflow covers X11 and Wayland only through SDL3 on a private Xvfb and a private headless Weston. Those workflows do not continuously launch these hosted demo files or cover every browser, renderer and driver combination. Treat a successful local browser run as separate visual evidence, not as an implication from the repository CI matrix.</p>
</div>
</div>
</section>
<!-- ================================================================
Section 2: Real-World Validation
================================================================ -->
<section class="section section--alt">
<div class="container">
<h2>🎯 Verification against the real XNA runtime</h2>
<p>Unit tests verify individual types in isolation. What they cannot verify is whether CNA behaves the way the real XNA runtime behaved, or whether the full programming model hangs together when actual game code drives it. Three things address that. They are checked mechanically rather than by eye, but they differ a great deal in how strong and how automated they are, and the honest boundaries are stated below and on the <a href="docs/verification.html">Verification page</a>, which holds the proof.</p>
<div class="cards cards--2x2" style="margin-top:1.75rem;">
<div class="card">
<span class="card-icon">🎯</span>
<h3>Pixel-exact against real XNA</h3>
<p>CNA maintains an <strong>XNA oracle corpus</strong>: 39 scenes (256×256, <code>HiDef</code>) under <code>tools/xna-oracle/</code>, with reference images captured by running the <strong>genuine Microsoft XNA 4.0 runtime</strong> — under Wine with DXVK on Linux, not on Windows. The repository records all 39 scenes as pixel-exact on the DIRECTX9 oracle path — the same Wine and DXVK stack at <code>--tolerance 0</code>, every RGBA channel of every one of the 65,536 pixels per scene.</p>
<p>This is the strongest correctness claim on the site: not "looks right", but byte-identical to what the original runtime produced — for these 39 scenes, on that host. The DIRECTX9 renderer exists largely to make this comparison possible — it uniquely targets pixel-exact XNA 4.0 authenticity. The boundaries matter: the last consolidated dated divergence report covers 31 of the 39 scenes and later per-scene notes record the rest, no 39-scene run was executed for this documentation, the result has not been repeated on native Windows, no CI workflow runs it, and no other renderer is held to this bar — EasyGL and Software have a CTest on two line scenes only (the EasyGL test fails on any pixel difference; the Software test only if a scene does not render), Software was measured at 18 of 39 byte-exact (30 within one channel value), and FNA3D's gate only requires that the scenes render. Seven further unbound-texture scenes and a 17-format channel-expansion table were captured the same way but are outside every diff denominator.</p>
</div>
<div class="card">
<span class="card-icon">🔄</span>
<h3>Differential testing against FNA</h3>
<p>A real running FNA build lives under <code>tools/fna-reference/</code> and dumps its observable behaviour as JSON. <code>tools/cna-reference/</code> produces the C++ counterpart dump, and <code>scripts/compare-fna-reference.py</code> diffs the two — a manual developer workflow covering enums, render-state presets, PackedVector types and Viewport maths, not a CI gate. New since alpha.1: FNA-produced compiled-effect fixtures (reflection, state and 8×8 pixels for seven effects) that CNA's tests replay.</p>
<p>Where XNA's documented behaviour is ambiguous, this settles it empirically instead of by interpretation. A separate compile-time <code>CNAEXT</code> purity check turns non-XNA declarations into <code>[[deprecated]]</code> warnings under <code>-Werror</code>; today it is wired up for the Devices and Sensors namespaces, and a signature-freeze test pins the Input namespace's public API.</p>
</div>
<div class="card">
<span class="card-icon">💾</span>
<h3>Real ported games</h3>
<p>Separate projects drive CNA with real game code rather than test harnesses; their figures belong to the repository revision named, not to the documented snapshot:</p>
<ul style="margin-top:0.5rem;">
<li><strong><a href="https://github.com/libcna/cna-lab/tree/develop/cna-craft" target="_blank" rel="noopener">cna-craft</a></strong> — about 13,800 lines of C/C++ (cna-lab revision <code>49e3cd5b</code>): a port of fogleman/Craft, a voxel game, onto CNA.</li>
<li><strong><a href="https://github.com/libcna/cna-extended/tree/develop" target="_blank" rel="noopener">cna-extended</a></strong> — about 102,000 lines (revision <code>5775ecc97</code>): a C++23 port of MonoGame.Extended plus a non-upstream <code>World3DEXT</code> 3D scene layer.</li>
<li><strong><a href="https://github.com/libcna/cna-samples" target="_blank" rel="noopener">cna-samples</a></strong> — 91 of Microsoft’s XNA 4.0 samples and games ported to C++ (revision <code>5db32e6</code>), 90 of them playable in the browser; see <a href="#xna-samples">below</a>.</li>
<li><strong><a href="https://github.com/libcna/cna-dotnet-samples" target="_blank" rel="noopener">cna-dotnet-samples</a></strong> — the same Microsoft samples as unchanged original C# on <a href="docs/cna-net.html">CNA.NET</a>: 84 programs built from byte-identical upstream source (revision <code>1e6d763</code>).</li>
</ul>
<p style="margin-top:0.75rem;">Alongside them, CNA itself ships 25 <code>cna_demo_*</code> programs in its module example directories — 2D, audio, XACT, input, devices, avatar, GamerServices and networking demos — plus <code>cna_house3d_demo</code> and the new <code>cna_inspector_demo</code>.</p>
</div>
<div class="card">
<span class="card-icon">🔬</span>
<h3>More checks since alpha.1</h3>
<p>The evidence set has grown around the oracle corpus: <strong>32 renderer-neutral parity fixtures</strong> are registered for four renderer families (EasyGL, WebGPU, SDL_GPU and Direct3D 11), judged by the fixtures' own assertions rather than by real XNA; a <strong>Content Pipeline oracle</strong> in which genuine XNA pipeline assemblies produced a 128-type API inventory and a 152-case differential record; a glTF conformance corpus of 148 assets with renderer-owned goldens; and a bounded-memory test runner plus GPU-test isolation that make the very large suite runnable.</p>
<p>These are CNA-recorded results. They establish determinism and regression protection for the named renderers, not equivalence with a reference renderer, and none is run by the repository's workflows.</p>
</div>
</div>
<h3 style="margin-top:2rem;">What the oracle corpus actually looks like</h3>
<p>Four of the 39 scenes. Every one of these frames was drawn by the real Microsoft XNA 4.0 runtime — they are the reference images, not CNA screenshots. CNA's DIRECTX9 renderer is recorded as reproducing each of them byte for byte. The full set is described on the <a href="docs/verification.html#oracle">verification page</a>.</p>
<div class="cards">
<figure class="card">
<img src="img/oracle/colored3d.png" alt="A triangle on a cornflower-blue background with red, green and blue vertex colours blended smoothly across its face." width="256" height="256" loading="lazy">
<p>Vertex-coloured triangle.</p>
</figure>
<figure class="card">
<img src="img/oracle/alphatest_quad.png" alt="A quad with only its left half drawn — a red block above a white block — the right half discarded by the alpha test." width="256" height="256" loading="lazy">
<p>Alpha test discarding half a quad.</p>
</figure>
<figure class="card">
<img src="img/oracle/envmap_fresnel_quad.png" alt="A square shading from bright orange-brown at the top to near-black at the bottom, on cornflower blue." width="256" height="256" loading="lazy">
<p>Fresnel-weighted environment reflection.</p>
</figure>
<figure class="card">
<img src="img/oracle/sprite_sortmode_backtofront_quad.png" alt="A brown square on a black background, the topmost sprite after back-to-front depth sorting." width="256" height="256" loading="lazy">
<p>Back-to-front sprite sorting.</p>
</figure>
</div>
<div class="callout callout--info" style="margin-top:2rem;">
<span class="callout-icon">📌</span>
<p><strong>The honest framing:</strong> CNA is a research-grade porting-experiment framework, not yet a ship-a-commercial-game framework. What the evidence on this page supports is that the XNA programming model works, that rendering matches the original runtime where it has been measured (DIRECTX9, 39 scenes, under Wine with DXVK), and that the test suite is large and real (11,380 static test definitions across 813 CNA-owned test sources, none of which is a pass count). It does not yet support a claim that any commercial title has shipped on it.</p>
</div>
</div>
</section>
<!-- ================================================================
Section 2: Real-World Validation
================================================================ -->
<section class="section">
<div class="container">
<h2>🏃 Real-World Validation — Speedy Blupi</h2>
<p>Unit tests verify individual types and subsystems in isolation. What they cannot verify is whether the full XNA programming model hangs together when real game code drives it. The Speedy Blupi port is a real-game case study of that question — evidence for the CNA revision it was built with, not for the documented snapshot. <a href="demos.html#speedy-blupi" class="btn btn-secondary btn-sm">Speedy Blupi on the Demos page</a></p>
<div class="cards" style="margin-top:1.75rem;">
<div class="card">
<span class="card-icon">🎮</span>
<h3>What Speedy Blupi validates</h3>
<p>Speedy Blupi is a classic action game: the 2013 Windows Phone edition was decompiled, moved from XNA 4.0 through MonoGame, translated from C# to about 32,000 lines of C++ and then ported onto CNA by the OpenEggbert project (<a href="https://github.com/openeggbert/mobile-eggbert" target="_blank" rel="noopener">mobile-eggbert</a>). Running it exercises the full stack simultaneously:</p>
<ul style="margin-top:0.5rem;">
<li><strong>SpriteBatch</strong> — layered sprite rendering with correct depth ordering</li>
<li><strong>Input handling</strong> — keyboard, touch and accelerometer state each frame</li>
<li><strong>Audio</strong> — <code>SoundEffect</code> and <code>MediaPlayer</code> for per-event sounds and music</li>
<li><strong>Content loading and saves</strong> — loose PNG and WAV assets through <code>ContentManager</code>, and game state through <code>IsolatedStorage</code></li>
<li><strong>Game loop semantics</strong> — fixed-timestep <code>Update</code> / variable-timestep <code>Draw</code></li>
</ul>
</div>
<div class="card">
<span class="card-icon">✅</span>
<h3>What it proves</h3>
<p>Real-world XNA-style game code runs on CNA at the revision it was ported to. The port was a translation, not a copy: the game's classes were rewritten from C# to C++ one by one, and the project keeps a list of open issues (sound timing, fullscreen, transparency). It shows that:</p>
<ul style="margin-top:0.5rem;">
<li>CNA's API shape is close enough to XNA 4.0 that a ~32,000-line game could be translated class by class instead of redesigned.</li>
<li>The framework can run a multi-system game loop on desktop and in the browser; the project's own notes, not CNA's CI, are the evidence for how well.</li>
<li>Audio, input and rendering subsystems interoperate when driven by real game state, again for the revision it was built with.</li>
</ul>
</div>
<div class="card">
<span class="card-icon">📱</span>
<h3>Platform targets</h3>
<p>The Speedy Blupi port records these project targets:</p>
<ul style="margin-top:0.5rem;">
<li><strong>Linux x86_64</strong> — builds from source with CNA's <code>SDL_RENDERER</code> backend (its README default); Windows builds are documented</li>
<li><strong>Android</strong> — a Gradle/NDK project exists; <strong>no APK has been published</strong></li>
<li><strong>WebAssembly</strong> — a playable Emscripten build is hosted at speedyblupi.com (an early, May 2026 CNA revision using <code>SDL_RENDERER</code>; predates alpha.1 and the documented snapshot)</li>
</ul>
<p style="margin-top:0.75rem;">Consumer-project results are useful evidence for that project's pinned revision, not a continuous platform gate for the documented snapshot. CNA itself has no Android workflow.</p>
</div>
</div>
</div>
</section>
<!-- ================================================================
Section 3: cna-samples
================================================================ -->
<section class="section section--alt">
<div class="container">
<h2 id="xna-samples">📚 Sample Applications — cna-samples</h2>
<p>The <a href="https://github.com/libcna/cna-samples" target="_blank" rel="noopener">cna-samples</a> repository contains direct C++ ports of Microsoft’s original XNA Game Studio 4.0 samples and games. Each one follows the original C# source as closely as possible — the point is to test CNA’s API against what real XNA code actually demanded, not to write flattering new demos. All figures below are tied to the repository revision <code>5db32e6</code> (3 October 2026) and to CNA <code>next</code> at that date, not to the documented snapshot.</p>
<p><strong>The C++ port of the relevant XNA 4.0 samples is practically complete: 91 sample and game projects have a finished C++ CNA version.</strong> They include Platformer, MarbleMaze, RolePlayingGame, ShipGame, CatapultWars, HoneycombRush, NinjAcademy, GameStateManagement, Audio3D, NetRumble and the avatar samples, spanning 2D primitives, collision, AI and pathfinding, particles, complete 2D and 3D games, 3D audio, avatars, networking and touch gestures. Shader-driven samples such as BloomSample, ShadowMapping, NormalMapping and SkinningSample work because the official Effect binaries produced by XNA’s own content build load through CNA’s compiled-effect path.</p>
<p>The plan audits <strong>153 entries</strong> (SAMPLE-001 to SAMPLE-153), and that number is the size of the audit list, not a count of 153 XNA 4.0 games: <strong>8</strong> relevant XNA 4.0 C# programs remain to be finished (among them the peer-to-peer and network-prediction samples and the Windows Phone RolePlayingGame), and <strong>54</strong> entries are not port targets at all — XNA 3.x or older content, Silverlight and Windows Forms tools, Visual Basic and C++ projects, asset and art packs, duplicates, and samples built on retired platform services.</p>
<p><strong>90 C++ builds are playable in your browser</strong> at <a href="https://samples.libcna.com/" target="_blank" rel="noopener">samples.libcna.com</a>: real XNA sample code compiled to WebAssembly and run by CNA, not screenshots. Each was run in Chrome when its port was completed; one of them (PerformanceUtility) is marked partial, and three completed ports have no browser build by design (StockEffects is a content tool; NetRumble and the client-server sample need native networking).</p>
<div class="cards cards--2x2" style="margin-top:1.75rem;">
<div class="card">
<span class="card-icon">▪</span>
<div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;">
<h3 style="margin:0;">PrimitivesSample</h3>
<span class="status-badge status-done">Ported</span>
</div>
<p>Port of the original XNA Game Studio 4.0 <strong>Primitives Sample</strong> demonstrating 2D primitive rendering: lines, triangles, rectangles, and circles drawn using <code>SpriteBatch</code> and procedurally generated textures.</p>
<p>Validates: <code>SpriteBatch.Begin</code>/<code>End</code>, pixel-texture creation, 2D coordinate mapping, and the basic game loop with variable-size window support.</p>
</div>
<div class="card">
<span class="card-icon">⌖</span>
<div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;">
<h3 style="margin:0;">Primitives3D</h3>
<span class="status-badge status-done">Ported</span>
</div>
<p>Port of the original XNA Game Studio 4.0 <strong>3D Primitives Sample</strong> demonstrating 3D shape rendering: box, sphere, cylinder, torus, and teapot primitives rendered with <code>BasicEffect</code> lighting and per-object transform matrices.</p>
<p>Validates: <code>BasicEffect</code> with ambient/diffuse/specular lighting, <code>VertexBuffer</code>/<code>IndexBuffer</code> management, view/projection matrix setup, and the 3D rendering pipeline end-to-end.</p>
</div>
<div class="card">
<span class="card-icon">🏆</span>
<div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;">
<h3 style="margin:0;">CatapultWars</h3>
<span class="status-badge status-done">Ported</span>
</div>
<p>Port of the original XNA Game Studio 4.0 <strong>Catapult Wars</strong> — a complete two-player turn-based artillery game with scoring, animated sprites, and game-state screens.</p>
<p>Validates: a full game loop end-to-end, not just an isolated API — sprite animation, input handling, scoring, and screen transitions working together.</p>
</div>
<div class="card">
<span class="card-icon">📌</span>
<div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;">
<h3 style="margin:0;">GameStateManagement</h3>
<span class="status-badge status-done">Ported</span>
</div>
<p>Port of Microsoft's <strong>Game State Management</strong> sample: a reusable screen-stack framework (menus, gameplay, pause, transitions) used as the foundation for many of the other official XNA sample games.</p>
<p>Validates: a layered <code>GameComponent</code>/screen architecture on top of CNA's <code>Game</code> base class.</p>
</div>
<div class="card">
<span class="card-icon">🧩</span>
<div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;">
<h3 style="margin:0;">Pathfinding & FlockingSample</h3>
<span class="status-badge status-done">Ported</span>
</div>
<p>Ports of the XNA AI sample pair covering grid-based pathfinding and boid-style flocking/steering behavior, alongside related ports (<code>ChaseAndEvade</code>, <code>WaypointSample</code>, <code>AimingSample</code>, <code>FuzzyLogic</code>).</p>
<p>Validates: math-heavy gameplay code (vectors, steering forces, grid search) ported faithfully from C# to C++23.</p>
</div>
<div class="card">
<span class="card-icon">🔊</span>
<div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;">
<h3 style="margin:0;">Audio3D & GesturesSample</h3>
<span class="status-badge status-done">Ported</span>
</div>
<p>Ports covering positional 3D audio playback and touch gesture recognition (tap, drag, pinch, flick) — the two least-graphics-focused corners of the XNA API surface.</p>
<p>Validates: <code>SoundEffect3D</code>-style positional audio and <code>Microsoft::Xna::Framework::Input::Touch</code> gesture handling outside of pure rendering code.</p>
</div>
</div>
<div class="cards cards--2" style="margin-top:1.75rem;">
<div class="card">
<span class="card-icon">🏎</span>
<div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;">
<h3 style="margin:0;">Racing Game Kit</h3>
<span class="status-badge status-done">Ported, not hosted</span>
</div>
<img src="https://samples.libcna.com/assets/img/racing-game.png" alt="The C++ CNA port of Microsoft's XNA 4.0 Racing Game Kit: a car on the race track" style="max-width:100%; height:auto; border-radius:8px; margin:0.5rem 0;" loading="lazy">
<p>Microsoft’s XNA 4.0 Racing Game Kit — a full 3D racing game with menus, tracks, highscores and post-processing — has a complete C++ CNA port, tracked in its own plan beside the 91 sample ports. It was requalified on Linux on 3 October 2026; a local browser run passed; on Android it runs on the emulator, and a debug build has raced on one phone, so Android is still described as in progress.</p>
<p>It is <strong>not hosted</strong> on samples.libcna.com, because its original content is not treated as redistributable by the CNA sample gallery. <a href="https://www.youtube.com/watch?v=bTThYkZJzYw" target="_blank" rel="noopener">Watch it on YouTube</a> (“Racing Game on CNA and in web browser”) or read the <a href="https://samples.libcna.com/RacingGame.html" target="_blank" rel="noopener">gallery’s Racing Game page</a>.</p>
</div>
<div class="card">
<span class="card-icon">#</span>
<div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;">
<h3 style="margin:0;">The original C# samples, unchanged</h3>
<span class="status-badge status-partial">CNA.NET, beta</span>
</div>
<p>The same Microsoft samples also run from their <em>original</em> C# source through <a href="docs/cna-net.html">CNA.NET</a>, CNA’s C# binding: <a href="https://github.com/libcna/cna-dotnet-samples" target="_blank" rel="noopener">cna-dotnet-samples</a> keeps the upstream game code byte-for-byte and adds only a project file and host. 83 sample projects (84 programs) build and run on Linux, single-threaded in headless Chromium and on the x86_64 Android emulator, and on a physical Mac mini M4 (osx-arm64) all 84 start, load their content and keep running on the <code>SOFTWARE</code> and <code>METAL</code> renderers (a smoke run, not a pixel comparison); 83 of the 91 C++ ports therefore also exist as unchanged C#, and 26 programs were compared pixel for pixel with their C++ port and match.</p>
<p>These are runs recorded in CNA.NET’s campaign ledgers, not CI; no C# build is hosted publicly. See <a href="docs/migrating-to-cna-net.html">Migrating C# games to CNA.NET</a>.</p>
</div>
</div>
<div class="callout callout--note" style="margin-top:2rem;">
<span class="callout-icon">🔗</span>
<p><strong>Repository:</strong> All sample ports live at <a href="https://github.com/libcna/cna-samples" target="_blank" rel="noopener">github.com/libcna/cna-samples</a>. Each sample includes build instructions and mirrors the structure of the original XNA sample project. Additional XNA 4.0 sample ports are added as API coverage expands.</p>
</div>
</div>
</section>
<!-- ================================================================
Section 4: Platform Validation
================================================================ -->
<section class="section">
<div class="container">
<h2>🖥 Platform Validation</h2>
<p>CNA is built on SDL3, which provides the portability layer. The table below reflects current validated state — "validated" means demos or game code has been built and run on real hardware or a real browser, not merely that the code compiles.</p>
<div class="table-wrap" style="margin-top:1.75rem;">
<table>
<thead>
<tr>
<th>Platform</th>
<th>Renderer</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Linux x86_64</strong></td>
<td><code>OPENGLES3</code> (EasyGL), <code>VULKAN</code>, <code>SOFTWARE</code>, <code>SDL_RENDERER</code>, <code>OPENGL33</code></td>
<td><span class="status-badge status-done">Validated</span></td>
<td>Primary source and CI platform: SDL3 with several renderers, the SDL3 window suite on SDL’s X11 and Wayland drivers, and an SDL-free Headless build with ALSA audio all run automatically under virtual servers. The workflows exercise configured slices, not every renderer or test definition. <code>OPENGLES3</code> is the Linux default.</td>
</tr>
<tr>
<td><strong>Android</strong></td>
<td><code>SDL_RENDERER</code></td>
<td><span class="status-badge status-partial">Partial</span></td>
<td>Source and CMake/NDK integration exist, including Android sensor paths and a Gradle demo project. In this snapshot, Android lifecycle, Back-button, portrait and content fixes were found and checked on the Android emulator by running real samples and games (mostly through CNA.NET), and the C++ Racing Game has run on one phone in a debug build. There is no Android workflow lane and no preset, so do not read this as qualification on physical devices.</td>
</tr>
<tr>
<td><strong>WebAssembly / Browser</strong></td>
<td><code>WEBGL2</code> (EasyGL), <code>WEBGPU</code></td>
<td><span class="status-badge status-done">Validated</span></td>
<td>The 90 sample builds at <a href="https://samples.libcna.com/" target="_blank" rel="noopener">samples.libcna.com</a>, the hosted demos and the CNA Car Simulator and Street builds are playable WebGL 2 examples, each run in a desktop browser when it was published. A workflow builds one bundle containing the WebGL 2 and WebGPU renderers and inspects it; it does not run them, so it does not substitute for testing in target browsers.</td>
</tr>
<tr>
<td><strong>Windows</strong></td>
<td><code>SDL_RENDERER</code>, <code>DIRECTX9</code>, <code>DIRECTX11</code></td>
<td><span class="status-badge status-partial">Partial</span></td>
<td>Native MSVC and MinGW-w64 cross-build paths exist; windows come from SDL3’s Windows driver. The native-MSVC Direct3D 11 and SDL3 platform lanes are manually dispatched (their recorded run on GitHub’s Windows image passed), and Direct3D 11 was validated on one physical Windows 11 machine. Report a concrete configured build or runtime run rather than treating source support as continuous Windows validation.</td>
</tr>
<tr>
<td><strong>macOS</strong></td>
<td><code>METAL</code>, <code>OPENGL33</code>, <code>SDL_GPU</code>, <code>WEBGPU</code>, <code>FNA3D</code>, <code>SOFTWARE</code>, <code>SDL_RENDERER</code></td>
<td><span class="status-badge status-partial">Tested on one Mac</span></td>
<td>macOS 13.3 and later. CNA’s own qualification ran every renderer listed here through its full test suite on a physical Mac mini M4 (Apple silicon, macOS 27) with no failing case; the console was locked, so on-screen presentation was not observed, and no Intel Mac was run. The C++ sample ports pass CNA’s automated renderer matrix on <code>METAL</code>, <code>OPENGL33</code> and <code>WEBGPU</code> (91 of 91) and on <code>SDL_GPU</code> and <code>FNA3D</code> (90 of 91; LensFlare needs occlusion queries those drivers lack), and 248 of 248 cna-examples demos render on Metal. CI builds and tests on GitHub’s <code>macos-26</code> runners.</td>
</tr>
<tr>
<td><strong>iOS</strong></td>
<td><code>SDL_RENDERER</code>, <code>METAL</code></td>
<td><span class="status-badge status-partial">Experimental</span></td>
<td>iOS 16.3 and later, allow-listed to <code>SDL_RENDERER</code> and <code>METAL</code>, with networking configured off. In CNA’s own iOS Simulator runs (iPhone 17 profile) a <code>METAL</code> pixel probe read back exact pixels in 8 of 8 launches; the device app is final-linked and has never run on a physical iPhone or iPad, so there is no device pixel, input or audio evidence.</td>
</tr>
</table>
</div>
<div class="callout callout--warn" style="margin-top:1rem;">
<span class="callout-icon">⚠</span>
<p><strong>Renderer note:</strong> CNA snapshot c1c316b9 exposes 14 identities across 12 implementation families. A default build contains one selected with <code>CNA_GRAPHICS_RENDERER</code>; an opt-in <code>CNA_GRAPHICS_RENDERERS</code> build can contain several compatible families and select one before device creation. This page demonstrates only a tiny subset, so do not generalize its output or capabilities to the full inventory. See <a href="docs/rendering-backends.html">Renderers</a> for the source-audited matrix and <a href="docs/runtime-renderer-selection.html">Runtime Renderer Selection</a> for the multi-renderer boundary.</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-inner">
<div class="footer-top">
<div class="footer-brand">
<div class="footer-brand-name">CNA</div>
<p>Documentation snapshot for CNA commit c1c316b9 (9 October 2026), a post-alpha.1 development snapshot. CNA exposes 14 renderer identities across 12 implementation families; APIs may change before 1.0.</p>
</div>
<div class="footer-col">
<h4>Project</h4>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="architecture.html">Architecture</a></li>
<li><a href="roadmap.html">Roadmap</a></li>
<li><a href="network.html">CNA Network</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Docs</h4>
<ul>
<li><a href="docs/getting-started.html">Getting Started</a></li>
<li><a href="docs/building.html">Building</a></li>
<li><a href="docs/platforms.html">Platforms</a></li>
<li><a href="docs/rendering-backends.html">Renderers</a></li>
<li><a href="docs/faq.html">FAQ</a></li>
<li><a href="deep-dives/index.html">Deep Dives</a></li>
<li><a href="known-issues/index.html">Known Issues</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Community</h4>
<ul>
<li><a href="https://github.com/libcna/cna" target="_blank" rel="noopener">GitHub</a></li>
<li><a href="https://discord.gg/vrnc4n6DaE" target="_blank" rel="noopener">Discord</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>CNA is not affiliated with or endorsed by Microsoft Corporation. XNA is a trademark of Microsoft. Licensed under the Microsoft Public License (Ms-PL).</p>
<div class="footer-links">
<a href="https://github.com/libcna/cna/blob/c1c316b9c7a846ce8002809c151fcd1af14942c9/LICENSE" target="_blank" rel="noopener">License</a>
<a href="contact.html">Contact</a>
</div>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<script src="js/prism/prism.min.js" defer></script>
<script src="js/prism/prism-cpp.min.js" defer></script>
<script src="js/prism/prism-glsl.min.js" defer></script>
<script src="js/prism/prism-json.min.js" defer></script>
<script src="js/prism/prism-bash.min.js" defer></script>
<script src="js/prism/prism-cmake.min.js" defer></script>
</body>
</html>