helder

An app and game stack in Haxe, with a TypeScript frontend, compiled by hxmc to native code and WebAssembly. These are its examples; the 22 with a Play button run here, in your browser.

Source on GitHub

Dev server

A directory served over HTTP, a WebSocket telling of each change to a file in it, a child process streamed, all on one thread's loop (helder.async); GET /quit ends it all

  • async
  • http
  • websocket
  • os
512×384

Chains

Chains of balls on helder.physics' distance joints hanging from a beam, a heavy ball on a ball joint swinging through them; click to swing it again

  • 3d
  • physics
320×200

Counter

The smallest ui program: a signal, markup bound to it, a button that changes it

  • ui
  • view
  • signals
512×384

Cube

A textured cube with rounded, lit edges casting a soft shadow, depth-tested, its matrices a uniform block; drag it to turn it

  • gfx
  • shaders
  • 3d
  • input
512×384

Render targets

A scene rendered into a texture with its own depth buffer each frame, then shown on the faces of the cube

  • gfx
  • shaders
  • 3d
  • render targets
512×384

Falling

Balls and tumbling boxes dropped into a walled box by helder.physics (contacts with angular impulses, restitution, friction, sleeping at a fixed step), drawn by helder.scene with shadows; click to drop more

  • 3d
  • physics
512×384

Texture formats

Every portable texture format, written from bytes and rendered into, side by side; depth textures rendered and sampled

  • gfx
  • shaders
  • textures
  • render targets
512×384

glTF scene

A glTF 2.0 scene (a .glb referenced with Model.of, typed from the file) drawn by helder.scene's renderer: metallic-roughness materials, a sun with a shadow map under a sky, a keyframe animation from the file; drag or use the arrows to turn around it

  • 3d
  • gltf
  • pbr
  • input
390×844

Floating Greens

Mini golf on floating islands, a small mobile 3D game: drag back from the ball to aim and shoot, orbit and pinch the camera elsewhere; nine holes on helder.physics at a fixed step, a <Scene> under a HUD and menu in ui, best scores saved

  • 3d
  • game
  • physics
  • ui
  • view
  • scene markup
  • touch

Download for Android (APK) 3.5 MB · built from 46a6bdf

512×384

Instances

Sixty-three shapes in three instanced draws: a vertex buffer for the shapes, an instance buffer for where, how big, how turned and what colour

  • gfx
  • shaders
  • instancing
860×560

Mail

A mail client's three panes: folders, messages sorted by a click on a column's title, the one selected read beside them; a toolbar, shortcuts, search and undo

  • ui
  • view
  • styles
512×384

Mip maps

A checkered floor to the horizon, filtered trilinearly through generated mip levels, and swatches of a texture's levels uploaded one by one

  • gfx
  • shaders
  • 3d
  • textures

Native controls

The same markup and signals as the drawn widgets, on the platform's own controls (GTK 3 on Linux, the DOM in a browser), laid out by helder.ui's flexbox

  • ui
  • view
  • native
512×384

Orbits

A small solar system as a scene graph: planets on turning nodes, a moon on a planet's, a fixed-step clock, the star a point light, a debug overlay of frame times (O)

  • 3d
  • scene graph
  • pbr
640×400

Planets

A scene in ui's layout, all markup: <Scene> beside a panel, nodes turned by signals, a planet picked by a click, its name over it (<Ui>)

  • 3d
  • ui
  • view
  • scene markup
480×440

Text shaping

Fonts parsed, shaped and rasterized in Haxe: kerning, Arabic joining, right-to-left and mixed runs, combining marks; type to reshape

  • ui
  • text
  • bidi
  • shaping
512×384

Showroom

helder.scene's optional renderer features together: an environment map lighting metal and plastic spheres, a normal-mapped crate, a morphing surface, two shadow cascades, see-through glass; drag to turn around

  • 3d
  • pbr
  • gltf
420×360

Sign-up card

A card of plain views styled by a StyleSheet of its own: a field, a checkbox, a switch, a badge and buttons, light and dark

  • ui
  • styles
480×560

Todo

A todo list in markup: signals, a keyed list, a text field, checkboxes and filters

  • ui
  • view
  • text input
0×0

Tone

A 440 Hz sine for two seconds from an audio callback that allocates nothing: WebAudio here, ALSA, Core Audio or WASAPI natively

  • os
  • audio
512×384

Triangle

A coloured triangle: a vertex buffer, a pipeline and shaders written in Haxe, compiled to WGSL, GLSL, MSL and HLSL

  • gfx
  • shaders
320×200

Counter in TypeScript

The counter in TSX: a signal, markup bound to it, a button that changes it

  • typescript
  • ui
  • view
  • signals

Hello, TypeScript

A TypeScript program checked by tsgo and lowered straight to hxmc's IR, native or wasm: a class with a private field, modules, a promise and a timer

  • typescript

Ticker

A TypeScript program ticking on a timer, rebuilt by helder dev as its files change and swapped in

  • typescript
  • dev
480×560

Todo in TypeScript

The todo list in TSX: signals, For keeping a row per item, a text field, checkboxes and filters, components of its own

  • typescript
  • ui
  • view
  • text input
512×384

Walker

A capsule character of helder.physics (Character: steered, grounded by a ray, jumping) walking among crates it pushes and onto a platform, the camera following; arrow keys, WASD or a gamepad's stick walk, space, A or the lower right corner jumps

  • 3d
  • physics

Counter island

The smallest JavaScript island: a button counting its clicks, rendered into the page at build time, hydrated by its own 42 KB bundle

  • web
  • view
  • island
  • javascript

JavaScript calls wasm

A JavaScript island calling a wasm32-wasi module through typed exports: strings, numbers and bytes in bulk

  • web
  • javascript
  • wasm
  • exports