borismus / webvr-boilerplate

A starting point for web-based VR experiences that work on all VR headsets.
Apache License 2.0
1.8k stars 454 forks source link

Kill VR/three mode #97

Open JohnRSim opened 8 years ago

JohnRSim commented 8 years ago

Is there an easy way to destroy the VR mode & canvas with the custom DOM ele that are added?

At the moment I'm manually using $empty and setting each obj as null - would be nice to have a single method to call that destroys the VR view.

cancelAnimationFrame(FB.animationID);// Stop the animation FB.renderer.domElement.addEventListener('dblclick', null, false); //remove listener to render FB.scene = null; FB.projector = null; FB.camera = null; FB.controls = null; FB.effect = null; FB.cubeTexLoader = null; FB.cubeShader = null; FB.skyBoxMaterial = null; FB.manager = null; FB.animationID = null; $('canvas').empty();

Thanks

borismus commented 8 years ago

Sure that works as a not very clean solution. In theory the manager could have a destructor. But why do you need this?

On Mon, Jan 4, 2016, 10:48 AM John Sim notifications@github.com wrote:

Is there an easy way to destroy the VR mode & canvas with the custom DOM ele that are added?

At the moment I'm manually using $empty and setting each obj as null - would be nice to have a single method to call that destroys the VR view

cancelAnimationFrame(FBanimationID);// Stop the animation FBrendererdomElementaddEventListener('dblclick', null, false); //remove listener to render FBscene = null; FBprojector = null; FBcamera = null; FBcontrols = null; FBeffect = null; FBcubeTexLoader = null; FBcubeShader = null; FBskyBoxMaterial = null; FBmanager = null; FBanimationID = null; $('canvas')empty();

Thanks

— Reply to this email directly or view it on GitHub https://github.com/borismus/webvr-boilerplate/issues/97.

JohnRSim commented 8 years ago

I have a Mobile Chromium app running crosswalk and I want to clear up and save memory as the app kept crashing when swapping into the mobile app html interface and the webVR interface.

Testing on a number phones 5.1.1. My S6 and one plus on worked fine but the note 4 just kept crashing.

In the end I did this - but dispose/destructor on the manager would be nice a way to clean up the extra divs and image icons that are not needed :+1:

              cancelAnimationFrame(TMP.vrMode.animationID);// Stop the animation
              TMP.vrMode.renderer.domElement.addEventListener('dblclick', null, false);
              TMP.vrMode.scene.remove(TMP.vrMode.mesh);
              TMP.vrMode.geometry.dispose();
              TMP.vrMode.skyBoxMaterial.dispose();
              TMP.vrMode.controls.dispose();
              TMP.vrMode.renderer.dispose();

              TMP.vrMode.texture.dispose();

              this.clearVR(TMP.vrMode.mesh);
              //not sure if next 4 need dispose?
              //TMP.vrMode.camera.dispose();
              //TMP.vrMode.controls.dispose();
              //TMP.vrMode.effect.dispose();
              //TMP.vrMode.renderer.dispose();

              TMP.vrMode = null;
              TMP.vrMode = {};

              $('canvas ~ div').remove();
              $('canvas').remove();
              $('img').remove();

function disposeNode (node)
              {
                  if (node instanceof THREE.Camera)
                  {
                      node = undefined;
                  }
                  else if (node instanceof THREE.Light)
                  {
                      node.dispose ();
                      node = undefined;
                  }
                  else if (node instanceof THREE.Mesh)
                  {
                      if (node.geometry)
                      {
                          node.geometry.dispose ();
                          node.geometry = undefined;
                      }

                      if (node.material)
                      {
                          if (node.material instanceof THREE.MeshFaceMaterial)
                          {
                              $.each (node.material.materials, function (idx, mtrl)
                              {
                                  if (mtrl.map)           mtrl.map.dispose ();
                                  if (mtrl.lightMap)      mtrl.lightMap.dispose ();
                                  if (mtrl.bumpMap)       mtrl.bumpMap.dispose ();
                                  if (mtrl.normalMap)     mtrl.normalMap.dispose ();
                                  if (mtrl.specularMap)   mtrl.specularMap.dispose ();
                                  if (mtrl.envMap)        mtrl.envMap.dispose ();

                                  mtrl.dispose ();    // disposes any programs associated with the material
                                  mtrl = undefined;
                              });
                          }
                          else
                          {
                              if (node.material.map)          node.material.map.dispose ();
                              if (node.material.lightMap)     node.material.lightMap.dispose ();
                              if (node.material.bumpMap)      node.material.bumpMap.dispose ();
                              if (node.material.normalMap)    node.material.normalMap.dispose ();
                              if (node.material.specularMap)  node.material.specularMap.dispose ();
                              if (node.material.envMap)       node.material.envMap.dispose ();

                              node.material.dispose ();   // disposes any programs associated with the material
                              node.material = undefined;
                          }
                      }

                      node = undefined;
                  }
                  else if (node instanceof THREE.Object3D)
                  {
                      node = undefined;
                  }
              }   // disposeNode

              function disposeHierarchy (node, callback)
              {
                  for (var i = node.children.length - 1; i >= 0; i--)
                  {
                      var child = node.children[i];
                      disposeHierarchy (child, callback);
                      callback (child);
                  }
              }
              disposeHierarchy(sceneObj3D,disposeNode);
JohnRSim commented 8 years ago

This unfortunately didn't work - I still got a memory build up and the app crashed after opening and closing it a couple of times - viewing the memory build up in device monitor.

instead I stopped the animation and hid the canvas and options behind the interface and it fixed the memory leak.

moklick commented 8 years ago

Hey @JohnRSim could you explain your final fix? I am having the same issues and I am not sure what do you mean by "hid the canvas and options behind the interface".

JohnRSim commented 8 years ago

just display none on div wrapper that contains the canvas and hide all div overlay elements - when not needed. - this seemed the best option..

I tried a number of different options but this was the best for performance.

I'm hoping there will be a proper cleanup function available in the future..