All work
motz.dev / Agens

3D Graphic

Utforskninger i sanntids-3D – fra en fysikkdrevet React Three Fiber-scene for agens.no til rå WebGPU-shading direkte på iPhone.

Role
Design og utvikling
Tags
3D · WebGPU · React Three Fiber · Three.js · WebGL · React Native · Eksperiment
Svevende svart Agens-logokule i en lys 3D-scene med kontaktskygge og dybdeskarphet

3D Graphic samler arbeidet mitt med sanntids-3D på tvers av plattformer – der geometri, lys og fysikk beregnes frame-for-frame mens brukeren ser på. To prosjekter viser hver sin ende av spennet: en polert, fysikkdrevet opplevelse for web, og en rå teknisk sandkasse på mobil.

agens.no — svevende logo i React Three Fiber

Den interaktive frontend-opplevelsen for agens.no har en svevende 3D-versjon av Agens-logoen i sentrum: en blank, svart kule som reagerer på fysikk og animeres over tid.

Scenen er satt opp i React Three Fiber med flere lag av effekter:

  • Kontaktskygger via @react-three/drei som forankrer logoen i rommet
  • Dybdeskarphet (DepthOfField) via @react-three/postprocessing
  • Fysikkdrevet flyt med @react-three/rapier slik at logoen svever mykt
  • Theatre.js for å orkestrere animasjonssekvenser over tid

Utover selve logoen inneholder opplevelsen et prosessuelt bildegalleri, en nedtelling og en lunsjmeny – alle drevet av live data fra Pusher. Brukergrensesnittet er holdt minimalt med styled-components-overlays.

Stack: React · React Three Fiber · Three.js · Theatre.js · @react-three/rapier · @react-three/postprocessing · Pusher · styled-components

WebGPU på iPhone — rå shading uten Three.js

Den andre enden er et teknisk sandkasseprosjekt: å utforske WebGPU på mobilenheter via React Native, uten abstraksjonslaget som Three.js eller WebGL gir. Målet var å forstå grensesnittene mellom TypeScript, WGSL (WebGPU Shading Language) og native GPU-akselerasjon direkte.

Prosjektet bruker react-native-wgpu for å eksponere WebGPU-API-et i en React Native-kontekst, og typegpu for å skrive vertex- og fragment-shadere direkte i TypeScript med type-sikre WGSL-blokker. Kjernen er en render-pipeline som tegner geometri frame-for-frame via Canvas-komponenten.

  • Vertex-shader definert med tgpu["~unstable"].vertexFn – TypeScript-typer mappes til WGSL-structs
  • Fragment-shader med konstante fargeverdier sendt som uniformer
  • Manuell konfigurasjon av swap chain, presentasjonsformat og alpha-blending
  • Ingen tredjeparts 3D-biblioteker – all pipeline-oppsett gjøres mot rå WebGPU-primitiver

Sandkassen er et læringsobjekt, ikke ment for produksjon: web-bundling via Expo Metro støttes ikke, fordi react-native-wgpu forutsetter en native WebGPU-implementasjon (iOS Metal / Android Vulkan) uten web-fallback.

Stack: React Native · react-native-wgpu · TypeGPU · WGSL · Expo

Den svarte Agens-logokulen svever i 3D-scenen med DepthOfField-postprocessing
agens.no – svevende logo med kontaktskygge, dybdeskarphet og fysikk.
Agens-logoen brukt som tekstur i 3D-scenen
Logoen mappet som tekstur på 3D-geometrien.
Portrettbilde fra det prosessuelle billedgalleriet i 3D-opplevelsen
App-ikon for WebGPU-eksperimentet på iOS
WebGPU-sandkassen som egen iOS-app.