Real-time ASCII renderer for procedural 3D spacecraft.
One HTML file, no build step. Exports transparent GIFs for GitHub READMEs.
- Ten procedural spacecraft, built from Three.js primitives when the page loads (see the table below).
- Six character sets: edge-aware line art (
| / - \ +), standard (.:-=+*#%@), dense (24 glyphs ordered by measured ink coverage), blocks (░▒▓█), quadrant blocks (2×2 sub-pixels per character) and binary. - Transparent void: empty cells are plain spaces and the output layer has no background, so the render floats on whatever sits behind it.
- Attitude control: independent pitch, yaw and roll rates in the body frame, drag to turn the view, wheel to zoom, play/pause and reset.
- Image controls: columns, contrast, brightness, gamma, void floor and the line-art edge threshold.
- Seven palettes: NixOS, Matrix, Cyberpunk, Dracula, Tokyonight, Amber CRT and Mono.
- GIF export in the browser with gif.js: transparent or solid background, seamless 360° loops, live size and memory estimate, progress dialog, and a preview on checker, GitHub dark and GitHub light backgrounds.
- README embed generator: Markdown,
<img>or centered HTML, with a relative path or araw.githubusercontent.comURL. - Copy any frame as plain text for code blocks or terminals.
- Settings are kept in
localStorage.
| Key | Spacecraft | Based on |
|---|---|---|
1 |
CubeSat 3U | CubeSat 3U form factor |
2 |
LEO NavSat | Generic design |
3 |
Space Observatory | Hubble (1990) |
4 |
Sputnik 1 | Sputnik 1 (1957) |
5 |
GNSS MEO | Galileo FOC (2014) |
6 |
GEO ComSat | Generic dual-reflector bus |
7 |
Deep Space Probe | Voyager (1977) |
8 |
IR Observatory | JWST (2021) |
9 |
Space Station | ISS (1998 onward) |
0 |
Broadband LEO | Generic flat-panel constellation design |
The shapes are simplified interpretations of real missions, not engineering models, and they are not to scale.
| Key | Action |
|---|---|
Space |
Play or pause |
R |
Reset view |
1 to 0 |
Select spacecraft |
M / Shift+M |
Next or previous character set |
T / Shift+T |
Next or previous palette |
[ / ] |
Fewer or more columns |
| Arrow keys | Turn the view by 5° |
+ / - |
Zoom |
C |
Copy the current frame as text |
G |
Render a GIF |
With the mouse: drag to rotate, scroll to zoom, double-click to reset.
- Open the app and pick a spacecraft, a character set and a palette.
- In export gif, choose the aspect, glyph size and background, then press render gif and download gif. A transparent background works on both GitHub themes.
- Commit the file to the repository that holds the README, for example under
assets/in your<username>/<username>profile repository. - Copy the snippet from readme embed and paste it into
README.md.
Light glyph colors such as Mono and Matrix have little contrast on GitHub's light theme; the export panel warns about it.
- Three.js renders the scene into a small WebGL canvas with 2×2 samples per character cell (4×4 in quadrant mode). A fixed three-point studio rig lights the craft, so the shading changes as it turns.
- Each frame is drawn into an offscreen 2D canvas created with
willReadFrequently: trueand read back withgetImageData. - Every cell gets a coverage value and a luminance (Rec. 709 weights) that passes through a brightness, contrast and gamma lookup table. Cells with low coverage, or with a tone below the void floor, become a space.
- Line art computes Sobel gradients, smooths them into a structure tensor, thins them with non-maximum suppression and picks
|,/,-or\from the edge orientation, corrected for the tall aspect of a character cell. Corners with low coherence become+. - Framing solves the camera distance from the volume the craft sweeps around its spin axis, so a full rotation stays in frame at zoom 1.
- GIF frames are painted from a pre-rendered glyph atlas, snapped to 1-bit alpha (GIF transparency is binary) and encoded by gif.js in web workers. Seamless mode spreads exactly one turn about the spin axis over the chosen number of frames.
git clone https://github.com/poligle/ascsat.git
cd ascsat
python3 -m http.server 8000Then open http://localhost:8000. The libraries load from public CDNs, so an internet connection is needed.
| Component | Version | Notes |
|---|---|---|
| Three.js | r128 | cdnjs, with jsDelivr as fallback |
| gif.js | 0.2.0 | Loaded on first export; the worker is fetched and run from a Blob URL |
| Tailwind CSS | 3.4.17 | Play CDN |
| JetBrains Mono | 2.304 | Embedded as a ligature-free subset (Regular and Bold) |
The code is released under the MIT License.
JetBrains Mono is © 2020 The JetBrains Mono Project Authors and is licensed under the SIL Open Font License 1.1 (licenses/JetBrainsMono-OFL.txt). The subset embedded in index.html stays under the OFL. Three.js, gif.js and Tailwind CSS are MIT-licensed and loaded from CDNs; they are not redistributed in this repository.




