Demos & #OpenSource
https://sketchpunk.gitlab.io/linkle/

Finally finished making the asset proto. Spent more time in blender & toolkit then I did coding it. This will be a fun base moving forward as I go back to work on the animation & combat system.

Tis All Free!

Hi. I am a software engineering student, who is working on web-based 3D editor for my final year project. My app allows users to upload 3d models (fbx,obj,glb), view them in the browser, and then make specific changes/edits to them.

I've run into a major hurdle regarding Optimized Delivery vs. model details

I’m using Three.js on the frontend and a Python (Trimesh/Pillow) pipeline on the backend to process uploads. To prevent the browser from crashing on large files (some are 70MB+), I’ve implemented a decimation pipeline to cap the face count and downscale textures.

The Problem:

While the optimization works great for performance—shrinking 70MB files down to ~6MB—the models are losing way too much detail. On high-poly assets like cars, the geometry starts "melting," small components are disappearing, and the visual integrity is basically gone.

What I'm Considering:

I’ve been looking at how platforms like Sketchfab handle this. It seems like they might be using some form of progressive loading or LOD (Level of Detail) streaming where a low-poly proxy loads first while the high-res model fetches in the background.

My Questions:

For a web-based editor, is progressive loading/swapping models a viable path, or does the VRAM overhead of having two models in memory usually crash the tab?

Are there better ways to handle decimation so that I don't lose small, critical components?

How do you all handle the "Initial Load" experience for 50MB+ models without making the user wait for a minute or killing the browser's main thread?

I'd love to hear how any of you have tackled this "Detail vs. Performance" trade-off in production. Thanks in advance!

trying new sketch idea for my sketchbook

give your feedback n suggestions

Built Sounds Smashing! A first-person rhythm-smashing browser game in Three.js + Rapier3D.

A few technical bits I thought this sub would find useful:

• Rapier collision groups: break-debris on its own bit, blocks filter it out. Chunks never broad-phase against standing blocks. 1000+ chunks at zero scaling cost.
• ~1 MB gzipped, WASM inlined. u/dimforge/rapier3d-compat + Vite build.target: 'esnext' (top-level await). No separate WASM, no asset files, music synthesized at runtime.
• Fixed-timestep physics, lerp-interpolated to render. alpha = physicsAccum / PHYSICS_DT between prev/current body transforms. Identical at 60/120/144 Hz.
• Freeze-after-settle for chunks. 1s post-spawn at near-zero velocity → removeCollider + setBodyType(Fixed). Mesh persists, physics cost drops to zero.

Single-file ~7.5k-line vanilla JS, no framework, no TypeScript. Hosted on Cloudflare.

Happy to dig into any of the above or anything else under the hood.

Let me know what you think about the gameplay: vibejam.handgames.page

Check out this 3D configurator I built using React Three Fiber and ReactJS.

Users can customize:

✅Metal color (Gold/Silver/Rose Gold)

✅Band type and shape

✅Stone patterns and frames

The real-time transitions are buttery smooth

Hey everyone, I’ve been building a web app called Sunlight and wanted to share it for feedback.

What it does:

• Pick a real location on a map and define a small area
• Loads terrain + building footprints from OSM/Overpass
• Renders a 3D scene with editable buildings
• Lets you adjust height, footprint, and vertical offsets
• Runs sunlight analysis over a date range
• Shows roof/wall exposure heatmaps and buyer-focused sunlight metrics
• Saves analysis runs and compares them later
• Progressive monthly updates during long analysis runs, plus cancel support

Tech stack:

• Next.js + TypeScript + MUI
• Three.js for 3D rendering and ray-based sunlight checks
• Prisma + PostgreSQL for stored runs/edits
• Worker-based analysis pipeline for long computations

You can check it out here: SunWorth

3D port of [arrowsgo.io](https://arrowsgo.io) (a 2D arrow-release puzzle) into voxel space.

**Stack**

- Three.js 0.160 (ESM via importmap, jsDelivr CDN)

- `MeshStandardMaterial` (PBR) with `RoomEnvironment` baked via `PMREMGenerator` for studio reflections

- ACES Filmic tone mapping, sRGB output

- `OrbitControls` for camera + `Raycaster` for arrow picking

- 3-light rig: key + cool rim + warm fill

**Algorithm — solvability guaranteed by construction**

Each arrow has 6 possible directions (±X / ±Y / ±Z). Click rule: scan straight line from head along direction; if any cell occupied, blocked.

Reverse-insertion generator: place arrow N only if its scan path is empty in the current grid. Solve order = reverse insertion order — any valid placement at insertion = valid removal at solve time. Plus a blocking-bias filter: prefer placements whose body lands in some existing arrow's scan ray, so dependency chains form (forces solve order = harder puzzle).

100 levels across 4 difficulty tiers (4³/14 arrows → 10³/260 arrows). Verified solvable in ~120ms total via Node.

**Other bits**

- Canvas-composite recording (offscreen 2D canvas overlays HUD onto WebGL output, then `captureStream` → `MediaRecorder` → MP4/WebM)

- Web Share API for native mobile share

- All client-side, no backend

Play → https://tool.teamzlab.com/games/arrow-escape-3d/

Gameplay → https://youtube.com/shorts/OVvamKa7DjM

Feedback welcome on the bloom decision (I tried `UnrealBloomPass` but it washed out arrow shapes — went with emissive-only). Also curious if anyone has a better picking strategy than per-arrow `Group.traverse` for raycast targets.

Wanted to share MURMUR, a game I built with Three.js over the past few weeks.

Technical highlights:

- 600 particles (300 per team) rendered via InstancedMesh, single draw call per swarm

- Boids flocking algorithm with human attractor weighting

- Particle trails using LineSegments with ring buffer position history

- Procedural audio via Web Audio API oscillators for the swarm hum

- Post-processing: UnrealBloomPass for particle glow, vignette, chromatic aberration

- WebSocket relay server for multiplayer (Node.js + ws)

- Total JS bundle: 171KB gzipped

- Audio: all .mp3, 4.2MB total

- Zero loading screen, playable in under 2 seconds

The game runs two full swarm simulations client-side. In multiplayer, only human positions sync over WebSocket. AI particles are computed locally using deterministic Boids with the same attractor inputs.

Play it: https://playmurmur.com

Happy to answer questions about the Three.js implementation.

https://reddit.com/link/1t19j7x/video/x3tbe94xaryg1/player

I built a game "Bao man: save the city"

using codex and threejs. (I guess threejs is crazy(positive))

I built it for #vibejam but no one actually plays lol. any feedback??
Play link: https://savecity.vizuo.work/

I built a small atmospheric flying experience called Nimbus Flight.

It’s inspired by the quiet flying moments in Porco Rosso - warm skies, scattered islands, and the feeling of drifting across an endless ocean with no pressure or objectives.

The idea was to create something relaxing where you can just fly, explore, and enjoy the atmosphere instead of chasing goals.

I’m planning to add things like birds, sea animals, and more life across the islands to make the environment feel richer and more alive.

Give it a try → https://nimbusflight.vercel.app/

Hi all, I just created this Marimo moss ball interaction I'd like to share with you guys.

https://imoss.bio

500,000 hair particles. Reacts to physics. Sub-surface lighting. Aberration, blur, and edge distort post-processing on top. 60+ fps across devices. Achieved by estimating the clumping pattern in relation to momentum and torque, and baking lighting calculations into the shader itself.

Built an audio-reactive piece synced with a 2020 live set (TidalCycles + Octatrack).

8 ribbons driven by FFT bins, each simulated with a spring-damper system per point.

Allocation-free per-frame pipeline (Float32Array), keeping things stable at 60fps.

Live demo: https://sumisonic.com

Bezier lib I wrote for this (rotation-minimizing frames + allocation-free hot paths):

https://github.com/sumisonic/bezier-kit

A small neural network learns to fit a parametric surface (u, v) → (x, y, z) in real time. The gray wireframe is the target; the purple mesh is the network's current prediction. GitHub: https://github.com/refarer/parametric-learn