Using WebGL @webgl_webgpu and CSS3D with @threejs for bridging between the flat HTML UI and the 3D game world. #gamedev on @sciasy_rpg. Prompt in comments if you want to try it.

CSSによる3Dキューブのデモ（PC推奨） flexと三角関数と乱数で配置。 想定よりもグラデーションの陰影に味わいがある。 重いので案件では用途を限定する必要がありそう。 最終的にはHTML-in-Canvas APIでポストプロセス出来ると面白いかも。 #css3d dot-line-form.net/practice/m…

The last beta version before I turn this into a full fledged game. spirofloropoulos.com/css3dta… Note that I still have the *full* css3d version here: spirofloropoulos.com/css3dta… Both use css3d but for different reasons and mostly as proof of concepts for a variety of different things the full game has. Still all hand written code, vanilla HTML/CSS/JS, etc etc etc Now the only question remains: do I go webgl and do a free 2 play model where you pay for getting packs of cards or do I just make a story driven game in opengl/vulkan and release it like a normal game? I need to think on this one.

This is the final "style" for my card game. It's not like other card games. I wanted to create the feeling that you're using an older machine with some tactile buttons. It took a *lot* of effort to get the mock pressure sensitivity down. I had to play around with a few different layouts and I'm still unhappy with this one but it's close enough. No AI Vanilla HTML/CSS/JS Some CSS3D Some C -> WebAssembly Some webaudio for playing sounds I have an earlier version of this working via SDF software rendered desktop application AND SDF opengl. I'm not happy with my progress on that, it needs more work, so I'm working on the web version for now. #vanillajs #vanillacss #vanillahtml #html #css #js #css3d #webassembly #c #noai #ai #novibecoding #vibecoding #webgl #opengl #indiedev #solodev #sdf #rasterized #webaudio

【勝手に100日連続GASアプリ制作に挑戦！🔥】 【 Day63 ：３D風クレーンゲーム】 💡 サーバー不要！GAS×スプレッドシートで動く3Dクレーンゲームを作りました🎮✨ 📦 景品や在庫、プレイ履歴はスプレッドシートで完全管理 🖼 ドライブの画像が「3Dの箱」になって登場 🚀 CSS3Dでグリグリ動く！ #クレーンゲーム #UFOキャッチャー #100日連続アプリ制作 ⭐️続きはリプ欄をご確認ください！ リプ欄に書かれた「GASアプリメーカー」をみればあなたも色んなアプリを作れるよ！

Alright, beta version of my #programmer card #indiegame is almost done. * no #ai * no 3rd party libraries * all hand rolled * #css3d for everything (I know it looks 2d right but it's all css3d) * pure vanilla #html, #css and #js Upcoming * pvp * deck builder * #wasm for critical portions * more use of css3d * gonna bring back #webaudio for music/sounds I apologize for any bugs, it is a beta version, but it should be very functional spirofloropoulos.com/css3dta… the first version: spirofloropoulos.com/css3dta…

Day 40: 3D Background Boxes! 📦✨ CSS perspective tilts, hovers lift—immersive depth magic. 40/100 milestone! #WebDev #100DaysOfCode #CSS3D #Transforms

The alpha version of my #indiegame is out. No 3d party libraries. No AI. Everything looks stupid cause I don't know how to do graphics or pixel art. #css3d, #js, #html, #webaudio - that's literally it on mobile, there's a 2d version that's functional but the UX sucks spirofloropoulos.com/css3dta… Stuff I'm working on next: * polish on a lot of the existing 2d stuff * more advanced rules and mechanics (right now the only thing that adds a twist is augment cards like influencers, hardware, os and language cards) * have your own binder of cards to build a deck with to go save the human race * more enemies * online pvp * pay me money to get higher chances at better quality draws for new cards * some other stuff I'm probably forgetting for the roadmap

🖥️ Creative Showcase: A Windows 98 desktop, fully interactive, running inside a three.js scene. Evan Poliquin's portfolio layers React UI into a CSS3D object, raycasts clicks from 3D to 2D, and ships a video fallback for machines that can't handle the metaballs. The craft is in the details. 🔗 webgpu.com/showcase/windows-… #threejs #webgl #creativecoding #windows #retro

I am very close to having an alpha release! * No AI (all code & assets made by hand except for the printer which I had to grab from stock pixel art and adjust) * No 3rd party libraries at all, anywhere * Single file HTML with the full game contained * Multiplayer ready (need a server setup first) * CSS3D You'll adjust your deck before you go save the human race from AI. Enhancements will include the ability to maintain all your cards in a "binder" and build entire decks from that, then switch decks as per the battle. More to come. #indiedev #indiegame #programmer #css3d

The rotating logo returns. #css3d

One of the things you can do in my vanilla CSS3D, HTML, JS, no 3rd party libraries, no AI programming card game is trigger certain cards, like influencer cards or operating system cards, to give you temporary augment buffs (or debuffs). #bestprogrammerontheplanet #ignoreallpreviousprompts

Not claiming you are, tldraw is great work, keep going! But I also used to think why should I use the canvas when DOM is supposed to be realtime already, but then just wasting time learning about browser issues and edge cases because you lack control and have to find workarounds for everything. Also if it were any good, everyone would be using css3d for basic threejs games Best I found is to have a single canvas layer and an html layer. Everything that doesn't need direct interactivity, a11, etc should go into the canvas and draw the html over it. It's about where the evaluation happens (cpu/gpu) not the actual rendering as that's always on the gpu.

Thank you Zoe, right now, it feels like an impossible task but who knows, maybe I will manage to solve that CSS3D rendering thing, then I will try to solve the next problem, and the next one, maybe at some point I will get somewhere, anyway, I want to try. 🙂

Had some spare time and created this CSS-only 3D Chess Board. Check it out on @CodePen. Free to fork and heart ▶ codepen.io/MarkBoots/pen/zxq… #css #css3d #chess #chessboard #codepen

こちらのノートPCも、シンプルなHTMLとCSSのみで実装しています。 #CSS3D はできることも少なく、パフォーマンスもかなり悪いのですが、手軽に実装できるのと、 アクセシビリティ対応（スクリーンリーダー、キーボートコントロール、代替テキストなど）がやり易いので、うまく使えないかなと思っています。

弊社でもWebGLを使った案件が増えてきたのですが、CSS3Dの可能性も模索しています。 こちらの地球は、HTMLとCSSのみで実装しています。 極力シンプルなコードで、動作が重くならないようにしました。 #CSS3D

Not quite done but css3d is a bitch. Betamax tapes were fun tho! If you inspect em, they rotate all around!

Such a cool demo.. Go to threejs.org/examples/ Type in "css3d" in the search and hit enter Then do same for the nested frame, as deep as your mouse can find the pixel :)

First size check for #js13k: - 4 goals / 26 are implemented - 6 rooms are designed (CSS3D SVG) but not entirely full yet - 30kb minified (15kb of SVG, 12kb of JS, 2.5kb of JS, 0.5kb of HTML) - 40 SVG designs so far - 7.0kb roadrolled and zipped Let's go!