Wikitude

Memory Issue while loading images in Ar view

Hello,

I am getting texture memory exceed warning while loading about 200 images in AR world.

Is there any way to control the cache of ar world so that I can load images more than 200. 

 

Thanks and Regards
Abhishek Goyal

Hi,

Thanks for the quick reply.

I am IOS developer and don`t much knowledge of HTML and Java script. I am posting my code which I am using. It will be good if you can guide me where i am wrong in the code so that i can overcome the issue which i am facing in the app.

 

 

           function newData(jsonData)

            {

                AR.context.destroyAll();

                

                //Radar Section

                //

                var radar = AR.radar;

                radar.background = new AR.ImageResource("radar.png");

                radar.positionX = 0.0;   //0.7

                radar.positionY = 0.0;   //0.67

                radar.width = 0.3;

                radar.centerX = 0.5;

                radar.centerY = 0.5;

                radar.radius = 0.4;

                

                

                radar.northIndicator.image = new AR.ImageResource("needleindicator.png");

                radar.northIndicator.radius = 0.5;

                radar.enabled = true;

                radar.onClick = generateOnPoiBubbleClickFunc(10);

                

                var radarCircle = new AR.Circle(0.05, {style: {fillColor: '#83ff7b'}});

                

                //          DirectionIndicator section

                

                var indiImg = new AR.ImageResource("DirectionIndicator.png");

                var indiDrawable = new AR.ImageDrawable(indiImg,0.1,{verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP});

                // current selected object

                var selectedObject = null;

 

                

                firstImage = new AR.ImageResource("simple-text-bar.png", {onError: errorLoadingImage});

                secondImage = new AR.ImageResource("with-lock-text-bar.png", {onError: errorLoadingImage});

 

                

                jsonObject = JSON.parse(jsonData);

                //  document.getElementById("statusElement").innerHTML='Loading JSON objects';

                

                

                for(var i = 0; i < jsonObject.length; i++)

                {

                    var poidrawables = new Array();            

                    

                    //Setting Location of the POI

                    geoLoc = new AR.GeoLocation(jsonObject.Point.latitude,jsonObject.Point.longitude,jsonObject.Point.altitude);

                    

                    var distance = geoLoc.distanceToUser();

                    

                    distance = distance / 1000.0;

                    

                    var distance_calculate = Math.round(distance * 10)/10;

        

                    var label,distance_label;

                    

                    var length_POI = jsonObject.name.length;

                    

                    var label_value;

 

                    if(length_POI > 30)

                    {

                        label_value = jsonObject.name.substring(0,25) + "...";

                    }

                    else

                    {

                        label_value = jsonObject.name;

                    }

                    

                    if(jsonObject.type == 1)

                    {

                        

                        label = new AR.Label("      "+ jsonObject.name.substring(0,15) + "     " + distance_calculate + " km",0.8,

                                             {horizontalanchor: AR.CONST.HORIZONTAL_ANCHOR.MIDDLE,verticalanchor: AR.CONST.VERTICAL_ANCHOR.BOTTOM,offsetY : 0.5,zOrder : 1,

                                                 triggers: {

                                                 onClick:

                                                 generateOnPoiBubbleClickFunc(jsonObject.id)},

                                                 style : {textColor : '#FFFFFFFF'}});

                        

                        

                    }

                    else

                    {

 

                        label = new AR.Label(" "+ jsonObject.name.substring(0,15) + "     " + distance_calculate + " km",0.8,

                                                 {horizontalanchor: AR.CONST.HORIZONTAL_ANCHOR.MIDDLE,verticalanchor: AR.CONST.VERTICAL_ANCHOR.BOTTOM,offsetY : 0.5,zOrder : 1,

                                                 triggers: {

                                                 onClick:

                                                 generateOnPoiBubbleClickFunc(jsonObject.id)},

                                                 style : {textColor : '#FFFFFFFF'}});

                        

                    }

 

                    jsonObject.arLabel = label ;

                                        

                    var poiImage;

                    

                                   

                    if(jsonObject.type == 1)

                    {

                        poiImage = secondImage;

                    }

                    else

                    {

                        poiImage = firstImage;

                    }

                                        

                    var img = new AR.ImageDrawable(poiImage, 2.0,

                                                   {horizontalanchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT,verticalanchor: AR.CONST.VERTICAL_ANCHOR.BOTTOM,triggers: {

                                                   onClick:

                                                   generateOnPoiBubbleClickFunc(jsonObject.id)}}

                                                   );

                    

                    

                    // jsonObject.animation = createOnClickAnimation(img);

                    jsonObject.img = img;

                    

                    poidrawables.push(img);

                    

                    poidrawables.push(label);

                    

                                   

                     var geoObject2 = new AR.GeoObject(geoLoc,

                                                            {

                                                                onEnterFieldOfVision : function()

                                                                {

                                                                   

                                                                    this.enabled = true;

                                                                                                     

                                                                },

                                                                onExitFieldOfVision : function()

                                                                {

                                                                    

                                                                    this.enabled = false;

                                                                },

                                                       

                                                                drawables:

                                                                {

                                                                    cam: poidrawables,radar: radarCircle

                                                                }

                                                            }

                                                        );

                    

                    

                    jsonObject.poiObj = geoObject2;

                    

                     jsonObject.poiObj.renderingOrder = 0;

                    

                   //  jsonObject.img.scaling = 1.0;

                   //  jsonObject.label.scaling = 1.0;

                    

                    if(jsonObject.length==1)

                    {

                        selectedObject = jsonObject;

                        

                        selectedObject.poiObj.renderingOrder = 1;

                        selectedObject.poiObj.drawables.indicator = indiDrawable;

                        // start the assigned animation

                        selectedObject.animation.start();

                    }

                }

            }

 

Thanks and Regards

Abhishek Goyal

On a quick check of your code I don't see any major problems. But you should check the following:


How big are the used .png's and is it possible to use smaller images?

AR.Labels created for the pois additionally use up texture memory, thus reducing the amount of loaded POIs helps (e.g. filter on distance).


 

hi,there

 thanx for your wonderful codes,AND i just need more  image loading guide . Can someone give me some advice?

thanks. I'll try to quickly summarize a few things:

1. Check the size of your images (e.g. don't use huge images that will only take up a small part of the screen). Generally I would suggest staying below 512px or even 256px for POI assets (for IR overlays 1024px)

2. Check the number of your images.


Loading images only when they are needed (e.g. don't load all thumbnails if there is only a slight chance of them being visible to the user) 

Use only 1 AR.ImageResource for the same image (e.g. POI background should be loaded once by creating one AR.ImageResource)

Call .destroy() on image not needed anymore, this will free up memory