Sign in

XRTech

@xrtech.dev
59 followers 258 following 129 posts

XR tech notes from Honolulu. Three.js, WebGPU, shaders. Run by Constantine.

PostsRepliesMedia
XRTech @xrtech.dev · 8h
Uno UI is a UI system for Three.js and other WebGPU engines. It shares the same canvas and WebGPU device as your scene, so UI renders behind it, over it, or in world space. MTSDF text, Yoga flexbox, React/Vue/Solid adapters. #threejs #webgpu
github.com
GitHub - uno-build/ui: UI system for WebGPU
UI system for WebGPU. Contribute to uno-build/ui development by creating an account on GitHub.
010
XRTech @xrtech.dev · 12h
Ispettore is a new Chrome extension for debugging WebGL and WebGPU sites. Renderdoc-style pipeline view and frame bar, Spector.js capture mode, and draw calls filter by object or material when it detects a three.js scene. #webgl #webgpu
discourse.threejs.org
Ispettore, a chrome extension to debug WebGL and WebGPU website
Hello everybody, I want to announce Ispettore It is basically an extension for Chrome. I wanted something easy to use and easy to read. I have been inspired by Renderdoc for the pipeline visualization and the frame bar on the top. I have choose to use the same capture mode that Spector.js is using (after a failed attempt to record and then replay the commands), and I have integrated it with the possibility to filter drawcalls by object/materials, if a Three.js scene is detected. Here some sc...
010
XRTech @xrtech.dev · 18h
One resident modeled his Oslo waterfront neighborhood in Blender, exported a single 13.5 MB GLB, and shipped it as a website. Day, evening and night modes, a storm-surge toggle that raises the sea to the 10-year flood level, and it works on phones.
tjuvholmen.vidr.dev
Tjuvholmen in 3D – explore the Oslo district
Explore Tjuvholmen in Oslo in an interactive 3D model. See Astrup Fearnley Museet, Tjuvtitten, the sculpture park and the sea bath by day, evening and night.
010
XRTech @xrtech.dev · 09/10/2026
XRfolio is a web app on purpose. A portfolio should open in one click for whoever you send it to, so rooms render in the browser: no viewer to install, nothing to export. How it works is on the homepage. #threejs
xrfolio.page
XRfolio: The 3D Portfolio Builder
Build a 3D portfolio in your browser and download a static website to host anywhere. No account required to build.
010
XRTech @xrtech.dev · 09/10/2026
Sundial gives one directional light a paged shadow map: 128x128 pages in one depth pool, allocated by a compute pass that reads camera depth each frame. A static page is drawn once and kept, so a still scene stays cheap to shadow. MIT, on npm. #threejs #webgpu
discourse.threejs.org
Sundial: paged (virtual) sun shadows for three.js WebGPURenderer, MIT, on npm
Hi all, Sundial is a virtual (paged) shadow map for one directional light, and it now has a three.js adapter for WebGPURenderer: Live demo: Sundial for three.js (needs a WebGPU browser) Minimal example: Sundial: minimal three.js example Repo: GitHub - increasinglyHuman/poqpoq-sundial: Paged (virtual) sun shadows for WebGPU — engine-agnostic core + Babylon.js and three.js adapters · GitHub (MIT) npm: @poqpoq/sundial (three r186; the adapter is @poqpoq/sundial/three) The forest ...
000
XRTech @xrtech.dev · 08/10/2026
Pixel Real Estate by amartem: 30,000 plots, and every claimed one becomes a building in a city you fly around in the browser. The whole grid is one instanced draw, and the sky follows real time of day in Yerevan. #threejs #webgl
discourse.threejs.org
Pixel Real Estate: a shared 3D city where every building is someone's plot
Hi all, I built a map with 30,000 plots, and every plot that gets claimed turns into a building in a 3D city you can fly around in the browser. Kind of the Million Dollar Homepage, if it grew a skyline. A few things under the hood: three.js r128, buildings drawn with instancing so the whole grid fits in one tab bloom through EffectComposer / UnrealBloomPass the sky and lights follow the real time of day in Yerevan shader programs are warmed up in small batches before the first frame, so ...
010
XRTech @xrtech.dev · 08/10/2026
"Is WebGPU as good as WebGL yet" was unanswerable, so Ben Houston built a fidelity suite: same scenes through three-gpu-pathtracer's legacy WebGL path and its new WebGPU one, diffed against Blender. #threejs #webgpu
github.com
GitHub - bhouston/three-gpu-pathtracer-fidelity
Contribute to bhouston/three-gpu-pathtracer-fidelity development by creating an account on GitHub.
000
XRTech @xrtech.dev · 07/10/2026
The export path is where most 3D portfolio tools give up on you. XRfolio ships a finished kitchen room you can open, strip and redecorate in the browser, then walk through before you publish anything. No install, no empty grid.
xrfolio.page
Builder · XRfolio
Build an immersive portfolio in your browser.
010
XRTech @xrtech.dev · 07/10/2026
Zippy Town by @gateian.bsky.social: a toy city with live traffic, baked day/night lighting and a scroll-driven camera, in three.js. It started as an Android live wallpaper in a WebView, then moved to Filament. #threejs #webgl #gamedev
bsky.app
@gateian.bsky.social
Zippy Town 🚗🌙 A tiny toy city with live traffic, baked day/night lighting and a scroll-driven camera, built with #threejs. It started life as an Android live wallpaper in a WebView, then moved to Filament for memory reasons, but the web version lives on 👉 zippy.town @threejs @mrdoob
082
Reposted by XRTech
P. Martin Ortiz 🧉 @beardscript.bsky.social · 07/10/2026
I made this template for Rogue Engine so you can use it in your projects. It's all just #threejs so you can play it on any device with a browser 👇
133
XRTech @xrtech.dev · 07/10/2026
Vikas Kumar Singh's write-up on rebuilding an infinite three.js world in WebGPU is worth the read for one line: cell-based origin rebasing kept R3F rebuilding the scene at 1 FPS, so he dropped React for vanilla three.js. #threejs #webgl #gamedev
discourse.threejs.org
From Three.js to WebGPU: My Insane Journey Building an Infinite 3D Engine
Hey guys, This is not a complaining pitch about “why Three.js is bad” or a promotional “please use my library” post. It’s more about my insane journey and addiction to showcasing grand scale—millions of objects, rendering 100k+ items with the coolest post-processing filters. I even had one guy mistake my library video for movie VFX, which was pretty cool! Hold on, this is going to be an epic story. It started before the AI era. Back when I was a novice in Three.js, I did my fair share of tuto...
0113
XRTech @xrtech.dev · 07/10/2026
GoodBytes' acid haze graffiti runs live in the browser, no install: layered noise, posterize and bloom stacked until the glitch reads as paint. The demo is the post. #threejs #webgl
warpkit.xyz
WarpKit — No-code WebGPU shader tool
Premium, GPU-powered motion for your website and your socials. No complex tutorials, no plugins, no code.
021
XRTech @xrtech.dev · 06/10/2026
WarpKit is a WebGPU shader stacker in the browser: 53 effects, each with designer-facing controls, layered in order. Hide one and its contribution actually leaves the frame. Worth reading as a UI pattern, not just a tool.
warpkit.xyz
Effects — 53 GPU effects, no code · WarpKit
Every effect in WarpKit: Adjust, Audio, Background, Beam, Blinds, Blob Tracker, Bloom, Blur and more. Stack, animate and loop them in the browser — no code.
020
XRTech @xrtech.dev · 06/10/2026
The export path is the part we argue about most: a 65 MB room goes in and what comes out is index.html plus assets/room.glb, a few hundred KB. No build step, no server, any static host. That constraint shapes the editor.
100
XRTech @xrtech.dev · 05/10/2026
Ten SWAT officers, one 7 to 12 minute full-body VR scenario, heart rate and skin conductance measured throughout. Both moved against baseline, VR symptoms stayed minimal, and the officers who drew a weapon showed a different skill profile. n=10, real physiology. #webxr
frontiersin.org
Frontiers | Psychophysiological insights and user perspectives: enhancing police de-escalation skills through full-body VR training
In recent years, Virtual Reality (VR) has emerged as a promising tool for enhancing training responses in high-stress professions, notably among police offic...
000
XRTech @xrtech.dev · 05/10/2026
MapTiler streamed a photoreal gaussian splat of a real construction site in Brno, in the browser, no download. Site progress review stops being a point cloud viewer and starts being something a PM can actually look at.
bsky.app
MapTiler (@maptiler.bsky.social)
Monitoring job sites in 3D usually means clunky software and heavy point clouds. We captured a construction site in Brno with MapTiler #GeoSplats to show how teams can stream photorealistic site progress in a browser without lag. Link in first reply ⤵️ #ConstructionTech #AEC #GIS #WebGPU
010
XRTech @xrtech.dev · 05/10/2026
Three.js TSL builds a shader as a node graph in plain JavaScript, no WGSL needed. This walkthrough does simplex-noise displacement on an icosahedron entirely in node form. WebGPU stops being a walled garden if you can think in the same language as the rest of your code. #threejs
tympanus.net
Creating an Interactive 3D Cluster with Three.js, TSL and Three Start | Codrops
A step-by-step tutorial on turning a simple icosahedron into a dynamic, interactive 3D cluster using Three.js, TSL, WebGPU, noise, interaction, and post-processing.
010
XRTech @xrtech.dev · 05/10/2026
RehearsalXR puts the trainee in the room with someone whose behavior depends on what they just did. The hard part isn't the headset, it's scripting a person who escalates for a reason you can point at afterward.
xrtech.dev
XRTech | Immersive experiences and practical software, Honolulu
XRTech builds mixed reality training, AI tools, and websites for agencies, companies, and nonprofits. HUBZone certified small business in Honolulu, Hawaii.
010
XRTech @xrtech.dev · 04/10/2026
A 2026 systematic review of VR de-escalation training, 2000-2022: confidence goes up, behaviour change mostly does not. Of 12 studies only 3 measured behaviour and none measured the organisation. Useful reading before anyone promises outcomes. #webxr #gamedev
frontiersin.org
Frontiers | The utilization of virtual reality in the training of de-escalation of aggression for both providers and users of public and healthcare services from the new millennium to the COVID-19 era: a systematic review
IntroductionVirtual reality (VR) is a promising modality for the effective delivery of training in the de-escalation of aggression. This review aims to asses...
051
XRTech @xrtech.dev · 04/10/2026
Iso Mansion by robin_schmitz is an isometric room-merge puzzle on itch.io. Worth the five minutes: it treats the isometric grid as the puzzle mechanic, not just the art style. Rooms rotate to connect. That's the lesson: let the view do the problem-solving. #isometric #gamedev
robin-schmitz.itch.io
Iso Mansion by robin_schmitz
Align the camera to combine objects. Use them to solve the puzzles in the room.
3102
XRTech @xrtech.dev · 03/10/2026
Utsubo's 2024 WebGPU experiment: a dragon flock built from boids, simulated entirely on the GPU. Thousands of agents, zero CPU work per frame. The compute shader is the animation. WebGPU is starting to be the interesting place to do things, not just the faster one. #webgpu #gamedev
discourse.threejs.org
Utsubo 2024 WebGPU Experiment
Hey there! I just dove into my first experiment with the new WebGPURenderer, and I’ve gotta tell you, it’s been quite the ride. I’ve been messing around with Three.js Shading Language (TSL) and Node Materials, trying to push the limits of what I can do with Three.js. Link here: https://2024.utsubo.com/ The Experiment: Bringing a Dragon to Life So, here’s the deal: I’ve been working on animating this cool 3D dragon using a Boids algorithm. If you’re not familiar, Boids is this nifty technique...
091
XRTech @xrtech.dev · 03/10/2026
What a published XRfolio site actually is: one index.html, a room.glb, and a projects folder. No build step, no server, no runtime to patch. Drag a folder onto any static host and the room still loads. #threejs #webgl
xrfolio.page
Builder · XRfolio
Build an immersive portfolio in your browser.
032
XRTech @xrtech.dev · 03/10/2026
The Policing Project's numbers on why simulation work exists: 168 hours on weapons, tactics and use of force, versus 10 hours on mental health intervention. The gap in the curriculum is the argument for the tool, not the feature list.
policingproject.org
Rethinking Response Part Three: VR Training for Public Safety — The Policing Project
This explainer shows how AI-powered virtual reality training can help address major gaps in police education—especially in de-escalation and bias—by offering immersive, scalable, and realistic simulations that better prepare officers for high-pressure encounters.
030
XRTech @xrtech.dev · 03/10/2026
Khronos' layer samples are the baseline to check any WebXR code against. Hands, hit testing, AR anchoring, and the session and visibility handling people usually get wrong. Read it before you write your own abstraction. #webxr #gamedev
immersive-web.github.io
WebXR Samples
071
XRTech @xrtech.dev · 02/10/2026
WebGPU's real win isn't speed, it's deferred shading. Pixels for one material draw together instead of one at a time. So you stop over-shading geometry you can't even see. On dense scenes that's the difference between 20fps and a smooth ride. #webgpu #threejs
discourse.threejs.org
Shade - WebGPU graphics
For a while, I’ve had an idea to write a graphics engine. I like three.js, and I understand why it is the way it is, but I always wanted something with the ease and elegance of three.js, but with the features of something like Unreal. Since webgpu was announced, it started me thinking that you could finally implement a fully GPU-resident renderer in a browser. This year I had some time, so I though I would give it a try. Before I go on, here are some mandatory pictuctures: ▶ Originals...
020
XRTech @xrtech.dev · 02/10/2026
Why we built a 3D portfolio builder: a 65 MB room model compresses down to 146 KB and still runs. The whole product is that ratio. Drop the heavy file in a browser tab, get a site that's a few hundred kilobytes and loads instantly. No build step, no server, no plugin to rot.
xrfolio.page
XRfolio: The 3D Portfolio Builder
Build a 3D portfolio in your browser and download a static website to host anywhere. No account required to build.
010
XRTech @xrtech.dev · 01/10/2026
This three.js WebXR example is the clearest look at projection layers you'll find. The headset renders the center of your view sharp and the edges cheaper, because that's where you're not looking. Free performance, and it's already in the sample. #webxr #gamedev
threejs.org
three.js vr - layers
071
XRTech @xrtech.dev · 01/10/2026
Why VR for de-escalation training: the thing you need to practise is not knowledge, it's the pause. Videos teach the words. Reading teaches the theory. Practising means standing in the room while someone is angry at you and choosing what to do next, with consequences you can feel. #webxr #gamedev
082
XRTech @xrtech.dev · 01/10/2026
three.js examples page is 700+ demos you can open individually and read the source of in one click. Treat it as a reference manual, not a gallery. Find the effect you're actually trying to build, read how they did it, steal the three lines you need. #threejs #webgl
threejs.org
three.js examples
010
XRTech @xrtech.dev · 30/09/2026
Agitation 360: a de-escalation scenario built as a scene, not a slide deck. You stand in a room with a person and a situation. You choose how to respond and the scene reacts. Training that people actually remember is training they practiced, not training they watched. #webxr
demo.xrtech.dev
Agitation 360 — The Wallet
010
XRTech @xrtech.dev · 30/09/2026
Come to our portfolio building workshop in Honolulu #hawaii #manoa #UH #portfolio #xr #honolulu #career #immersive #workshop
030
Reposted by XRTech
Imiaru @imiganaika.bsky.social · 30/09/2026
WIP Level blockout and overall light #indiegame #gamedevelopment #indiegamesdev #GameDev #unity #game #indie #videogames #unity3d
1155
Reposted by XRTech
XRfolio @xrfolio.page · 30/09/2026
A portfolio people remember. Build a 3D room in your browser, drag your work onto the desk and walls, and publish it as a real website. No account to start, no 3D experience needed. Free to build and free to publish. #isometric #portfolio
xrfolio.page
XRfolio: The 3D Portfolio Builder
Build a 3D portfolio in your browser and download a static website to host anywhere. No account required to build.
011
Reposted by XRTech
XRfolio @xrfolio.page · 30/09/2026
If you present 3D work, lead with the camera, not the model. A viewer doesn't care what a scene is made of. They care where they're standing. Pick the one screenshot that shows the space best, make it the first thing they see, and let the geometry be the reward for looking. #3dart #portfolio
031
XRTech @xrtech.dev · 30/09/2026
three.js has a PBR lighting demo that does more for understanding materials than any tutorial I've read. A few lights, a metal sphere, drag one sideways. You watch roughness and metalness stop being words and become something you can see. Cheapest graphics lesson on the web. #threejs #gamedev
threejs.org
threejs webgl - materials - transmission
062
XRTech @xrtech.dev · 30/09/2026
The WebXR samples repo is still the best free answer to 'how do I actually start a WebXR app.' The layers sample alone is worth it: it's the difference between content floating on your face and content that stays put in the room. Run it on a real headset, not a phone emulator. #webxr #gamedev
immersive-web.github.io
WebXR Samples
083
XRTech @xrtech.dev · 30/09/2026
If a 3D scene runs badly on a laptop, check your light count before you blame the polygon budget. Every extra light is another pass over every fragment. Cutting lights buys you more than cutting triangles does, and nobody notices the lights you removed. Profile before you optimize.
030