glsl-rotate

npm version stability-frozen npm minzipped size dependencies types Conventional Commits styled with prettier linted with eslint license

GLSL rotation functions with matrices: 2D and 3D (with X/Y/Z convenience functions) available both as ES modules strings and as GLSL files for use with glslify.

paypal coinbase twitter

Installation

npm install glsl-rotate

Usage

ESM

import * as glslRotate from "glsl-rotate";
import * as glslConstants from "glsl-constants";

const shader = /* glsl */ `
${glslRotate.ROTATE}
${glslRotate.ROTATE_X}
${glslRotate.ROTATE_Y}
${glslRotate.ROTATE_Z}

${glslConstants.HALF_PI}

void main() {
  // ...
  vec2 p2d = vec2(1.0, 0.0);
  vec3 p3d = vec3(1.0, 0.0, 0.0);

  // 2d rotation
  p2d = rotate(p2d, HALF_PI);

  // 3d rotation
  // arbitrary axis
  vec3 axis = vec3(1.0, 0.0, 0.0);
  vec3 p3dA = rotate(p3d, axis, HALF_PI);

  // X/Y/Z axis
  vec3 p3dX = rotateX(p3d, HALF_PI);
  vec3 p3dY = rotateY(p3d, HALF_PI);
  vec3 p3dZ = rotateZ(p3d, HALF_PI);
}`;

glslify

#pragma glslify: rotate = require(glsl-rotate/rotate)
#pragma glslify: rotateX = require(glsl-rotate/rotateX)
#pragma glslify: rotateY = require(glsl-rotate/rotateY)
#pragma glslify: rotateZ = require(glsl-rotate/rotateZ)

#pragma glslify: HALF_PI = require(glsl-constants/HALF_PI)

void main() {
  vec2 p2d = vec2(1.0, 0.0);
  vec3 p3d = vec3(1.0, 0.0, 0.0);

  // 2d rotation
  p2d = rotate(p2d, HALF_PI);

  // 3d rotation
  // arbitrary axis
  vec3 axis = vec3(1.0, 0.0, 0.0);
  vec3 p3dA = rotate(p3d, axis, HALF_PI);

  // X/Y/Z axis
  vec3 p3dX = rotateX(p3d, HALF_PI);
  vec3 p3dY = rotateY(p3d, HALF_PI);
  vec3 p3dZ = rotateZ(p3d, HALF_PI);
}

License

MIT. See license file.