The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Found a bug in flux/ this week. Portrait phones were only showing the middle of the 3D models during scroll, edges were getting cut off. Turns out I never scaled the camera fov/distance for aspect ratio, just assumed desktop dimensions the whole time
Shoutout to Jaden Green for telling me and walking through the math (visible width scales with aspect ratio, so 0.75 vs 1.78 is a massive difference in what's actually on screen)
I will be working on it soon as I can. Good reminder that vanilla WebGL means you own every edge case yourself, no framework catching this for you
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Designed this interactive 3d dashboard with Opus 5.5 for an industrial company's vehicle and material tracking dashboard
A full 3D simulation of the plant, every truck tracked from gate to dock
Both modes are pixel precise. Which one you like?
4 voted
40%
6 voted
60%
10 votes
Closed
Voted Dark. On a dashboard watching trucks move from gate to dock all day, dark is easier on the eyes, and the 3D bars and route lines glow against it. Light is clean, but dark makes the live movement the focus.
A watch movement lifted from one photograph into 3D. HEXANOX is an independent horology institute. We certify mechanical movements by measurement, amplitude, beat error, positional variance, to tolerances your eye cannot see.
I built this project to test A watch movement lifted from one photograph into 3D. HEXANOX is an independent horology institute. We certify mechanical movements by measurement, amplitude, beat error, positional variance, to tolerances your eye cannot see. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Three.js (GLB 3D) while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Precision implementation of image → GLB under continuous interactive user input
Sustained 60 FPS render performance and zero-dependency browser execution
THE TECHNICAL SIDE:
Engineered directly in the browser with Three.js (GLB 3D), WebGL / GLSL Shaders, Canvas2D, Image → GLB. The application runs without third-party frameworks or build-step dependencies, using hardware-accelerated rendering and custom event loops to achieve zero-latency response.
Everything executes in the browser using Three.js (GLB 3D), WebGL / GLSL Shaders, Canvas2D, Image → GLB. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Balancing the mathematical rigors of image → GLB with tactile browser interaction required tuning event throttling and memory allocation to eliminate all garbage collection stutters.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
An interlocking gear-train workbench with true ratios and brass-blueprint charm.
I built this project to test An interlocking gear-train workbench with true ratios and brass-blueprint charm. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Canvas2D while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Real-time gear mesh torque transfer and escapement tick mechanics
Interactive placement of interlocking brass gears with variable ratios
THE TECHNICAL SIDE:
Implements true involute tooth profiles computed via parametric equations. Rotational speeds are propagated through an adjacency graph of connected gear nodes.
Everything executes in the browser using Canvas2D, Mechanical Gear Physics, Involute Gear Tooth Profiles. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Floating-point precision drift caused gear teeth to gradually overlap after several minutes. Clamping phase angles to gear pitch intervals solved the drift.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
Built by Samin Sami | Developer & 3D Experimentation
Steampunk vibe👍