Start a new topic
Solved

Can we Add 3D Model AtGeoLocation with Occlusion in JAVASCRIPT API

Hello:


Is it possible to use occlusion for 3D Model AtGeoLocation in AR GeoObject ?

I mean add 3D Model, at AR.GeoLocation(Lat-Long) with AR.RelativeLocation, so how can i occlusion effect on 3D Model


I am using JAVASCRIPT API SDK.


Is this possible?


I have attache my code below..


 

var World = {
	loaded: false,
	rotating: false,

	init: function initFn() {
		this.createModelAtLocation();
	},


	createModelAtLocation: function createModelAtLocationFn() {

		/*
			First a location where the model should be displayed will be defined. This location will be relativ to the user.	
		*/
		//var location = new AR.RelativeLocation(null, 5, 0, 2);

		var geoLoc = new AR.GeoLocation(23.027390, 72.558721, 320.);//National Handloom
		//var geoLoc = new AR.GeoLocation(23.028350, 72.506674, 320.);//Iscon
		//var geoLoc = new AR.GeoLocation(26.206274, 73.048096, 320.);//Jodhpur
		//var geoLoc = new AR.GeoLocation(40.319421, -74.631490, 320.);//client

		var location = new AR.RelativeLocation(geoLoc, 10, 10, 10);

		/*
			Next the model object is loaded.
		*/
		var modelEarth = new AR.Model("assets/earth.wt3", {
			onLoaded: this.worldLoaded,
			scale: {
				x: 10,
				y: 10,
				z: 10
			}
		});

        var indicatorImage = new AR.ImageResource("assets/indi.png");

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

		/*
			Putting it all together the location and 3D model is added to an AR.GeoObject.
		*/
		var obj = new AR.GeoObject(location, {
            drawables: {
               cam: [modelEarth],
               indicator: [indicatorDrawable]
            }
        });
	},

	worldLoaded: function worldLoadedFn() {
		World.loaded = true;
		var e = document.getElementById('loadingMessage');
		e.parentElement.removeChild(e);
	}
};

World.init();

 


Hello Umesh,


That should be possible. We have AR.Occluder (for 3D models), AR.Occluder.Sphere, AR.OccluderBox and AR.OccluderCylinder in the JS API. They can be used exactly like AR.Model


Hope that helps.

Eva

Hi.

Thanks for Reply


I have confusion on Add AR.Occluder on AR.GeoObject.I can't understand how to add AR.Occluder on my code.. if i am add AR.Occluder object in AR.GeoObject than i don't find earth Model only Arrow is give direction.i have attached my code below..

 

var World = {
	loaded: false,
	rotating: false,
    occluderCenterZ: -0.12,

	init: function initFn() {
		this.createModelAtLocation();
	},

	createModelAtLocation: function createModelAtLocationFn() {

		/*
			First a location where the model should be displayed will be defined. This location will be relativ to the user.	
		*/
		//var location = new AR.RelativeLocation(null, 5, 0, 2);
		var location = new AR.RelativeLocation(null, 1, 0, 0.5);

		/*
			Next the model object is loaded.
		*/
		var modelEarth = new AR.Model("assets/earth.wt3", {
			onLoaded: this.worldLoaded,
			scale: {
				x: 0.1,
				y: 0.1,
				z: 0.1
			}
		});

		this.occluderEarth = new AR.Occluder("assets/earth.wt3", {
           onLoaded: this.worldLoaded,
           scale: {
                x: 0.1,
                y: 0.1,
                z: 0.1
           }
        });

        var indicatorImage = new AR.ImageResource("assets/indi.png");

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

		/*
			Putting it all together the location and 3D model is added to an AR.GeoObject.
		*/
		var obj = new AR.GeoObject(location, {
            drawables: {
               cam: [modelEarth],// Also i have add {occluderEarth} here
               indicator: [indicatorDrawable]
            }
        });
	},

	worldLoaded: function worldLoadedFn() {
		World.loaded = true;
		var e = document.getElementById('loadingMessage');
		e.parentElement.removeChild(e);
	}
};

World.init();

 
Please suggest me how can i add AR.Occluder in AR.GeoObject Thanks Umesh Ahir.


Hi,



you are adding a 3D model and an occluder that are exactly alike at an identical position to your scene. The occluder will therefore hide your 3D model completely, which is why you don't see it anymore. That is the intended behaviour.


Occluders only really make sense if they coincide with a real objects, not a virtual ones.


Would you mind explaining what you are trying to do exactly, maybe I could provide some advice on how to achieve it.



- Daniel

Hi,


We are working on an app that would display advertisement banners at a certain height on a building when you enter a predefined geofenced area.


Now, at the current stage, using wikitude we are able to place the AR object model onto the building. But the issue is that, are able to see the model beyond walls and building between the target building. We want to avoid this and show the ad only when there is no hindrance between the target building and the camera.


We thought that this could be achieved using an occluder. Is this the right path to move ahead?


Please let me know

Thanks

Umesh Ahir.


Good morning,



that is indeed the correct way to proceed. And the code you provided is correct as well. The only issue is, as I've mentioned previously, that your code is currently occluding a model of size X at position Y with an identical occluder model, also of size X and also at position Y. The result is full occlusion of the model.


If you were, however, to have an AR.Occluder that coincides with a building and AR.Models that represent billboard advertisements on that building, you would achieve the desired effect.



- Daniel

Hi Daniel,

Thank you for your feedback.

I understand from your response that we need to setup the occluder of the side of the building that is blocking the view of the ad model. The confusion I have is that we want the occluder to be dynamic in its behaviour. So whether its a building, a tree, hand or anything else, the effect should be applied and model not be displayed for that portion that is being blocked.

Can you guide us on how to achieve this at runtime?

Also, I have attached a couple of URLs for your reference to showcase what we are looking for

1) https://www.youtube.com/watch?v=a5NLRMEnu2U
2) https://www.youtube.com/watch?v=CQFkTvEcfpk


Thank you.
Umehs

Hello,

please help us


we can move to ahead with our goal using your sdk?

Also if you are unable to understand my above question, Please let me know.

Good morning,



I'm not quite sure what you mean by "the side of the building", you would most likely want an occluder that just represents all of the building.


But, generally, what the videos you posted show can be done with the occluders of the Wikitude JavaScript SDK. And these occluders can also represent any model, be it a building, tree or hand.



- Daniel

Hi Daniel,

Thank you for reply.

Do we need a model(wt3 file) of the building that we want to set occluder on?


As we don't know what objects might hinder the view of camera, can we achieve this dynamically?

Thank you.
Umehs

Yes, you do need a model of the object you want to act as an occluder. Unless the object is simple enough to be represented by one of the procedural occluder objects we provide (box, sphere, cylinder).


If by "dynamic" you mean that the SDK recognises objects in the scene that are are likely to be occluders and makes an automatic reconstruction of them, I'm afraid the answer is no. 


You need to know which objects will act as occluders in your scene and you also need to know the position of them beforehand.



- Daniel

Login or Signup to post a comment