Happy with the pre-overlay transition, just need to fix up the lighting, DoF and Bloom sequencing.

#threejs #r3f #buildinpublic

Not much time today, but the current focus is getting UI overlays mapped onto my screen mesh. I use a simple reveal shader here

Not happy. I'd rather use SVG+CSS animations for sharpness. But not sure how to use them as a live map for a material.

#threejs #r3f #buildinpublic

Learned one hell of a lot about shaders this weekend, long overdue.

This should enable me to move most of my ideas out of static PNGs and into the shader world, which is crucial for the UI part of my site experience

#threejs #buildinpublic #react #r3f

Progress update. Spotlights are 'volumetric' now. I'd prefer a fog volume aka Blender but that's going to involve some shader research. Astronaut (it's kind of a motif of this site) instanced, reduced polys greatly but improved visual quality. Next are poses

#buildinpublic #r3f

working on a @threejs map thing

inspired by @jacobcollier's world tour
made w/ react three fiber #r3f
and #framermotion

#buildinpublic

Top: bought in a 3D models store.
Bottom: done manually.
Moral of the story: buying assets is great for the first version, when you are going for optimal performance, you have to do these things yourself.

#dev #r3f #threejs #blender #react #javascript #buildinpublic

Can our simulated car stop to avoid crashing?

Using #threejs raycaster as virtual ultrasonic/distance sensor. #Python with @pyodide to control the car in the browser!

@BehindEng #buildinpublic #electronics #hardware #engineering #r3f #javascript #React #webgl @pyodide #physics

🚗 Car + 👀 Raycast/Virtual Ultrasonic Sensor = 😌 Object Avoidance

Using #threejs raycaster as virtual ultrasonic/distance sensor. #Python / @pyodide to control car!

@BehindEng #buildinpublic #electronics #hardware #engineering #threejs #r3f #javascript #React #webgl #physics

How to build our Mecanum car in the browser using @BehindEng's Sandbox

#buildinpublic #electronics #hardware #engineering #threejs #r3f #javascript #React #webgl

Mecanum Car Crash 💥 in the web browser simulator

🤔... I think we need 👀 sensors.

@BehindEng #buildinpublic #electronics #hardware #engineering #threejs #r3f #javascript #React #webgl @pyodide #Python #physics

Mecanum Car + #physics + #Python to drive it along a box-shaped path, all within the browser

@BehindEng #buildinpublic #electronics #hardware #engineering #threejs #r3f #javascript #React #webgl @pyodide

Mecanum car controlled by #Python driving in #physics simulator within the browser!

Want to learn or build, too?
👉 Join the waitlist: bit.ly/3EbAGBP

@BehindEng #buildinpublic #electronics #hardware #engineering #threejs #r3f #javascript #React #webgl @pyodide

Spot-like robot doing the worm
🐕+🤖=🐛

Testing #physics simulations with joints/constraints in the browser.

#buildinpublic #engineering #threejs #r3f #javascript #React #webgl #robotics #robots Cannon-ES

Rebuilt our Mecanum car in the browser!

@BehindEng #buildinpublic #electronics #hardware #engineering #threejs #r3f #javascript #React #webgl

Wiring up a programmable & battery powered motor circuit

Want to learn how?
👉 Join the waitlist: bit.ly/3EbAGBP

@BehindEng #buildinpublic #electronics #hardware #engineering #threejs #r3f #javascript #React #webgl

Quickly wire up LED #electronics circuit #simulation on #web

@BehindEng #buildinpublic #hardware #engineering #threejs #r3f #javascript #React #webgl

Controlling virtual LED #hardware with an #electronics circuit #simulation on #web

@BehindEng #buildinpublic #engineering #threejs #r3f #javascript #React #webgl

Controlling RGB LED virtual #hardware with #Python & an #electronics circuit #simulation on web

@BehindEng #buildinpublic #engineering #threejs #r3f #javascript #React #webgl @pyodide

Part 2: Controlling RGB LED #hardware with #Python & an #electronics circuit #simulation on web

Demonstrating a Python loop changing the colour over time.

@BehindEng #buildinpublic #engineering #threejs #r3f #javascript #React #webgl @pyodide

Learn electrical #engineering & software development online
1️⃣ Select & connect #hardware parts
2️⃣ Program with #Python
3️⃣ Simulate #electronic circuits & #physics
👉 Join the waitlist: bit.ly/3EbAGBP
@BehindEng #buildinpublic #threejs #r3f #javascript #React

Speedrun: Wiring up a virtual programmable LED circuit in 60 seconds 🚀

Want to learn how?
👉 Join the waitlist: bit.ly/3EbAGBP

@BehindEng #buildinpublic #electronics #hardware #engineering #threejs #r3f #javascript #React #webgl

🚅 From model to dynamic physics objects in ~5 seconds* with V-HACD for web ⚡

*Results may vary 😜

Model used: Zombie Car from market.pmnd.rs/model/zombie-c…

#buildinpublic #rapier #r3f #physics

Model: github.com/kmammou/v-hacd…

#buildinpublic #rapier #r3f

Finally nailed down a decent algorithm for navigating to the nearest hotspot in @TreasuredTeam's web player!

Here's how it works 🧵

#threejs #r3f #buildinpublic