Víctor Melero, Chema Campillo

Published in 3D, Three.js · · 3 min read

Proportional Editing

In the 3D world, it is not only about rendering models (as seen in Hello, (3D) World!), but also about modifying them. However, it can be difficult to make fine adjustments without causing visible artifacts in the model. Proportional Editing, as named in Blender, is a useful, powerful, yet simple tool for this purpose.

Editing?

Editing a mesh involves modifying the position of the vertices. For example, if the classic 3D cube is to be transformed into a trapezoidal prism, the four top vertices must be moved inwards until the desired shape is achieved. Of course, in this simple scenario, it can be done manually, but for more complex cases, such as creating a complex landscape, this approach is not enough.

Proportional?

For the purpose of this discussion, let’s consider the objective is to create a smooth mountain starting from a plane. A naive approach would be to move up a set of vertices by some fixed amount, but that would produce a plateau with very steep edges. Ideally, the mountain should have a peak, and then, the farther a vertex is from that peak, the less it is moved up, producing a smooth and continuous shape.

This is where the concept of proportionality comes into the equation: some vertices (the peak of the mountain in this case) are transformed while also affecting their neighbors, although the farther away they are, the less they are affected. One could say that the intensity with which the transformation is applied to a vertex is proportional to the distance between the transformed vertices and itself.

Proportional Editing

In proportional editing, the radius of influence that affects nearby vertices can be increased or decreased. In addition, the rate at which the intensity decreases with distance (falloff) can also be changed, determining the final curved profile of the deformation. Therefore, the final shape of the deformation can be configured by modifying the falloff, intensity and range.

In the following example, a gaussian falloff is used to obtain smooth shapes. Furthermore, its range and intensity can be set. Additionally, the wireframe can be enabled to see how the mesh vertices are stretched.

Expanding Proportional Editing

This technique allows to transform one or more vertices and adapt its neighbors ensuring a smooth deformation. However, it is possible that not all vertices may be required to move in the same way. One might, for instance, wish to stamp a specific shape and make the surroundings smoothly adapt to it.

One possible initial approach would be to simply take the transformation of the closest transformed vertex for each vertex. However, this would produce visually unappealing steps along the mesh whenever a different vertex is selected as the closest one. A better solution would be to take the transformation of all the closest transformed vertices, with priority given to those that are closer.

This Adaptive Proportional Editing extends the already useful proportional editing technique by using the different transformations of each of the transformed vertices and applying them to the surrounding vertices using a weighted average, giving more weight to the transformations of the vertices that are closer.

In the following example, part of the sine function is applied to a row of vertices. You can see the result without and with the adaptive proportional editing applied.

Conclusion

It is evident that Proportional Editing is a versatile and robust tool for fast and straightforward deformation. Furthermore, its intrinsic simplicity also allows for easy expansion to accommodate more sophisticated behaviors. It is undoubtedly a valuable addition to the Three.js toolset.