three-stdlib 2.15.0 → 2.15.2

package/misc/WebGL.mjs

@@ -0,0 +1,74 @@
+let webGLAvailable, webGL2Available;
+function isWebGLAvailable() {
+  var _a;
+  if (webGLAvailable !== void 0)
+    return webGLAvailable;
+  try {
+    let gl;
+    const canvas = document.createElement("canvas");
+    webGLAvailable = !!(window.WebGLRenderingContext && (gl = canvas.getContext("webgl")));
+    if (gl)
+      (_a = gl.getExtension("WEBGL_lose_context")) == null ? void 0 : _a.loseContext();
+    return webGLAvailable;
+  } catch (e) {
+    return webGLAvailable = false;
+  }
+}
+function isWebGL2Available() {
+  var _a;
+  if (webGL2Available !== void 0)
+    return webGL2Available;
+  try {
+    let gl;
+    const canvas = document.createElement("canvas");
+    webGL2Available = !!(window.WebGL2RenderingContext && (gl = canvas.getContext("webgl2")));
+    if (gl)
+      (_a = gl.getExtension("WEBGL_lose_context")) == null ? void 0 : _a.loseContext();
+    return webGL2Available;
+  } catch (e) {
+    return webGL2Available = false;
+  }
+}
+function getWebGLErrorMessage() {
+  return this.getErrorMessage(1);
+}
+function getWebGL2ErrorMessage() {
+  return this.getErrorMessage(2);
+}
+function getErrorMessage(version) {
+  const names = {
+    1: "WebGL",
+    2: "WebGL 2"
+  };
+  const contexts = {
+    1: window.WebGLRenderingContext,
+    2: window.WebGL2RenderingContext
+  };
+  const element = document.createElement("div");
+  element.id = "webglmessage";
+  element.style.fontFamily = "monospace";
+  element.style.fontSize = "13px";
+  element.style.fontWeight = "normal";
+  element.style.textAlign = "center";
+  element.style.background = "#fff";
+  element.style.color = "#000";
+  element.style.padding = "1.5em";
+  element.style.width = "400px";
+  element.style.margin = "5em auto 0";
+  let message = 'Your $0 does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">$1</a>';
+  if (contexts[version]) {
+    message = message.replace("$0", "graphics card");
+  } else {
+    message = message.replace("$0", "browser");
+  }
+  message = message.replace("$1", names[version]);
+  element.innerHTML = message;
+  return element;
+}
+export {
+  getErrorMessage,
+  getWebGL2ErrorMessage,
+  getWebGLErrorMessage,
+  isWebGL2Available,
+  isWebGLAvailable
+};

package/modifiers/CurveModifier.js

@@ -1,40 +1,24 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { DataTexture, RGBAFormat, FloatType, RepeatWrapping, NearestFilter, Mesh, InstancedMesh, Matrix4, DynamicDrawUsage } from 'three';
-
-// Original src: https://github.com/zz85/threejs-path-flow
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const THREE = require("three");
 const CHANNELS = 4;
 const TEXTURE_WIDTH = 1024;
 const TEXTURE_HEIGHT = 4;
-
-/**
- * Make a new DataTexture to store the descriptions of the curves.
- *
- * @param { number } numberOfCurves the number of curves needed to be described by this texture.
- */
 const initSplineTexture = (numberOfCurves = 1) => {
   const dataArray = new Float32Array(TEXTURE_WIDTH * TEXTURE_HEIGHT * numberOfCurves * CHANNELS);
-  const dataTexture = new DataTexture(dataArray, TEXTURE_WIDTH, TEXTURE_HEIGHT * numberOfCurves, RGBAFormat, FloatType);
-  dataTexture.wrapS = RepeatWrapping;
-  dataTexture.wrapT = RepeatWrapping;
-  dataTexture.magFilter = NearestFilter;
+  const dataTexture = new THREE.DataTexture(dataArray, TEXTURE_WIDTH, TEXTURE_HEIGHT * numberOfCurves, THREE.RGBAFormat, THREE.FloatType);
+  dataTexture.wrapS = THREE.RepeatWrapping;
+  dataTexture.wrapT = THREE.RepeatWrapping;
+  dataTexture.magFilter = THREE.NearestFilter;
   dataTexture.needsUpdate = true;
   return dataTexture;
 };
-/**
- * Write the curve description to the data texture
- *
- * @param { DataTexture } texture The DataTexture to write to
- * @param { Curve } splineCurve The curve to describe
- * @param { number } offset Which curve slot to write to
- */
-
 const updateSplineTexture = (texture, splineCurve, offset = 0) => {
   const numberOfPoints = Math.floor(TEXTURE_WIDTH * (TEXTURE_HEIGHT / 4));
   splineCurve.arcLengthDivisions = numberOfPoints / 2;
   splineCurve.updateArcLengths();
   const points = splineCurve.getSpacedPoints(numberOfPoints);
   const frenetFrames = splineCurve.computeFrenetFrames(numberOfPoints, true);
-
   for (let i = 0; i < numberOfPoints; i++) {
     const rowOffset = Math.floor(i / TEXTURE_WIDTH);
     const rowIndex = i % TEXTURE_WIDTH;
@@ -47,66 +31,35 @@ const updateSplineTexture = (texture, splineCurve, offset = 0) => {
     pt = frenetFrames.binormals[i];
     setTextureValue(texture, rowIndex, pt.x, pt.y, pt.z, 3 + rowOffset + TEXTURE_HEIGHT * offset);
   }
-
   texture.needsUpdate = true;
 };
-
 const setTextureValue = (texture, index, x, y, z, o) => {
   const image = texture.image;
-  const {
-    data
-  } = image;
-  const i = CHANNELS * TEXTURE_WIDTH * o; // Row Offset
-
+  const { data } = image;
+  const i = CHANNELS * TEXTURE_WIDTH * o;
   data[index * CHANNELS + i + 0] = x;
   data[index * CHANNELS + i + 1] = y;
   data[index * CHANNELS + i + 2] = z;
   data[index * CHANNELS + i + 3] = 1;
 };
-
-/**
- * Create a new set of uniforms for describing the curve modifier
- *
- * @param { DataTexture } Texture which holds the curve description
- */
-const getUniforms = splineTexture => ({
-  spineTexture: {
-    value: splineTexture
-  },
-  pathOffset: {
-    type: 'f',
-    value: 0
-  },
-  // time of path curve
-  pathSegment: {
-    type: 'f',
-    value: 1
-  },
-  // fractional length of path
-  spineOffset: {
-    type: 'f',
-    value: 161
-  },
-  spineLength: {
-    type: 'f',
-    value: 400
-  },
-  flow: {
-    type: 'i',
-    value: 1
-  }
+const getUniforms = (splineTexture) => ({
+  spineTexture: { value: splineTexture },
+  pathOffset: { type: "f", value: 0 },
+  pathSegment: { type: "f", value: 1 },
+  spineOffset: { type: "f", value: 161 },
+  spineLength: { type: "f", value: 400 },
+  flow: { type: "i", value: 1 }
 });
 function modifyShader(material, uniforms, numberOfCurves = 1) {
-  if (material.__ok) return;
+  if (material.__ok)
+    return;
   material.__ok = true;
-
-  material.onBeforeCompile = shader => {
-    if (shader.__modified) return;
+  material.onBeforeCompile = (shader) => {
+    if (shader.__modified)
+      return;
     shader.__modified = true;
     Object.assign(shader.uniforms, uniforms);
-    const vertexShader =
-    /* glsl */
-    `
+    const vertexShader = `
 		uniform sampler2D spineTexture;
 		uniform float pathOffset;
 		uniform float pathSegment;
@@ -118,13 +71,9 @@ function modifyShader(material, uniforms, numberOfCurves = 1) {
 		float textureStacks = ${TEXTURE_HEIGHT / 4}.;
 
 		${shader.vertexShader}
-		` // chunk import moved in front of modified shader below
-    .replace('#include <beginnormal_vertex>', '') // vec3 transformedNormal declaration overriden below
-    .replace('#include <defaultnormal_vertex>', '') // vec3 transformed declaration overriden below
-    .replace('#include <begin_vertex>', '') // shader override
-    .replace(/void\s*main\s*\(\)\s*\{/,
-    /* glsl */
-    `
+		`.replace("#include <beginnormal_vertex>", "").replace("#include <defaultnormal_vertex>", "").replace("#include <begin_vertex>", "").replace(
+      /void\s*main\s*\(\)\s*\{/,
+      `
         void main() {
         #include <beginnormal_vertex>
 
@@ -161,38 +110,22 @@ function modifyShader(material, uniforms, numberOfCurves = 1) {
           + spinePos;
 
         vec3 transformedNormal = normalMatrix * (basis * objectNormal);
-			`).replace('#include <project_vertex>',
-    /* glsl */
-    `vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );
-				gl_Position = projectionMatrix * mvPosition;`);
+			`
+    ).replace(
+      "#include <project_vertex>",
+      `vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );
+				gl_Position = projectionMatrix * mvPosition;`
+    );
     shader.vertexShader = vertexShader;
   };
 }
-/**
- * A helper class for making meshes bend aroudn curves
- */
-
 class Flow {
-  /**
-   * @param {Mesh} mesh The mesh to clone and modify to bend around the curve
-   * @param {number} numberOfCurves The amount of space that should preallocated for additional curves
-   */
   constructor(mesh, numberOfCurves = 1) {
-    _defineProperty(this, "curveArray", void 0);
-
-    _defineProperty(this, "curveLengthArray", void 0);
-
-    _defineProperty(this, "object3D", void 0);
-
-    _defineProperty(this, "splineTexure", void 0);
-
-    _defineProperty(this, "uniforms", void 0);
-
     const obj3D = mesh.clone();
     const splineTexure = initSplineTexture(numberOfCurves);
     const uniforms = getUniforms(splineTexure);
-    obj3D.traverse(child => {
-      if (child instanceof Mesh || child instanceof InstancedMesh) {
+    obj3D.traverse((child) => {
+      if (child instanceof THREE.Mesh || child instanceof THREE.InstancedMesh) {
         child.material = child.material.clone();
         modifyShader(child.material, uniforms, numberOfCurves);
       }
@@ -203,85 +136,47 @@ class Flow {
     this.splineTexure = splineTexure;
     this.uniforms = uniforms;
   }
-
   updateCurve(index, curve) {
-    if (index >= this.curveArray.length) throw Error('Index out of range for Flow');
+    if (index >= this.curveArray.length)
+      throw Error("Index out of range for Flow");
     const curveLength = curve.getLength();
     this.uniforms.spineLength.value = curveLength;
     this.curveLengthArray[index] = curveLength;
     this.curveArray[index] = curve;
     updateSplineTexture(this.splineTexure, curve, index);
   }
-
   moveAlongCurve(amount) {
     this.uniforms.pathOffset.value += amount;
   }
-
 }
-const matrix = new Matrix4();
-/**
- * A helper class for creating instanced versions of flow, where the instances are placed on the curve.
- */
-
+const matrix = new THREE.Matrix4();
 class InstancedFlow extends Flow {
-  /**
-   *
-   * @param {number} count The number of instanced elements
-   * @param {number} curveCount The number of curves to preallocate for
-   * @param {Geometry} geometry The geometry to use for the instanced mesh
-   * @param {Material} material The material to use for the instanced mesh
-   */
   constructor(count, curveCount, geometry, material) {
-    const mesh = new InstancedMesh(geometry, material, count);
-    mesh.instanceMatrix.setUsage(DynamicDrawUsage);
+    const mesh = new THREE.InstancedMesh(geometry, material, count);
+    mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
     super(mesh, curveCount);
-
-    _defineProperty(this, "offsets", void 0);
-
-    _defineProperty(this, "whichCurve", void 0);
-
     this.offsets = new Array(count).fill(0);
     this.whichCurve = new Array(count).fill(0);
   }
-  /**
-   * The extra information about which curve and curve position is stored in the translation components of the matrix for the instanced objects
-   * This writes that information to the matrix and marks it as needing update.
-   *
-   * @param {number} index of the instanced element to update
-   */
-
-
   writeChanges(index) {
     matrix.makeTranslation(this.curveLengthArray[this.whichCurve[index]], this.whichCurve[index], this.offsets[index]);
     this.object3D.setMatrixAt(index, matrix);
     this.object3D.instanceMatrix.needsUpdate = true;
   }
-  /**
-   * Move an individual element along the curve by a specific amount
-   *
-   * @param {number} index Which element to update
-   * @param {number} offset Move by how much
-   */
-
-
   moveIndividualAlongCurve(index, offset) {
     this.offsets[index] += offset;
     this.writeChanges(index);
   }
-  /**
-   * Select which curve to use for an element
-   *
-   * @param {number} index the index of the instanced element to update
-   * @param {number} curveNo the index of the curve it should use
-   */
-
-
   setCurve(index, curveNo) {
-    if (isNaN(curveNo)) throw Error('curve index being set is Not a Number (NaN)');
+    if (isNaN(curveNo))
+      throw Error("curve index being set is Not a Number (NaN)");
     this.whichCurve[index] = curveNo;
     this.writeChanges(index);
   }
-
 }
-
-export { Flow, InstancedFlow, getUniforms, initSplineTexture, modifyShader, updateSplineTexture };
+exports.Flow = Flow;
+exports.InstancedFlow = InstancedFlow;
+exports.getUniforms = getUniforms;
+exports.initSplineTexture = initSplineTexture;
+exports.modifyShader = modifyShader;
+exports.updateSplineTexture = updateSplineTexture;

package/modifiers/CurveModifier.mjs

@@ -0,0 +1,182 @@
+import { DataTexture, RGBAFormat, FloatType, RepeatWrapping, NearestFilter, Mesh, InstancedMesh, Matrix4, DynamicDrawUsage } from "three";
+const CHANNELS = 4;
+const TEXTURE_WIDTH = 1024;
+const TEXTURE_HEIGHT = 4;
+const initSplineTexture = (numberOfCurves = 1) => {
+  const dataArray = new Float32Array(TEXTURE_WIDTH * TEXTURE_HEIGHT * numberOfCurves * CHANNELS);
+  const dataTexture = new DataTexture(dataArray, TEXTURE_WIDTH, TEXTURE_HEIGHT * numberOfCurves, RGBAFormat, FloatType);
+  dataTexture.wrapS = RepeatWrapping;
+  dataTexture.wrapT = RepeatWrapping;
+  dataTexture.magFilter = NearestFilter;
+  dataTexture.needsUpdate = true;
+  return dataTexture;
+};
+const updateSplineTexture = (texture, splineCurve, offset = 0) => {
+  const numberOfPoints = Math.floor(TEXTURE_WIDTH * (TEXTURE_HEIGHT / 4));
+  splineCurve.arcLengthDivisions = numberOfPoints / 2;
+  splineCurve.updateArcLengths();
+  const points = splineCurve.getSpacedPoints(numberOfPoints);
+  const frenetFrames = splineCurve.computeFrenetFrames(numberOfPoints, true);
+  for (let i = 0; i < numberOfPoints; i++) {
+    const rowOffset = Math.floor(i / TEXTURE_WIDTH);
+    const rowIndex = i % TEXTURE_WIDTH;
+    let pt = points[i];
+    setTextureValue(texture, rowIndex, pt.x, pt.y, pt.z, 0 + rowOffset + TEXTURE_HEIGHT * offset);
+    pt = frenetFrames.tangents[i];
+    setTextureValue(texture, rowIndex, pt.x, pt.y, pt.z, 1 + rowOffset + TEXTURE_HEIGHT * offset);
+    pt = frenetFrames.normals[i];
+    setTextureValue(texture, rowIndex, pt.x, pt.y, pt.z, 2 + rowOffset + TEXTURE_HEIGHT * offset);
+    pt = frenetFrames.binormals[i];
+    setTextureValue(texture, rowIndex, pt.x, pt.y, pt.z, 3 + rowOffset + TEXTURE_HEIGHT * offset);
+  }
+  texture.needsUpdate = true;
+};
+const setTextureValue = (texture, index, x, y, z, o) => {
+  const image = texture.image;
+  const { data } = image;
+  const i = CHANNELS * TEXTURE_WIDTH * o;
+  data[index * CHANNELS + i + 0] = x;
+  data[index * CHANNELS + i + 1] = y;
+  data[index * CHANNELS + i + 2] = z;
+  data[index * CHANNELS + i + 3] = 1;
+};
+const getUniforms = (splineTexture) => ({
+  spineTexture: { value: splineTexture },
+  pathOffset: { type: "f", value: 0 },
+  pathSegment: { type: "f", value: 1 },
+  spineOffset: { type: "f", value: 161 },
+  spineLength: { type: "f", value: 400 },
+  flow: { type: "i", value: 1 }
+});
+function modifyShader(material, uniforms, numberOfCurves = 1) {
+  if (material.__ok)
+    return;
+  material.__ok = true;
+  material.onBeforeCompile = (shader) => {
+    if (shader.__modified)
+      return;
+    shader.__modified = true;
+    Object.assign(shader.uniforms, uniforms);
+    const vertexShader = `
+		uniform sampler2D spineTexture;
+		uniform float pathOffset;
+		uniform float pathSegment;
+		uniform float spineOffset;
+		uniform float spineLength;
+		uniform int flow;
+
+		float textureLayers = ${TEXTURE_HEIGHT * numberOfCurves}.;
+		float textureStacks = ${TEXTURE_HEIGHT / 4}.;
+
+		${shader.vertexShader}
+		`.replace("#include <beginnormal_vertex>", "").replace("#include <defaultnormal_vertex>", "").replace("#include <begin_vertex>", "").replace(
+      /void\s*main\s*\(\)\s*\{/,
+      `
+        void main() {
+        #include <beginnormal_vertex>
+
+        vec4 worldPos = modelMatrix * vec4(position, 1.);
+
+        bool bend = flow > 0;
+        float xWeight = bend ? 0. : 1.;
+
+        #ifdef USE_INSTANCING
+        float pathOffsetFromInstanceMatrix = instanceMatrix[3][2];
+        float spineLengthFromInstanceMatrix = instanceMatrix[3][0];
+        float spinePortion = bend ? (worldPos.x + spineOffset) / spineLengthFromInstanceMatrix : 0.;
+        float mt = (spinePortion * pathSegment + pathOffset + pathOffsetFromInstanceMatrix)*textureStacks;
+        #else
+        float spinePortion = bend ? (worldPos.x + spineOffset) / spineLength : 0.;
+        float mt = (spinePortion * pathSegment + pathOffset)*textureStacks;
+        #endif
+
+        mt = mod(mt, textureStacks);
+        float rowOffset = floor(mt);
+
+        #ifdef USE_INSTANCING
+        rowOffset += instanceMatrix[3][1] * ${TEXTURE_HEIGHT}.;
+        #endif
+
+        vec3 spinePos = texture2D(spineTexture, vec2(mt, (0. + rowOffset + 0.5) / textureLayers)).xyz;
+        vec3 a =        texture2D(spineTexture, vec2(mt, (1. + rowOffset + 0.5) / textureLayers)).xyz;
+        vec3 b =        texture2D(spineTexture, vec2(mt, (2. + rowOffset + 0.5) / textureLayers)).xyz;
+        vec3 c =        texture2D(spineTexture, vec2(mt, (3. + rowOffset + 0.5) / textureLayers)).xyz;
+        mat3 basis = mat3(a, b, c);
+
+        vec3 transformed = basis
+          * vec3(worldPos.x * xWeight, worldPos.y * 1., worldPos.z * 1.)
+          + spinePos;
+
+        vec3 transformedNormal = normalMatrix * (basis * objectNormal);
+			`
+    ).replace(
+      "#include <project_vertex>",
+      `vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );
+				gl_Position = projectionMatrix * mvPosition;`
+    );
+    shader.vertexShader = vertexShader;
+  };
+}
+class Flow {
+  constructor(mesh, numberOfCurves = 1) {
+    const obj3D = mesh.clone();
+    const splineTexure = initSplineTexture(numberOfCurves);
+    const uniforms = getUniforms(splineTexure);
+    obj3D.traverse((child) => {
+      if (child instanceof Mesh || child instanceof InstancedMesh) {
+        child.material = child.material.clone();
+        modifyShader(child.material, uniforms, numberOfCurves);
+      }
+    });
+    this.curveArray = new Array(numberOfCurves);
+    this.curveLengthArray = new Array(numberOfCurves);
+    this.object3D = obj3D;
+    this.splineTexure = splineTexure;
+    this.uniforms = uniforms;
+  }
+  updateCurve(index, curve) {
+    if (index >= this.curveArray.length)
+      throw Error("Index out of range for Flow");
+    const curveLength = curve.getLength();
+    this.uniforms.spineLength.value = curveLength;
+    this.curveLengthArray[index] = curveLength;
+    this.curveArray[index] = curve;
+    updateSplineTexture(this.splineTexure, curve, index);
+  }
+  moveAlongCurve(amount) {
+    this.uniforms.pathOffset.value += amount;
+  }
+}
+const matrix = new Matrix4();
+class InstancedFlow extends Flow {
+  constructor(count, curveCount, geometry, material) {
+    const mesh = new InstancedMesh(geometry, material, count);
+    mesh.instanceMatrix.setUsage(DynamicDrawUsage);
+    super(mesh, curveCount);
+    this.offsets = new Array(count).fill(0);
+    this.whichCurve = new Array(count).fill(0);
+  }
+  writeChanges(index) {
+    matrix.makeTranslation(this.curveLengthArray[this.whichCurve[index]], this.whichCurve[index], this.offsets[index]);
+    this.object3D.setMatrixAt(index, matrix);
+    this.object3D.instanceMatrix.needsUpdate = true;
+  }
+  moveIndividualAlongCurve(index, offset) {
+    this.offsets[index] += offset;
+    this.writeChanges(index);
+  }
+  setCurve(index, curveNo) {
+    if (isNaN(curveNo))
+      throw Error("curve index being set is Not a Number (NaN)");
+    this.whichCurve[index] = curveNo;
+    this.writeChanges(index);
+  }
+}
+export {
+  Flow,
+  InstancedFlow,
+  getUniforms,
+  initSplineTexture,
+  modifyShader,
+  updateSplineTexture
+};