El Corte Ingles Virtual Fitting Room

Introduction:

The Virtual Fitting Room (VFR) is a web application. Its interface allows users to display combinations of clothes of El Corte Inglés catalog over a virtual avatar.

I’ll summarize only the render engine because it isn’t an open source software. Futhermore, the VFR is divided in 3 parts. The front-end, the back-end and finally the render. In short, the render is the tip of the iceberg of a large and ambitious project, designed and programmed by 3 persons.

This is the final result:

When I joined Virtualtwo a year ago, they gave me a render made in Flex almost ready for the spring season and implemented by another person outside Virtualtwo. It was a complete disaster: 660KB of swf file, unintelligible code, memory leaks, too much load time. What you should never do. However the deadlines forced us to mantain these abomination until today.

For this season I implement the entire render in AS3 (flash), now its size is 20KB, the code is modular, it processes 14 clothes in the same the flex render processed 1, it has implemented a garbage collector, the communication between front-end and the render has been reduced to 20%. It does more with less code.

The render is divided in 4 classes:

  • The renderer: main class that inits the render, make and instance of others classes, manage the events and the communication with the front-end.
  • The queue: manage the user querys and load all needed images.
  • The status: it has the render status.
  • The render: shows the final result and calculates the masking of the clothes for overlap them.

Renderer:

It’s the core of the application, the classes queue, status and render are instantiated and managed throught this class.
Its constructor initializes those classes and prepares the environment with a layer structure. Each cloth will has a position of depth given by the zOrder property of its assigned layer. So, the result displayed will be a set of images organized and ordered using their zOrder.

The init process controls the communication with the front-end with asynchronous events using these actions:

  • Dress / undress a garment
  • Change the background
  • Change the model of the avatar
  • Nude the model
  • Zoom
  • Rotate the model
  • Model configuration (hairstyles)
  • Screenshots
  • Clothing lighting

Queue:
Is the module responsible for interpreting the actions.

When an action enters in the queue, the load events of the images associated with the actions start. When all actions in the queue are loaded (it means that all images are downloaded), the queue returns the actions processed, ready for being used in the render.

Status controls all the time the state of the program, stores the dressed garments, the model configuration, the state of the zoom, of the rotation, etc.

Render:

When the queue returns the result, the methods of render are called. The bigger problem here is how to display the overlap between clothes. For example, the engine has to correct the result of putting a large shirt below a tight sweater. It was solved using accumulative zOrder masks.

However there are some cases with no solution using masks. As you can see in the last image, if you apply the masks in the exposed area, the sleeve would be erased.

This entry was tagged as , ,

Leave a Reply

Your email address will not be published.