Wrist Watcher
Website: http://wrist-watcher.com.s3-website.eu-central-1.amazonaws.com/
Repository: https://github.com/rosulg/wrist-watcher
Authors: Robin Sulg, Karl Olaf Kuldmaa, Kirill Milintsevich
Introduction
Wrist Watcher aims to offer its users a better experience when purchasing a wristwatch. By using our three dimensions models of a watch and a human arm the users can have a better understanding how a watch of certain dimensions wears on their wrists.
Our minimal viable product (MVP) offers options to specify hand circumference and a lug width of a watch. Based on those two dimensions the user is displayed a three-dimensional model of a watch with specified lug width on a hand with specified circumference. In addition, there are possibilities to rotate the hand in three dimensions to more clearly explore the visuals.
Frameworks
The project is implemented by using the frameworks threejs and Angular. Angular allows us to keep our logic separate and also offers types as it uses typescript underneath. By following the Model-View-Controller (MVC) logic, it rewards us with a better scalable application. However, the framework, threejs was chosen as it makes our application available via browsers and thus requires no extra downloading to be done to use our application. This in turn is very comfortable as the majority of online shopping happens while using one of the major internet browsers that our application supports.
Problems worth mentioning
Watch around the hand
One of the most essentials problems that we faced in this project was to implement an algorithm that wraps the watch around a hand. Because the hand is scalable the total circumference can change and thus the bracelet must act dynamically. For example, it must fit for hands with the circumference of 15 cm and to hands with the circumference of 20 cm.
To achieve this, we created an “imaginary” circle. This circle is then divided into 8 points. From those 8 points rays are being shot towards the model of the hand. Now it is possible to calculate the intersection points between the hand model and the rays. By using the found intersection points we can define a spline that goes around the hand. The spline is essentially a rope wrapped around a wrist that acts as a path for the bracelet links as how they should appear. With the spline found we then define the length of it by the length of the bracelet link. This gives us the total number of links that we need to cover the wrist.
Covering the wrist with links is then done by finding the tangent at each of the control point. The found tangent lines are used to position the links around the hand.
We have now arrived to this result:
Hand texture
Textured hand preview:
The texture for the hand was created but mapping the reference photos of Kirill's hand to the UV-map of the model in Photoshop. We used different tools but mainly the Puppet Warp to create the needed shape.
Hand texture:
Additionally, we created a normal and specular maps for the hand. The normal map adds more details to the various wrinkles and crevices on the hand skin. The specular map shows the areas that should be more shiny that the others. This emulates oils on our skin. Both maps were created in GIMP.
Normal map:
Specular map:
Another popular technique in skin shadering is Subsurface Scattering. It aims to simulate the situation when the light enters inside the object, in our case the hand, bounces inside and finally exits to the surface. We can see this effect in the real life if we put our fingers in front of the strong light and they become a bit red.
However, this effect was difficult to implement in the WebGL shader. Finally, our light source is not to strong and we shouldn't be able to see this effect in real situation anyway. Because of these reasons, we decided not to include this effect to the final shadering.