Optimization can be tricky. Here’s how to go from drawing a few hundred trees to virtually unlimited in Three.js, step by step. This will be high level, but not so much that you can’t fill in the details. #threejs

Lerp is used everywhere in games. It’s simple, but combined with a few small tricks it becomes incredibly powerful. This thread is full of visual examples.

The dot product is used everywhere in games, often with unit vectors to determine how aligned they are. But if it’s never really clicked for you, this thread is full of visual examples.

Most online “GLB optimizers” only optimize for file size, but they still take up a huge amount of memory. One Sketchfab example: No compression: 39 MB file, 342 MB in memory Other tools: 4.26 MB file, 22 MB in memory My tool: 0.68 MB file, 6 MB in memory

Hope you'll all have a great holiday season! My Holiday Kit contains over 100 3D models and it's completely free to download and use in your games. No need for a donation, or credits - it's all yours! ✨🎁 kenney.nl/assets/holid...

Degrees are everywhere, but what is a radian? Here's a visual explanation: PS: Working on new Youtube video.

Live link : planpoint-webgpu.vercel.app My new #threejs project is live. WebGPU + SSGI + SSR + SSAO + SSS + DOF + Chromatic Aberration + Octahedral impostors = happiness haha. 1 million triangles and 25.000 trees, with all PP effects, running at 60 FPS, under 10mb download 😊

Black Friday Sale! 50% off all courses for the next few days. No code needed, discount auto-applies! More topics coming in the new year. Tell me what you want to see next. simondev.io #threejs

Blender Scripting section is live! 3 hours of new content for the gamedev course. Build custom plugins, exporters, and automate things like lightmap baking. Preview: simondev.io/lessons/game... Over 65 hours of course content is now live! #threejs

My new book launches today!

I built this little tool to optimize and re-export GLTF/GLB assets to GPU-compressed KTX2. It runs entirely client-side/in-browser. You can fiddle with the parameters, compare the before/after, and export to GLB. Try it here: gltf-optimizer.simondev.io #threejs #gamedev

Dusted off my octahedral imposter demo for someone. Sprinkled in various trees from @quaternius.bsky.social Should make them react to lighting properly and all that. Reference: shaderbits.com/blog/octahed... #threejs

I’ve opened up many of the TSL exercises to everyone! If you wanna try out some WebGPU shaders and fiddle with them, all in the browser. Try an exercise and see if you can match the output. Link: simondev.io/lessons/shad... #threejs #webgpu

🔔 TSL exercises now available! TSL is the future of Three.js, unlocking the power and performance of WebGPU. The integrated shader homework on my site now includes experimental TSL support. This is a free upgrade for all existing Shader students. #threejs #webgpu

🔔 Quizzes are live now! Integrated right into each lesson and covering all #gamedev and #threejs sections. These will count toward your completion certificate when it launches. It's been a while, but homework and tests were the best part of school, right? 😅

Almost done updating my Graveyard Kit, I've remade every single 3D model in this #gameassets pack. It'll release (probably!) near the end of the week, free for everyone and can be used for any purpose. Thank you for all your support all these years! ✨

🔔 Site update: new SimonDev site is super functional and getting better. Latest addition: integrated shader homework - edit GLSL in-browser and match target output. It’s a polished evolution of my 2023 GLSL site. Reminder, teachable students can access same content (and more) Link below 👇

Recreated my game jam entry in C using @flohofwoe.bsky.social's awesome Sokol graphics library. It was a great learning experience! Implemented camera movement and various tweaks using imgui. Lighting based on @simondev.bsky.social's GLSL course. Link: github.com/yhutter/soko... #c #sokol #gamedev

Between heatwaves and summer camps, getting back to adding to the gamedev course heh. Shot from an upcoming section explaining spatial hash grids, and other acceleration structures. #threejs #gamedev

"Phosphor" for(float i,z,d;i++<8e1;o+=(cos(d/.1+vec4(0,2,4,0))+1.)/d*z){vec3 p=z*normalize(FC.rgb*2.-r.xyy),a=normalize(cos(vec3(4,2,0)+t-d*8.));p.z+=5.,a=a*dot(a,p)-cross(a,p);for(d=1.;d++<9.;)a+=sin(a*d+t).yzx/d;z+=d=.05*abs(length(p)-3.)+.04*abs(a.y);}o=tanh(o/1e4);

Putting together a boids and flocking section! #threejs #gamedevelopment

A little followup to the last section: If you understand heuristics and admissibility, you can tweak A* to run much faster! If you're willing to sacrifice perfection, faster still. Learn about it in my latest section on graph traversal. simondev.io

"String Theory" for(float i,z=fract(dot(FC,sin(FC))),d;i++<1e2;){vec3 p=z*normalize(FC.rgb*2.-r.xyy);p.z+=9.;for(d=.7;d<4.;d/=.9)p+=cos(p.yzx*d-t/vec3(2,1,5))/d;z+=d=.002+abs(p.z)/2e1;o+=(sin(z+4.*p.z+vec4(0,1,5,0))+1.2)/d;}o=tanh(o/1e4);

This looks seriously awesome

Just added the next part of the graphs and data structures section, covering traversal and pathfinding! Combined they're about 2.5 hours of new content, live now! simondev.io #threejs #gamedevelopment

Just added a new hour long section to the course: Graphs and Data Structures This is just the intro, planning on expanding it soon. It's already live in the course, if you grabbed the early access! simondev.io

Fiddling around with octahedral imposters. The tree is actually just a sprite (intentionally low res). Shader is doing all the work, and blending between frames. First pass, probably not super robust. #threejs

NEW Mini: Design Choices The guidelines I use to visually improve my shader art mini.gmshaders.com/p/design-cho...

🧵 TSL is looking pretty awesome, but I got you covered until then. I just hit publish on ~2 hours of new content to the course, covering how to dig into Three.js's internals, and we cap the project off with some terrain with erosion and scattering tricks. Live in the course, so check it out!

I implemented Homeworld 2 style sky meshes using baked vertex colors in @threejs.org. Reduces VRAM usage from 200mb (2k x 4k UASTC GPU compressed) to a lowly 4mb! For reference, iOS Safari used to crash web pages at 256mb, so this a big win :) #threejs #gamedev #IndieGameDev

💡 Automate all the things! Automate your build pipeline, from mass exporting .blend files to rendering lightmaps. All of this can be done programmatically with Blender’s scripting interface. 🔔 Want to be notified? Sign up here 👉 simondev.teachable.com/p/games-thre...

Early access is underway! Shader course students are already helping test the new GameDev course. Look for a broader announcement shortly. All the project demos are live too! simondev.teachable.com/p/games-thre... #threejs #gamedevelopment

NEW tutorial: Common Shader Mistakes! mini.gmshaders.com/p/mistakes How to avoid the most common pitfalls in graphics programming

Site’s basically done, just filling out a few last pieces for the course. Had a minute, so I filled in trigger #3. A few people asked for rain. ☔ Good excuse to implement: - Velocity-locked particles - Positional audio - A flexible animation system for cameras, lighting, and sound #threejs

That is beautiful

The Three.js GameDev course will be available soon, mocking up a new site with a little demo on it. Whipped up a trigger and animation system, which will eventually make their way into the course. What should trigger #3 do?

After a brief two year break, I've been back to work on my little digital logic simulation. There's a brand new version up over here if that's the sort of thing you're interested in! sebastian.itch.io/digital-logi... (and a new video too) youtu.be/HGkuRp5HfH8

Messing around building a little FX system in Three.js. This is a little fire I made. #threejs #webgl

🚨 Final section is going in before early access—covering entity management and representation: - Inheritance-based - Composition-based (ex. Unity's GameObject) - Modern ECS and what it’s great for Shoutout to @quaternius.bsky.social for the great assets! 👉 simondev.teachable.com/p/games-thre...

Schumacher House is a Webby Awards Nominee 😍. We're thrilled that our #threejs project, in partnership with @levinriegner.bsky.social, has been recognized as one of the best in digital experiences. Vote here: vote.webbyawards.com/PublicVoting... Live link: 3dhouse.schumacher.com

🛡️ Quick and simple slice of gameplay from a tower-defense style game—applying design patterns to ease development and make it scalable. Thanks to @quaternius.bsky.social for the awesome models! Will be part of the Three.js/GameDev course. Sign up here 👉 simondev.teachable.com/p/games-thre...

🕹️ Fiddling around with a new character controller for the Three.js/GameDev course. Big thanks to @quaternius.bsky.social for the amazing model and animation library—putting them to good use! 🔔 Want to be notified? Sign up here 👉 simondev.teachable.com/p/games-thre...

Building a game is hard. Where do you even begin? How do you structure it? How do you use patterns to improve development velocity? I added a new section exploring the foundations of game architecture—principles and patterns behind games. Sign up here 👉 simondev.teachable.com/p/games-thre...

New #threejs project for MantisXR! 🎉 🔗 camden-yards.vercel.app Dynamic physics, animated birds & clouds, lens flare, day/night toggle, and ambient sounds. Also showcasing Drei’s useBoxProjectedEnv for store interiors with great performance! Hope you like it! 😍

🚨 SALE + NEW CONTENT! 🚨 🔥 30% off all courses! 🔥 Just dropped a massive GPGPU update in the Shader Course: ⚡️ Almost 6 hours of new content ⚡️ Basic -> Advanced particle systems ⚡️ Building a 1 MILLION+ boid simulation 👉 Grab it this weekend! Use this coupon: PARTICLES2025 simondev.io/courses

⚡ GPU particles—beyond just basic GPU particles, giving you access to more visually impressive effects. These sections are already available right now in the Shader Course, and it’ll also be part of the upcoming Three.js Game Dev Course. Sign up here 👉 simondev.teachable.com/p/games-thre...

🔥 Last section, learned about GPU particles—but how do you make them move? How do you integrate forces over time to create swirling, dynamic effects? This section dives into state updates, unlocking highly complex effects—all 100% on the GPU. Sign up here 👉 simondev.teachable.com/p/games-thre...

You can build them on the GPU too, here's a few hundred thousand particles running with collision detection! This is just plain shaders, no webgpu or anything.