Amanda Lindén Guinez

N^o 1 About Project

An Interactive Painting Tool

This project aims to explore different ways to apply textures to a 3D surface, with the end product resulting in a 3D online face painter (“Fac3Paint”), made with the 3D javascript library Three.js. There are a lot of different techniques for applying textures to a 3D surface, for example 2D texture maps, light maps and bump maps. This project will focus on exploring the benefits of painting and rendering directly on a 3D surface, instead of using pre-made texture maps.

N^o 2 The process

Applying texture to a 3D model

2D texture map

The most common way to apply color and texture to a 3D model is to use a texture map (UV map), which is a 2D image that is wrapped around the 3D object. The difficulty with this technique is that parameterization of the UV mapping can be both complicated and time consuming. When mapping the texture manually, repeated projection operations and unwrapping of the model into a planar domain is required.

Bump mapping

A bump map is a texture map applied to a 3D surface to create an illusion of bumps and irregularities on the surface without having to build the bumps on the mesh itself. It can be used together with a regular texture map, as on the model used in this project (see the pictures above).

Lightmapping

Light can be created and calculated in many different ways, and one technique used for creating light at a relatively low computational cost is lightmapping. Lightmapping is applied by pre-calculating the illumination on an object and stored as a lightmap which is applied similarly to a texture map. In this project, lightmaps are not used. Instead, the illumination is calculated per-pixel (see the lighting section).

Painting on a 3D surface

Instead of using a 2D texture map, it is possible to paint on the 3D surface directly, for example by colouring the individual faces of the mesh. By painting on the model directly, you don’t have to worry about the parameterisation of the texture map, since the colour can be stored directly on the 3D model. Another benefit of painting directly on the model is that the result is immediately viewable.

N^o 3Tools used

Fac3Paint was created by using Three.js, a web based javascript library for 3D-applications. The reason for why this particular tool was chosen was partly because of its compatibility with the web platform, but also because of its diverse features and smooth interaction, which makes it possible for front-end developers to create rather complex 3D-graphics. As for the 3D-rotation and additional controls, a separate library called Orbitcontrols.js was used. Interpolation was used to color the triangular faces, where each vertex of the triangles was assigned a chosen color, which Three.js then interpolates between to fill the rest of the triangle. Choosing different colors for the vertices creates a gradient. Furthermore, to find which face to fill I used an Intersection function that finds the intersection point of the mesh, starting from the camera in the direction of the mouse cursor

N^o 4 Functions

Helper

In order for the user to see where he or she is drawing, we implemented a physical brush - a helper. The helper is a separate cylinder shaped mesh, with a position based on the mouse cursor position. Its direction is set to be parallel to the normal of the intersected face, thus it is always directed towards the model surface. When the cursor is outside of the model, and there is no longer an intersection, the helper is no longer visible. Additionally, the color of the helper is set to be the same as the chosen brush color, indicating what color is being drawn.

Skin Color

Allows user to change general color of the mesh material, which is updated with the hex value from the control interface.

Brush Color

There are two types of colored brushes, one single color and one rainbow option. Both are implemented by taking the chosen color from the control interface, and updating the vertices of each triangular face that makes up the model. As for the single color brush, all triangles interacted with are painted with the same color. The rainbow option updates brush color randomly from an array of colors for every new triangle, thus creating a “rainbow”.

Gradient

Checking the gradient checkbox in the control interface enables gradient on the brush strokes. Instead of colouring all vertices equally, it assigns different colours to them which is then interpolated to create a gradient within the triangle.

Lightning

Perhaps easily overlooked but an important aspect when setting up a 3D environment is the use of lighting. Three.js has an array of different lights built in which we have utilised in this project. The abstract class for light consist of colour and intensity, and the specific types of light comes with additional properties. Light primarily affects the illumination of two different materials, the meshphong material and meshlambert material. The meshlambert material is used for non-shiny surfaces and evaluated per-vertex, while the meshphong material (used in this project) is used for shiny materials and calculated per-pixel.

Ambient Light - a flat shade of color applied evenly over the whole scene and objects. Since it’s applied evenly, the position of this light cannot be changed, only its color. On its own it looks very flat and not much like a light at all, but can be useful when some parts of a scene cannot be reached by other lights.

Directional Light - shines from a specific direction and is positioned so far away that the light rays emitted are all parallel to each other. It works similarly to the sun and is good for emulating outdoor lighting. Although only the angle is important for the directional light, a position has to be set when creating a directional light in Three.js. That is because the angle is calculated based on the position of the directional light and its target. Unless specified, the target will be located at the origin.

Point Light - a light with a specific position on the scene and creates light in all directions similar to a light bulb. Color, intensity and distance can be controlled, where distance determines the range of the point light. If the distance is set to zero, the range is calculated as infinite.