Merge branch 'enhnace-texture-scaling-offset' into main

yushiang-demo · Aug 3, 2024 · dd816ce · dd816ce
2 parents db840b5 + 296b023
commit dd816ce
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 7 deletions.
diff --git a/packages/react-coverage-heatmap/src/components/Renderer/index.jsx b/packages/react-coverage-heatmap/src/components/Renderer/index.jsx
@@ -3,6 +3,8 @@ import ThreeCoverageHeatmap from "three-coverage-heatmap";
 
 const Renderer = ({
   texture,
+  textCoordScale,
+  textCoordSoffset,
   isSignalIndex,
   signalIntensities,
   signals,
@@ -14,8 +16,8 @@ const Renderer = ({
   const canvasRef = useRef(null);
 
   useEffect(() => {
-    ThreeApp.setTexture(texture);
-  }, [texture]);
+    ThreeApp.setTexture(texture, textCoordScale, textCoordSoffset);
+  }, [texture, textCoordScale, textCoordSoffset]);
 
   useEffect(() => {
     ThreeApp.setIsSignalIndex(isSignalIndex);

diff --git a/packages/three-coverage-heatmap/src/Material/HeatmapMaterial/fragmentShader.js b/packages/three-coverage-heatmap/src/Material/HeatmapMaterial/fragmentShader.js
@@ -7,6 +7,8 @@ uniform int aabbCount;
 uniform vec3 planes[${planeCount * 2}];
 uniform int planeCount;
 uniform sampler2D map;
+uniform vec2 mapScale;
+uniform vec2 mapOffset;
 uniform bool isSignalIndex;
 
 varying vec4 world_position;
@@ -115,7 +117,7 @@ void main() {
   }
 
   vec4 visualizedDensity = vec4(opacityToHSV(isSignalIndex? maxSignalIndex:density), 1.0);
-  vec4 color = texture2D(map, (world_position.xz/20.0)+0.5);
+  vec4 color = texture2D(map, (world_position.xz * mapScale) + mapOffset);
   gl_FragColor = mix(color, visualizedDensity, 0.4);
 }
 `;

diff --git a/packages/three-coverage-heatmap/src/Material/HeatmapMaterial/index.js b/packages/three-coverage-heatmap/src/Material/HeatmapMaterial/index.js
@@ -14,8 +14,8 @@ class HeatmapMaterial extends THREE.ShaderMaterial {
   static _getUniformLimitation() {
     return {
       MAX_SIGNAL_COUNT: 15,
-      MAX_AABB_COUNT: 50,
-      MAX_PLANE_COUNT: 20,
+      MAX_AABB_COUNT: 25,
+      MAX_PLANE_COUNT: 80,
     };
   }
 
@@ -28,6 +28,12 @@ class HeatmapMaterial extends THREE.ShaderMaterial {
         isSignalIndex: {
           value: false,
         },
+        mapScale: {
+          value: new THREE.Vector2(1, 1),
+        },
+        mapOffset: {
+          value: new THREE.Vector2(0, 0),
+        },
         map: {
           value: null,
         },
@@ -74,6 +80,8 @@ class HeatmapMaterial extends THREE.ShaderMaterial {
    * @param {Array<THREE.Vector3>} options.aabbs - An array containing axis-aligned bounding box data.
    * @param {Array<THREE.Vector3>} options.planes - An array containing plane data.
    * @param {THREE.Texture} options.map - An object representing a map.
+   * @param {THREE.Vector2} options.mapScale - The scale factor to apply to the sampling coordinates.
+   * @param {THREE.Vector2} options.mapOffset - The offset for positioning the sampling coordinates.
    * @returns {void}
    */
   setUniforms({
@@ -86,6 +94,8 @@ class HeatmapMaterial extends THREE.ShaderMaterial {
     aabbs,
     planes,
     map,
+    mapScale,
+    mapOffset,
   }) {
     const { MAX_SIGNAL_COUNT, MAX_AABB_COUNT, MAX_PLANE_COUNT } =
       HeatmapMaterial._getUniformLimitation();
@@ -139,6 +149,14 @@ class HeatmapMaterial extends THREE.ShaderMaterial {
     if (map) {
       this.uniforms.map.value = map;
     }
+
+    if (mapScale) {
+      this.uniforms.mapScale.value = mapScale;
+    }
+
+    if (mapOffset) {
+      this.uniforms.mapOffset.value = mapOffset;
+    }
   }
 }
 

diff --git a/packages/three-coverage-heatmap/src/app.js b/packages/three-coverage-heatmap/src/app.js
@@ -114,13 +114,17 @@ class App {
   /**
    * Sets the floorplan used as a texture.
    * @param {string} url The URL of the floorplan image.
+   * @param {Array<number>} scale - The scale factors to apply to the sampling coordinates.
+   * @param {Array<number>} offset - The offsets for positioning the sampling coordinates.
    * @example
-   * app.setTexture('https://example.com/floorplan.jpg');
+   * app.setTexture("https://example.com/floorplan.jpg", [1, 1], [0, 0]);
    */
-  setTexture(url) {
+  setTexture(url, scale, offset) {
     const texture = new THREE.TextureLoader().load(url);
     this.heatmapMaterial.setUniforms({
       map: texture,
+      mapScale: new THREE.Vector2().fromArray(scale),
+      mapOffset: new THREE.Vector2().fromArray(offset),
     });
   }
 

diff --git a/packages/three-coverage-heatmap/src/jsdoc/types.js b/packages/three-coverage-heatmap/src/jsdoc/types.js
@@ -45,6 +45,12 @@
  * @memberof Vector
  */
 
+/**
+ * Represents a three-dimensional coordinate [x, y, z].
+ * @typedef {Array<number>} Vector2
+ * @memberof Vector
+ */
+
 /**
  * Represents a coordinate pair [[x1, y1, z1], [x2, y2, z2]].
  * @typedef {Array<Vector3>} Vector3Pair

diff --git a/src/stories/Renderer.stories.js b/src/stories/Renderer.stories.js
@@ -13,6 +13,8 @@ export default {
 export const ShowroomFloorAp = {
   args: {
     texture: "./floorplan.png",
+    textCoordScale: [1 / 20, 1 / 20],
+    textCoordSoffset: [0.5, 0.5],
     isSignalIndex: false,
     signalIntensities: [10],
     signals: [[0, 1e-3, 8.1]],
@@ -24,6 +26,8 @@ export const ShowroomFloorAp = {
 export const ShowroomCeilingAp = {
   args: {
     texture: "./floorplan.png",
+    textCoordScale: [1 / 20, 1 / 20],
+    textCoordSoffset: [0.5, 0.5],
     isSignalIndex: false,
     signalIntensities: [10],
     signals: [[0, 2.0, 8.1]],
@@ -35,6 +39,8 @@ export const ShowroomCeilingAp = {
 export const ShowroomTwoAps = {
   args: {
     texture: "./floorplan.png",
+    textCoordScale: [1 / 20, 1 / 20],
+    textCoordSoffset: [0.5, 0.5],
     isSignalIndex: false,
     signalIntensities: [10, 10],
     signals: [
@@ -49,6 +55,8 @@ export const ShowroomTwoAps = {
 export const ShowroomIndexMap = {
   args: {
     texture: "./floorplan.png",
+    textCoordScale: [1 / 20, 1 / 20],
+    textCoordSoffset: [0.5, 0.5],
     isSignalIndex: true,
     signalIntensities: [10, 10],
     signals: [
@@ -63,6 +71,8 @@ export const ShowroomIndexMap = {
 export const withoutDoor = {
   args: {
     texture: "./floorplan.png",
+    textCoordScale: [1 / 20, 1 / 20],
+    textCoordSoffset: [0.5, 0.5],
     isSignalIndex: false,
     signalIntensities: [10, 10],
     signals: [
@@ -76,6 +86,8 @@ export const withoutDoor = {
 export const withoutFurniture = {
   args: {
     texture: "./floorplan.png",
+    textCoordScale: [1 / 20, 1 / 20],
+    textCoordSoffset: [0.5, 0.5],
     isSignalIndex: false,
     signalIntensities: [10, 10],
     signals: [
@@ -89,6 +101,8 @@ export const withoutFurniture = {
 export const withoutWall = {
   args: {
     texture: "./floorplan.png",
+    textCoordScale: [1 / 20, 1 / 20],
+    textCoordSoffset: [0.5, 0.5],
     isSignalIndex: false,
     signalIntensities: [10, 10],
     signals: [