mat3
Constructs or converts a 3x3 matrix (mat3) from various inputs (like a mat4, multiple vec3s, or a single float), essential for correctly transforming 3D normals and performing 2D affine transformations.
Core Advantages
It abstracts the complex logic of creating a 3x3 matrix, especially the `normalMatrix` from a model-view matrix, ensuring correct lighting results on non-uniformly scaled objects. It also simplifies 2D transformations like rotating, scaling, or shearing UV coordinates within the shader.
Common Uses
Creating a `normalMatrix` from a `modelViewMatrix` (mat4) to correctly transform normals
Building a 2D affine transformation matrix to rotate, scale, or shear UV coordinates
Applying a Color Correction Matrix for color grading effects (e.g., sepia, grayscale)
Down-casting a `mat4` to a `mat3` by extracting its top-left 3x3 portion
How to adjust
Its visual effect is dictated by its inputs. If you build it from static values to create a color correction matrix (e.g., for a sepia tone), the image will instantly adopt that fixed style. If you dynamically change the input vectors of the matrix (e.g., using a `timer` node to alter one color channel's contribution), you can create smooth visual transitions, like an image fading from full color to a stylized look.
Code Examples
1// Create the normal matrix from the model-view matrix, crucial for correct lighting
2const normalMatrix = mat3( modelViewMatrix ).inverse().transpose();
3
4// Apply it to the original normal vector
5const transformedNormal = normalMatrix.mul( normalLocal );