@maptalks/tbn-packer NPM

tbn-packer

Pack tangent and normal data into a quaternion, a useful tech published by crytek to compress data push to GPU.

This is ported from C++ implementation of google filament.

Usage

import { packTangentFrame, unpackQuaternion } from "@maptalks/tbn-packer";
const tangent = [1, 0, 0, 1];
const normal = [0, 1, 0];

const q = [];
//pack tangent and normal to a quaternion
packTangentFrame(q, normal, tangent);
const n = [], t = [];
//unpack a given quaternion to a normal and tangent.
unpackQuaternion(q, n, t);

GLSL Code to unpack

From google filament:

/**
 * Extracts the normal vector of the tangent frame encoded in the specified quaternion.
 */
void toTangentFrame(const highp vec4 q, out highp vec3 n) {
    n = vec3( 0.0,  0.0,  1.0) +
        vec3( 2.0, -2.0, -2.0) * q.x * q.zwx +
        vec3( 2.0,  2.0, -2.0) * q.y * q.wzy;
}

/**
 * Extracts the normal and tangent vectors of the tangent frame encoded in the
 * specified quaternion.
 */
void toTangentFrame(const highp vec4 q, out highp vec3 n, out highp vec3 t) {
    toTangentFrame(q, n);
    t = vec3( 1.0,  0.0,  0.0) +
        vec3(-2.0,  2.0, -2.0) * q.y * q.yxw +
        vec3(-2.0,  2.0,  2.0) * q.z * q.zwx;
}