Cyril Monkewitz

Pianist - Web Developer - Researcher.
- Spends spare time developing Relative Music Theory (RMT)

[Cyril Monkewitz @3merillon]

Procedural Planetoid :
added a few new mechanics to the engine.

-spherical impostors : asteroids on keplerian orbits, will be repurposed for spaceships in the future. the shadows fall on the player and the terrain as you pass through.

-building planting : "B" drops one and "9" stresstests with a couple hundred, the terrain teramorphs underneath. there's also a well with proper rope physics on the bucket "Z or Y".

-NPCs : massive NPC handling, N drops one near you or you can populate the whole planet from the UI. early social interactions, they turn their head as you walk past.

-mega objects : a world tree to see how planet-scale objects sit in the renderer.

-flight model : a new third-person freeflight model. finally ditched the orbital approach, this one should drop straight into space flight when we get there.

https://t.co/h9NOoAenvk

[Cyril Monkewitz @3merillon]

❛ :🅟🅡🌎🅒🅔🅓🅤🅡🅐🅛 🅟🅛🅐🅝🅔🅣🌏🅘🅓 ❜

A custom WebGPU 3D engine I have been building.

🚀https://t.co/h9NOoAenvk

The visuals sit closer to a modern installed game than to what typically runs in a browser: a procedurally generated sphere-planet with Rayleigh-Mie atmosphere, volumetric clouds, water with above and below-surface transitions and caustics, grass and trees that respond to wind and to footsteps, procedural music and wind synthesis. Nothing is pre-baked. The only downloaded assets are textures and character models; the terrain, sky, vegetation, and audio are all computed at runtime.

What is actually interesting here is not any one of those systems in isolation, but that they all fit together in a page a visitor did not have to install.

How it hangs together:

Physics, audio, and graphics share source data where it makes sense. The physics fork reads the same density function the renderer uses to mesh terrain. The wind synth reads the same gust field the grass shader uses; what you hear and what you see are one signal, sampled twice. Most dev-facing knobs (cascade priorities and splits, per-cascade shadow resolutions, PCF kernel, cloud step counts, sun direction) are exposed at runtime rather than hardcoded, so tuning is measured in seconds.

How it got built... fast:

Two forces, both necessary.

Claude does most of the coding. I describe the subsystem "a welded marching-tetrahedra mesher with edge-ID vertex deduplication on a GPU compute pass, feeding the existing chunk pipeline" and Claude translates that into working WGSL and TypeScript in minutes, not days. I still make the architectural calls, read the diffs, decide when a subsystem is shipped-adequate. Claude writes most of the code around those decisions.

The inner loop is fast. Sub-three-second cold load. Hot-reloaded shaders. A perf HUD that is always on. This is what lets me see, by the end of the day, whether the thing Claude and I just built was the right call.

Either one on its own is not enough. An AI that writes code fast without a runtime you can evaluate quickly just generates a lot of half-right code. A fast runtime without fast implementation means a lot of feedback on too few candidates to matter. Together, the cost of trying a structural idea drops from weeks to an afternoon.

The current terrain mesher is the fifth approach I tried. Each of the first four ran in the real, playable game long enough to reveal what it could not solve before being replaced. Five meshers over a handful of days is not a consequence of either force alone, it is what both together make possible.

Vibe engineering:

The label that fits this working mode is *vibe engineering*: rapid iteration at the level of system architecture, rather than at the level of lines of code. Claude writes the code; the inner loop and physical testing validate the result; I stay at the level of *which algorithm, which data layout, which invariant* because the typing and the compilation and the deployment are no longer the bottleneck. It is still engineering, with benchmarks, correctness checks, and measured budgets. What changes is the timescale. Questions that would normally sit in a design document for a quarter get answered in days, on evidence, tested against reality. And the question "is this even worth trying?" changes character entirely when trying is this cheap.

The enabling conditions are unglamorous. Pair with a capable AI coding assistant. Keep the inner loop tight. Instrument heavily. Expose the knobs that matter. Move to the next subsystem as soon as the current one is shipped-adequate, rather than polishing any one thing to death before the whole picture is up.

Every system in the demo can still be improved. The point is not that anything is finished, it is that the whole thing is a running, playable whole, in a browser tab, highly optimized, built this way in record time.

Credits:

Predecessor: neural-planetoid. Physics is a custom Rapier / Parry fork. TurboTwig, integrated in under an hour (see previous X post). And Claude, who writes most of the line-level code and without whom the iteration pace that defines this whole project would not exist.

#vibeengineering

[Cyril Monkewitz @3merillon]

I couldn't activate SpeedTree, so I built my own procedural tree generator. It runs in your browser.

— TURBOTWIG —
https://t.co/bgs4ZgYKsE

I'm working on a planet renderer (Neural Planetoid 2) and need to populate it with trees. SpeedTree was the obvious choice, I even wrote a full loader for it. Then I hit a wall: the editor was corrupting exports because my license wasn't activated.
>Fine, I'll just activate it...

Except you can't. The SpeedTree website never sends confirmation emails. Their account system has been broken for months. They were recently acquired by Unity and got hacked, and from everything I can tell, solo developers and hobbyists simply aren't on their radar anymore. The only path that seems to work is emailing them directly, and they don't respond to individual hobbyists.

This is a real gap. SpeedTree is the industry standard for procedural vegetation, and there's essentially no open-source alternative that runs without a heavyweight engine, at least none that weld branches properly.

So I built one. In 3 days.

TurboTwig is a procedural tree generator that runs entirely in the browser -- TypeScript, WebGL 2.0, no install required. It uses L-system grammars, CSG branch welding (via manifold-3d), root generation, wind animation, PBR rendering, and exports to glTF so you can drop trees straight into your game engine or 3D pipeline. The UI is built on my own custom GUI framework with dockable, resizable windows.

It's MIT-licensed and fully open source: https://t.co/skk8rfgTw0

Right now tree species are defined in code (presets for broadleaf, conifer, etc.), which actually makes it easy to integrate. You can programmatically generate tree configurations directly in your app; ask your favorite AI to adapt it to your needs.

If there's enough interest, the plan is to build this out into a full visual tree editor along the lines of what SpeedTree offers. Automatic LOD generation and billboard baking will be added shortly regardless.

Give it a try and let me know what you think. If you find it useful, a star on the repo goes a long way.

[Cyril Monkewitz @3merillon]

This is going to be incredible when I get back to working on https://t.co/kWtmBQ2ZC6 (a CSS only isometric 3d engine with multiplayer voxel editing and dungeon crawling)

I could completely overhaul the character / object handling. I implemented the "Liberated Pixel Art Character Creator" library since I wasn't able to generate gear with previous tools. (Press V in game)

First thing I would probably try to do is expand the rotations from Pixel Art to 8 instead of 4 and fill in the missing animations:D

This is really cool and I probably have to get an illustrator sub just to try it out!

[Kris Kashtanova @icreatelife]

We just released Turntable in Illustrator for everyone 🎉

You can rotate 2D vector art in 3D.
Place all frames on canvas. Great for animations and game design.

No Redrawing, just drag the slider and done!

[Cyril Monkewitz @3merillon]

There have been some massive improvements to Trixel, my CSS-only isometric RPG engine.

Play it free:🎮 https://t.co/kWtmBQ2ZC6

Peer-to-peer multiplayer. Powered by @dcmotz's Trystero, which handles WebRTC matchmaking over MQTT with zero servers. You can create or join rooms, chat with other players (with a profanity filter), and co-op farm procedurally generated dungeons together. The sync model uses authority-based NPC control and velocity-predicted interpolation so everything stays smooth even on rough connections.

Character creator with hundreds of assets from the @opengameart Liberated Pixel Cup spritesheet collection. Access it from settings>game or just press V. Mix and match hair, armor, weapons, wings, tails, and more. It fills gaps in animations automatically, so some edge cases have ordering issues, but the variety of assets makes it worth it. Loot you pick up shows on your character. Bows, shields, all of it.

AI-powered NPCs. Talk to Cyril the surfer, an NPC who's actually me (the dev) role-playing as a chill surfer dude inside my own game. He's powered by Llama 3.3 70B through @OpenRouterAI, with per-NPC conversation history, a typewriter text effect, and client-side rate limiting. He knows about the game's features and can help you out, or you can just chat. Has fallback models too (Gemma 3, Qwen 3) in case the primary is rate-limited.

Dynamic sky and clouds. The sky uses a technique I originally built as a WebGL shader for my looptile repo, which generates seamlessly tiling and looping animated textures using 4D torus mapping. Here it's ported to JavaScript. On top of that, there's a multi-layer cloud parallax system with Perlin noise morphing that follows the camera.

Procedural dungeons with themed rooms (crypts, treasure rooms, shrines, boss arenas), difficulty scaling per floor, and a quest/objective system that tracks kill counts, boss kills, and item finds.

Full UI rework. Everything is simpler and mobile-friendly now. Proper resizeable window system for inventory (16 slots + 13 equipment slots with drag-and-drop), character sheet with leveling up to 20, map, settings. Weight-based speed penalties if you're carrying too much.

Engine improvements. Better A* pathfinding over arbitrary-sized non-overlapping cuboids, improved SAT + KD-tree depth sorting with lazy construction and fragment limits, transparency sprite clipping fixes, virtual DOM reordering optimizations. Ambient Occlusion performance improved.

Building a game engine with only CSS transforms is a wild set of constraints. No WebGL, just divs. Early on I tried CSS 3D transforms and hit a wall with performance, so I switched to isometric projection using only 2D transforms, which are significantly faster and can handle more elements. That div limit ruled out a voxel approach, so I needed larger cuboids that don't intersect since there's no z-buffer. That led to sorting with the Separating Axis Theorem and a KD-tree, and from there an A* pathfinding system that navigates through arbitrary-sized non-overlapping cuboids. It still has rough edges but it's surprisingly robust.

All of this needs more work and polish. Next up: PvP combat, player trading, improved dungeon generation, a better progression system, static and perhaps dynamic lights using the AO, etc...

[Cyril Monkewitz @3merillon]

I wasn't concerned about compatibility because I'm using this to create gifs for my css/js only isometric 3d engine (https://t.co/BhAYhIshnx). So you should use a desktop browser for exporting.

It's a single webgl2 fragment shader (no webGPU).

The main feature is mathematical and sound; tiling logic works via 4D torus mapping. UV coordinates get lifted onto a torus in 4D space so that 4D simplex noise naturally tiles in both spatial and time axes.
The flow displacement is integer rounded so cosinus based directional scrolling stays invisible to the torus wrapping.

You could use it for in-game procedural generation, looking out for some issues:
- on mobile GPUs that silently transform highp float to mediump you might get artifacts
- some older Safari browsers could produce incorrect values for fract() and mod() edge cases.

It would be more efficient rewriting it to compute shaders, bypassing the fullscreen quad rendering overhead. Or tune it to your specific performance requirements.

[Cyril Monkewitz @3merillon]

LoopTile : browser-based tiling & looping GIF/video generator powered by WebGL shaders. Caustics, lava, plasma, and more.

Needed seamlessly tiling and looping water GIFs for a game engine I'm building. Spent 15 min googling, found a couple free assets I didn't like.

So I 2-shotted it with Claude Code instead.🤯

Live demo: https://t.co/tF07vwUC6s

Open source: https://t.co/UsDXSKqqmd

[Cyril Monkewitz @3merillon]

Added NPC placement, wanderer mode or define checkpoints for patrol mode. (In game tab)

Also added vegetation, so you can now place billboards. (In editor tab)

Be mindful of cuboid and vegetation placement. If you place cuboids/vegetation overlapping other cuboid edges it will cause the kdtree to subdivide to resolve ordering cycles;)

[Cyril Monkewitz @3merillon]

Dusted off an old project from the backburner. A 3D isometric engine built entirely with CSS/HTML/JS. No WebGL, no WebGPU, just transformed divs.

🎮 Play it here: https://t.co/BhAYhIrJxZ

It's still a sandbox in development, but it does something I've genuinely never seen before: you can use a live webpage as a single-face material.

There are some limitations; only one iframe per scene or experience flickering, and you can't place it somewhere requiring subdivision for cuboid ordering (reframing an iframe resets it, although I have a few workarounds in mind).
But as you can see in the video, you can play the app inside the app inside the app. Honestly kind of mindblowing to me.
You can run complex WebGL2 apps inside the game (any webpage without CORS restrictions really). There's some flashing on mobile with heavy WebGL content, but that's expected.

What the engine supports:
→ CSS rendering (transformed divs) with various materials: patterns, textures, gradients, and yes, webpages!
→ Dynamic cuboid creation & editing → A* pathfinding for random cuboid arrangements (still needs some work)
→ Cylindrical player shadows using gradients that realistically project onto vertical surfaces
→ Transparent cuboids with sprite clipping
→ Ambient occlusion (though I'd avoid using this while editing, recalculating tanks performance)

Next up:
Working on the UI to make the interface more intuitive. I've gone on a bit of a tangent and started building a full GUI no dependency library with resizable nested windows and sidebars. Figured I should stop rebuilding the same GUIs over and over again :D Will publish it to NPM when it's ready.

Built the assets with some cool tools:
@pixio_ai for all textures + the background music in the video
@PixelLabAI for the character animations

#webception

[Cyril Monkewitz @3merillon]

@segalink Thanks SEGA! Nice hearing from you, hope all is well🙏

[Cyril Monkewitz @3merillon]

https://t.co/qqnqDJx5NP

[Cyril Monkewitz @3merillon]

🚀 [RMT] Compose POC just got FAST

Rebuilt the engine from the ground up:
→ Binary expression engine (bye bye text parsing)
→ Hot paths ported to WASM/Rust
→ Reverse dependency tree + streaming playback
→ Visual dependency links for frequency/startTime/duration

Dragging a note with 1000s of complex dependents? Undo/redo? Pressing play? Nigh instant. ⚡

Next up: making custom formula editing more user-friendly, and adding useful modules to the editor to make it less obscure 🎯

🎵 Try it: https://t.co/9fTamR6ywO
💻 Code: https://t.co/5JiGBpNUqI

[Josh Hellman @JoshMHellman]

The Innovators Think Tank will be back in the New Year BIGGER, BOLDER & BETTER.

Here are a few things to get excited about:

1. We will host both digital and in-person events around the globe!

2. We will expand the ITT Incubator to support up to 50 Innovators/teams at once.

3. Select innovators/teams will be invited to our Venture Builder Program!

4. New partnerships will allow us to provide stipends for building and funds for growth.

5. New platform tools will make it easier to connect with other innovators in the community!

See you in 2026! Peace. Love. Innovate.

[Cyril Monkewitz @3merillon]

Been hacking away at my little 3d engine and it’s starting to feel like an actual game👀.

New stuff since last time :

-Resizable window system for map / inventory / character sheet

-Dynamic texture atlas for more varied terrain

-Transparent objects, procedural rocks, trees, and lathe objects (vases, bottles, potions)

-Particle system (currently used for fireplaces and light billboards)

-Water with SSR, ripple maps, underwater shader, and basic object physics

-Texture splatting on terrain for footprints (player + NPC) and blood pooling during combat

-Simple melee combat (yes, you can punch things now using "f" or the circle icon on mobile)

-A bunch of new tiling textures generated with Pixio’s Pixcraft

-Grass implementation (it works, but it’s on the refactor list)

-Simple SSAO (screen-space ambient occlusion)

…and probably a lot I forgot along the way

It’s still rough, but most of the engine's core pieces are in and it’s edging closer to being a playable game rather than just a tech playground.

You can try the current build here:
🎮https://t.co/IQonwSQZDA
(You'll have to give it some time to load)

Huge thanks to:
-Polyhaven (textures)
-Ez tree (tree assets)
-ws.q3df.org (Chaos Marine player model)
-Brian Collins (Ratamahatta NPC model)
-Id Software
-@myaitutor and @pixio_ai for the awesome tools

[Cyril Monkewitz @3merillon]

Try it and read more:

Live Demo:
https://t.co/9fTamR76mm

Github:
https://t.co/9q3f5xQlI4

Intro/whitepaper:
https://t.co/uSzFk1NVD4

Feedback welcome.
If you find this valuable, there’s a support link in-app; don't even know if it works so let me know...🥰
Share with musicians/devs who care about new musical languages.

[Cyril Monkewitz @3merillon]

🚀 Big Relative Music Theory Composer update:

I rebuilt the renderer into a fully custom WebGL2 pipeline. Demo link👇

I kept hitting a hard ceiling around a few hundred DOM elements. Tapspace.js is great, but the DOM became the bottleneck. So I preserved the look, moved the pixels to the GPU, and the app woke up. Basically I typed "use gpu" and the magic happened.

Result: thousands of notes at a steady 60fps while dragging and zooming.

Under the hood:
-GPU instancing for notes, measure bars, octave guides, and labels
-SDF rounded rectangles with zoom-aware borders (crisp at any scale)
-Single glyph atlas for text (one draw call per layer)
-Shader-based drag offsets (no per-frame buffer spam)
-New: resizable measures

What’s next:
-Core optimizations for selection hit-testing and drag start on large dependency graphs
-Better measure mapping (map selected trees to measure chains)
-Friendlier formula editor

If you are experiencing similar issues with your webapp, massive lag due to a large number of elements (I've encountered a few), hit me up, maybe we can work together.

[Cyril Monkewitz @3merillon]

Big update! 🚀 This week I took my WebGL stencil shadow volume engine to the next level.

The OG version had a capsule player, basic physics cubes & spheres, and all shadow volumes built per-frame on the CPU. Terrain streaming and mobile controls were in, but everything rendered one-by-one without instancing.

Now:
✨ Almost everything is GPU-instanced—static & dynamic objects, infinite terrain, even MD2 animated NPCs. All visuals & shadow volumes are batched and extruded on the GPU. The world is chunked, persistent, and streams asynchronously. Shadows are crisp and real-time, even with hundreds of objects.
You can run around, spawn physics objects, blast explosions, and see everything shadowed in real-time. HDR, bloom, dynamic lights, and mobile-friendly controls—all working.

What’s especially cool:

Dynamic object & character persistence

True stencil shadows everywhere
The whole engine is ready for lots more assets and gameplay
Still on the roadmap: MD3 instancing, more world optimizations, and fixing some stubborn shadow acne (especially on Mac).

If you’re a Quake modder or have MD2/MD3 modeling skills collecting dust, DM me! Would love to connect. 🤝

Demo here:
https://t.co/IQonwSQZDA

Huge thanks to @myaitutor for their awesome AI tools—I used them a ton during this rewrite.
More to come!
#WebGL #gamedev #Quake

[Cyril Monkewitz @3merillon]

After shipping my MD2 character controller, here’s the next step: an MD3 Character Viewer/Controller for WebGL2.
There’s method to the madness. I’m focused on vertex morphing because I need dynamic characters that are blazing fast for generating stencil shadow volumes.

Source Code :
https://t.co/eIVXFFE1d7

What it does:

-True MD3 upper/lower animation with smooth vertex morph crossfades

-Weapon attach (tag_weapon), optional muzzle flash (tag_flash), additive laser/flash materials

-Soft shadow mapping: hardware compare sampler + Poisson PCF, tunable bias/softness/intensity/light size & angles

-Character controls: WASD, sprint, crouch, jump, attack; orbit/pan/zoom camera

-Procedural music soundtrack (Web Audio)
Ground normal mapping + soft shadowing
Important:

The repo ships with ZERO game assets. It defaults to “NO PLAYER” / “UNARMED.” Bring your own MD3s via public/models/... + JSONC indexes. This keeps the code clean and legally safe.

@idSoftware — if you’re cool with it, I’ll add the classic assets back as optional samples for educational purposes. Until then, everything is stripped and user-supplied.

Massive thanks to @myaitutor — their tools accelerated development like crazy. This is part of a broader push to master fast vertex morphing pipelines tailored for real-time stencil shadow volumes in my custom game engine.

#GameDev #WebGL2

[Cyril Monkewitz @3merillon]

Quake II vibes in WebGL2: all‑GPU MD2 morphing ⚡️
Smooth animation blending.
Made for stencil shadow‑volumes: instancing + GPU extrusions.

Demo : https://t.co/ivhzGCfRPV
Code : https://t.co/gEXLWVC84Z

coding : @myaitutor , vidmusic : @pixio_ai

#WebGL2 #gamedev

[Cyril Monkewitz @3merillon]

Awesome tip, Alisher, thanks! I am currently working on character animation (I decided to drop r3f for a custom rendering engine for more freedom and to make the game special.

I've got a workflow to create a custom rigged character using Pixio, Blender, and Mixamo. It's pretty insane: just made my family (create fully rigged people from just a t-pose picture of them in a couple minutes)

-Create a t-pose image with AI or take a picture and remove background with Pixio.

-Use one of the 3d model creation tools from Pixio.

-auto-rig with Mixamo
Done!

There's really not much missing to make it fully automated. Lots of .fbx to .glb conversions, and manually placing the mixamo joints on the model (they should absolutely make an api for the auto-rigging, I think that would be quite successful). Fingers are terrible, of course...

But really, I could see games coming soon with an option to create your character from a single picture! Get your real custom in-game skin would be an incredible feature🤯

I'll share my little character viewer app once I get the mixamo animation retargetting sorted out, so anyone with Pixio can create themselves:)

[Cyril Monkewitz @3merillon]

🚀 Just shipped my first-ever #ReactThreeFiber + #Threejs + #Rapier project: a fully interactive 3D character controller with infinite procedural world, dynamic day/night, post-processing, and mobile support!

▶️ Demo: https://t.co/cIQYpxfyvR
💻 Source: https://t.co/kogoWv0hhK

Tech:
• React Three Fiber (my first time!)
• Three.js rendering
• Rapier physics
• Mixamo for character/animations
• Leva for live tweaking
• Tailwind CSS
• Custom shaders for sky/terrain

Features:
• Infinite terrain (mountains, valleys, biomes)
• 3rd-person controller (WASD/jump/sprint/joystick)
• Physics-driven movement/jumping
• Dynamic day/night & atmospheric sky
• Cascaded shadow mapping (CSM)
• Bloom, vignette, chromatic aberration, color grading
• Live tweakable controls (Leva panel)
• Desktop & mobile ready

What I learned:
-Custom shaders in Three.js/R3F can be tricky to integrate, especially for advanced effects
-Mixamo animations is a great resource for solo game devs
-Rapier physics is awesome

What’s next:
🔥 Building a custom webgl2 3D engine (no Three.js), using Rapier physics, a very custom display engine, and more.
Sneak peak: The first article in the series would be about a pretty special stencil shadow volumes implementation which will be the basis for my game!

Would you follow a “Gamedev, from Zero to Hero” devlog series?
Like/reply if interested, and let me know what topics you want covered!

As always, a big thank you to @myaitutor which I used extensively to build this.😍

Thanks for reading & trying the demo!
#webdev #aicoding