Web-Friendly 3D Models with Blender [Advanced]

Okay, I showed you the quick way to optimize your 3D models. Now let's look at the advanced way in Blender. This method gives more control, but usually, the quick way works fine for simple games. Still, I want to show you both methods.

First, let's download our model from fal.ai. We created it using the Rodin model. Go to your requests, find your latest one, and open it. If your model doesn't show up due to a bug in fal.ai, click the three dots and open Playground—that should fix it. Download your GLB model now.

Open Blender, start a new general project, and delete the default cube. Import your downloaded GLB model. It'll appear dark initially, so switch to the textured shading mode. Checking the wireframe mode, you'll notice the model has too many polygons. We'll simplify this to improve performance and reduce file size.

Select your model, go to the modifier tab, and add a "Decimate" modifier. Slide the ratio slider left to remove polygons. Check the textured view to ensure the model doesn't lose too much detail. Find a balance that keeps good visuals. I recommend something between 0.2 to 0.5, depending on your model. Once satisfied, apply the modifier.

Next, let's optimize the texture. Switch to the shading workspace, select your model, and find the emissive texture node. Save the texture image from Blender. Then upload this texture to TinyPNG to reduce its file size significantly. Download the optimized texture and save it separately.

Back in Blender, switch to the UV editing workspace, resize your texture if needed (1024 pixels is typically enough). For complex tasks, you can ask ChatGPT or similar tools for help, but be aware they might provide outdated info since their training has a cutoff date.

Now, let's do a quick cleanup. Enter Edit mode, select your entire model, press M, and choose "by distance" to remove any overlapping vertices and clean up the geometry.

Finally, export your optimized model as GLB. Ensure animations are disabled if your model doesn't need them. Enable Draco compression to reduce the size further, but test afterward because it sometimes breaks models. Choose WebP for image format, set compression quality to around 75, and ensure UVs and normals are included. Confirm the Y-axis is set as up, important for Three.js compatibility. Once exported, double-check your model with a GLTF viewer to compare the original versus optimized size.

That's it—we've optimized our model using Blender. If you do this a few times, you'll memorize the steps and speed through the process easily. The quick method from before is fine for most cases, but this advanced method is great if you're serious about performance. Now let's move forward with building our PRD and the game itself. See you later.