En CSS-motor som renderar 3D utan WebGL

Ett nytt open source-projekt vid namn PolyCSS renderar texturerade 3D-modeller direkt i DOM, helt utan WebGL eller canvas. Varje polygon i modellen blir ett vanligt HTML-element som positioneras med `transform: matrix3d(…)`. Det låter bakvänt, men idén är genuint användbar för små scener där en full 3D-stack vore överdrivet.

Motorn dök upp på Hacker News under rubriken ”Show HN: A CSS 3D Engine (no WebGL)” och fick snabbt uppmärksamhet bland webbutvecklare. Anledningen är enkel: den löser ett verkligt problem med ett oväntat tillvägagångssätt.

Varje polygon blir ett eget DOM-element

Det här är kärnan i hur en CSS 3D-motor utan WebGL fungerar. Istället för att rita upp en scen på en canvas skapar PolyCSS ett separat `

Texturer hanteras genom att UV-mappade trianglar packas ihop i genererade atlas-sprites. Varje element pekar sedan på rätt del av spriten via `background-position`. Resultatet är en texturerad modell byggd helt av rektanglar och bakgrundsbilder.

Konsekvensen är intressant. Eftersom varje polygon är ett riktigt element kan du sätta en click-handler på en enskild triangel, ge den en CSS-klass eller animera den med en vanlig keyframe-animation. Det går inte i WebGL, där hela scenen är en enda svart låda för DOM:en.

Filformaten den klarar

PolyCSS läser in flera standardformat för 3D-modeller, vilket gör det enkelt att testa med modeller du redan har:

• OBJ, det klassiska textbaserade meshformatet, brett stött i alla 3D-program
• glTF och GLB, webbens rekommenderade format, där GLB packar allt i en enda fil
• VOX, MagicaVoxels voxelformat, perfekt för low-poly och klotsiga scener

Både UV-texturer och rena materialfärger följer med vid inläsningen. Vill du hämta färdiga modeller att leka med är Sketchfab en vanlig källa med både gratis och betalda alternativ.

När CSS 3D är rätt val

Svaret beror helt på scenens storlek. CSS 3D passar för små scener med få polygoner där du vill ha tät integration med vanlig HTML. Det passar inte för tunga modeller, fysik eller fotorealistisk rendering.

Tre situationer där motorn gör verklig nytta:

• Interaktiva UI-element. 3D-flipgallerier, Coverflow-karuseller, toggle-switchar och scroll-drivna animationer som ska bete sig som vanliga DOM-element.
• Statiska low-poly-modeller. En liten voxelscen eller en enkel produktvisning som ska renderas utan att ladda ett tungt bibliotek.
• Sidor där JavaScript inte är betrott. Eftersom mycket av jobbet sköts av CSS kan en statisk modell visas även när JS är avstängt.

Behöver du däremot rendera en scen med hundratusentals polygoner, partikeleffekter eller skuggor i realtid är WebGL och Three.js fortfarande rätt verktyg. Att skapa tiotusentals DOM-element skulle få vilken webbläsare som helst på knä.

Prestandafrågan handlar om antal element

Här ligger den verkliga gränsen. Webbläsaren är byggd för att hantera tusentals DOM-element effektivt, men inte hundratusentals. Varje polygon i en CSS 3D-scen är ett element som webbläsaren måste layouta, måla och compositea.

En low-poly-modell med några hundra trianglar går utmärkt. En detaljerad karaktärsmodell med 50 000 trianglar betyder 50 000 `

Det finns en fördel som lätt förbises: CSS-animationer körs ofta direkt på kompositortråden och kan prestera bättre än JavaScript-styrda animationer. För enkla rotationer och övergångar är det en reell vinst, eftersom huvudtråden hålls fri.

Webbkomponenter gör det deklarativt

PolyCSS levererar färdiga webbkomponenter som låter dig bygga en scen direkt i HTML. Du jobbar med element som ``, `` och `` ungefär som med vilken annan markup som helst.

Det här liknar tankesättet bakom Googles officiella webbkomponent model-viewer, som låter dig bädda in en GLB-fil i HTML med en enda tagg. Skillnaden är att model-viewer använder WebGL under huven, medan PolyCSS håller allt i ren CSS och DOM. För webben rekommenderas just `.glb` som enkelfil, eller `.gltf` om du vill ha komponenterna separat. Tänk på att `.gltf`-varianten består av flera filer som är beroende av varandra och måste hållas tillsammans.

Motorn fungerar med vanilla JavaScript, React och Vue, så du kan plocka in den i ett befintligt projekt utan att byta ramverk. Vill du förstå hur CSS-transformer hänger ihop med resten av layoutsystemet är vår genomgång av CSS-arv och specificitet en bra grund. Har du inte jobbat med CSS Grid och Flexbox tidigare är det också värt att ha koll på innan du dyker in i 3D-transformer.

Varför det här är mer än ett experiment

Projekt som PolyCSS påminner om hur mycket CSS faktiskt klarar på egen hand. CSS 3D-transformer har funnits länge, men de flesta använder dem bara för en enkel flip-effekt eller en roterande logotyp.

Det smarta är att utnyttja samma primitiver för en hel renderingspipeline. När varje polygon är ett adresserbart element öppnas dörren för saker som är besvärliga i WebGL: tooltips på enskilda ytor, CSS-hover-effekter på en specifik triangel, eller att låta en designer styla 3D-objekt med samma verktyg som resten av sidan.

Det är inte en ersättare för Three.js. Det är ett komplement för fallet där du vill ha lite 3D utan att dra in en hel grafikmotor. Och ibland är det precis vad ett projekt behöver.

FAQ

Vad är PolyCSS?

PolyCSS är en open source-motor som renderar texturerade 3D-modeller i webbläsarens DOM med hjälp av CSS-transformer istället för WebGL eller canvas. Varje polygon blir ett vanligt HTML-element positionerat med `transform: matrix3d(…)`.

Vilka filformat stöder den?

Motorn läser OBJ, glTF, GLB och MagicaVoxels VOX-format. Den hanterar både UV-texturer och materialfärger vid inläsning av modellerna.

Kan CSS 3D ersätta Three.js?

Nej. CSS 3D passar små low-poly-scener och interaktiva UI-element, medan Three.js och WebGL krävs för tunga modeller, fysik och realtidsrendering. De löser olika problem.

Fungerar det utan JavaScript?

Delvis. Eftersom mycket av renderingen sköts av CSS kan en statisk modell visas även när JavaScript är avstängt, vilket är en fördel på sidor där JS inte är betrott.

Varför blir prestandan dålig vid många polygoner?

Varje polygon blir ett eget DOM-element som webbläsaren måste layouta och måla. En modell med tiotusentals trianglar skapar lika många element, vilket snabbt blir för tungt för webbläsaren att hantera smidigt.

Vilka ramverk stöds?

PolyCSS fungerar med vanilla JavaScript, React och Vue, så det kan integreras i ett befintligt projekt utan att byta ramverk.