Aiclo — cloth pattern designing service

[GeneralGDA]

Hi everyone! We’d like to share how we use Babylon.js in Aiclo, our cloth pattern designing service. The engine handles 3D rendering of a digital avatar and the designed cloth, and also powers a special sketch-like rendering mode used in printable documents.

Live scene ( https://aiclo.com/app/projects/shared/9563bebcccb3560e )
Another live scene ( https://aiclo.com/app/projects/shared/1496b8c90f8a74d4 )

Materials & Shading

We extended the StandardMaterial with custom shader additions to implement so-called contact shadows — these add more contrast on the avatar surface near cloth edges.

For the sketch rendering mode we use double-sided rendering with separate materials, combined with EdgeDetectionPostProcess and a custom “flat white” double-sided material.

For the environment, we wrote procedural shaders for the floor grid texture and the background gradient.

Cloth & Avatar Rendering

To let the user simultaneously choose both a cloth type (cotton, linen, organza, etc.) and a motif, we use multitexturing.

Beyond Babylon’s built-in controls, we maintain a large material parameters table — specular, ambient, diffuse, textures, scene parameters, post-effect parameters, and more — for different cloth and color combinations. We even procedurally modify some textures using hand-crafted formulas when the user picks a new color for the fabric.

Per-vertex coloring is used to render heat maps for fit and strain visualization. Seam line geometry is generated with the Tubes mesh builder.

Scene Setup & Performance

Our common scene setup includes FXAA, contact-hardened shadow maps with a blur kernel, an ArcRotate camera with custom limits, and a single point light. The Draco format loader came in very handy for reducing mesh data traffic.

We also use the screenshot-making tool from the Babylon.js tools package.

A couple of things we experimented with but ultimately moved away from: we tried SSAO, but were not able to achieve pleasing results, so we decided to turn it off — though the setup is still present in the code. TAA produced artifacts on some lower-end GPUs, so we stuck with FXAA instead.

Happy to answer questions, if any.

[AlitarSemiramis]

This is so cool! Thank you for sharing!

[Cedric]

Impressive work! Congrats on the release!

[GeneralGDA]

A few more screenshots.

[GeneralGDA]

By the way, our service is not frozen. We continue to develop it wherever possible, including 3D. Just recently, we rolled out the display of seam lines in 3D.

Aiclo App

[brightMoon]

Hello, I’m very glad to see your presentation. Could you share the implementation process of your pattern overlay function? I’d like to learn about it.

[GeneralGDA]

Of course!

From a technical standpoint, we didn’t write anything custom here: we used the ready-made StandardMaterial from the Babylon library. The fabric’s texture itself is defined through ambientTexture. Physically, the same texture is also used as specularTexture (so that highlights appear only on the fibers, but not in the gaps between them). Then come the user settings: either a monochrome diffuse, or a textured one via the diffuseTexture field.

There are also a few other parameters we set (texture rotation angle, scaling, etc), but those are more a matter of design and art — they were chosen by eye by our designer.

We have two subtle points.

The first is texture tiling. This is real magic that our designer can do and that I don’t fully understand. He manages to make arbitrary textures tile seamlessly so that repetitions aren’t noticeable to the eye.

The second is automatic adjustment of the overall brightness of the ambient texture. Before passing it into Babylon, we adapt it (literally modifying the texture’s pixels). The adaptation formula was again chosen by the designer so that lighting and highlights look fine across different colors selected by the user.

It would be difficult for me to extract the entire production code into an isolated demo. A heavily simplified version that shows the general scheme can be viewed here: https://playground.babylonjs.com/#IHIM4S#1. I’ll try to put together a better example in the coming days, if possible.

Clarification:
Previously I wrote that ambient and specular textures are identical.
To clarify, they are actually different. At one point we experimented with making them the same, but later abandoned that approach.

[brightMoon]

OK, thank you. I have a general understanding. I thought you were using a shader to superimpose the two diffuseTextures together.

[GeneralGDA]

We used custom shaders for three things: shadows in the areas where the cloth contacts the mannequin, the grid texture of the floor, and the background. The most complex one is the first. The other two could actually have been done with textures. Everything else relies only on Babylon’s out‑of‑the‑box classes plus solid artistic work. Our artist has previous experience working on an AAA game title.

[GeneralGDA]

I still made a more illustrative demo, with the clothing mesh and textures from Aiclo. And pardon me, I made a mistake in my previous message: our ambient and specular textures are actually different. Apparently, at some point we experimented with making them the same, but later abandoned that approach.

Babylon.js Playground

[brightMoon]

Very good. The demonstration was very clear. I really didn’t expect that the ambientTexture could produce a pattern effect. However, logically speaking, ambientTexture should actually be Occlusion Texture, which is capable of producing the effect of shadows. If it is a PBRMaterial, will this channel then be wasted?

[GeneralGDA]

We did not use PBRMaterial; we managed with StandardMaterial. Roughly 50% of the work in such tasks is the artistic part (texture, its tiling, adjustment of colors and lighting). The artist we worked with did not have experience in a PBR setup. I myself am also not familiar with this part of the Babylon API. Therefore, we did not even attempt to go in that direction, as the time budget was limited.

[brightMoon]

OK, I understand.