🚀 Our latest WebGL project is out! . Introducing Equinox, an interactive space adventure that will take you to the stars. ✨. Embark now: #webgl #threejs

RT @danielben: Dragonsweeper reaching 50k gameplays!. A minesweeper roguelike adventure you can play for free.

Our interactive experience is nominated for People's Choice Award 2024 on @fwa!. If you enjoyed it, please consider giving us your vote to support more projects like this one!. 🗳️ Vote here:

Our latest work for @Netlify has been awarded FWA of the Day! 🎉. Big thanks to the Netlify team for the opportunity to create this experience, and to the @fwa jury!.

RT @Netlify: How do you celebrate 5 million ( 🤯) Netlify developers? With an interactive, 3D game built on the platform, of course. Roll th….

✨ Our newest WebGL project is live! . We teamed up with @netlify to bring you a unique experience we're very excited to share!. Ready to roll? Play it now: #webgl #threejs

RT @KMkota0: my wiggle bones library for three.js is now public. i can’t wait too see what you all make with it!. → docs: .

It's been brought to our attention that someone is using our Equinox project to promote a blockchain scam. 😢. Do not trust anyone pretending to be launching a crypto project based on Equinox. Please help us report this account.

Thanks for reading! If you haven't already, check out the experience: You can also read our previous thread detailing how the rendering pipeline works:

A few takeaways:. 🔄️Fast iteration loops are crucial for environment art. 🛠️Building custom tools can speed up your workflow. ✨Rendering optimization begins in the pipeline (merging static geo, mesh compression. ).🧩Environment kits are great. Procedural kits are amazing!.

And that’s a wrap! We hope you enjoyed this glimpse into how we created the 3D environments for Equinox.

c. Optimization. Finally, both meshes and textures are optimized to reduce file size and improve performance. KTX2 is applied to all maps except a few of them where compression artifacts are too visible. Besides, Draco results in levels shrinking by at least 8 times in size.

Using command-line parameters, we made it easy to choose between re-baking only a specific room or the entire level. As for baking times, we also had the option to bake in low quality while iterating on levels.

Baking lightmaps was done through a Blender add-on called The Lightmapper ( using Cycles, also driven by our script. Here’s an example map using the same lightmap UVs as shown previously.

Another important step is generating UVs for lightmaps. Instead of having to manually unwrap our geometry, we relied on XAtlas (, a library that does an awesome job at auto-generating lightmap UVs.

One of the key transformations is to merge all static elements inside each room as a single mesh. This allows us to reduce the number of draw calls at runtime.

b. GLTF export. The meat of our export pipeline is based on a Blender Python script that loads each FBX level file exported from Unity, transforms it in many ways and then exports the final asset as GLTF.

a. Scene editing. Basically, all the scene editing was done in the Unity editor and exported as a single FBX file per level. No other Unity feature was used except for placing the various meshes coming from Blender/autokit.

Our solution was to use a mix of Unity, Blender Python scripts and shell scripts. Here is an overview:. a. Scene editing (Unity -> FBX).b. GLTF export & Lightmap baking (Blender scripting).c. Optimization (KTX2 + Draco).

3. Exporting to Three.js ⚙️. One of the challenges on Equinox was figuring out how to set up a good workflow allowing us to iterate on level design and environment art, and to easily preview the result in the browser.

Our mesh preparation also involved applying different materials to different parts of each mesh, for differentiating non-emissive, emissive and screen faces (Here shown as gray, blue and yellow, respectively).