Volumetrics-io · hanbollar · May 13, 2024 · May 13, 2024 · May 13, 2024 · May 13, 2024
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 ![The MRjs logo, an indigo and purple bowtie.](https://docs.mrjs.io/static/mrjs-logo.svg)
-
+ 
 An extensible library of Web Components for the spatial web.
 
 [![npm run build](https://github.com/Volumetrics-io/mrjs/actions/workflows/build.yml/badge.svg)](https://github.com/Volumetrics-io/mrjs/actions/workflows/build.yml) [![npm run test](https://github.com/Volumetrics-io/mrjs/actions/workflows/test.yml/badge.svg)](https://github.com/Volumetrics-io/mrjs/actions/workflows/test.yml) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/Volumetrics-io/mrjs/blob/main/LICENSE)

diff --git a/dist/mr.js b/dist/mr.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,8 +4,7 @@
   "type": "module",
   "description": "an MR first webXR framework",
   "engines": {
-    "node": ">=20.0.0",
-    "npm": ">=6.14.4"
+    "node": "^18.17.0 || >=20.5.0"
   },
   "main": "dist/mr.js",
   "homepage": "https://mrjs.io",
@@ -35,9 +34,6 @@
   "bugs": {
     "url": "https://github.com/Volumetrics-io/mrjs/issues"
   },
-  "engines": {
-    "node": "^18.17.0 || >=20.5.0"
-  },
   "testMatch": [
     "**/__tests__/**/*.test.mjs"
   ],
@@ -87,6 +83,7 @@
     "jsdom": "^24.0.0",
     "prettier": "^3.2.4",
     "prettier-eslint-cli": "^8.0.1",
+    "spectorjs": "^0.9.30",
     "stats.js": "^0.17.0",
     "three": "^0.161.0",
     "troika-three-text": "^0.48.1"

diff --git a/samples/examples/physics.html b/samples/examples/physics.html
@@ -121,17 +121,17 @@
             // tempSize.multiplyScalar(model.compStyle.scale)
             let geometry = new THREE.BoxGeometry(...tempSize)
 
-            let hoverMaterial = new THREE.MeshPhongMaterial({
-                color: 0x00ff00,
-                transparent: true,
-                opacity: 0.5
-            })
-
-            let touchMaterial = new THREE.MeshPhongMaterial({
-                color: 0xff0000,
-                transparent: true,
-                opacity: 0.5
-            })
+            let hoverMaterial = mrjsUtils.material.MeshPhongMaterial.clone();
+            hoverMaterial.color.set(0x00ff00);
+            hoverMaterial.transparent = true;
+            hoverMaterial.opacity = 0.5;
+            hoverMaterial.name = "hoverMaterial";
+
+            let touchMaterial = mrjsUtils.material.MeshPhongMaterial.clone();
+            touchMaterial.color.set(0xff0000);
+            touchMaterial.transparent = true;
+            touchMaterial.opacity = 0.5;
+            touchMaterial.name = "touchMaterial";
 
             let hoverMesh = new THREE.Mesh(geometry, hoverMaterial)
             let touchMesh = new THREE.Mesh(geometry, touchMaterial)

diff --git a/samples/examples/testing.html b/samples/examples/testing.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" prefix="og: http://ogp.me/ns#">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Volumetrics — Your Spatial developement companion</title>
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <!-- <script src="https://cdn.jsdelivr.net/gh/volumetrics-io/mrjs/dist/mr.js"></script> -->
+    <script src="/mr.js"></script>
+    <style>
+        * {
+            padding: 0;
+            margin: 0;
+            border: none;
+            box-sizing: border-box;
+        }
+
+        mr-app {
+            width: 100vw;
+            height: 100vh;
+            border-radius: unset;
+            background-color: transparent;
+        }
+
+        #logo {
+            width: 300px;
+            height: 300px;
+            z-index: 70;
+        }
+    </style>
+
+</head>
+
+<body>
+    <mr-app data-debug="false">
+        <mr-light color="hsl(340, 100%, 50%)" intensity="5" data-position="-0.3 0.5 0.2"></mr-light>
+        <mr-light color="hsl(180, 100%, 50%)" intensity="2.5" data-position="0 -0.5 0.4"></mr-light>
+        <mr-light color="hsl(40, 100%, 50%)" intensity="5" data-position="0.6 0.25 0.2"></mr-light>
+        <mr-model id="logo" src="/examples-assets/models/logo.glb"></mr-model>
+    </mr-app>
+
+    <script>
+        function rotate(timestamp) {
+            t = timestamp / 200;
+            let rx = (-t) % -360;
+            let ry = (t) % 360;
+            let rz = (t * 2) % 360;
+            document.querySelector("#logo").dataset.rotation = rx + " " + ry + " " + rz;
+
+            let data = {
+                rx: Math.round(rx * 100) / 100,
+                ry: Math.round(ry * 100) / 100,
+                rz: Math.round(rz * 100) / 100
+            }
+            window.top.postMessage(JSON.stringify(data), '*')
+            window.requestAnimationFrame(rotate);
+        };
+        window.requestAnimationFrame(rotate);
+
+        // window.onload = () => {
+        //     document.querySelector("#logo").onclick = () => {
+        //         console.log("clicked");
+        //     }
+        // }
+
+    </script>
+</body>
+
+</html>
diff --git a/src/core/MRApp.js b/src/core/MRApp.js
@@ -2,6 +2,9 @@ import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 import { XRButton } from 'three/addons/webxr/XRButton.js';
 import Stats from 'stats.js';
+// import * as SPECTOR from 'spectorjs';
+// let spector = new SPECTOR.Spector();
+// spector.displayUI();
 
 import { mrjsUtils } from 'mrjs';
 
@@ -259,6 +262,7 @@ export class MRApp extends MRElement {
         this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
         this.renderer.toneMappingExposure = 1;
         this.renderer.localClippingEnabled = true;
+        // this.renderer.setFrustumCulling(true);
 
         this.appendChild(this.renderer.domElement);
 
@@ -595,15 +599,70 @@ export class MRApp extends MRElement {
         this.renderer.clear();
 
         // Need to wait until we have all needed rendering-associated systems loaded.
-        if (this.maskingSystem !== undefined) {
+        if (this.maskingSystem !== undefined) {//} && this.maskingSystem.scene.length > 0) {
             this.maskingSystem.sync();
             const currentShadowEnabled = this.renderer.shadowMap.enabled;
             this.renderer.shadowMap.enabled = false;
             this.renderer.render(this.maskingSystem.scene, this.camera);
             this.renderer.shadowMap.enabled = currentShadowEnabled;
         }
 
+        // this.scene.traverse((object) => {
+        //   if (object.isMesh) {
+        //     console.log(`Rendering `, object, `name: ${object.name} with num children: ${object.children.length} with material ${object.material.name}`);
+        //   }
+        // });
+
         this.renderer.render(this.scene, this.camera);
+
+        // Log the number of draw calls
+        console.log(this.renderer.info);
+        console.log('NumDrawCalls:', this.renderer.info.render.calls, 'should be 2xNumGLPrograms(', this.renderer.info.programs.length, ') = ', 2*this.renderer.info.programs.length);
+        // this.renderer.info.programs.forEach(program => {
+        //     console.log(`Program ID: ${program.id}, Linked Material: ${yourCustomMapping[program.id] || 'Unknown'}`);
+        // });
+        // console.log(this.renderer.info);
+        if (this.renderer.info.programs) {
+            // this.renderer.info.programs.forEach(program => {
+            //     console.log(`Program: `, program, `Used times in last frame: ${program.usedTimes}`);
+            // });
+            // function printSceneObjectsAndMaterials(scene, renderer) {
+            //     let groupedByMaterial = {};
+
+            //     // Traverse the scene and group objects by material UUID
+            //     scene.traverse(function (object) {
+            //         if (object.isMesh && object.material) {
+            //             const uuid = object.material.uuid;
+            //             if (!groupedByMaterial[uuid]) {
+            //                 groupedByMaterial[uuid] = [];  // Initialize array if it doesn't exist
+            //             }
+            //             groupedByMaterial[uuid].push({
+            //                 objectName: object.name,
+            //                 objectType: object.type
+            //             });
+            //         }
+            //     });
+
+                // Log details about each group
+                // Object.keys(groupedByMaterial).forEach(uuid => {
+                //     console.log(`Material UUID: ${uuid}, num items: ${groupedByMaterial[uuid].length}`);
+                //     groupedByMaterial[uuid].forEach(entry => {
+                //         console.log(`Object: ${entry.objectName} | Type: ${entry.objectType}`);
+                //     });
+                // });
+
+                // // Then, log all active WebGL programs separately.
+                // if (renderer.info.programs) {
+                //     renderer.info.programs.forEach(program => {
+                //         console.log(`Program ID: ${program.id}, Program Info:`, program);
+                //     });
+                // }
+            // }
+
+            // Call this function where appropriate in your application
+            // printSceneObjectsAndMaterials(this.scene, this.renderer);
+
+        }
     }
 }
 

diff --git a/src/core/componentSystems/ClippingSystem.js b/src/core/componentSystems/ClippingSystem.js
@@ -38,7 +38,9 @@ export class ClippingSystem extends MRSystem {
      */
     update(deltaTime, frame) {
         for (const entity of this.registry) {
-            this.updatePlanes(entity);
+            if (entity.visible) {
+                this.updatePlanes(entity);
+            }
         }
     }
 

diff --git a/src/core/componentSystems/ControlSystem.js b/src/core/componentSystems/ControlSystem.js
@@ -62,7 +62,12 @@ export class ControlSystem extends MRSystem {
 
         this.currentEntity = null;
 
-        this.cursorViz = new THREE.Mesh(new THREE.RingGeometry(0.005, 0.007, 32), new THREE.MeshBasicMaterial({ color: 0x000000, opacity: 0.7, transparent: true }));
+        const cursorMaterial = mrjsUtils.material.MeshBasicMaterial.clone();
+        cursorMaterial.color.set(0x000000);
+        cursorMaterial.opacity = 0.7;
+        cursorMaterial.transparent = true;
+        cursorMaterial.name = "cursorMaterial";
+        this.cursorViz = new THREE.Mesh(new THREE.RingGeometry(0.005, 0.007, 32), cursorMaterial);
 
         this.app.scene.add(this.cursorViz);
         this.cursorViz.visible = false;

diff --git a/src/core/componentSystems/InstancingSystem.js b/src/core/componentSystems/InstancingSystem.js
@@ -81,7 +81,8 @@ export class InstancingSystem extends MRSystem {
         // ----- add instances to scene -----
 
         // Create an InstancedMesh using the instanced geometry and matrices
-        const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
+        const material = mrjsUtils.material.MeshBasicMaterial.clone();
+        material.color.set(0xffff00);
         const instancedMesh = new THREE.InstancedMesh(instancedGeometry, material, this.instanceCount);
         instancedMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
 

diff --git a/src/core/componentSystems/MaskingSystem.js b/src/core/componentSystems/MaskingSystem.js
@@ -6,6 +6,8 @@ import { MREntity } from 'mrjs/core/MREntity';
 import { MRPanelEntity } from 'mrjs/core/entities/MRPanelEntity';
 import { MRTextEntity } from 'mrjs/core/entities/MRTextEntity';
 
+import { mrjsUtils } from 'mrjs';
+
 /*
  * A system that handles elements that mask other elements by using stencil.
  * Eg: A Panel does not display child elements if the elements are positioned
@@ -166,7 +168,9 @@ export class MaskingSystem extends MRSystem {
             // Since only needs to write to the stencil buffer, no need to write to the color buffer,
             // therefore, we can use a simpler material than MeshBasicMaterial. Should we use
             // ShaderMaterial?
-            const mesh = new THREE.Mesh(sourceObj.geometry, new THREE.MeshBasicMaterial());
+            const material = mrjsUtils.material.MeshBasicMaterial.clone();
+            material.programName = "maskingMaterial";
+            const mesh = new THREE.Mesh(sourceObj.geometry, material);
             setupMaskingMaterial(mesh.material, stencilRefShift, this.app.debug);
 
             // No automatic matrices update because world matrices are updated in sync().