The VTO Studio Lite is a web application made by Jeeliz. Anyone can build a glasses virtual try-on (VTO) experience in minutes!
You can access to this amazing web application here: jeeliz.com/demos/glasses-studio. It requires 1366 pixels wide or above screen and a desktop computer. The VTO widget built won’t have these restrictions, it will even work on mobile devices. You can also watch a screenshot video of the application on our Youtube channel: https://www.youtube.com/watch?v=BwU3O05yx2A.
In this tutorial, we will see together how to create our widget and add it to a website, from start to end. FIrst, we learn how to modify our pictures with Gimp (free image manipulation software). Then we learn how to use the VTO Studio to create our widget. And finally, we learn how to add our widget to our website. Let us start!
Modifying the images with Gimp
Selecting our pictures
We begin by selecting the pictures for our glasses 3D model. First we need to grasp how the VTO Studio works. In the picture below we can see how the 3D model where we apply our pictures as textures is built. It has three faces, two for the sides and one for the front. Now we select pictures working well in that configuration.
For the front part we choose a front side picture of our glasses. And for the side parts we can use one picture for both faces; it should be a picture of the side part of the glasses, more precisely of the branch part. Here are the pictures we selected for this tutorial:
Modifying the pictures
Let us start with the front part picture. We open it in Gimp. On the top left part of Gimp, we select the magic wand tool:
We want to:
- remove everything around the glasses frame
- remove everything in the lenses zone
We begin with selecting the area around the glasses:
Cmd + I to inverse the selection (or right-click, selection, inverse the selection) and
Cmd + X to cut the glasses frame. On the left part create a new layer and paste your glasses frame. Then right-click on the new layer and click on Anchor the layer and delete the first layer with the white background. We get this result:
We then select the Lasso tool:
And proceed drawing the outline of the left lens to get this selection:
Then we create a new layer on the bottom right side of Gimp and cut/paste the selection.
On the left top side on Gimp we click on the top colored rectangle (see the capture below) to change the lenses color:
We pick a rather dark color for the lenses since we will lower the opacity later. This dark green should fit.
Back on our layer, we right-click on our selected lens (dots around the lens) and in Edition we select Fill with color. Then, on the top part of the layer menu, we lower the opacity to 70. Here is the result:
We use the paint brush tool to fill the spaces between the lens and the glasses frame:
We then repeat the same operation for the right lens and use the eraser tool to clean the outline of the glasses frame:
We now have our front texture ready! Let us do the side part.
We open our side part picture in Gimp and select the Lasso tool. We should make a selection of the outline of the branch and cut/paste our selection:
We clean the logo from the branch using the brush and the airbrush tool.
We export both pictures. Great! We now have our textures ready, we can start building our VTO widget with the VTO Studio.
Building our widget with the VTO Studio
Setting up the textures
Back in the VTO Studio, we can import both our pictures by click on the Upload new image for the front side and the side part. The result is not great but no worries, we still have a bit of work to achieve a good result:
Firstly, we increase the size of the textures by using the sliders right below the previews on the left side of the app. We want both sides of the glasses frame to touch the left and right borders of the canvas like so:
For the branch texture, we want to have a size matching the size of the front part of the glasses. Also we want the start of the branch to touch the left border of the canvas, so that both textures bind seamlessly on the 3D model.
Setting up the branches
In real life, the branches are most of the time partially hidden behind the ears or in the hair. To reproduce this, we add a fading effect with the sliders in Fading section. We choose to set the fading to approximately 70% and the smoothness to 50%. This is a pretty good setting:
We can now set up the branch split and the curve of the glasses. The branch split affects how wide the angles that the branches make with the front part are. We want to set it to approximately 30%. The curve of the glasses can be useful for some glasses models, typically the sport glasses.These models have a slight curve at the junction point between the front part and the branches. We do not need to use it for this model; let us keep it at 0%.
Alright our glasses look good! Let us add our widget to our website.
Adding our widget to a website
When everything is ready, we hit the Export your widget button. A script is generated and we get to choose how we want to link it in our index.html file. The first option is to use the CDN link provided. Otherwise we can download the file and add it as a local source.
We choose to use the first option. In our index.html file we add the link to our compiled widget along with a canvas bearing the id jeelizWidgetVTOCanvas like so:
<html> <meta charset='utf-8'> <head> <title>MY VTO WIDGET</title> <script src="https://vtostudio.jeeliz.com/project/5c07b04595f6f70e4060c14e"></script> </head> <body> <canvas width=800 height=600 id="jeelizWidgetVTOCanvas"></canvas> </body> </html>
In the body, we add a button that will start the widget by calling the
<button onclick="VTOStudio.main()">Click to start the widget</button>
And tadaa! Our widget is displayed!