Houston, we're coding 3D! 🚀

• Day Job: Frontend Dev @ NOA Ignite. (React & Svelte are my main tools).
• Night Job: Illustrator & Game Dev "Dabbler."
• The Goal: I love building games and drawing, so I figured... why not force the browser to do both?

• I went to Awwwards Conf and saw the future.
• But the future looked hard. The old tools felt like rocket science.
• Today, I’m showing you that you don't need a PhD in Math to build cool 3D web experiences.

• It's not just video games anymore. It is the Tactile Web.
• It turns 'viewing' into 'experiencing'.

• The Identity Crisis: To build 3D, you needed to be three people at once: A C++ Developer, a Technical Artist, and a Mathematician.
• The Math: You didn't just write code; you wrote linear algebra. One wrong matrix calculation and your entire world disappeared.

The Old Way (The Black Box):

• The Artifact: You receive a binary file (.glb).
• The Problem: It’s opaque. You can’t tweak the lighting or fix a texture in code. You have to email the designer and wait for "v2_final_final_final_v2.glb".
• The Vibe: "Don't touch it, you'll break it."

The New Way (The Glass Box):

• The Artifact: You receive a React Component.
• The Solution: It’s transparent. The scene lives in the graph. You can hook into events (onClick) directly from your UI.
• The Vibe: "It's just another part of the DOM."

• The Tech: VRML and Flash allowed 3D, but they were heavy, proprietary plugins.
• The Experience: Slow loading screens, crashing browsers, and security risks.
• The Verdict: The web wasn't ready. 3D was an isolated island, not part of the page.

• The Breakthrough: WebGL 1.0 launched, bringing hardware-accelerated 3D directly to the HTML5 canvas—no plugins required.
• The Problem: It was extremely low-level. Drawing a simple rotating cube required hundreds of lines of imperative code and complex matrix math.
• The Hero: Three.js emerged to abstract the math, but you still had to manage the render loop manually.

• The Shift: We stopped writing imperative code (scene.add(mesh)) and started writing components (<Mesh />).
• The Impact: 3D became just another part of the UI tree. State, events, and props now worked seamlessly with 3D objects.
• The Result: Millions of React developers suddenly had access to 3D without needing to learn a game engine.

The Engine: WebGPU is replacing WebGL. It unlocks Compute Shaders, allowing us to simulate physics and millions of particles directly on the GPU.

The Workflow: Tools like Spline and AI generators allow designers to ship 3D directly to the web, blurring the line between "design" and "code."

The Stat: 100x more objects & 3x - 5x more complex scenes than WebGL. The limit is no longer the browser; it's your imagination.

• The Shopify Stat: Merchants using 3D models see up to a +94% conversion rate.
• The "Why": It removes doubt. Users don't buy what they can't understand.
• The SEO Bonus: 3D increases Dwell Time (time on page). Google notices when users stop scrolling to interact, boosting your search ranking.

• The Problem: The #1 reason for e-commerce returns is "It looked different in real life."
• The Fix: 3D offers truth. Letting users rotate and inspect the product reduces returns by 40%.
• The Bottom Line: Stop "catfishing" your customers with carefully staged photos.

• The Old Way: Want to show the product in 10 new colors? Schedule a new photoshoot. Edit 100 photos.
• The 3D Way: Update one texture in the code. Render 1,000 variations instantly.
• The Result: Infinite marketing assets for zero marginal cost.

• The Weight: A compressed 3D model is often smaller than a background video (300KB vs 5MB).
• The Speed: Optimized scenes load in milliseconds, not seconds. No "loading bars" required.
• The Device: It doesn't need a gaming PC. If your phone can run TikTok, it can run your website.

• The Sea of Sameness: Most websites are just different arrangements of rectangles.
• 3D breaks the grid. It disrupts the scroll.

• The Fidget Spinner Effect: Humans are simple creatures. We see a spinny thing, we spin it.
• Avg Session Time: +300% (3x). Passive scrolling is for zombies; 3D wakes them up.

• Product configurators: customers see exactly what they're buying.
• Architecture: walk through spaces before they exist.
• Data visualization: 3D charts reveal patterns 2D can't show.

• React Three Fiber: Write 3D like you write React components
• Extensive documentation and community support
• Templates and examples everywhere
• The barrier to entry is lower than ever

• Power Drain: 3D is heavy. Don't drain your user's battery for a simple spinner.
• Accessibility: Screen readers can't read a WebGL canvas. Always provide HTML fallbacks.
• Motion Sensitivity: Respect 'prefers-reduced-motion'. Don't make your users sick.
• Asset Weight: Don't melt their data plan. Compressing a 50MB texture down to 200KB isn't optional; it's survival. Use Draco.

• The barrier to entry has crumbled. The web is gaining a Z-axis.
• The only question is: What will you build?