GL-Matrix Mat4 Snippets
A Visual Studio Code extension providing code snippets for the gl-matrix library, specifically for the mat4 module. This extension is designed to speed up your development by offering ready-to-use snippets for common matrix operations.
Features
- Snippets for creating, manipulating, and transforming 4x4 matrices (
mat4 ) using the gl-matrix library.
- Supports JavaScript and TypeScript.
Usage
- Install the extension.
- Open a JavaScript or TypeScript file.
- Type a snippet prefix (e.g.,
mgl.mat4.create ) and press Tab to insert the snippet.
Snippets
Prefix |
Description |
Example Usage |
mgl.mat4.create |
Creates a new identity matrix. |
mat4.create(); |
mgl.mat4.clone |
Clones an existing matrix. |
mat4.clone(sourceMatrix); |
mgl.mat4.copy |
Copies values from one matrix to another. |
mat4.copy(out, sourceMatrix); |
mgl.mat4.identity |
Sets a matrix to the identity matrix. |
mat4.identity(out); |
mgl.mat4.transpose |
Transposes a matrix. |
mat4.transpose(out, sourceMatrix); |
mgl.mat4.multiply |
Multiplies two matrices. |
mat4.multiply(out, matrixA, matrixB); |
mgl.mat4.translate |
Translates a matrix by a given vector. |
mat4.translate(out, matrix, [x, y, z]); |
mgl.mat4.scale |
Scales a matrix by a given vector. |
mat4.scale(out, matrix, [x, y, z]); |
mgl.mat4.rotate |
Rotates a matrix by an angle around an axis. |
mat4.rotate(out, matrix, angle, [x, y, z]); |
mgl.mat4.perspective |
Creates a perspective projection matrix. |
mat4.perspective(out, fovy, aspect, near, far); |
mgl.mat4.lookAt |
Creates a look-at matrix. |
mat4.lookAt(out, [eyeX, eyeY, eyeZ], [centerX, centerY, centerZ], [upX, upY, upZ]); |
Examples
Create an Identity Matrix
Type mgl.mat4.create and press Tab :
const matrix = mat4.create();
Clone a Matrix
Type mgl.mat4.clone and press Tab :
const clonedMatrix = mat4.clone(sourceMatrix);
Multiply Two Matrices
Type mgl.mat4.multiply and press Tab :
mat4.multiply(out, matrixA, matrixB);
Create a Perspective Projection Matrix
Type mgl.mat4.perspective and press Tab :
mat4.perspective(out, fovy, aspect, near, far);
Installation
- Clone the repository:
git clone https://github.com/mpotulom28/webgl-snippets.git
- Open the folder in VS Code.
- Run
npm install to install dependencies.
- Run
vsce package to package the extension.
- Install the
.vsix file in VS Code.
License
MIT
| |