Agustin Capeletto
@lowpoly
CSS superfan. 3D DOM wrangler. Argentino 🇦🇷 Open source @ · · ✨
One of the most challenging parts of the Mario model is the lighting and shine. To support this in CSS, I bake a 4×4 texture for every poly+frame, stretch it with background-size, and animate it with background-position. A million texel fields packed in a single spritesheet, with no math at runtime.
The research for this demo has resulted in polycss-morph, a new package that adds a ton of useful transform interpolation math to the library. Will be sharing more examples soon! docs: polycss.com/guides/morph/
It's-a me, 3D CSS Mario! 🍄 ⭐ I'm recreating Giles Goddard's iconic N64 face engine, so we can use it on the web. The rendering is handled by CSS matrix transforms, without WebGL or canvas. demo: codepen.io/alowpoly/pen... repo: github.com/layoutit/css...
Spending my #caturday with Lorenzo, @patak.cat's cousin from another continent 🐈
New in VoxJong v0.26: URL state, so you can resume ongoing games. Play it: voxjong.com 🀄 Fork it: github.com/layoutit/vox...
Low-poly Messi getting ready for the #WorldCup match. Rendered with 3D CSS, without WebGL. Full game (Actua Soccer '95) coming soon!
We are opening a community chat for PolyCSS: a place to discuss the library in particular, and 3D DOM rendering in general. It's my first time using Discord, so bear with me 🐻 All humans welcome! chat.polycss.com
New in PolyCSS v0.2.8: better shadows, CAD support, plus an optional three.js adapter for a more familiar API. Try it! polycss.com
Six years ago I built my first 3D CSS game, inspired by Street Rod (1991) and isometric rendering. Now I’m six ports deep, and it still feels like I’m just getting started 🤘 Check out lowpoly.gg
New in VoxJong v0.11: half-tile offsets, plus dark mode 🥷 Play it: voxjong.com Repo: github.com/layoutit/vox...
After cssQuake, I'm exploring these 3D DOM games with PolyCSS: * Whiplash (1995) * Tomb Raider (1996) * Carmageddon (1997) * Forsaken (1998)
I'm porting Quake to 3D CSS, so it runs in the browser without WebGL. It's open source 👹 Play it! cssquake.com Repo: github.com/LayoutitStud...
PolyCSS has a lot of cool features (cameras! lighting! shadows!), but animated 3D models are one of my favorite parts. It’s wild to see the browser handle hundreds of matrix updates at steady FPS 🐠 demo: polycss.com/gallery/?mod...
I'm working alongside @ledeluge.me on PolyCSS: a new CSS 3D engine for the DOM. It uses matrix3d() transforms to render polygon meshes as HTML elements, without WebGL. demo: polycss.com/gallery/?mod... repo: github.com/LayoutitStud...
This is CSS 🚀 model: maxparata.itch.io demo: voxcss.com/gallery?mode...
Ported Sokoban to 3D CSS: voxoban.com I'm building a VoxCSS arcade 👾
Built a CSS Mahjong over the weekend: voxjong.com Powered by my relentless quest to conquer the 3D DOM.
This is CSS 👽 model: maxparata.itch.io demo: voxcss.com/gallery/?mod...
Volume rendering in CSS can be achieved by slicing a 3D scene into 2D grids along each axis. Each slice is a cross-section where occupied cells are painted and translated at fixed intervals. The problem then becomes: how can we recreate each grid pattern with the least number of DOM nodes?
Experimenting with a new grid stack for 3D volume rendering in CSS. Try it! voxcss.com/gallery/
VoxCSS now supports voxel merging across all dimensions. Bigger scenes, fewer DOM nodes. github.com/LayoutitStud...
A CSS terrain generator. No WebGL, just stacked grids and 3D transforms: terra.layoutit.com