@woosh/meep-engine 2.33.2 → 2.33.6

package/engine/asset/loaders/GLTFAssetLoader.js

@@ -23,6 +23,7 @@ import { convert_three_object_to_micron } from "../../graphics/micron/convert_th
 import { HashSet } from "../../../core/collection/HashSet.js";
 import { computeGeometryHash } from "./geometry/geometry/computeGeometryHash.js";
 import { computeGeometryEquality } from "./geometry/geometry/computeGeometryEquality.js";
+import { traverseThreeObject } from "../../graphics/ecs/highlight/renderer/traverseThreeObject.js";
 
 const animationOptimizer = new AnimationOptimizer();
 const materialCache = StaticMaterialCache.Global;
@@ -287,9 +288,7 @@ export class GLTFAssetLoader extends AssetLoader {
                 root = meshes[0];
             }
 
-            root.traverse(o => {
-                this.__prepareObjectMaterial(o);
-            });
+            traverseThreeObject(root, this.__prepareObjectMaterial, this);
 
             const root_transform = new Transform();
 
@@ -319,6 +318,7 @@ export class GLTFAssetLoader extends AssetLoader {
 
             await async_traverse(root, process_object);
 
+
             // compute object bounding sphere
             root.boundingSphere = computeObjectBoundingSphere(root);
 

package/engine/asset/loaders/material/TextureAttachmensByMaterialType.js

@@ -2,6 +2,7 @@ import { TextureAttachment } from "./TextureAttachment.js";
 
 const taDiffuse = new TextureAttachment({
     name: 'diffuse',
+    uv_index: 0,
     read(m) {
         return m.map;
     },
@@ -12,6 +13,7 @@ const taDiffuse = new TextureAttachment({
 
 const taAlphaMap = new TextureAttachment({
     name: "alpha",
+    uv_index: 0,
     read(m) {
         return m.alphaMap;
     },
@@ -22,6 +24,7 @@ const taAlphaMap = new TextureAttachment({
 
 const taDisplacement = new TextureAttachment({
     name: "displacement",
+    uv_index: 0,
     read(m) {
         return m.displacementMap;
     },
@@ -45,6 +48,7 @@ export const TextureAttachmentsByMaterialType = {
         taAlphaMap,
         new TextureAttachment({
             name: "light",
+            uv_index: 1,
             read(m) {
                 return m.lightMap;
             },
@@ -54,6 +58,7 @@ export const TextureAttachmentsByMaterialType = {
         }),
         new TextureAttachment({
             name: "ao",
+            uv_index: 1,
             read(m) {
                 return m.aoMap;
             },
@@ -63,6 +68,7 @@ export const TextureAttachmentsByMaterialType = {
         }),
         new TextureAttachment({
             name: "emissive",
+            uv_index: 0,
             read(m) {
                 return m.emissiveMap;
             },
@@ -72,6 +78,7 @@ export const TextureAttachmentsByMaterialType = {
         }),
         new TextureAttachment({
             name: "bump",
+            uv_index: 0,
             read(m) {
                 return m.bumpMap;
             },
@@ -81,6 +88,7 @@ export const TextureAttachmentsByMaterialType = {
         }),
         new TextureAttachment({
             name: "normal",
+            uv_index: 0,
             read(m) {
                 return m.normalMap;
             },
@@ -91,6 +99,7 @@ export const TextureAttachmentsByMaterialType = {
         taDisplacement,
         new TextureAttachment({
             name: "roughness",
+            uv_index: 0,
             read(m) {
                 return m.roughnessMap;
             },
@@ -100,6 +109,7 @@ export const TextureAttachmentsByMaterialType = {
         }),
         new TextureAttachment({
             name: "metalness",
+            uv_index: 0,
             read(m) {
                 return m.metalnessMap;
             },
@@ -107,9 +117,9 @@ export const TextureAttachmentsByMaterialType = {
                 m.metalnessMap = t;
             }
         }),
-        taAlphaMap,
         new TextureAttachment({
             name: "environment",
+            uv_index: 0,
             read(m) {
                 return m.envMap;
             },

package/engine/asset/loaders/material/TextureAttachment.js

@@ -4,11 +4,22 @@ export class TextureAttachment {
      * @param {function(T):Texture} read
      * @param {function(T, Texture)} write
      * @param {string} [name]
+     * @param {number} [uv_index]
      */
-    constructor({ read, write, name }) {
+    constructor({ read, write, name, uv_index = 0 }) {
+        /**
+         *
+         * @type {string}
+         */
         this.name = name;
 
         this.read = read;
         this.write = write;
+
+        /**
+         *
+         * @type {number}
+         */
+        this.uv_index = uv_index;
     }
 }

package/engine/asset/loaders/material/bitmap2sampler_gl.js

@@ -0,0 +1,19 @@
+/**
+ *
+ * @param {WebGL2RenderingContext} gl
+ * @param {Sampler2D} sampler
+ * @param {ImageBitmap} bitmap
+ */
+export function bitmap2sampler_gl(gl, sampler, bitmap) {
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, bitmap);
+    gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
+
+    const w = sampler.width;
+    const h = sampler.height;
+
+    if (sampler.itemSize !== 4) {
+        throw new Error(`Expected sampler.itemSize to be 4, instead was '${sampler.itemSize}'`);
+    }
+
+    gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, sampler.data);
+}

package/engine/asset/loaders/material/computeImageBitmapEquality.js

@@ -1,6 +1,7 @@
 import { Sampler2D } from "../../../graphics/texture/sampler/Sampler2D.js";
 import { assert } from "../../../../core/assert.js";
 import { isArrayEqualStrict } from "../../../../core/collection/array/isArrayEqualStrict.js";
+import { bitmap2sampler_gl } from "./bitmap2sampler_gl.js";
 
 /**
  *
@@ -8,23 +9,6 @@ import { isArrayEqualStrict } from "../../../../core/collection/array/isArrayEqu
  */
 const sampler_cache = new WeakMap();
 
-/**
- *
- * @param {WebGL2RenderingContext} gl
- * @param {Sampler2D} sampler
- * @param {ImageBitmap} bitmap
- */
-function bitmap2sampler_gl(gl, sampler, bitmap) {
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, bitmap);
-    gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
-
-    const data = new Uint8Array(sampler.width * sampler.height * 4);
-
-    gl.readPixels(0, 0, sampler.width, sampler.height, gl.RGBA, gl.UNSIGNED_BYTE, data);
-
-    sampler.data = data;
-}
-
 /**
  *
  * @param {ImageBitmap} bitmap
@@ -45,7 +29,7 @@ function obtainSampler(bitmap, ctx) {
     const width = bitmap.width;
     const height = bitmap.height;
 
-    const sampler = new Sampler2D(null, 4, width, height);
+    const sampler = Sampler2D.uint8(4, width, height);
 
     bitmap2sampler_gl(ctx, sampler, bitmap);
 
@@ -75,15 +59,19 @@ function obtainCanvasCtx(width, height) {
 
     if (ctx_ref === null || (gl = ctx_ref.deref()) === undefined) {
         const canvas = document.createElement('canvas');
+
         gl = canvas.getContext("webgl2");
         gl.activeTexture(gl.TEXTURE0);
+
         const texture = gl.createTexture();
+
         gl.bindTexture(gl.TEXTURE_2D, texture);
+
         const framebuffer = gl.createFramebuffer();
+
         gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
         gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
 
-
         ctx_ref = new WeakRef(gl);
     }
 

package/engine/asset/loaders/material/computeTextureEquality.js

@@ -76,7 +76,7 @@ export function computeTextureEquality(a, b) {
  * @param {Image|[]} b
  * @returns {boolean}
  */
-function textureImagesEqual(a, b) {
+export function textureImagesEqual(a, b) {
     if (a === b) {
         return true;
     }

package/engine/asset/loaders/material/computeTextureHash.js

@@ -1,4 +1,4 @@
-import { computeHashFloat, computeHashIntegerArray} from "../../../../core/math/MathUtils.js";
+import { computeHashFloat, computeHashIntegerArray } from "../../../../core/math/MathUtils.js";
 import { max2 } from "../../../../core/math/max2.js";
 import { computeImageBitmapHash } from "./computeImageBitmapHash.js";
 
@@ -19,7 +19,7 @@ function vector2Hash(v) {
  */
 const data_cache = new WeakMap();
 
-function computeImageDataHash(image) {
+export function computeImageDataHash(image) {
     const cached_value = data_cache.get(image);
 
     if (cached_value !== undefined) {
@@ -32,6 +32,19 @@ function computeImageDataHash(image) {
         result = computeImageBitmapHash(image);
     }
 
+    let width = 0;
+    let height = 0;
+
+    if (typeof image.width === "number") {
+        width = image.width;
+    }
+
+    if (typeof image.height === "number") {
+        height = image.height;
+    }
+
+    result = result ^ (((width & 0xFFFF) << 16) | (height & 0xFFFF));
+
     // cache value
     data_cache.set(image, result);
 
@@ -44,23 +57,12 @@ function computeImageDataHash(image) {
  * @return {number}
  */
 function computeSpecificHash(texture) {
-    let width = 0;
-    let height = 0;
-
     let dataHash = 0;
 
     if (texture.image !== null && texture.image !== undefined) {
 
         const image = texture.image;
 
-        if (typeof image.width === "number") {
-            width = image.width;
-        }
-
-        if (typeof image.height === "number") {
-            height = image.height;
-        }
-
         dataHash = computeImageDataHash(image);
 
     }
@@ -94,7 +96,7 @@ function computeSpecificHash(texture) {
 
     }
 
-    return computeHashIntegerArray(width, height, dataHash);
+    return dataHash;
 }
 
 /**

package/engine/asset/loaders/material/traverseMaterialTextures.js

@@ -3,7 +3,7 @@ import { TextureAttachmentsByMaterialType } from "./TextureAttachmensByMaterialT
 /**
  *
  * @param {Material} material
- * @param {function(Texture)} callback
+ * @param {function(THREE.Texture, TextureAttachment)} callback
  * @param {*} [thisArg]
  */
 export function traverseMaterialTextures(material, callback, thisArg) {
@@ -30,7 +30,7 @@ export function traverseMaterialTextures(material, callback, thisArg) {
                 continue;
             }
 
-            callback.call(thisArg, texture);
+            callback.call(thisArg, texture, attachment);
 
         }
     }

package/engine/ecs/animation/OneBoneSurfaceAlignmentSolver.js

@@ -3,7 +3,7 @@ import { inverseLerp } from "../../../core/math/inverseLerp.js";
 import { IKSolver } from "./IKSolver.js";
 import { findSkeletonBoneByType } from "../../graphics/ecs/mesh/SkeletonUtils.js";
 import Quaternion from "../../../core/geom/Quaternion.js";
-import Vector3, { v3_dot, v3Length_i } from "../../../core/geom/Vector3.js";
+import Vector3, { v3_dot, v3_length } from "../../../core/geom/Vector3.js";
 import { SurfacePoint3 } from "../../../core/geom/3d/SurfacePoint3.js";
 import { v3_computeOffsetVector } from "./IKMath.js";
 
@@ -127,7 +127,7 @@ export class OneBoneSurfaceAlignmentSolver extends IKSolver {
         //check if current effector position is above the contact point
         const dot_contact_side = v3_dot(directionX, directionY, directionZ, delta_contact_c_x, delta_contact_c_y, delta_contact_c_z);
 
-        const delta_contact_c_length = v3Length_i(delta_contact_c_x, delta_contact_c_y, delta_contact_c_z);
+        const delta_contact_c_length = v3_length(delta_contact_c_x, delta_contact_c_y, delta_contact_c_z);
 
         let influence;
 

package/engine/ecs/animation/TwoBoneInverseKinematicsSolver.js

@@ -1,5 +1,5 @@
 import { assert } from "../../../core/assert.js";
-import Vector3, { v3_dot, v3Length_i } from "../../../core/geom/Vector3.js";
+import Vector3, { v3_dot, v3_length } from "../../../core/geom/Vector3.js";
 import { clamp } from "../../../core/math/clamp.js";
 import { inverseLerp } from "../../../core/math/inverseLerp.js";
 import Quaternion from "../../../core/geom/Quaternion.js";
@@ -41,7 +41,7 @@ function computeInteriorAngle(a, b, c) {
     const d_ab_z = a.z - b.z;
 
     //normalize AB delta vector
-    const d_ab_length = v3Length_i(d_ab_x, d_ab_y, d_ab_z);
+    const d_ab_length = v3_length(d_ab_x, d_ab_y, d_ab_z);
 
     const nd_ab_x = d_ab_x / d_ab_length;
     const nd_ab_y = d_ab_y / d_ab_length;
@@ -53,7 +53,7 @@ function computeInteriorAngle(a, b, c) {
     const d_cb_z = c.z - b.z;
 
     //normalize CB delta vector
-    const d_cb_length = v3Length_i(d_cb_x, d_cb_y, d_cb_z);
+    const d_cb_length = v3_length(d_cb_x, d_cb_y, d_cb_z);
 
     const nd_cb_x = d_cb_x / d_cb_length;
     const nd_cb_y = d_cb_y / d_cb_length;
@@ -266,7 +266,7 @@ export class TwoBoneInverseKinematicsSolver extends IKSolver {
         //check if current effector position is above the contact point
         const dot_contact_side = v3_dot(directionX, directionY, directionZ, delta_contact_c_x, delta_contact_c_y, delta_contact_c_z);
 
-        const delta_contact_c_length = v3Length_i(delta_contact_c_x, delta_contact_c_y, delta_contact_c_z);
+        const delta_contact_c_length = v3_length(delta_contact_c_x, delta_contact_c_y, delta_contact_c_z);
 
         let influence;
 

package/engine/graphics/GraphicsEngine.d.ts

@@ -1,4 +1,4 @@
-import {PerspectiveCamera, RenderTarget, Scene, WebGLRenderer} from "three";
+import {PerspectiveCamera, Scene, WebGLRenderer, WebGLRenderTarget} from "three";
 import {RenderLayerManager} from "./render/layers/RenderLayerManager";
 import Vector3 from "../../core/geom/Vector3";
 import Vector2 from "../../core/geom/Vector2";
@@ -17,7 +17,7 @@ export class GraphicsEngine {
     public needDraw: boolean
     public autoDraw: boolean
 
-    render(renderTarget?: RenderTarget): void
+    render(renderTarget?: WebGLRenderTarget): void
 
     normalizeViewportPoint(input: Vector3 | Vector2, result: Vector2 | Vector3): void
 

package/engine/graphics/GraphicsEngine.js

@@ -4,14 +4,11 @@
 
 
 import {
-    CubeTextureLoader,
     Group,
     LinearEncoding,
     NoToneMapping,
-    PMREMGenerator,
     Raycaster as ThreeRaycaster,
     Scene as ThreeScene,
-    sRGBEncoding,
     Vector3 as ThreeVector3,
     VSMShadowMap,
     WebGLRenderer,
@@ -36,27 +33,13 @@ import { renderTextureToScreenQuad } from "./render/utils/renderTextureToScreenQ
 import { globalMetrics } from "../metrics/GlobalMetrics.js";
 import { MetricsCategory } from "../metrics/MetricsCategory.js";
 import Vector1 from "../../core/geom/Vector1.js";
-import { noop } from "../../core/function/Functions.js";
 import { NormalFrameBuffer } from "./render/buffer/buffers/NormalFrameBuffer.js";
 import { MaterialManager } from "./material/manager/MaterialManager.js";
 import { CoalesceTextures } from "./material/manager/compilers/CoalesceTextures.js";
 import { ShadowMapRenderer } from "./shadows/ShadowMapRenderer.js";
 import { CameraViewManager } from "./render/view/CameraViewManager.js";
 import { StandardFrameBuffers } from "./StandardFrameBuffers.js";
-
-/**
- *
- * @param {String} path
- * @param {String} format
- * @returns {String[]}
- */
-export function buildCubeURLs(path, format) {
-    return [
-        path + "posx" + format, path + "negx" + format,
-        path + "posy" + format, path + "negy" + format,
-        path + "posz" + format, path + "negz" + format
-    ];
-}
+import { load_environment_map } from "./texture/cubemap/load_environment_map.js";
 
 /**
  *
@@ -259,54 +242,21 @@ GraphicsEngine.prototype.getRenderer = function () {
 
 /**
  *
- * @param {string[]} paths
- * @return {Promise<THREE.CubeTexture>}
- */
-function load_cube_texture(paths) {
-    const cubeTextureLoader = new CubeTextureLoader();
-    return new Promise((resolve, reject) => {
-
-        cubeTextureLoader.load(
-            paths,
-            texture => {
-
-
-                resolve(texture);
-            },
-            noop,
-            reject
-        );
-    });
-}
-
-/**
- *
- * @param {string[]} paths URLs to faces of the cubemap
- * @returns {Promise<void>}
+ * @param {string[]|string} paths URLs to faces of the cubemap
+ * @returns {Promise<Texture>}
  */
 GraphicsEngine.prototype.loadEnvironmentMap = async function (paths) {
 
-    /**
-     *
-     * @type {THREE.CubeTexture}
-     */
-    const cube_texture = await load_cube_texture(paths);
-
-    cube_texture.encoding = sRGBEncoding;
-
-    // generate pre-filtered cubemap
-    const pmremGenerator = new PMREMGenerator(this.renderer);
-    pmremGenerator.compileCubemapShader();
-
-    const cube_rt = pmremGenerator.fromCubemap(cube_texture);
-
-    // cleanup
-    cube_texture.dispose();
-    pmremGenerator.dispose();
+    const { filtered } = await load_environment_map({
+        path: paths,
+        renderer: this.renderer,
+        original: false,
+        filtered: true
+    });
 
-    // assign environment
-    this.scene.environment = cube_rt.texture;
+    this.scene.environment = filtered;
 
+    return filtered;
 }
 
 GraphicsEngine.prototype.updateSize = function () {
@@ -618,11 +568,19 @@ GraphicsEngine.prototype.renderOpaque = function () {
  * Renders assets that (may) contain transparent fragments
  */
 GraphicsEngine.prototype.renderTransparent = function () {
+    const scene = this.scene;
+
+    const _background = scene.background;
+    scene.background = null;
+
     this.prepareRenderPass(RenderPassType.Transparent);
 
     const renderer = this.renderer;
 
-    renderer.render(this.scene, this.camera);
+    renderer.render(scene, this.camera);
+
+    // restore background
+    scene.background = _background;
 
     // TODO render transparent objects into a buffer, to be able to apply post-fx
 };

package/engine/graphics/filter/FlipArrayInPlace.js

@@ -0,0 +1,25 @@
+/**
+ * @param {Uint8Array} input
+ * @param {number} width
+ * @param {number} height
+ * @param {number} channel_count
+ */
+export function flipArrayInPlace(input, width, height, channel_count = 4) {
+    const rowLength = width * channel_count;
+    let t, x0, x1;
+    let i = 0;
+    const l = height >> 1;
+
+    for (; i < l; i++) {
+        //swap lines
+        const k = (height - i - 1) * rowLength;
+        const m = i * rowLength;
+        for (let j = 0; j < rowLength; j++) {
+            x0 = m + j;
+            x1 = k + j;
+            t = input[x0];
+            input[x0] = input[x1];
+            input[x1] = t;
+        }
+    }
+}

package/engine/graphics/filter/FlipArrayViaCanvas.js

@@ -0,0 +1,13 @@
+function flipArrayViaCanvas(input, width, height) {
+    const canvas = document.createElement("canvas");
+    const c = canvas.getContext('2d');
+    const imageData = c.createImageData(width, height);
+    imageData.data.set(input);
+    c.putImageData(imageData, 0, 0);
+    c.translate(0, height);
+    c.scale(1, -1);
+    c.drawImage(canvas, 0, 0);
+    const imgd = c.getImageData(0, 0, width, height);
+
+    return imgd.data;
+}

package/engine/graphics/filter/ImageFilter.js

@@ -3,59 +3,25 @@
  */
 
 
-import {
-    LinearFilter,
-    Mesh,
-    OrthographicCamera,
-    PlaneBufferGeometry,
-    Scene,
-    ShaderMaterial,
-    WebGLRenderTarget
-} from 'three';
-
-export function flipArrayInPlace(input, width, height) {
-    const rowLength = width * 4;
-    let t, x0, x1;
-    let i = 0;
-    const l = height >> 1;
-    for (; i < l; i++) {
-        //swap lines
-        const k = (height - i - 1) * rowLength;
-        const m = i * rowLength;
-        for (let j = 0; j < rowLength; j++) {
-            x0 = m + j;
-            x1 = k + j;
-            t = input[x0];
-            input[x0] = input[x1];
-            input[x1] = t;
-        }
-    }
-}
-
-function flipArrayViaCanvas(input, width, height) {
-    const canvas = document.createElement("canvas");
-    const c = canvas.getContext('2d');
-    const imageData = c.createImageData(width, height);
-    imageData.data.set(input);
-    c.putImageData(imageData, 0, 0);
-    c.translate(0, height);
-    c.scale(1, -1);
-    c.drawImage(canvas, 0, 0);
-    const imgd = c.getImageData(0, 0, width, height);
-
-    return imgd.data;
-}
+import { LinearFilter, Mesh, OrthographicCamera, Scene, ShaderMaterial, WebGLRenderTarget } from 'three';
+import { FULL_SCREEN_TRIANGLE_GEOMETRY } from "../geometry/FULL_SCREEN_TRIANGLE_GEOMETRY.js";
 
 /**
  *
  * @param {WebGLRenderer} renderer
  * @param {number} width
  * @param {number} height
- * @param processShader
+ * @param {{vertexShader:string,fragmentShader:string, uniforms?:Object, defines?:Object}} processShader
  * @param {Uint8Array} [destination]
  * @return {{array: Uint8Array, renderer: WebGLRenderer}}
  */
-function processTexture(renderer, width, height, processShader, destination) {
+function processTexture(
+    renderer,
+    width,
+    height,
+    processShader,
+    destination
+) {
     if (destination === undefined) {
         destination = new Uint8Array(width * height * 4);
     }
@@ -72,9 +38,10 @@ function processTexture(renderer, width, height, processShader, destination) {
     material.lights = false;
     material.fog = false;
 
-    const quad = new Mesh(new PlaneBufferGeometry(2, 2), material);
+    const quad = new Mesh(FULL_SCREEN_TRIANGLE_GEOMETRY, material);
 
     scene.add(quad);
+
     //render
     const renderTargetOptions = {
         generateMipmaps: false,
@@ -82,28 +49,30 @@ function processTexture(renderer, width, height, processShader, destination) {
         stencilBuffer: false,
         depthBuffer: false
     };
+
     const renderTarget = new WebGLRenderTarget(width, height, renderTargetOptions);
 
+    const __rt = renderer.getRenderTarget(); // remember old renderer state
+
     renderer.setRenderTarget(renderTarget);
 
     renderer.render(scene, camera);
 
     const gl = renderer.getContext();
+
     //void readPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, ArrayBufferView? pixels)
     gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, destination);
 
-    renderer.setRenderTarget(null);
+    // restore renderer state
+    renderer.setRenderTarget(__rt);
 
-    //reorder lines in the buffer to make Y axis match
-
-    //uint8Array = flipArrayViaCanvas(uint8Array, width, height);
-    //
+    // cleanup resources
     renderTarget.dispose();
     material.dispose();
+
     return {
         array: destination,
         graphics: renderer
-        //renderTarget: renderTarget
     };
 }
 

package/engine/graphics/geometry/bvh/buffered/BVHGeometryRaycaster.js

@@ -1,4 +1,4 @@
-import Vector3, { v3Length_i } from "../../../../../core/geom/Vector3.js";
+import Vector3, { v3_length } from "../../../../../core/geom/Vector3.js";
 
 import { Vector3 as ThreeVector3 } from 'three';
 import { rayTriangleIntersection } from "../../../../../core/geom/GeometryMath.js";
@@ -60,7 +60,7 @@ function bindGeometryFaceNormal(indices, normals, index) {
     const nsZ = (naZ + nbZ + ncZ);
 
     //normalize
-    const l = v3Length_i(nsX, nsY, nsZ);
+    const l = v3_length(nsX, nsY, nsZ);
     const m = 1 / l;
 
     const nx = nsX * m;