Yamê

In this project, the entire 3D pipeline revolved around three inseparable pillars: object modeling, texturing, and integration within a single scene. The goal was to establish a smooth process, enabling each collaborator to work in parallel on their own assets and integrate their updates without risking conflicts in the working files—thus allowing for faster iteration.

The main scene, also versioned separately, contains only one unique design element: the organic shape of the ground. Large volumes (buildings, structures, bulky furniture) are imported from the Asset Manager, manually positioned, and then grouped by type under empties (null objects). Each group shares the same geometry, allowing these objects to be exported as instances.

To populate the scene with smaller assets (rocks, plants, props), we use a different approach: the ground surface is duplicated as many times as there are assets, with each copy becoming the input for a Geometry Node. Using a Mesh Boolean operator, we remove the areas of the ground where no instances should appear, then, with a weight-paint texture, we paint the exact zones where instances should spawn. The Geometry Node reads this density data and distributes the instances across the ground surface.

Whenever an asset evolves (shape, UVs, textures), the designer updates it in their dedicated file and uploads the new version to the drive. In the main scene, a simple “Link Object Data” is enough to bring in the updated geometry and resources—without affecting the rest of the composition or creating version conflicts.

For the export, we chose the GLB format while keeping the “Geometry Node Instance” option enabled. In post-processing, gltf-pipeline is used to:

• compress the geometry with DRACO
• convert the textures to KTX2

The final output weighs less than 7 MB, ensuring fast loading times and smooth performance in WebGL.

Shadow thresholding is quite straightforward: THREE.js handles it automatically with the MeshToonMaterial. The principle is to sample the shading—that is, the variations in brightness when light hits a surface from different angles—and then group all those nuances into just a few colors (usually 3 to 5).

This step is essential in toon rendering: outlines not only evoke comic book aesthetics but also help distinguish volumes that tend to become less visible due to flat color shading. To define these outlines, we combine two techniques. First, a graphic texturing applied directly within the textures adds relief and roughness inside each volume. Then, a post-processing outline pass helps separate the different volumes from one another.

For this second part, we rely on an edge-detection algorithm such as Sobel. It works with a convolution matrix that enhances differences at pixel borders: for each pixel in an image, the algorithm examines its immediate neighbors, and the stronger the contrast, the more intense the resulting pixel becomes. In short, this filter acts as a contrast revealer. By applying and combining this technique to specific render outputs—such as a normal texture (left image) or a depth texture (center image)—we can highlight the contours of certain objects.