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