create material utils to clone off of for cleaner setup (#670)

Signed-off-by: hanbollar <[email protected]>

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)

src/core/MRApp.js

@@ -71,6 +71,7 @@ export class MRApp extends MRElement {
         // The rest of the renderer is filled out in this.connectedCallback()-->this.init() since
         // the renderer relies on certain component flags attached to the <mr-app> itself.
         this.renderer = null;
+        this.render = this.render.bind(this);
 
         this.lighting = {
             enabled: true,
@@ -83,7 +84,6 @@ export class MRApp extends MRElement {
         this.cameraOptions = {
             mode: 'orthographic',
         };
-        this.render = this.render.bind(this);
         this.onWindowResize = this.onWindowResize.bind(this);
     }
 

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);
+            }
         }
     }
 

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;

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);
 

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().

src/core/entities/MRDivEntity.js

@@ -21,12 +21,11 @@ export class MRDivEntity extends MREntity {
         this.physics.type = 'ui';
 
         const geometry = mrjsUtils.geometry.UIPlane(1, 1, [0], 18);
-        const material = new THREE.MeshStandardMaterial({
-            color: 0xfff,
-            roughness: 0.7,
-            metalness: 0.0,
-            side: THREE.DoubleSide,
-        });
+        const material = mrjsUtils.material.MeshStandardMaterial.clone();
+        material.color.set(0xfff);
+        material.color.roughness = 0.7;
+        material.color.metalness = 0.0;
+        material.side = THREE.DoubleSide;
 
         this.background = new THREE.Mesh(geometry, material);
         this.background.receiveShadow = true;

src/core/entities/MRMediaEntity.js

@@ -20,9 +20,8 @@ export class MRMediaEntity extends MRDivEntity {
 
         // Create the object3D. Dont need default value for geometry
         // until the connected call since this will get overwritten anyways.
-        const material = new THREE.MeshStandardMaterial({
-            side: THREE.FrontSide,
-        });
+        const material = mrjsUtils.material.MeshStandardMaterial.clone();
+        material.side = THREE.FrontSide;
         // Object3D for MRMediaEntity (mrimage,mrvideo,etc) is the actual image/video/etc itself in 3D space
         this.object3D = new THREE.Mesh(undefined, material);
         this.object3D.receiveShadow = true;
@@ -211,9 +210,9 @@ export class MRMediaEntity extends MRDivEntity {
                 }
 
                 const mediaGeometry = new THREE.PlaneGeometry(mediaWidth, mediaHeight);
-                const mediaMaterial = new THREE.MeshStandardMaterial({
-                    map: this.texture,
-                });
+                const mediaMaterial = mrjsUtils.material.MeshStandardMaterial.clone();
+                mediaMaterial.map = this.texture;
+                mediaMaterial.name = 'mediaMaterial';
                 _oldSubMediaMeshNotNeeded();
                 this.subMediaMesh.geometry = mediaGeometry;
                 this.subMediaMesh.material = mediaMaterial;

src/core/entities/MRModelEntity.js

@@ -121,8 +121,6 @@ export class MRModelEntity extends MRDivEntity {
                 this.animations = animations;
             }
 
-            this.object3D.add(this.modelObj);
-
             this.modelObj.receiveShadow = true;
             this.modelObj.renderOrder = 3;
 
@@ -134,6 +132,9 @@ export class MRModelEntity extends MRDivEntity {
                 }
             });
 
+            this.object3D.add(this.modelObj);
+            this.object3D.name = this.src;
+
             this.onLoad();
 
             this.loading = false;

src/core/entities/MRSkyBoxEntity.js

@@ -34,20 +34,22 @@ export class MRSkyBoxEntity extends MREntity {
                 if (this.skybox.material !== undefined) {
                     this.skybox.material.dispose();
                 }
-                this.skybox.material = new THREE.MeshStandardMaterial({
-                    envMap: texture,
-                    side: THREE.BackSide, // Render only on the inside
-                });
+                const material = mrjsUtils.material.MeshStandardMaterial.clone();
+                material.envMap = texture;
+                material.side = THREE.BackSide;
+                material.programName = 'skyboxMaterial-1';
+                this.skybox.material = material;
             } else {
                 // Handle single texture case
                 if (this.skybox.material !== undefined) {
                     this.skybox.material.dispose();
                 }
-                this.skybox.material = new THREE.MeshBasicMaterial({
-                    map: texture,
-                    side: THREE.BackSide, // Render only on the inside
-                    opacity: 1,
-                });
+                const material = mrjsUtils.material.MeshBasicMaterial.clone();
+                material.envMap = texture;
+                material.side = THREE.BackSide;
+                material.opacity = 1;
+                material.programName = 'skyboxMaterial-2';
+                this.skybox.material = material;
             }
         }
         this.textureLoadedCallbacks.forEach((callback) => callback(texture));

src/core/entities/MRTextInputEntity.js

@@ -129,10 +129,10 @@ export class MRTextInputEntity extends MRTextEntity {
         if (!this.cursor) {
             // Setup basic cursor info and material for if it was reset.
             this.cursor = new THREE.Mesh();
-            const material = new THREE.MeshBasicMaterial({
-                color: 0x000000,
-                side: THREE.DoubleSide,
-            });
+            const material = mrjsUtils.material.MeshBasicMaterial.clone();
+            material.color.set(0x000000);
+            material.side = THREE.DoubleSide;
+            material.programName = 'text:cursorMaterial';
             this.cursor.material = material;
         }
         if (this.cursor.geometry !== undefined) {

src/core/user/MRUser.js

@@ -47,8 +47,11 @@ export default class MRUser {
      * @returns {object} spotlight - the spotlight to be used.
      */
     initSpotlight() {
-        this.spotlight = new THREE.Mesh(new THREE.CircleGeometry(1.3, 64), new THREE.MeshBasicMaterial());
-        this.spotlight.material.colorWrite = false;
+        const material = mrjsUtils.material.MeshBasicMaterial.clone();
+        material.colorWrite = false;
+        material.programName = 'spotlightMaterial';
+        this.spotlight = new THREE.Mesh(new THREE.CircleGeometry(1.3, 64), material);
+
         this.spotlight.renderOrder = 2;
         this.spotlight.rotation.x = -Math.PI / 2;
 

src/dataManagers/MRPlaneManager.js

@@ -120,7 +120,10 @@ export class MRPlaneManager {
         mrPlane.dimensions.setZ(height);
 
         const geometry = new THREE.BoxGeometry(width, 0.01, height);
-        const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
+        const material = mrjsUtils.material.MeshBasicMaterial.clone();
+        material.color.set(0xffffff);
+        material.colorWrite = false;
+        material.programName = 'planeMeshMaterial';
 
         mrPlane.mesh = new THREE.Mesh(geometry, material);
         mrPlane.mesh.position.setFromMatrixPosition(this.matrix);

src/utils/Material.js

@@ -7,6 +7,19 @@ import { html } from 'mrjsUtils/HTML';
  */
 let material = {};
 
+/**
+ * Defining materials here to only need to create them once
+ * since render calls are proportional to the number of gl Materials.
+ *
+ * An issue creating a large number of render calls per frame
+ * is that we have multiple normal THREEjs materials that we're reusing
+ * in places. Since these all just modify the base threejs with uniforms
+ * we should just grab and clone from here.
+ */
+material.MeshBasicMaterial = new THREE.MeshBasicMaterial();
+material.MeshPhongMaterial = new THREE.MeshPhongMaterial();
+material.MeshStandardMaterial = new THREE.MeshStandardMaterial();
+
 /**
  * @function
  * @memberof material