reze-engine 0.6.7 → 0.8.0

package/src/ik-solver.ts

@@ -1,8 +1,4 @@
-/**
- * IK Solver implementation
- * Based on reference from babylon-mmd and Saba MMD library
- * https://github.com/benikabocha/saba/blob/master/src/Saba/Model/MMD/MMDIkSolver.cpp
- */
+// IK solver (MMD-style; see Saba MMDIkSolver.cpp)
 
 import { Mat4, Quat, Vec3 } from "./math"
 import { Bone, IKLink, IKSolver, IKChainInfo } from "./model"
@@ -76,16 +72,10 @@ class IKChain {
   }
 }
 
-/**
- * Solve IK chains for a model
- */
 export class IKSolverSystem {
   private static readonly EPSILON = 1.0e-8
   private static readonly THRESHOLD = (88 * Math.PI) / 180
 
-  /**
-   * Solve all IK chains
-   */
   public static solve(
     ikSolvers: IKSolver[],
     bones: Bone[],

package/src/index.ts

@@ -1,2 +1,3 @@
-export { Engine, type EngineStats } from "./engine"
-export { Vec3, Quat, Mat4 } from "./math"
+export { Engine, type EngineStats } from "./engine"
+export { Model } from "./model"
+export { Vec3, Quat, Mat4 } from "./math"

package/src/math.ts

@@ -295,6 +295,33 @@ export class Mat4 {
     )
   }
 
+  // LH ortho, NDC depth 0=near 1=far
+  static orthographicLh(left: number, right: number, bottom: number, top: number, near: number, far: number): Mat4 {
+    const rl = 1 / (right - left)
+    const tb = 1 / (top - bottom)
+    const fn = 1 / (far - near)
+    return new Mat4(
+      new Float32Array([
+        2 * rl,
+        0,
+        0,
+        0,
+        0,
+        2 * tb,
+        0,
+        0,
+        0,
+        0,
+        fn,
+        0,
+        -(right + left) * rl,
+        -(top + bottom) * tb,
+        -near * fn,
+        1,
+      ])
+    )
+  }
+
   multiply(other: Mat4): Mat4 {
     // Column-major multiplication (matches WGSL/GLSL convention):
     // result = a * b
@@ -540,45 +567,3 @@ export class Mat4 {
   }
 }
 
-/**
- * Bezier interpolation function
- * @param x1 First control point X (0-127, normalized to 0-1)
- * @param x2 Second control point X (0-127, normalized to 0-1)
- * @param y1 First control point Y (0-127, normalized to 0-1)
- * @param y2 Second control point Y (0-127, normalized to 0-1)
- * @param t Interpolation parameter (0-1)
- * @returns Interpolated value (0-1)
- */
-export function bezierInterpolate(x1: number, x2: number, y1: number, y2: number, t: number): number {
-  // Clamp t to [0, 1]
-  t = Math.max(0, Math.min(1, t))
-
-  // Binary search for the t value that gives us the desired x
-  // We're solving for t in the Bezier curve: x(t) = 3*(1-t)^2*t*x1 + 3*(1-t)*t^2*x2 + t^3
-  let start = 0
-  let end = 1
-  let mid = 0.5
-
-  // Iterate until we find the t value that gives us the desired x
-  for (let i = 0; i < 15; i++) {
-    // Evaluate Bezier curve at mid point
-    const x = 3 * (1 - mid) * (1 - mid) * mid * x1 + 3 * (1 - mid) * mid * mid * x2 + mid * mid * mid
-
-    if (Math.abs(x - t) < 0.0001) {
-      break
-    }
-
-    if (x < t) {
-      start = mid
-    } else {
-      end = mid
-    }
-
-    mid = (start + end) / 2
-  }
-
-  // Now evaluate the y value at this t
-  const y = 3 * (1 - mid) * (1 - mid) * mid * y1 + 3 * (1 - mid) * mid * mid * y2 + mid * mid * mid
-
-  return y
-}

package/src/model.ts

@@ -1,8 +1,12 @@
-import { Mat4, Quat, Vec3, bezierInterpolate } from "./math"
+import { Mat4, Quat, Vec3 } from "./math"
+import { Engine } from "./engine"
+import { PmxLoader } from "./pmx-loader"
 import { Rigidbody, Joint, Physics } from "./physics"
 import { IKSolverSystem } from "./ik-solver"
-import { VMDKeyFrame, VMDLoader, BoneFrame, MorphFrame } from "./vmd-loader"
+import { VMDLoader } from "./vmd-loader"
+import { BoneInterpolation, interpolateControlPoints, rawInterpolationToBoneInterpolation } from "./animation"
 
+const VMD_FPS = 30
 const VERTEX_STRIDE = 8
 
 export interface Texture {
@@ -146,6 +150,13 @@ interface TweenState {
 }
 
 export class Model {
+  // loadPmx: fetch PMX + register with Engine.getInstance() (init engine first)
+  static async loadPmx(path: string): Promise<Model> {
+    const model = await PmxLoader.load(path)
+    await Engine.getInstance().registerModel(model, path)
+    return model
+  }
+
   private vertexData: Float32Array<ArrayBuffer>
   private baseVertexData: Float32Array<ArrayBuffer> // Original vertex data before morphing
   private vertexCount: number
@@ -181,9 +192,9 @@ export class Model {
   private tweenTimeMs: number = 0 // Time tracking for tweens (milliseconds)
 
   // Animation runtime
-  private animationData: VMDKeyFrame[] | null = null
-  private boneTracks: Map<string, Array<{ boneFrame: BoneFrame; time: number }>> = new Map()
-  private morphTracks: Map<string, Array<{ morphFrame: MorphFrame; time: number }>> = new Map()
+  private _hasAnimation: boolean = false
+  private boneTracks: Map<string, Array<{ boneName: string; frame: number; rotation: Quat; translation: Vec3; interpolation: BoneInterpolation; time: number }>> = new Map()
+  private morphTracks: Map<string, Array<{ morphName: string; frame: number; weight: number; time: number }>> = new Map()
   private animationDuration: number = 0
   private isPlaying: boolean = false
   private isPaused: boolean = false
@@ -453,6 +464,13 @@ export class Model {
     return this.skeleton
   }
 
+  // World bone origin (world matrix col3); unknown name → null
+  getBoneWorldPosition(boneName: string): Vec3 | null {
+    const idx = this.runtimeSkeleton.nameIndex[boneName]
+    if (idx === undefined || idx < 0) return null
+    return this.runtimeSkeleton.worldMatrices[idx].getPosition()
+  }
+
   getSkinning(): Skinning {
     return this.skinning
   }
@@ -578,14 +596,7 @@ export class Model {
     }
   }
 
-  /**
-   * Convert VMD-style relative translation (relative to bind pose world position) to local translation
-   * This helper is used by both moveBones and getPoseAtTime to ensure consistent translation handling
-   * @param boneIdx - Bone index
-   * @param vmdRelativeTranslation - VMD relative translation
-   * @param rotation - Optional rotation to use for conversion. If not provided, uses current localRotation.
-   *                   Use animation rotation (from frame) to avoid conflicts when IK modifies rotation.
-   */
+  // VMD translation (world delta from bind pose) → bone local space; optional rotation for animation vs IK
   private convertVMDTranslationToLocal(boneIdx: number, vmdRelativeTranslation: Vec3, rotation?: Quat): Vec3 {
     const skeleton = this.skeleton
     const bones = skeleton.bones
@@ -695,6 +706,11 @@ export class Model {
       this.runtimeMorph.weights[idx] = clampedWeight
       this.tweenState.morphActive[idx] = 0
       this.applyMorphs()
+      try {
+        Engine.getInstance().markVertexBufferDirty()
+      } catch {
+        /* not registered yet */
+      }
       return
     }
 
@@ -723,57 +739,6 @@ export class Model {
     this.applyMorphs()
   }
 
-  /**
-   * Atomic pose setter for external animation editors.
-   * Sets bone rotations, translations, and morph weights in a single pass,
-   * identical to how getPoseAtTime applies VMD poses during playback.
-   * Cancels any active tweens on affected bones/morphs.
-   */
-  setPose(
-    rotations?: Record<string, Quat>,
-    translations?: Record<string, Vec3>,
-    morphs?: Record<string, number>
-  ): void {
-    const state = this.tweenState
-
-    if (rotations) {
-      for (const [name, quat] of Object.entries(rotations)) {
-        const idx = this.runtimeSkeleton.nameIndex[name] ?? -1
-        if (idx < 0 || idx >= this.skeleton.bones.length) continue
-
-        this.runtimeSkeleton.localRotations[idx].set(quat.clone().normalize())
-        state.rotActive[idx] = 0
-      }
-    }
-
-    if (translations) {
-      for (const [name, vec] of Object.entries(translations)) {
-        const idx = this.runtimeSkeleton.nameIndex[name] ?? -1
-        if (idx < 0 || idx >= this.skeleton.bones.length) continue
-
-        const rotation = rotations?.[name]?.clone().normalize()
-        const localTranslation = this.convertVMDTranslationToLocal(idx, vec, rotation)
-        this.runtimeSkeleton.localTranslations[idx].set(localTranslation)
-        state.transActive[idx] = 0
-      }
-    }
-
-    if (morphs) {
-      let morphChanged = false
-      for (const [name, weight] of Object.entries(morphs)) {
-        const idx = this.runtimeMorph.nameIndex[name] ?? -1
-        if (idx < 0 || idx >= this.runtimeMorph.weights.length) continue
-
-        this.runtimeMorph.weights[idx] = Math.max(0, Math.min(1, weight))
-        state.morphActive[idx] = 0
-        morphChanged = true
-      }
-      if (morphChanged) {
-        this.applyMorphs()
-      }
-    }
-  }
-
   private applyMorphs(): void {
     // Reset vertex data to base positions
     this.vertexData.set(this.baseVertexData)
@@ -839,15 +804,81 @@ export class Model {
     }
   }
 
-  /**
-   * Load VMD animation file
-   */
   async loadVmd(vmdUrl: string): Promise<void> {
-    this.animationData = await VMDLoader.load(vmdUrl)
+    const vmdKeyFrames = await VMDLoader.load(vmdUrl)
+
     this.resetAllBones()
     this.resetAllMorphs()
-    this.processFrames()
-    // Apply initial pose at time 0
+
+    // Build bone tracks: Map<boneName, Array<{boneName, frame, rotation, translation, interpolation, time}>>
+    const boneTracksByBone: Record<string, Array<{ frame: number; rotation: Quat; translation: Vec3; interpolation: BoneInterpolation }>> = {}
+    for (const keyFrame of vmdKeyFrames) {
+      for (const bf of keyFrame.boneFrames) {
+        if (!boneTracksByBone[bf.boneName]) boneTracksByBone[bf.boneName] = []
+        boneTracksByBone[bf.boneName].push({
+          frame: bf.frame,
+          rotation: bf.rotation,
+          translation: bf.translation,
+          interpolation: rawInterpolationToBoneInterpolation(bf.interpolation),
+        })
+      }
+    }
+
+    this.boneTracks = new Map()
+    for (const name in boneTracksByBone) {
+      const keyframes = boneTracksByBone[name]
+      const sorted = [...keyframes].sort((a, b) => a.frame - b.frame)
+      this.boneTracks.set(
+        name,
+        sorted.map((kf) => ({
+          boneName: name,
+          frame: kf.frame,
+          rotation: kf.rotation,
+          translation: kf.translation,
+          interpolation: kf.interpolation,
+          time: kf.frame / VMD_FPS,
+        }))
+      )
+    }
+
+    // Build morph tracks: Map<morphName, Array<{morphName, frame, weight, time}>>
+    const morphTracksByMorph: Record<string, Array<{ frame: number; weight: number }>> = {}
+    for (const keyFrame of vmdKeyFrames) {
+      for (const mf of keyFrame.morphFrames) {
+        if (!morphTracksByMorph[mf.morphName]) morphTracksByMorph[mf.morphName] = []
+        morphTracksByMorph[mf.morphName].push({ frame: mf.frame, weight: mf.weight })
+      }
+    }
+
+    this.morphTracks = new Map()
+    for (const name in morphTracksByMorph) {
+      const keyframes = morphTracksByMorph[name]
+      const sorted = [...keyframes].sort((a, b) => a.frame - b.frame)
+      this.morphTracks.set(
+        name,
+        sorted.map((kf) => ({
+          morphName: name,
+          frame: kf.frame,
+          weight: kf.weight,
+          time: kf.frame / VMD_FPS,
+        }))
+      )
+    }
+
+    this.boneTrackIndices.clear()
+    this.morphTrackIndices.clear()
+
+    // Calculate duration
+    let maxTime = 0
+    for (const frames of this.boneTracks.values()) {
+      if (frames.length > 0) maxTime = Math.max(maxTime, frames[frames.length - 1].time)
+    }
+    for (const frames of this.morphTracks.values()) {
+      if (frames.length > 0) maxTime = Math.max(maxTime, frames[frames.length - 1].time)
+    }
+    this.animationDuration = maxTime
+
+    this._hasAnimation = true
     this.animationTime = 0
     this.getPoseAtTime(0)
 
@@ -857,9 +888,6 @@ export class Model {
     }
   }
 
-  /**
-   * Reset all bones to their default pose
-   */
   public resetAllBones(): void {
     for (let boneIdx = 0; boneIdx < this.skeleton.bones.length; boneIdx++) {
       const localRot = this.runtimeSkeleton.localRotations[boneIdx]
@@ -884,85 +912,16 @@ export class Model {
     this.applyMorphs()
   }
 
-  /**
-   * Enable or disable IK solving
-   */
   public setIKEnabled(enabled: boolean): void {
     this.ikEnabled = enabled
   }
 
-  /**
-   * Enable or disable physics simulation
-   */
   public setPhysicsEnabled(enabled: boolean): void {
     this.physicsEnabled = enabled
   }
 
-  /**
-   * Process frames into tracks
-   */
-  private processFrames(): void {
-    if (!this.animationData) return
-
-    // Helper to group frames by name and sort by time
-    const groupFrames = <T>(
-      items: Array<{ item: T; name: string; time: number }>
-    ): Map<string, Array<{ item: T; time: number }>> => {
-      const tracks = new Map<string, Array<{ item: T; time: number }>>()
-      for (const { item, name, time } of items) {
-        if (!tracks.has(name)) tracks.set(name, [])
-        tracks.get(name)!.push({ item, time })
-      }
-      for (const keyFrames of tracks.values()) {
-        keyFrames.sort((a, b) => a.time - b.time)
-      }
-      return tracks
-    }
-
-    // Collect all bone and morph frames
-    const boneItems: Array<{ item: BoneFrame; name: string; time: number }> = []
-    const morphItems: Array<{ item: MorphFrame; name: string; time: number }> = []
-
-    for (const keyFrame of this.animationData) {
-      for (const boneFrame of keyFrame.boneFrames) {
-        boneItems.push({ item: boneFrame, name: boneFrame.boneName, time: keyFrame.time })
-      }
-      for (const morphFrame of keyFrame.morphFrames) {
-        morphItems.push({ item: morphFrame, name: morphFrame.morphName, time: keyFrame.time })
-      }
-    }
-
-    // Transform to expected format
-    this.boneTracks = new Map()
-    for (const [name, frames] of groupFrames(boneItems).entries()) {
-      this.boneTracks.set(
-        name,
-        frames.map((f) => ({ boneFrame: f.item, time: f.time }))
-      )
-    }
-
-    this.morphTracks = new Map()
-    for (const [name, frames] of groupFrames(morphItems).entries()) {
-      this.morphTracks.set(
-        name,
-        frames.map((f) => ({ morphFrame: f.item, time: f.time }))
-      )
-    }
-
-    // Reset cached indices when tracks change
-    this.boneTrackIndices.clear()
-    this.morphTrackIndices.clear()
-
-    // Calculate duration from all tracks
-    const allTracks = [...this.boneTracks.values(), ...this.morphTracks.values()]
-    this.animationDuration = allTracks.reduce((max, keyFrames) => {
-      const lastTime = keyFrames[keyFrames.length - 1]?.time ?? 0
-      return Math.max(max, lastTime)
-    }, 0)
-  }
-
   playAnimation(): void {
-    if (!this.animationData) return
+    if (!this._hasAnimation) return
 
     this.isPaused = false
     this.isPlaying = true
@@ -985,14 +944,11 @@ export class Model {
   }
 
   seekAnimation(time: number): void {
-    if (!this.animationData) return
+    if (!this._hasAnimation) return
     const clampedTime = Math.max(0, Math.min(time, this.animationDuration))
     this.animationTime = clampedTime
   }
 
-  /**
-   * Get current animation progress
-   */
   getAnimationProgress(): { current: number; duration: number; percentage: number } {
     const duration = this.animationDuration
     const percentage = duration > 0 ? (this.animationTime / duration) * 100 : 0
@@ -1003,9 +959,6 @@ export class Model {
     }
   }
 
-  /**
-   * Binary search upper bound helper (static to avoid recreation)
-   */
   private static upperBound<T extends { time: number }>(time: number, keyFrames: T[], startIdx: number = 0): number {
     let left = startIdx,
       right = keyFrames.length
@@ -1017,10 +970,6 @@ export class Model {
     return left
   }
 
-  /**
-   * Find keyframe index with caching optimization
-   * Uses cached index as starting point for faster lookup when time is close
-   */
   private findKeyframeIndex<T extends { time: number }>(time: number, keyFrames: T[], cachedIdx: number): number {
     if (keyFrames.length === 0) return -1
 
@@ -1040,14 +989,8 @@ export class Model {
     return idx
   }
 
-  /**
-   * Get pose at specific time (internal helper)
-   * Optimized for per-frame performance
-   */
   private getPoseAtTime(time: number): void {
-    if (!this.animationData) return
-
-    const INV_127 = 1 / 127 // Pre-compute division constant
+    if (!this._hasAnimation) return
 
     // Process bone tracks
     for (const [boneName, keyFrames] of this.boneTracks.entries()) {
@@ -1059,11 +1002,10 @@ export class Model {
 
       if (idx < 0) continue
 
-      // Update cache
       this.boneTrackIndices.set(boneName, idx)
 
-      const frameA = keyFrames[idx].boneFrame
-      const frameB = keyFrames[idx + 1]?.boneFrame
+      const frameA = keyFrames[idx]
+      const frameB = keyFrames[idx + 1]
 
       const boneIdx = this.runtimeSkeleton.nameIndex[boneName]
       if (boneIdx === undefined) continue
@@ -1072,61 +1014,30 @@ export class Model {
       const localTrans = this.runtimeSkeleton.localTranslations[boneIdx]
 
       if (!frameB) {
-        // No interpolation needed - direct assignment
-        // Use animation frame's rotation for translation conversion to ensure consistency
-        // This prevents conflicts when IK later modifies the rotation
         const frameRotation = frameA.rotation
         localRot.set(frameRotation)
-        // Convert VMD relative translation to local translation using animation rotation
         const localTranslation = this.convertVMDTranslationToLocal(boneIdx, frameA.translation, frameRotation)
         localTrans.set(localTranslation)
       } else {
-        const timeA = keyFrames[idx].time
-        const timeB = keyFrames[idx + 1].time
-        const timeDelta = timeB - timeA
-        const gradient = (clampedTime - timeA) / timeDelta
+        const timeDelta = frameB.time - frameA.time
+        const gradient = (clampedTime - frameA.time) / timeDelta
         const interp = frameB.interpolation
 
-        // Pre-normalize interpolation values (avoid division in bezierInterpolate)
-        const rotT = bezierInterpolate(
-          interp[0] * INV_127,
-          interp[1] * INV_127,
-          interp[2] * INV_127,
-          interp[3] * INV_127,
-          gradient
-        )
-
-        // Use Quat.slerp to interpolate rotation
+        const rotT = interpolateControlPoints(interp.rotation, gradient)
         const rotation = Quat.slerp(frameA.rotation, frameB.rotation, rotT)
 
-        // Interpolate VMD translation using bezier for each component
-        // Inline getWeight to avoid function call overhead
-        const getWeight = (offset: number) =>
-          bezierInterpolate(
-            interp[offset] * INV_127,
-            interp[offset + 8] * INV_127,
-            interp[offset + 4] * INV_127,
-            interp[offset + 12] * INV_127,
-            gradient
-          )
-
-        const txWeight = getWeight(0)
-        const tyWeight = getWeight(16)
-        const tzWeight = getWeight(32)
-
-        // Interpolate VMD relative translations (relative to bind pose world position)
+        const txWeight = interpolateControlPoints(interp.translationX, gradient)
+        const tyWeight = interpolateControlPoints(interp.translationY, gradient)
+        const tzWeight = interpolateControlPoints(interp.translationZ, gradient)
+
         const interpolatedVMDTranslation = new Vec3(
           frameA.translation.x + (frameB.translation.x - frameA.translation.x) * txWeight,
           frameA.translation.y + (frameB.translation.y - frameA.translation.y) * tyWeight,
           frameA.translation.z + (frameB.translation.z - frameA.translation.z) * tzWeight
         )
 
-        // Convert interpolated VMD translation to local translation using animation rotation
-        // This ensures translation is computed for the animation rotation, not the runtime rotation
-        // that will be modified by IK, preventing conflicts
         const localTranslation = this.convertVMDTranslationToLocal(boneIdx, interpolatedVMDTranslation, rotation)
 
-        // Direct property writes to avoid object allocation
         localRot.set(rotation)
         localTrans.set(localTranslation)
       }
@@ -1142,19 +1053,18 @@ export class Model {
 
       if (idx < 0) continue
 
-      // Update cache
       this.morphTrackIndices.set(morphName, idx)
 
-      const frameA = keyFrames[idx].morphFrame
-      const frameB = keyFrames[idx + 1]?.morphFrame
+      const frameA = keyFrames[idx]
+      const frameB = keyFrames[idx + 1]
 
       const morphIdx = this.runtimeMorph.nameIndex[morphName]
       if (morphIdx === undefined) continue
 
       const weight = frameB
         ? frameA.weight +
-          (frameB.weight - frameA.weight) *
-            ((clampedTime - keyFrames[idx].time) / (keyFrames[idx + 1].time - keyFrames[idx].time))
+        (frameB.weight - frameA.weight) *
+        ((clampedTime - keyFrames[idx].time) / (keyFrames[idx + 1].time - keyFrames[idx].time))
         : frameA.weight
 
       this.runtimeMorph.weights[morphIdx] = weight
@@ -1162,12 +1072,7 @@ export class Model {
     }
   }
 
-  /**
-   * Updates the model pose by recomputing all matrices.
-   * If animation is playing, applies animation pose first.
-   * deltaTime: Time elapsed since last update in seconds
-   * Returns true if vertices were modified (morphs changed)
-   */
+  // Returns true when morphs changed (vertex buffer may need upload)
   update(deltaTime: number): boolean {
     // Update tween time (in milliseconds)
     this.tweenTimeMs += deltaTime * 1000
@@ -1176,7 +1081,7 @@ export class Model {
     const tweensChangedMorphs = this.updateTweens()
 
     // Apply animation if playing or paused (always apply pose if animation data exists and we have a time set)
-    if (this.animationData) {
+    if (this._hasAnimation) {
       if (this.isPlaying && !this.isPaused) {
         this.animationTime += deltaTime
 
@@ -1228,7 +1133,7 @@ export class Model {
       // Recompute ALL world matrices before each solver starts
       // This ensures each solver sees the effects of previous solvers on localRotations
       this.computeWorldMatrices()
-      
+
       // Clear computed set for this solver's pass
       this.ikComputedSet.clear()
 
@@ -1293,9 +1198,9 @@ export class Model {
 
     // Handle append transformations (same logic as computeWorldMatrices)
     const appendParentIdx = b.appendParentIndex
-    const hasAppend = b.appendRotate && 
-      appendParentIdx !== undefined && 
-      appendParentIdx >= 0 && 
+    const hasAppend = b.appendRotate &&
+      appendParentIdx !== undefined &&
+      appendParentIdx >= 0 &&
       appendParentIdx < bones.length
 
     if (hasAppend) {
@@ -1312,7 +1217,7 @@ export class Model {
             // Compute append parent's world matrix for dependency order, but use base rotation for append
             this.computeSingleBoneWorldMatrix(appendParentIdx, applyIK)
           }
-          
+
           // Use append parent's base local rotation only (IK rotations are applied after solving)
           let appendRot = localRot[appendParentIdx]
 
@@ -1320,7 +1225,7 @@ export class Model {
           const aw = appendRot.w
           const absRatio = ratio < 0 ? -ratio : ratio
           if (ratio < 0) { ax = -ax; ay = -ay; az = -az }
-          
+
           const appendQuat = new Quat(ax, ay, az, aw)
           const result = Quat.slerp(Quat.identity(), appendQuat, absRatio)
           rotateM = Mat4.fromQuat(result.x, result.y, result.z, result.w).multiply(rotateM)

package/src/pmx-loader.ts

@@ -262,7 +262,7 @@ export class PmxLoader {
           this.getFloat32(),
         ]
         // edgeSize float
-        const edgeSize = this.getFloat32()
+        const edgeSize = this.getFloat32()*2 // double the size for better visibility
 
         const textureIndex = this.getNonVertexIndex(this.textureIndexSize)
         const sphereTextureIndex = this.getNonVertexIndex(this.textureIndexSize)