pxlNav.core/Colliders.js

  1. ./ pxlNav Collision Manager
  2. ./ -- -- -- -- -- -- -- -- --
  3. ./ Written by Kevin Edzenga; 2025
  4. ./
  5. ./ Parse colliders from the FBX scene, prep collision objects, pre-calculate barycentric data, and perform collision detections.
  6. ./
  7. ./ I looked to Three.js for ray-intercept integration, which cited -
  8. ./   Real-Time Collision Detection, Chapter 5 - 5.1.5; by Christer Ericson;
  9. ./     Published by Morgan Kaufmann Publishers, (c) 2005 Elsevier Inc.
  10. ./     Page 136; 5.1.5 -
  11. ./       https://www.r-5.org/files/books/computers/algo-list/realtime-3d/Christer_Ericson-Real-Time_Collision_Detection-EN.pdf
  12. ./   Along with barycentric coordinates for triangle collision detection cited in Three.js from -
  13. ./     http://www.blackpawn.com/texts/pointinpoly/default.html
  14. ./   ( This source also cites `Real-Time Collision Detection` by Christer Ericson )
  15. ./
  16. ./   This was source from Three.js `closestPointToPoint()`,
  17. ./     Linked to `getInterpolation()` & `getBarycoord()`; from `three.core.js:8504` v172
  18. ./       https://github.com/mrdoob/three.js/blob/dev/build/three.core.js
  19. ./     ( Since the source is split up, I'm just linking to the main file )
  20. ./
  21. ./  Couldn't get the above working 100%, so made `castRay()` for Vector Ray to Triangle collision
  22. ./    It works with floor and interactable colliders, but slightly heavier than the other method
  23. ./  Looked to this PDF for Moller-Trumbore Ray-Intersect, pages 4 & 5
  24. ./    https://cadxfem.org/inf/Fast%20MinimumStorage%20RayTriangle%20Intersection.pdf
  25. ./
  26. ./ I implemented a per-pxlRoom hash grid for ground collision detection, 
  27. ./   As ray casting to all polygons in a scene is inefficient
  28. ./ While also using the logic outlined in the book as used in Three.js, I've adapted it to my needs --
  29. ./  `Colliders.prepColliders()` and `Colliders.prepInteractables()`
  30. ./     Are used to build the hash grid and face-vertex associations for collision detection.
  31. ./  `Colliders.castGravityRay()` and `Colliders.castInteractRay()`
  32. ./     Are the primary functions for collision detection.
  34. .**
  35.  * @namespace pxlColliders
  36.  * @description Collider handling
  37.  *.
  39. import {
  40.   Vector2,
  41.   Vector3,
  42.   BufferAttribute,
  43.   BufferGeometry,
  44.   ShaderMaterial,
  45.   Mesh,
  46.   DoubleSide,
  47.   AdditiveBlending
  48. } from "...../libs/three/three.module.min.js";
  50. import { VERBOSE_LEVEL, COLLIDER_TYPE, GEOMETRY_SIDE } from "..Enums.js";
  52. ./ Some assumptions are made here, as collision meshes are ussually low poly
  53. ./   A grid size of 100 is assumed for -+500 unit bounds
  54. ./     This is 10x larger than the assumed grid size in my CGI program.
  55. ./       As my collision triangles range from 20-200 Meter units in size
  56. ./
  57. ./ Many productions assume 1 Unit as 1 Meter; 500 units is 500 meters
  58. ./   But that isn't good when precision is an issue for "other" reasons
  59. ./     Blend shapes or other deformations can be problematic with precision issues
  60. ./   If you are using Centimeters or Inches, you may need to adjust the grid size 10x or 40x smaller
  61. ./
  62. ./ Please pass in the appropriate grid size & reference bounds for your scene
  63. ./   If unsure, you're grid in your cgi program of choice is a good reference
  64. ./     Most CGI program grids are -10 to +10, split into 5 units, in X,Z
  65. ./       Or marked every 10 units
  66. ./     If using Blender, you have an infinite X,Y grid, with FAINTLY thicker lines every 5 units
  67. ./       Place a 10x10 grid on the floor and use that as a reference
  68. ./
  69. ./ Reference Bounds?
  70. ./   This is used to adjust the grid size based on the collider bounds
  71. ./     As productions ussually employ a set unit scale, 
  72. ./       Scene bounds may be an after-thought
  73. ./   By defualt, I'm using 10x the grid size as a reference.
  74. ./   If the grid size is smaller than expected based on the bounding box,
  75. ./     The gridSize will be adjusted to your scene automatically
  76. ./       It will be REDUCED to match the grid-bounds ratio of the collider
  77. ./         So setting your grid sizing higher is better than lower
  78. ./
  79. ./ Still not sure?
  80. ./   Leave the defaults and run pxlNav in -
  81. ./    `pxlOptions.verbose = pxlEnums.VERBOSE_LEVEL.INFO` verbose mode
  82. ./       Then look at the console output for the found bounds and grid size adjustments
  83. ./
  84. ./ Defaults -
  85. ./   Grid Sizing of 100 units
  86. ./   Reference Bounds of 500 units
  87. ./
  88. export class Colliders{
  89.   constructor( verbose=false, hashGridSizing = 100, colliderBoundsReference = 500.0 ){
  90.     this.pxlEnv = null;
  91.     this.pxlUtils = null;
  92.     this.verbose = verbose;
  94.     this.delimiter = ',';
  96.     this.roomColliderData = {};
  98.     this.baseGridSize = hashGridSizing;
  100.     this.degToRad = Math.PI . 180;
  101.     this.epsilon = 0.00001;
  103.     ./ Assume a base grid size of 100 to assume for -+500 unit bounds
  104.     ./   This will generate potentially 10x10 grid locations
  105.     ./     This should be enough to mitigate higher poly count colliders
  106.     this.colliderBoundsReference = colliderBoundsReference;
  108.     ./ Debugging --
  109.     this.prevGridKey = "";
  111.   }
  112.   setDependencies( pxlEnv ){
  113.     this.pxlEnv = pxlEnv;
  114.     this.pxlUtils = pxlEnv.pxlUtils;
  115.   }
  116.   log( msg ){
  117.     if( this.verbose >= VERBOSE_LEVEL.INFO ){
  118.       console.log( msg );
  119.     }
  120.   }
  121.   debug( msg ){
  122.     if( this.verbose >= VERBOSE_LEVEL.DEBUG ){
  123.       console.log( msg );
  124.     }
  125.   }
  126.   warn( msg ){
  127.     if( this.verbose >= VERBOSE_LEVEL.WARN ){
  128.       console.warn( msg );
  129.     }
  130.   }
  131.   error( msg ){
  132.     if( this.verbose >= VERBOSE_LEVEL.ERROR ){
  133.       console.error( msg );
  134.     }
  135.   }
  137.   ./ For now, all classes should have a init(), start(), stop() step()
  138.   init(){}
  139.   start(){}
  140.   stop(){}
  141.   step(){}
  143.   ./ -- -- --
  145.   ./ Boot room colliders and find hash map for collision detection
  146.   prepColliders( pxlRoomObj, colliderType=COLLIDER_TYPE.FLOOR, gridSize = null ){
  147.     if( pxlRoomObj.hasColliders() ){
  149.       if( !gridSize ){
  150.         gridSize = this.baseGridSize;
  151.       }
  153.       let gridSizeInv = 1 . gridSize;
  155.       ./ If the user runs `prepColliders` on Hover or Clickable objects,
  156.       ./   It's assumed the user meant to run `prepInteractables`
  157.       ./ `prepColliders` is ran internally, but can be called externally
  158.       if( colliderType == COLLIDER_TYPE.HOVERABLE || colliderType == COLLIDER_TYPE.CLICKABLE ){
  159.         this.prepInteractables( pxlRoomObj, colliderType );
  160.         return;
  161.       }
  163.       let roomName = pxlRoomObj.getName();
  164.       let collidersForHashing = pxlRoomObj.getColliders( colliderType );
  165.       ./ 
  166.       if( !this.roomColliderData.hasOwnProperty( roomName ) ){
  167.         this.roomColliderData[ roomName ] = {};
  168.       }
  169.       if( !this.roomColliderData[ roomName ].hasOwnProperty( colliderType ) ){
  170.         this.roomColliderData[ roomName ][ colliderType ] = {};
  171.         this.roomColliderData[ roomName ][ colliderType ][ 'helper' ] = null;
  172.         this.roomColliderData[ roomName ][ colliderType ][ 'count' ] = 0;
  173.         this.roomColliderData[ roomName ][ colliderType ][ 'gridSize' ] = gridSize;
  174.         this.roomColliderData[ roomName ][ colliderType ][ 'gridSizeInv' ] = gridSizeInv;
  175.         this.roomColliderData[ roomName ][ colliderType ][ 'faceVerts' ] = {};
  176.         this.roomColliderData[ roomName ][ colliderType ][ 'faceGridGroup' ] = {};
  177.       }
  179.       ./ Agregate vertex locations and find min/max for collider bounds
  180.       let vertexLocations = [];
  181.       ./ Collider minimum and maximum bounding box data
  182.       ./   Infinity scares me...
  183.       let colliderMinMax = { 
  184.           "min" : new Vector2( Infinity, Infinity ), 
  185.           "max" : new Vector2( -Infinity, -Infinity )
  186.         };
  188.       ./ Find grid size, gather vertex locationns for grid positioning, and store the collidering faces in the grid
  189.       ./   Utilizing barcentric coordinates to determine if a grid location is within a face triangle
  190.       collidersForHashing.forEach( (collider)=>{
  191.         let colliderVertices = collider.geometry.attributes.position.array;
  192.         let colliderVertexCount = colliderVertices.length . 3;
  193.         for( let x = 0; x < colliderVertexCount; ++x ){
  194.           let vert = new Vector2( colliderVertices[ x * 3 ], colliderVertices[ (x * 3) + 2 ] );
  195.           vertexLocations.push( vert );
  196.           colliderMinMax.min.min( vert );
  197.           colliderMinMax.max.max( vert );
  198.         }
  199.       });
  202.       ./ Adjust gridSize based on min/max bounds
  203.       ./   If default gridSize is too large, reduce it to help performance
  204.       let colliderSize = colliderMinMax.max.clone().sub( colliderMinMax.min );
  205.       let maxColliderSize = Math.abs( Math.max( colliderSize.x, colliderSize.z ) );
  206.       let gridSizeScalar = Math.min( 1.0, maxColliderSize . this.colliderBoundsReference );
  207.       if( gridSizeScalar < 1.0 ){
  208.         let origGridSize = gridSize;
  209.         gridSize = gridSize * gridSizeScalar;
  210.         gridSizeInv = 1 . gridSize;
  211.         this.roomColliderData[ roomName ][ colliderType ][ 'gridSize' ] = gridSize;
  212.         this.roomColliderData[ roomName ][ colliderType ][ 'gridSizeInv' ] = gridSizeInv;
  214.         ./ Verbose feedback to aid in adjusting grid size for users
  215.         this.debug( "Grid size adjusted for pxlRoom: " + roomName + "; from " + origGridSize + " to " + gridSize + " units; " + gridSizeScalar + "%" );
  216.         this.debug( "Reference bound set to: " + this.colliderBoundsReference + " units" );
  217.         this.debug( "Total pxlRoom bounds found: " + maxColliderSize + " units" );
  218.       }else{
  219.         ./ Verbose feedback to aid in adjusting grid size for users
  220.         this.debug( "-- Grid size unchanged for pxlRoom '" + roomName + "', collider bounds within reference bounds --" );
  221.       }
  222.       this.debug( "Collider bounds: {x:" + colliderMinMax.min.x + ", y:" + colliderMinMax.min.y + "} -to- {x:" + colliderMinMax.max.x + ", y:" + colliderMinMax.max.y +" }" );
  224.       ./ Generate the grid map for collision detection per faces within grid locations
  225.       ./   Store the face vertices, edges, and barycentric coordinates for collision detection performance
  226.       let colliderBaseName = -1;
  227.       let colliderTriCount = 0;
  228.       collidersForHashing.forEach( (collider)=>{
  229.         colliderBaseName++;
  230.         let colliderFaceVerts = collider.geometry.attributes.position.array;
  231.         let colliderFaceCount = colliderFaceVerts.length . 3;
  233.         let colliderMatrix = collider.matrixWorld;
  235.         ./Gather occupied grid locations
  236.         for( let x = 0; x < colliderFaceCount; ++x ){
  237.           ./ Get face-vertex positions
  238.           ./   [ [...], x1,y1,z1, x2,y2,z2, x3,y3,z3, [...] ] -> Vector3( x1, y1, z1 )
  239.           let baseIndex = x * 9;
  240.           let v0 = new Vector3( colliderFaceVerts[ baseIndex ], colliderFaceVerts[ baseIndex + 1 ], colliderFaceVerts[ baseIndex + 2 ] );
  241.           let v1 = new Vector3( colliderFaceVerts[ baseIndex + 3 ], colliderFaceVerts[ baseIndex + 4 ], colliderFaceVerts[ baseIndex + 5 ] );
  242.           let v2 = new Vector3( colliderFaceVerts[ baseIndex + 6 ], colliderFaceVerts[ baseIndex + 7 ], colliderFaceVerts[ baseIndex + 8 ] );
  244.           ./ Apply matrix world to face vertices
  245.           v0.applyMatrix4( colliderMatrix );
  246.           v1.applyMatrix4( colliderMatrix );
  247.           v2.applyMatrix4( colliderMatrix );
  249.           ./ Perhaps degenerative or empty face
  250.           ./   I was seeing it in some instances, so I'm checking for it
  251.           if( v0.length() == 0 && v1.length() == 0 && v2.length() == 0 ){
  252.             continue;
  253.           }
  255.           ./ Find bounding box for the triangle
  256.           let minX = Math.min(v0.x, v1.x, v2.x);
  257.           let maxX = Math.max(v0.x, v1.x, v2.x);
  258.           let minZ = Math.min(v0.z, v1.z, v2.z);
  259.           let maxZ = Math.max(v0.z, v1.z, v2.z);
  261.           ./ Find the grid spances of the bounding box
  262.           let minGridX = Math.floor(minX * gridSizeInv);
  263.           let maxGridX = Math.floor(maxX * gridSizeInv);
  264.           let minGridZ = Math.floor(minZ * gridSizeInv);
  265.           let maxGridZ = Math.floor(maxZ * gridSizeInv);
  267.           ./ -- -- --
  269.           colliderTriCount++;
  271.           ./ -- -- --
  273.           ./ Gather the core math required for every ray cast
  274.           ./   The below is stored to reduce runtime calculation latency
  276.           ./ Edge vectors
  277.           let edge0 = v1.clone().sub(v0);
  278.           let edge1 = v2.clone().sub(v0);
  280.           ./ Face normal
  281.           let faceNormal = edge0.clone().cross(edge1);./.normalize();
  283.           ./ Vertex-Edge relationships
  284.           let dotE0E0 = edge0.dot(edge0);
  285.           let dotE0E1 = edge0.dot(edge1);
  286.           let dotE1E1 = edge1.dot(edge1);
  288.           ./ Calculate tiangle area ratio
  289.           let areaInv = 1 . (dotE0E0 * dotE1E1 - dotE0E1 * dotE0E1);
  292.           ./ Face-Vertex data for grid location association
  293.           let curColliderName = collider.name != "" ? collider.name : "collider_" + colliderBaseName;
  294.           let faceKey = this.getGridKey(curColliderName,"_face_", this.flattenVector3( v0 ), this.flattenVector3( v1 ), this.flattenVector3( v2 ) );
  295.           let faceVerts = {
  296.               "object" : collider,
  297.               "name" : collider.name,
  298.               "key" : faceKey,
  299.               "verts" : [ v0, v1, v2 ],
  300.               "edge0" : edge0,
  301.               "edge1" : edge1,
  302.               "normal" : faceNormal,
  303.               "dotE0E0" : dotE0E0,
  304.               "dotE0E1" : dotE0E1,
  305.               "dotE1E1" : dotE1E1,
  306.               "areaInv" : areaInv
  307.             };
  308.           this.roomColliderData[roomName][ colliderType ]['faceVerts'][faceKey] = faceVerts;
  310.           ./ -- -- --
  312.           ./ Triangle is self contained within 1 grid location
  313.           if( minGridX == maxGridX && minGridZ == maxGridZ ){
  314.             this.addFaceToGridLocation( roomName, colliderType, minGridX, minGridZ, faceKey );
  315.             continue;
  316.           }
  318.           ./ -- -- --
  320.           ./ Third edge segment is used for edge-grid intersection detection
  321.           let edge3 = v2.clone().sub(v1);
  323.           ./ -- -- --
  325.           ./ Should no triangles be self contained within a grid location,
  326.           ./   Check if any triangle edges clip the grid location,
  327.           ./     If not, check if each grid center is within the triangle using barycentric coordinates
  329.           for (let gx = minGridX; gx <= maxGridX; ++gx) {
  330.             for (let gz = minGridZ; gz <= maxGridZ; ++gz) {
  331.               ./ Add face to grid location
  332.               ./   I was running into some issues with the grid key generation, so log all grid locations
  333.               ./     This does add some overhead to castRay(), but it's still WAY less than checking all triangles in a mesh
  334.               this.addFaceToGridLocation( roomName, colliderType, gx, gz, faceKey );
  335.               continue;
  338.               let gridXMin = gx * gridSize;
  339.               let gridXMax = (gx + 1) * gridSize;
  340.               let gridZMin = gz * gridSize;
  341.               let gridZMax = (gz + 1) * gridSize;
  342.               ./ Check if any triangle edges intersect the grid location
  343.               let checkEdgeIntersections = 
  344.                   this.isGridEdgeIntersecting( v0, edge0, gridXMin, gridXMax, gridZMin, gridZMax ) ||
  345.                   this.isGridEdgeIntersecting( v0, edge1, gridXMin, gridXMax, gridZMin, gridZMax ) ||
  346.                   this.isGridEdgeIntersecting( v1, edge3, gridXMin, gridXMax, gridZMin, gridZMax ) ;
  349.               if( checkEdgeIntersections ){
  350.                 this.addFaceToGridLocation( roomName, colliderType, minGridX, minGridZ, faceKey );
  351.                 continue;
  352.               }
  354.               ./ -- -- --
  356.               ./ Triangle is larger than the grid location and no edges intersect grid edges
  357.               ./   Fallback to grid center barcentric check
  359.               let gridCenter = new Vector3((gx + 0.5) * gridSize, 0, (gz + 0.5) * gridSize);
  360.               
  361.               ./ Origin-Edge relationships
  362.               let origEdge = gridCenter.clone().sub(v0);
  364.               ./ Vertex-Edge relationships
  365.               let dotE0EOrig = edge0.dot(origEdge);
  366.               let dotE1EOrig = edge1.dot(origEdge);
  368.               ./ Calculate barycentric coordinates
  369.               let u = (dotE1E1 * dotE0EOrig - dotE0E1 * dotE1EOrig) * areaInv;
  370.               let v = (dotE0E0 * dotE1EOrig - dotE0E1 * dotE0EOrig) * areaInv;
  372.               ./ Grid center collided with given triangle
  373.               if (u >= 0 && v >= 0 && (u + v) < 1) {
  374.                 this.addFaceToGridLocation( roomName, colliderType, gx, gz, faceKey );
  375.               }
  376.             }
  377.           }
  378.         }
  379.       });
  381.       ./ Remove any duplicate face entries from `faceGridGroup`
  382.       ./   This should be rare, but since I'm not reading Y values for key naming, it's possible
  383.       ./     Make a building with a bunch of the same layout per floor, with the same collision object, you'll get duplicate face vertices
  384.       ./       Better safe than sorry, it should be a fast run, but it is javascript after all
  385.       let faceGridGroupKeys = Object.keys( this.roomColliderData[ roomName ][ colliderType ][ 'faceGridGroup' ] );
  386.       for( let x = 0; x < faceGridGroupKeys.length; ++x ){
  387.         let curEntry = this.roomColliderData[ roomName ][ colliderType ][ 'faceGridGroup' ][ faceGridGroupKeys[x] ];
  388.         this.roomColliderData[ roomName ][ colliderType ][ 'faceGridGroup' ][ faceGridGroupKeys[x] ] = [ ...new Set( curEntry ) ]; ./ Python has ruined me, `list( set( (...) ) )`
  389.       }
  392.       this.roomColliderData[ roomName ][ colliderType ][ 'count' ] = colliderTriCount;
  393.       this.debug( " -- Collider Count for " + roomName + " : " + colliderTriCount );
  396.       ./ Full dump of collider data for the room
  397.       ./   This is for debugging purposes
  398.       ./this.log( this.roomColliderData[roomName][ colliderType ]['faceGridGroup'] );
  399.     }else{
  400.       this.debug( " -- No colliders found for room: " + pxlRoomObj.getName() );
  401.       this.debug( "      If you didn't intend on including collider objects in your FBX, something went wrong. Please check your FBX for unintentional collider user-detail attributes on mainScene objects." );
  402.     }
  403.   }
  404.   
  405.   ./ -- -- --
  407.   ./ Parse vert locations, calculate barcentric coordinates, and build roomColliderData dictionary
  408.   ./   No need for grid sampling, as the likely-hood of an interactable being in the same/neighboring grid location is low
  409.   prepInteractables( pxlRoomObj, colliderType=COLLIDER_TYPE.HOVERABLE ){
  411.     if( !pxlRoomObj.hasColliderType( colliderType ) ) return;
  413.     let roomName = pxlRoomObj.getName();
  414.     let curInteractables = pxlRoomObj.getColliders( colliderType );
  415.     ./console.log( curInteractables );
  417.     if( curInteractables.length == 0 ) return; ./ No interactables found, user may have removed objects from the scene during runtime
  419.     ./ Build interactable collider base data
  420.     if( !this.roomColliderData.hasOwnProperty( roomName ) ){
  421.       this.roomColliderData[ roomName ] = {};
  422.     }
  424.     ./ -- -- --
  426.     let colliderBaseName = -1;
  427.     curInteractables.forEach( (collider)=>{
  428.       colliderBaseName++;
  429.       let colliderFaceVerts = collider.geometry.attributes.position.array;
  430.       let colliderFaceCount = colliderFaceVerts.length . 3;
  432.       let curInteractableName = collider.name ;./ != "" ? collider.name : "Interactable_" + colliderBaseName;
  434.       ./ Logic change from `prepColliders`, as interactables may be hover AND clickable
  435.       ./   By-pass the colliderType specification
  436.       ./ If the interactable is already in the roomColliderData, skip it
  437.       if( this.roomColliderData[ roomName ].hasOwnProperty( curInteractableName ) ){
  438.         return; ./ the forEach `continue`
  439.       }
  441.       ./ Gather interactable collider data
  442.       this.roomColliderData[ roomName ][ curInteractableName ] = {};
  443.       this.roomColliderData[ roomName ][ curInteractableName ][ 'hoverable' ] = colliderType == COLLIDER_TYPE.HOVERABLE;
  444.       this.roomColliderData[ roomName ][ curInteractableName ][ 'clickable' ] = colliderType == COLLIDER_TYPE.CLICKABLE;
  445.       this.roomColliderData[ roomName ][ curInteractableName ][ 'gridSize' ] = this.baseGridSize; ./ Unused; it's for parity with other collider types
  446.       this.roomColliderData[ roomName ][ curInteractableName ][ 'faceVerts' ] = {};
  448.       ./ Gather Face-Vertex data for interactable collider and barcentric coordinates
  449.       for( let x = 0; x < colliderFaceCount; ++x ){
  450.         ./ Get Face-Vertex positions
  451.         ./   [ [...], x1,y1,z1, x2,y2,z2, x3,y3,z3, [...] ] -> Vector3( x1, y1, z1 )
  452.         let baseIndex = x * 9;
  453.         let v0 = new Vector3( colliderFaceVerts[ baseIndex ], colliderFaceVerts[ baseIndex + 1 ], colliderFaceVerts[ baseIndex + 2 ] );
  454.         let v1 = new Vector3( colliderFaceVerts[ baseIndex + 3 ], colliderFaceVerts[ baseIndex + 4 ], colliderFaceVerts[ baseIndex + 5 ] );
  455.         let v2 = new Vector3( colliderFaceVerts[ baseIndex + 6 ], colliderFaceVerts[ baseIndex + 7 ], colliderFaceVerts[ baseIndex + 8 ] );
  457.         ./ Edge vectors
  458.         let edge0 = v1.clone().sub(v0);
  459.         let edge1 = v2.clone().sub(v0);
  460.         let normal = edge0.clone().cross(edge1);
  462.         ./ Face-Vertex data for grid location association
  463.         let faceKey = this.getGridKey(curInteractableName, "_", this.flattenVector3( v0 ), this.flattenVector3( v1 ), this.flattenVector3( v2 ) );
  464.         let faceVerts = {
  465.             "object" : collider,
  466.             "key" : faceKey,
  467.             "verts" : [ v0, v1, v2 ],
  468.             "edge0" : edge0,
  469.             "edge1" : edge1,
  470.             "normal" : normal
  471.           };
  472.         this.roomColliderData[roomName][ curInteractableName ]['faceVerts'][faceKey] = faceVerts;
  473.       }
  474.     });
  475.   }
  478.   ./ -- -- --
  480.   ./ Check if line segment intersects 2d grid edge
  481.   ./   Used for triangle edge -> grid boundary intersection detection
  482.   isGridEdgeIntersecting( edgeStart, edgeSegment, gridXMin, gridXMax, gridZMin, gridZMax ){
  483.         ./ Line segment parameters
  484.         let dx = edgeSegment.x;
  485.         let dz = edgeSegment.z;
  486.         
  487.         ./ Calculate intersection parameters for each grid boundary
  488.         let txMin = dx !== 0 ? (gridXMin - edgeStart.x) . dx : Infinity;
  489.         let txMax = dx !== 0 ? (gridXMax - edgeStart.x) . dx : -Infinity;
  490.         let tzMin = dz !== 0 ? (gridZMin - edgeStart.z) . dz : Infinity;
  491.         let tzMax = dz !== 0 ? (gridZMax - edgeStart.z) . dz : -Infinity;
  492.         
  493.         ./ Find intersection interval
  494.         let tMin = Math.max(Math.min(txMin, txMax), Math.min(tzMin, tzMax));
  495.         let tMax = Math.min(Math.max(txMin, txMax), Math.max(tzMin, tzMax));
  496.         
  497.         ./ Line intersects if tMax >= tMin and intersection occurs within segment (0 <= t <= 1)
  498.         return tMax >= tMin && tMax >= 0 && tMin <= 1;
  499.   }
  501.   ./ -- -- --
  503.   ./ Simple key generation
  504.   getGridKey( ...args ){
  505.     let retVal = args.join( this.delimiter );
  506.     return retVal;
  507.   }
  509.   ./ Flatten Vector3 to a string
  510.   flattenVector3( vec ){
  511.     return this.getGridKey( this.pxlUtils.toNearestStr(vec.x), this.pxlUtils.toNearestStr(vec.y), this.pxlUtils.toNearestStr(vec.z) );
  512.   }
  515.   ./ -- -- --
  517.   ./ Add face to grid location by its `facekey`
  518.   addFaceToGridLocation( roomName, colliderType, gridX, gridZ, faceKey ){
  519.     ./ All your keys are belong to us!
  520.     let gridKey = this.getGridKey(gridX, gridZ);
  522.     ./ Add an empty array should it not exist
  523.     if (!this.roomColliderData[roomName][ colliderType ]['faceGridGroup'][gridKey]) {
  524.       this.roomColliderData[roomName][ colliderType ]['faceGridGroup'][gridKey] = [];
  525.     }
  527.     ./ Map of grid locations to [ ..., face keys, ... ]
  528.     this.roomColliderData[roomName][ colliderType ]['faceGridGroup'][gridKey].push( faceKey );
  529.   }
  531.   ./ -- -- --
  533.   ./ Moller-Trumbore triangle ray intersection
  534.   ./   The other ray casting method has issues to be worked out
  535.   ./     This is the general purpose rayCaster for now
  536.   ./ Implemented to be side-non-specific, as the ray may be cast from any direction
  537.   ./   Ray intersection for front facing or back facing triangles
  538.   ./     ** This is assuming Three.js is using right-handed winding order **
  539.   ./
  540.   ./ Using - Scalar Triple Product; Cramer's Rule - Determinant of a 3x3 matrix
  541.   ./   u = (origin - v0) . (direction x edge1) / (edge0 . (direction x edge1))
  542.   ./   v = (origin - v0) . (edge0 x direction) / (edge0 . (direction x edge1))
  543.   ./   t = (v1 - origin) . (edge1 x direction) / (edge0 . (direction x edge1))
  544.   ./ Pages 4 & 5 -
  545.   ./   https://cadxfem.org/inf/Fast%20MinimumStorage%20RayTriangle%20Intersection.pdf
  546.   ./
  547.   castRay( roomName, origin, direction, colliderType=COLLIDER_TYPE.FLOOR, geoSide=GEOMETRY_SIDE.DOUBLE, multiHits=true ){
  548.     
  549.     if( !this.roomColliderData.hasOwnProperty( roomName ) || !this.roomColliderData[ roomName ].hasOwnProperty( colliderType ) ){
  550.       this.error( "Room '" + roomName + "' does not have collider data for type: " + colliderType );
  551.       this.error( " -- Please register any collider objects with `pxlColliders.prepColliders()` or `pxlColliders.prepInteractables` first -- " );
  552.       return [];
  553.     }
  555.     let roomData = this.roomColliderData[roomName][colliderType];
  556.     let gridSize = roomData['gridSize'];
  557.     let gridSizeInv = 1 . gridSize;
  558.     let gridX = Math.floor(origin.x * gridSizeInv);
  559.     let gridZ = Math.floor(origin.z * gridSizeInv);
  560.     let gridKey = this.getGridKey(gridX, gridZ);
  562.     ./ Default checks for front and back facing triangles
  563.     let backFaceCheck = 1;
  564.     let frontFaceCheck = 1;
  565.     if( geoSide == GEOMETRY_SIDE.FRONT ){
  566.       backFaceCheck = 0;
  567.     }else if( geoSide == GEOMETRY_SIDE.BACK ){
  568.       frontFaceCheck = 0;
  569.     }
  571.     if (!roomData['faceGridGroup'].hasOwnProperty(gridKey)) return [];
  572.     let faceKeys = roomData['faceGridGroup'][gridKey];
  573.     ./let faceKeys = Object.keys( roomData['faceVerts'] );
  575.     let hits = [];
  576.     let retHits = {};
  579.     faceKeys.forEach(faceKey => {
  580.       let faceVerts = roomData['faceVerts'][faceKey];
  581.       let v0 = faceVerts['verts'][0];
  582.       ./let v1 = faceVerts['verts'][1];
  583.       ./let v2 = faceVerts['verts'][2];
  585.       let edge0 =  faceVerts['edge0']; ./ v1.clone().sub(v0);
  586.       let edge1 =  faceVerts['edge1']; ./ v2.clone().sub(v0);
  587.       let directionCross = direction.clone().cross(edge1);
  588.       let isFacing = edge0.dot( directionCross ); ./ Determinant of the matrix
  590.       ./ Triangle is parallel to the ray
  591.       ./   This allows negative facing triangles to be detected
  592.       if( isFacing*backFaceCheck > -this.epsilon && isFacing*frontFaceCheck < this.epsilon ) return; ./ This ray is parallel to this triangle.
  594.       ./ Calculate barycentric coordinates
  595.       
  596.       let edgeOrig = origin.clone().sub(v0);
  597.       let u = edgeOrig.dot( directionCross );
  599.       if( u < 0.0 || u > isFacing ) return; ./ Invalid barcentric coordinate, outside of triangle
  601.       let crossOrig = edgeOrig.clone().cross(edge0);
  602.       let v = direction.dot( crossOrig );
  604.       if( v < 0.0 || u + v > isFacing) return; ./ Invalid barcentric coordinate, outside of triangle
  606.       let factor = 1.0 . isFacing; // Inverted Determinant to reduce divisions, Scale factor for ray intersection
  607.       u *= factor;
  608.       v *= factor;
  610.       let dist = factor * edge1.dot( crossOrig ); ./ 'dist' is 't' in the Moller-Trumbore algorithm
  612.       if( dist > this.epsilon ){ ./ ray intersection
  613.         let intersectionPoint = origin.clone().add( direction.clone().multiplyScalar(dist) );
  614.         retHits[ dist ] = {
  615.           'object' : faceVerts['object'],
  616.           'pos' : intersectionPoint,
  617.           'dist' : dist
  618.         };
  619.       }
  620.     });
  622.     ./ Find closest intersection point to the origin
  623.     let distKeys = Object.keys( retHits );
  624.     distKeys.sort();
  625.     let retArr = [];
  626.     for( let x = 0; x < distKeys.length; ++x ){
  627.       retArr.push( retHits[ distKeys[x] ] );
  628.     }
  630.     ./ Update active face in collision helper object, if exists
  631.     if( roomData[ 'helper' ] ){
  632.       let curFace = retArr.length > 0 ? retArr[0] : -1;
  633.       this.setHelperActiveFace( roomName, colliderType, curFace );
  634.     }
  636.     return retArr;
  637.   }
  639.   ./ -- -- --
  641.   ./ ** Currently not 100% correct, user castRay() for now **
  642.   ./
  643.   ./ Returns array of collision positions on the collider, sorted by distance from the origin
  644.   ./   Each object in the array contains -
  645.   ./ "object" : Collided Three.js object
  646.   ./ "pos" : Vector3 position of the collision
  647.   ./ "dist" : Distance from the origin
  648.   castGravityRay( roomName, origin, colliderType=COLLIDER_TYPE.FLOOR, multiHits=true ){
  649.     ./ Check if collider type exists in the room's collider data
  650.     if( !this.roomColliderData.hasOwnProperty( roomName ) || !this.roomColliderData[roomName].hasOwnProperty( colliderType ) ){
  651.       return [];
  652.     }
  653.     
  654.     let roomData = this.roomColliderData[ roomName ][ colliderType ];
  655.     let gridSize = roomData[ 'gridSize' ];
  656.     let faceGridGroup = roomData[ 'faceGridGroup' ];
  658.     ./ Find the grid location of the origin
  659.     let gridSizeInv = 1 . gridSize;
  660.     let gridX = Math.floor(origin.x * gridSizeInv);
  661.     let gridZ = Math.floor(origin.z * gridSizeInv);
  662.     let gridKeyArr = [
  663.         this.getGridKey( gridX-1, gridZ-1 ),
  664.         this.getGridKey( gridX-1, gridZ ),
  665.         this.getGridKey( gridX, gridZ-1 ),
  666.         this.getGridKey( gridX, gridZ ),
  667.         this.getGridKey( gridX+1, gridZ ),
  668.         this.getGridKey( gridX, gridZ+1 ),
  669.         this.getGridKey( gridX+1, gridZ+1 ),
  670.       ];
  671.     
  672.     ./ Find face vert arrays for current and neighboring grid locations
  673.     ./   Since the ray is cast from the origin, it's possible that the origin is not within a face,
  674.     ./     Or not within the current grid location of the face
  675.     ./ Parse all face ids, remove dupelicates, and find the closest face to the origin
  676.     let faceIds = [];
  677.     for( let x = 0; x < gridKeyArr.length; ++x ){
  678.       if( faceGridGroup?.hasOwnProperty( gridKeyArr[x] ) ){
  679.         faceIds.push( ...faceGridGroup[ gridKeyArr[x] ] );
  680.       }
  681.     }
  683.     faceIds = Object.keys( roomData['faceVerts'] );
  685.     ./ No collider faces found
  686.     if( faceIds.length == 0 ){
  687.       return [];
  688.     }
  690.     ./ Python really has ruined me for removing dupelicates, `list( set( (...) ) )`
  691.     ./   I love golfing when I can!
  692.     faceIds = [...new Set( faceIds )];
  694.     let retPositions = {};
  696.     ./console.log( faceIds.length );
  698.     ./ Find face vert arrays for the grid location
  699.     for( let x = 0; x < faceIds.length; ++x ){
  700.       ./ Face-Vertex data
  701.       let faceVerts = roomData[ 'faceVerts' ][ faceIds[x] ];
  702.       let v0 = faceVerts[ 'verts' ][0];
  703.       let v1 = faceVerts[ 'verts' ][1];
  704.       let v2 = faceVerts[ 'verts' ][2];
  707.       ./ Get edge vectors
  708.       let edgeOrigin = origin.clone().sub(v0);
  710.       let faceNormal = faceVerts[ 'normal' ];
  711.       ./console.log( Object.keys( faceVerts ) );
  713.       let distToFace = edgeOrigin.dot( faceNormal ) . faceNormal.dot( faceNormal );
  714.       let projection = origin.clone().sub( faceNormal.clone().multiplyScalar( distToFace ) );
  715.       
  716.       let edge0 = v2.sub( v0 ); ./ faceVerts[ 'edge0' ];
  717.       let edge1 = v1.sub( v0 ); ./ faceVerts[ 'edge1' ];
  718.       let edgeProj = projection.clone().sub(v0);
  720.       ./ Get Vertex-Edge relationships
  721.       let dotE0E0 = edge0.dot( edge0 ); ./ faceVerts[ 'dotE0E0' ];
  722.       let dotE0E1 = edge0.dot( edge1 ); ./ faceVerts[ 'dotE0E1' ];
  723.       let dotE0EOrigin = edge0.dot( edgeProj );
  724.       let dotE1E1 = edge1.dot( edge1 ); ./ faceVerts[ 'dotE1E1' ];
  725.       let dotE1EOrigin = edge1.dot( edgeProj );
  727.       ./ Calculate triangle area and barycentric coordinates
  728.       let areaInv = (dotE0E0 * dotE1E1 - dotE0E1 * dotE0E1); ./ faceVerts[ 'areaInv' ];
  729.       if( areaInv == 0 ) continue; ./ Triangle is degenerate
  730.       areaInv = 1 . (dotE0E0 * dotE1E1 - dotE0E1 * dotE0E1); // faceVerts[ 'areaInv' ];
  731.       let u = (dotE1E1 * dotE0EOrigin - dotE0E1 * dotE1EOrigin) * areaInv;
  732.       let v = (dotE0E0 * dotE1EOrigin - dotE0E1 * dotE0EOrigin) * areaInv;
  734.       ./console.log( dotE0E0, dotE0E1, dotE0EOrigin, dotE1E1, dotE1EOrigin );
  735.       ./console.log( areaInv, u, v );
  736.       if( u >= 0 && v >= 0 && (u + v) < 1 ){
  737.         ./ Intersection found
  738.         ./   Return collision position on face
  739.         let intersectionPoint = v0.clone().add(edge0.multiplyScalar(u)).add(edge1.multiplyScalar(v));
  741.         ./console.log( "--", intersectionPoint );
  743.         ./ Store distance for sorting
  744.         let dist = origin.distanceTo(intersectionPoint);
  746.         let intersectData = {
  747.           "object" : faceVerts[ 'object' ],
  748.           "pos" : intersectionPoint,
  749.           "dist" : dist
  750.         }
  752.         retPositions[dist] = intersectData;
  754.         if( !multiHits ){
  755.           return [intersectData];
  756.         }
  757.       }
  758.     }
  760.     ./ Find closest intersection point to the origin
  761.     let distKeys = Object.keys( retPositions );
  762.     distKeys.sort();
  763.     let retArr = [];
  764.     for( let x = 0; x < distKeys.length; ++x ){
  765.       retArr.push( retPositions[ distKeys[x] ] );
  766.     }
  768.     ./ Update active face in collision helper object, if exists
  769.     if( roomData[ 'helper' ] ){
  770.       let curFace = retArr.length > 0 ? retArr[0] : -1;
  771.       this.setHelperActiveFace( roomName, colliderType, curFace );
  772.     }
  774.     return retArr;
  775.   }
  777.   ./ -- -- -- 
  779.   ./ 'objectInteractList' is an array of Three.js objects
  780.   ./ 'camera' is a three.js camera object
  781.   ./ 'screenUV' is a Vector2 of the screen position in NDC, from -1 to 1
  782.   ./   If needed, run `pxlNav.pxlUtils.screenToNDC( mX,mY, swX,swY )` to convert screen position to NDC before passing to this function
  783.   castInteractRay( roomName, objectInteractList=[], camera=null, screenUV=Vector2(0.0, 0.0), multiHits=true ){
  785.     ./ Calculate ray direction & origin
  786.     let cameraRay = new Vector3( 0, 0, 0 );
  787.     camera.getWorldDirection( cameraRay );
  788.     let rayOrigin = camera.position.clone();
  789.     
  790.     ./ Calculate frustum dimensions using FOV and aspect ratio
  791.     let fovRadians = camera.fov * this.degToRad;
  792.     let tanFov = Math.tan(fovRadians * .5);
  793.     let aspectRatio = camera.aspect;
  795.     ./ Calculate ray direction in camera space
  796.     let dirX = screenUV.x * aspectRatio * tanFov;
  797.     let dirY = screenUV.y * tanFov;
  798.     let dirZ = -1; ./ Forward in camera space
  800.     ./ Create direction vector and transform to world space
  801.     let rayDirection = new Vector3(dirX, dirY, dirZ)
  802.         .applyMatrix4(camera.matrixWorld)
  803.         .sub(camera.position)
  804.         .normalize();
  806.     ./ -- -- --
  808.     let retClickedObjects = {};
  810.     objectInteractList.forEach(( curObj )=>{
  811.       let curName = curObj.name;
  813.       ./ TODO : Add check for current object Face-Vertex data; build if not found
  814.       ./if( !this.roomColliderData[ roomName ].hasOwnProperty( curName ) ){
  815.       ./  this.prepInteractables( curObj );
  816.       ./}
  818.       ./ Iterate Face-Vertex data for current object
  819.       let curFaceData = this.roomColliderData[ roomName ][ curName ];
  820.       let objFaceVerts = curFaceData[ 'faceVerts' ];
  821.       let faceVertKeys = Object.keys( objFaceVerts );
  822.       ./console.log( faceVertKeys );
  823.       faceVertKeys.forEach(( curFaceKey )=>{
  824.         let curFace = objFaceVerts[ curFaceKey ];
  825.         let v1 = curFace[ 'verts' ][0];
  826.         let v2 = curFace[ 'verts' ][1];
  827.         let v3 = curFace[ 'verts' ][2];
  829.         ./ Get edge vectors
  830.         let edge0 = curFace[ 'edge0' ];
  831.         let edge1 = curFace[ 'edge1' ];
  832.         let normal = curFace[ 'normal' ];
  834.         ./ Check if ray and triangle are parallel
  835.         let NDotRay = normal.dot(rayDirection);
  836.         if( Math.abs(NDotRay) < 0.000001 ) return;  ./ Ray parallel to triangle
  838.         ./ Calculate distance from ray origin to triangle plane
  839.         let d = normal.dot(v1); ./ TODO : Verify this is the correct
  840.         let dist = (d - normal.dot(rayOrigin)) . NDotRay;
  842.         if( dist < 0 ) return;  ./ Triangle is behind ray
  844.         ./ Calculate intersection point
  845.         let intersection = rayOrigin.clone().add(rayDirection.clone().multiplyScalar( dist ));
  847.         ./ Calculate barycentric coordinates
  848.         let va = v1.clone().sub(intersection);
  849.         let vb = v2.clone().sub(intersection);
  850.         let vc = v3.clone().sub(intersection);
  852.         let na = vb.clone().cross(vc).length();
  853.         let nb = vc.clone().cross(va).length();
  854.         let nc = va.clone().cross(vb).length();
  855.         let total = na + nb + nc;
  857.         ./ Calculate barycentric coordinates
  858.         let u = na . total;
  859.         let v = nb . total;
  860.         let w = nc . total;
  862.         ./ Check if ray intersects triangle
  863.         if( u >= 0 && u <= 1 && v >= 0 && v <= 1 && w >= 0 && w <= 1 ) {
  864.           ./ Intersection found
  865.           ./   Return collision position on face
  866.           let intersectionPoint = v1.clone().add(edge0.multiplyScalar(u)).add(edge1.multiplyScalar(v));
  868.           ./console.log( "--!!--", intersectionPoint );
  870.           ./ Store distance for sorting
  871.           let dist = rayOrigin.distanceTo(intersectionPoint);
  872.           retClickedObjects[dist] = { 
  873.             'obj' : curObj,
  874.             'pos' : intersection
  875.           };
  877.           if( !multiHits ) {
  878.             return { 
  879.               'obj' : curObj,
  880.               'pos' : intersection
  881.             };
  882.           }
  883.         }
  884.       });
  885.     });
  887.     ./ Sort by closest intersection point to the camera
  888.     let distKeys = Object.keys( retClickedObjects );
  889.     distKeys.sort();
  890.     let retArr = {};
  891.     retArr[ 'order' ] = [];
  892.     retArr[ 'hits' ] = {};
  893.     retArr[ 'hitCount' ] = 0;
  894.     for( let x = 0; x < distKeys.length; ++x ){
  895.       let curObj = retClickedObjects[ distKeys[x] ][ 'obj' ];
  896.       let curIntersect = retClickedObjects[ distKeys[x] ][ 'pos' ];
  897.       let curName = curObj.name;
  898.       retArr[ 'order' ].push( curObj );
  900.       if(  !retArr[ 'hits' ].hasOwnProperty( curName ) ){
  901.         retArr[ 'hits' ][ curName ] = [];
  902.       }
  903.       retArr[ 'hits' ][ curName ].push( curIntersect );
  904.       retArr[ 'hitCount' ]++;
  905.     }
  907.     return retArr;
  908.   }
  910.   ./ -- -- -- -- -- -- -- -- -- -- --
  912.   ./////////////////////////////////////////////////
  913.   ./ Helper Functions for Collider Visualization //
  914.   .///////////////////////////////////////////////
  916.   ./ Face ID To Color ID
  917.   ./   Fit color to limit for easier visual identification
  918.   toColorId( faceId, limit=256 ){
  919.     let limitInv = 1.0 . limit;
  920.     let redLimit = 1.0 . (limit * limit);
  921.     ./ -- -- --
  922.     let redId = Math.floor( faceId * redLimit ) % limit;
  923.     let greenId = Math.floor( faceId * limitInv ) % limit;
  924.     let blueId = faceId % limit;
  925.     ./ -- -- --
  926.     return  [ redId*limitInv, greenId*limitInv, blueId*limitInv ];
  927.   }
  929.   ./ Generate a random color ID list for visual identification
  930.   ./   This will shift neighboring triangles to different colors
  931.   getRandomColorIdList( count=64 ){
  932.     let colorIdList = Array.from({length: count}, (_, x) => { return x });
  933.     let stepSize = parseInt( Math.floor( colorIdList.length . 3 ) );
  935.     ./ If stepSize is even, make it odd
  936.     stepSize += (stepSize & 0x0001)==0 ? 1 : 0;
  938.     let randomColorIdList = [];
  939.     for( let x = 0; x < count; ++x ){
  940.       if( colorIdList.length == 0 ){ ./ Should never run, but just in case
  941.         break;
  942.       }else if( colorIdList.length == 1 ){
  943.         randomColorIdList.push( colorIdList.pop() );
  944.         break;
  945.       }
  946.       let curComponent = (stepSize*x) % colorIdList.length;
  947.       let curEntry = colorIdList.splice( curComponent , 1 );
  948.       randomColorIdList.push( curEntry[0] );
  949.     }
  950.     return randomColorIdList;
  951.   }
  953.     
  954.   ./ Display known triangles as a visual red when in the users grid
  955.   ./  The intersected triangle will be displayed as a green triangle
  956.   buildHelper( roomObj, colliderType=COLLIDER_TYPE.FLOOR ){
  957.     let roomName = roomObj.getName();
  958.     let roomData = this.roomColliderData[ roomName ][ colliderType ];
  959.     let triCount = roomData[ 'count' ];
  961.     this.log( "Building helper for " + roomName + " with " + triCount + " triangles" );
  963.     ./ Create a geometry to hold all triangles
  964.     let geometry = new BufferGeometry();
  966.     ./ Arrays to hold vertices and visibility attributes
  967.     let vertices = [];
  968.     let colorId = [];
  969.     let visibility = [];
  971.     let colorIdList = this.getRandomColorIdList( triCount );
  973.     let colorLimit = parseInt( triCount ** .5 );
  974.     let posYShift = 0.1;
  976.     ./ Iterate through all face vertices in roomData
  977.     Object.keys(roomData['faceVerts']).forEach((faceKey, index) => {
  978.       let faceVerts = roomData['faceVerts'][faceKey]['verts'];
  980.       ./ Push vertices for each triangle
  981.       vertices.push( faceVerts[0].x, faceVerts[0].y + posYShift, faceVerts[0].z );
  982.       vertices.push( faceVerts[1].x, faceVerts[1].y + posYShift, faceVerts[1].z );
  983.       vertices.push( faceVerts[2].x, faceVerts[2].y + posYShift, faceVerts[2].z );
  985.       ./ Push visibility attribute for each vertex (default to 0, meaning not visible)
  986.       visibility.push( 0, 0, 0 );
  988.       ./ Set unique color for each triangle
  989.       let curColorId = this.toColorId( colorIdList[index], colorLimit );
  990.       colorId.push( ...curColorId, ...curColorId, ...curColorId );
  992.     });
  994.     ./ Convert arrays to Float32Array
  995.     let verticesArray = new Float32Array( vertices );
  996.     let colorIdArray = new Float32Array( colorId );
  997.     let visibilityArray = new Float32Array( visibility );
  1000.     ./ Set attributes for geometry
  1001.     geometry.setAttribute( 'position', new BufferAttribute( verticesArray, 3 ) );
  1002.     geometry.setAttribute( 'colorId', new BufferAttribute( colorIdArray, 3 ) );
  1003.     geometry.setAttribute( 'visibility', new BufferAttribute( visibilityArray, 1 ) );
  1005.     ./ Create a material with a shader that can toggle visibility based on vertex attributes
  1006.     let material = new ShaderMaterial({
  1007.       uniforms: {
  1008.       visibleFaceId: { value: -1 } ./ Default to -1, meaning no face is green
  1009.       },
  1010.       vertexShader: `
  1011.         uniform float visibleFaceId;
  1013.         attribute vec3 colorId;
  1014.         attribute float visibility;
  1016.         varying vec4 vCd;
  1017.         varying float vVisibility;
  1019.         void main() {
  1020.           vVisibility = visibility*.5+.5;
  1021.           
  1022.           vCd = vec4( normalize(colorId), 0.50 ); ./ Pre-calculated Blue for visible face
  1023.           if (visibleFaceId == 1.0) {
  1024.             vCd = vec4( 0.0, 1.0, 0.0, 1.0 ); ./ Green for visible face
  1025.           }
  1027.           gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  1028.         }
  1029.       `,
  1030.       fragmentShader: `
  1031.         varying vec4 vCd;
  1032.         varying float vVisibility;
  1034.         void main() {
  1036.           vec4 Cd = vCd;
  1037.           ./Cd.a *= vVisibility;
  1038.           ./Cd.rgb = vec3( vVisibility );
  1040.           gl_FragColor = Cd;
  1041.         }
  1042.       `,
  1043.     });
  1046.     material.side = DoubleSide;
  1047.     material.transparent = true;
  1048.     material.depthTest = true;
  1049.     material.depthWrite = false;
  1050.     material.blending = AdditiveBlending;
  1052.     ./ Create mesh and add to the scene
  1053.     let mesh = new Mesh(geometry, material);
  1054.     mesh.renderOrder = 2;
  1056.     ./ Store the mesh for later use
  1057.     this.roomColliderData[ roomName ][ colliderType ][ 'helper' ] = mesh;
  1059.     return mesh;
  1061.   }
  1063.   ./ Update vertex attributes to current grid location
  1064.   stepHelper( roomObj, colliderType=COLLIDER_TYPE.FLOOR ){
  1065.     let roomName = roomObj.getName();
  1066.     let roomData = this.roomColliderData[ roomName ][ colliderType ];
  1067.     let helperMesh = roomData[ 'helper' ];
  1068.     let faceGridGroup = roomData[ 'faceGridGroup' ];
  1071.     ./ Get current grid location
  1072.     let gridSize = roomData[ 'gridSize' ];
  1073.     let gridSizeInv = 1 . gridSize;
  1074.     let gridX = Math.floor(roomObj.position.x * gridSizeInv);
  1075.     let gridZ = Math.floor(roomObj.position.z * gridSizeInv);
  1076.     let gridKey = this.getGridKey(gridX, gridZ);
  1078.     ./ Get all face keys in the current grid location
  1079.     let faceKeys = faceGridGroup[gridKey];
  1081.     if( this.prevGridKey == gridKey ){
  1082.       return;
  1083.     }
  1085.     ./ Update face-vertex visibility attribute based on grid location
  1086.     let geometry = helperMesh.geometry;
  1087.     let visibility = geometry.attributes.visibility;
  1088.     let visibilityArray = visibility.array;
  1089.     .*for (let i = 0; i < visibilityArray.length; i++) {
  1090.       visibilityArray[i] = 0;
  1091.     }*.
  1093.     ./ Set visibility to 1 for all faces in the current grid location
  1094.     .*if (faceKeys) {
  1095.       faceKeys.forEach((faceKey) => {
  1096.         let faceVerts = roomData['faceVerts'][faceKey];
  1097.         let idx = 3 * faceVerts['idx'];
  1098.         visibilityArray[idx] = 1;
  1099.         visibilityArray[idx + 1] = 1;
  1100.         visibilityArray[idx + 2] = 1;
  1101.       });
  1102.     }*.
  1103.   }
  1105.   setHelperActiveFace( roomName, colliderType=COLLIDER_TYPE.FLOOR, faceIdx=-1 ){
  1106.     let roomData = this.roomColliderData[ roomName ][ colliderType ];
  1107.     let helperMesh = roomData[ 'helper' ];
  1109.     let material = helperMesh.material;
  1110.     material.uniforms.visibleFaceId.value = faceIdx;
  1111.   }
  1114.   ./ -- -- -- 
  1115.   
  1117.   destroy( animName ){
  1118.     if( this.objNames.includes( animName ) ){
  1119.       this.animMixer[ animName ].stopAllAction();
  1120.       delete this.animMixer[ animName ];
  1121.       delete this.objects[ animName ];
  1122.       let idx = this.objNames.indexOf( animName );
  1123.       this.objNames.splice( idx, 1 );
  1124.     }
  1125.   }
  1127. }