Styjun

For this project I'm trying to create a AR scene where different markers will display different models.

I'm able to load and add a .DAE model using the Collada loader and as expected, when the user goes on the website the browser asks for the user's permission to use the camera.

This is achieved by using, as I said earlier, the ColladaLoader, adding the model to a variable called model1, scaling it and then calling the init function.

This init function creates a renderer, creates a scene and adds a camera etc, handles browser resize and adds the model markers.

Since adding the one model worked I thought to add more I could just copy and paste this colladaloader and point it to a different model and set a new marker for it. This fortunately works however when I visit the website on mobile it is incredibly sluggish and asks for my permission to use the camera 7/8 times (as many times as I have loaded models). This is due to, I think, after each model is loaded they all make a call to the init function. So it creates and adds as many scenes, cameras, renders etc as there are models.

Inspecting the page you can see there is a new canvas element for each model when there should be just one.

 <script type="text/javascript">


 var model1, axe, tree, sword, planks, minerals;

 var loader = new THREE.ColladaLoader();
 loader.load('greathallnow.DAE', function(collada) 

 model1 = collada.scene;
 model1.scale.x = model1.scale.y = model1.scale.z = 0.5;


 init();

 );

 var loader = new THREE.ColladaLoader();
 loader.load('axeyes.dae', function(collada) 

 axe = collada.scene;
 axe.scale.x = axe.scale.y = axe.scale.z = 0.3;


 init();

 );

 var loader = new THREE.ColladaLoader();
 loader.load('tree.dae', function(collada) 

 tree = collada.scene;
 tree.scale.x = tree.scale.y = tree.scale.z = 0.01;


 init();

 );

 var loader = new THREE.ColladaLoader();
 loader.load('swordplz.dae', function(collada) 

 sword = collada.scene;
 sword.scale.x = sword.scale.y = sword.scale.z = 0.3;


 init();

 );

 var loader = new THREE.ColladaLoader();
 loader.load('planks.dae', function(collada) 

 planks = collada.scene;
 planks.scale.x = planks.scale.y = planks.scale.z = 0.05;


 init();

 );

 var loader = new THREE.ColladaLoader();
 loader.load('stoneblockplural.dae', function(collada) 

 minerals = collada.scene;
 minerals.scale.x = minerals.scale.y = minerals.scale.z = 0.25;


 init();

 );





 function init() 
 // init renderer
 var renderer = new THREE.WebGLRenderer(
 antialias: true,
 alpha: true
 );
 renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 renderer.setSize(640, 480);
 renderer.domElement.style.position = 'absolute'
 renderer.domElement.style.top = '0px'
 renderer.domElement.style.left = '0px'
 document.body.appendChild(renderer.domElement);

 // array of functions for the rendering loop
 var onRenderFcts = [];

 // init scene and camera
 var scene = new THREE.Scene();



 // Create a camera
 var camera = new THREE.Camera();
 scene.add(camera);
 var light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
 scene.add(light);



 var arToolkitSource = new THREEx.ArToolkitSource(
 sourceType: 'webcam'
 );
 arToolkitSource.init(function onReady() 
 onResize()
 );

 // handle resize
 window.addEventListener('resize', function() 
 onResize()
 );

 function onResize() 
 arToolkitSource.onResize()
 arToolkitSource.copySizeTo(renderer.domElement)
 if (arToolkitContext.arController !== null) 
 arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
 
 



 // create atToolkitContext
 var arToolkitContext = new THREEx.ArToolkitContext(
 cameraParametersUrl: THREEx.ArToolkitContext.baseURL + 'data/camera_para.dat',
 detectionMode: 'mono',
 )
 // initialize it
 arToolkitContext.init(function onCompleted() 
 // copy projection matrix to camera
 camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
 )

 // update artoolkit on every frame
 onRenderFcts.push(function() 
 if (arToolkitSource.ready === false) return
 arToolkitContext.update(arToolkitSource.domElement)
 )




 var markerRoot = new THREE.Group;
 scene.add(markerRoot);
 var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, 
 type: 'pattern',
 patternUrl: THREEx.ArToolkitContext.baseURL + 'data/ghall-marker.patt',
 );


 var markerRoot2 = new THREE.Group;
 scene.add(markerRoot2);
 var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot2, 
 type: 'pattern',
 patternUrl: THREEx.ArToolkitContext.baseURL + 'data/axe.patt',
 );

 var markerRoot3 = new THREE.Group;
 scene.add(markerRoot3);
 var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot3, 
 type: 'pattern',
 patternUrl: THREEx.ArToolkitContext.baseURL + 'data/tree.patt', );

 var markerRoot4 = new THREE.Group;
 scene.add(markerRoot4);
 var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot4, 
 type: 'pattern',
 patternUrl: THREEx.ArToolkitContext.baseURL + 'data/sword.patt', );

 var markerRoot5 = new THREE.Group;
 scene.add(markerRoot5);
 var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot5, 
 type: 'pattern',
 patternUrl: THREEx.ArToolkitContext.baseURL + 'data/planks.patt', );

 var markerRoot6 = new THREE.Group;
 scene.add(markerRoot6);
 var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot6, 
 type: 'pattern',
 patternUrl: THREEx.ArToolkitContext.baseURL + 'data/minerals.patt', );




 markerRoot.add(model1);
 markerRoot2.add(axe);
 markerRoot3.add(tree);
 markerRoot4.add(sword);
 markerRoot5.add(planks);
 markerRoot6.add(minerals);





 // render the scene
 onRenderFcts.push(function() 
 renderer.render(scene, camera);
 )

 // run the rendering loop
 var lastTimeMsec = null
 requestAnimationFrame(function animate(nowMsec) );
 

 </script>

I don't think each model needs to make a call to the init function, instead I think they should all be loaded and then there is only one init() which adds them all to the scene and renders them all. This would hopefully improve performance as well. I'm just not sure how to go about this?

You can see the issue I'm having if you visit https://arevisit.madamot.com

Or you can see what currently happens in this YouTube video
https://youtu.be/DjJdsBtfgvM

Many thanks,
Adam