s-afanasiev

Interactive web graphics

Node.js / TypeScript engineer working on three.js and PixiJS: playable ads, floor plans turned into 3D, 360° panoramas and the geometry underneath. Every project below runs in the browser, has tests and deploys from CI.

Mech Arena playable in a phone frame next to its build table

3D playable ad · three.js

Mech Arena

Tap enemy mechs, charge a missile strike, finish on an end card with a store CTA.

  • One self-contained HTML per ad network — Meta, Google, MRAID — 560 KB, checked against a budget on every build
  • Zero allocations in the frame loop: slot pools and InstancedMesh, 60 FPS at ≤ 46 draw calls
  • No assets: procedural mechs, canvas textures, WebAudio sound
three.jsWebGLMRAIDperformance
Play demo Source
Merge Guard playable in a phone frame next to its build table

2D playable ad · PixiJS

Merge Guard

Summon heroes, drag identical ones together to merge them, hold the gate against a wave and a boss.

  • Vector art baked into textures once — the scene is batched sprites, no image files
  • Board, merge rules, path and game flow are pure modules with tests; scripted first summons for onboarding
  • Steady 60 FPS on an entry-level GPU in an automated playthrough
PixiJSdrag & dropMRAIDgame design
Play demo Source
Bastion tower-defense playable in a phone frame next to its build table

2D playable ad · PixiJS · tower defense

Bastion

Build archer, cannon and frost towers along a winding road, upgrade them with gold from kills, hold the castle against three waves and a boss.

  • A core with no rendering: battle rules are plain JS, replayed in Node tests; a test greps the core for Pixi and DOM
  • Entities with doors — gold never negative, one tower per spot — and one milestone channel for HUD, sound and tutorial
  • Played through the real UI by two scripted players; steady 60 FPS on an entry-level GPU
PixiJSarchitectureMRAIDtower defense
Play demo Source
Region Selector: apartment plan with rooms on the left, generated 3D rooms on the right

Tool · three.js · computational geometry

Region Selector 3D

Trace regions on a floor plan or a 360° panorama: rooms become 3D walls and floors, zones become hotspots on a sphere.

  • Own geometry: ear-clipping triangulation, self-intersection checks, mitered polygon offset
  • Panorama picking without ray–sphere intersection: camera ray → longitude/latitude → pixel → zone
  • GLB export for Blender, undo/redo, 34 tests
three.jsgeometry360° panoramaglTF
Open app Source