Shear transformation in Computer graphics - my exploration continues...

In computer graphics, shear transformation skews an object in a particular direction, distorting its shape. The shear transformation can be expressed using matrices. This is commonly applied to 2D or 3D transformations.

The following screen recording shows my exploration of Shearing in freeCAD.

Here's the python script of this application...

import FreeCAD as App import FreeCADGui as Gui import Part from PySide2 import QtWidgets, QtCore class ShearingApp(QtWidgets.QWidget):     def __init__(self):         super().__init__()         self.initUI()         self.shear_matrix = App.Matrix()     def initUI(self):         self.setWindowTitle("Shearing Demo")         self.setGeometry(300, 200, 400, 200)         # Layout         layout = QtWidgets.QVBoxLayout(self)         # Create input sliders and labels for shear factors         self.shear_x_label = QtWidgets.QLabel("Shear X (Y-direction): 0.0", self)         self.shear_x_slider = QtWidgets.QSlider(QtCore.Qt.Horizontal, self)         self.shear_x_slider.setRange(-100, 100)         self.shear_x_slider.setValue(0)         self.shear_x_slider.valueChanged.connect(self.update_shear_x)         self.shear_y_label = QtWidgets.QLabel("Shear Y (X-direction): 0.0", self)         self.shear_y_slider = QtWidgets.QSlider(QtCore.Qt.Horizontal, self)         self.shear_y_slider.setRange(-100, 100)         self.shear_y_slider.setValue(0)         self.shear_y_slider.valueChanged.connect(self.update_shear_y)         # Apply Button         self.apply_btn = QtWidgets.QPushButton("Apply Shear", self)         self.apply_btn.clicked.connect(self.apply_shear)         # Add widgets to layout         layout.addWidget(self.shear_x_label)         layout.addWidget(self.shear_x_slider)         layout.addWidget(self.shear_y_label)         layout.addWidget(self.shear_y_slider)         layout.addWidget(self.apply_btn)         # Set layout         self.setLayout(layout)         # Initialize cube in FreeCAD         self.init_cube()     def init_cube(self):         self.doc = App.newDocument("ShearingDemo")         self.cube = self.doc.addObject("Part::Box", "Cube")         self.cube.Length = 10         self.cube.Width = 10         self.cube.Height = 10         self.doc.recompute()     def update_shear_x(self, value):         shear_value = value / 100.0         self.shear_x_label.setText(f"Shear X (Y-direction): {shear_value:.2f}")         self.shear_matrix.A12 = shear_value     def update_shear_y(self, value):         shear_value = value / 100.0         self.shear_y_label.setText(f"Shear Y (X-direction): {shear_value:.2f}")         self.shear_matrix.A21 = shear_value     def apply_shear(self):         if self.cube:             # Get the current shape             shape = self.cube.Shape             # Apply the shear matrix to the shape             new_shape = shape.transformGeometry(self.shear_matrix)             # Replace the current cube with the sheared one             new_cube = self.doc.addObject("Part::Feature", "ShearedCube")             new_cube.Shape = new_shape             # Delete the old cube             self.doc.removeObject(self.cube.Name)             # Update the cube reference and recompute             self.cube = new_cube             self.doc.recompute()             # Fit the view to see changes             Gui.SendMsgToActiveView("ViewFit") # Run the application within FreeCAD's GUI if __name__ == "__main__":     window = ShearingApp()     window.show()

---

1. Shear Transformation in 2D

A shear transformation in 2D modifies the coordinates of a point $(x, y)$ by adding a scaled version of one coordinate to the other.

General Formula

$$\begin{bmatrix} x' \\ y' \end{bmatrix} = \begin{bmatrix} 1 & sh_x \\ sh_y & 1 \end{bmatrix} \cdot \begin{bmatrix} x \\ y \end{bmatrix}$$

Where:

• $sh_x$: Shear factor along the x-axis.
• $sh_y$: Shear factor along the y-axis.

Expanded Form

$$x' = x + sh_x \cdot y$$ $$y' = y + sh_y \cdot x$$

Special Cases

1. Shearing along x-axis:

   $$\begin{bmatrix} 1 & sh_x \\ 0 & 1 \end{bmatrix}$$
   • $$x′=x+shx⋅yx' = x + sh_x \cdot y
   • $y' = y$ (unchanged)

2. Shearing along y-axis:

   $$\begin{bmatrix} 1 & 0 \\ sh_y & 1 \end{bmatrix}$$
   • $x' = x$ (unchanged)
   • $$y′=y+shy⋅xy' = y + sh_y \cdot x

---

2. Shear Transformation in 3D

In 3D graphics, shear transformation skews the object along any combination of the x, y, or z axes.

General Matrix

$$\begin{bmatrix} x' \\ y' \\ z' \end{bmatrix} = \begin{bmatrix} 1 & sh_{xy} & sh_{xz} \\ sh_{yx} & 1 & sh_{yz} \\ sh_{zx} & sh_{zy} & 1 \end{bmatrix} \cdot \begin{bmatrix} x \\ y \\ z \end{bmatrix}$$

Where:

• $sh_{xy}$: Shear in x-direction based on y.
• $sh_{xz}$: Shear in x-direction based on z.
• $sh_{yx}$: Shear in y-direction based on x, and so on.

Expanded Form

$$x' = x + sh_{xy} \cdot y + sh_{xz} \cdot z$$ $$y' = y + sh_{yx} \cdot x + sh_{yz} \cdot z$$ $$z' = z + sh_{zx} \cdot x + sh_{zy} \cdot y$$

---

3. Explanation

Shear as a Transformation

• Geometrical Meaning: A shear transformation skews the shape of an object such that it retains its parallelism (e.g., rectangles become parallelograms).
• Affine Transformation: Shearing is a linear affine transformation because it preserves straight lines and parallelism but not angles or lengths.

Practical Use

• In computer graphics, shear is used for:
  • Simulating motion (e.g., objects sliding or skewing).
  • Perspective effects.
  • Artistic transformations.

Homogeneous Coordinates

In homogeneous coordinates (used for combining multiple transformations like scaling, rotation, and translation), shear transformation for 2D is represented as:

$$\begin{bmatrix} 1 & sh_x & 0 \\ sh_y & 1 & 0 \\ 0 & 0 & 1 \end{bmatrix}$$

For 3D:

$$\begin{bmatrix} 1 & sh_{xy} & sh_{xz} & 0 \\ sh_{yx} & 1 & sh_{yz} & 0 \\ sh_{zx} & sh_{zy} & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}$$

These homogeneous matrices allow shear to be combined with other transformations in a single matrix multiplication.

---

4. Example

2D Shear Along x-axis

Given:

$$\begin{bmatrix} 1 & 2 \\ 0 & 1 \end{bmatrix}$$

And a point $P(3, 4)$:

$$\begin{bmatrix} x' \\ y' \end{bmatrix} = \begin{bmatrix} 1 & 2 \\ 0 & 1 \end{bmatrix} \cdot \begin{bmatrix} 3 \\ 4 \end{bmatrix} = \begin{bmatrix} 1 \cdot 3 + 2 \cdot 4 \\ 0 \cdot 3 + 1 \cdot 4 \end{bmatrix} = \begin{bmatrix} 11 \\ 4 \end{bmatrix}$$

Result: $P'(11, 4)$, indicating the point was sheared horizontally.