Comments (30)
I've been following this and similar discussion. Here's an early version of a utility that I created to assist with positioning awe.js pois using gps(lat,lng) or relative polar coords in hybrid-mobile cordova apps: https://github.com/ezartech/AwePoiPositionHelper
from awe.js.
Hi @shaneparsons - the comment above is a pretty clear explanation of how to use GPS style coordinates with POIs.
If you just want basic examples of how to set the POI's position then just look at the docs on the repos home page (https://github.com/awe-media/awe.js#example-poisadd-data-structure) or see the position block in any of the example files (see https://github.com/awe-media/awe.js/blob/master/examples/basic/vr.html or any of the other demos in the examples/ directory).
from awe.js.
@awe-media All the examples I've seen use simple numbers:
position: { x:0, y:0, z:200 }
I want to do something like:
position: { x:45.348639, y:-80.031394, z:193 }
When trying the above, with multiple locations in relatively close proximity (one to the left of me, one to the right), not only do the projections appear in the wrong place but they are on top of each other. I assumed this is because the POV wasn't set correctly, so I tried something like:
awe.povs.add({ id:'pov', position: { x:this.location.lat, y:this.location.lng, z:193 } });
but that didn't work either.
Can you please point out what's wrong with the example below
awe.pois.add({ id:'beer_store', position: { x:45.348639, y:-80.031394, z:193 } });
awe.projections.add({
id:'beer_store',
geometry: { shape:'sphere', radius:10 },
material: { type:'phong', color:0x387ef5 },
}, { poi_id: 'beer_store'});
// my location
awe.povs.add({ id:'pov', position: { x:45.34909, y:-80.03166, z:193 } });
Also, is there a way to omit the altitude? My current geolocation plugin doesn't return altitude.
from awe.js.
Hi @ScottBeeson here's the answers to your question.
-
The examples/basic/ar.html file does NOT use GPS. It's just showing the combination of a "video-see-thru" camera background with the 3D scene overlaid. As mentioned above, if you want to see a full working version that places objects at specified locations that you can walk around then setup a free demo at https://try.awe.media.
-
If you also continually update the virtual camera's position
awe.pov().update({ position:{ CONVERTED_CURRENT_LAT_LON_ALT_GOES_HERE })
then yes you can walk around yourpoi
. However, if you never update yourpov
from it's initial position then no.
from awe.js.
Hi @edwardcrompton you simply need to have the device/camera location and the 'point of interest' locations in the same format (e.g. GPS style WGS84 using latitude, longitude, altitude).
Then you set the awe.pov()
position to the device location mapping latitude to x, longitude to y and altitude to z.
If you're not too concerned about accurate scale and just want an AR style experience then you can simply multiply the latitude and longitude values by a large multiplier (e.g. 10,000) to scale up the effective distance between the points of interest and the camera. This should also be related to your near
and far
settings too.
Alternatively you can calculate the distances between them using a Haversine calculation, and may even want to use this to create your spatial grid.
Of course there's a wide range of other strategies for projecting points like this - it all really depends on your goals and the type of data and locations you're visualising.
Hope that helps.
BTW: We're releasing a new geolocation based app type on https://awe.media next month so you might be interested in checking that out then.
from awe.js.
Thanks for this explanation. That is very useful. I look forward to checking out the geolocation based app when that's up.
from awe.js.
@awe-media can you please share a more detailed example of how to add a POI to a set of coordinates, and how to set the POV? I can't find anything useful in the docs.
from awe.js.
Hi @shaneparsons this is a geometric projection task. The GPS coordinates represent a 2D plane mapped onto a sphere (the earth) with points above it represented as altitude. So really you're talking about a sphere here.
The webgl scene on the other hand is a cartesian grid space with an arbitrary scale - we like to use 1 unit = 1m for awe.media.
Lets walk through the answer we provided above and hopefully that will make things a little clearer for you.
The device/camera location and the 'point of interest' locations [are] in the same format
(e.g. GPS style WGS84 using latitude, longitude, altitude).
So this gives us an x,y point on a 2D plane that's mapped onto a sphere, and then altitude gives us a point above that along the normal to the surface. If your plugin doesn't provide an altitude then you can simply make sure your pov()'s position.y and your poi's position.y are roughly the same (e.g. 0) and you should be fine.
Then you set the awe.pov() position to the device location mapping latitude to x,
longitude to y and altitude to z.
In your example above it looks like you're doing this correctly, except you're not scaling the lat/lon. See the next point.
If you're not too concerned about accurate scale and just want an AR style experience
then you can simply multiply the latitude and longitude values by a large multiplier
(e.g. 10,000) to scale up the effective distance between the points of interest and
the camera. This should also be related to your near and far settings too.
The units are arbitrary but the geometry is fixed around the pinhole camera model that almost all 3D engines use. The field of view and the near and far definitions in the scene give the overall scale. If you set the pov and poi to x distances < the near value (e.g. the close clipping plane of the camera or pov) then the poi will either be invisible or right in your face. In your example both x and y are far less than 1 unit apart. Try scaling for a simple AR effect.
Alternatively you can calculate the distances between them using a Haversine calculation,
and may even want to use this to create your spatial grid.
Of course there's a wide range of other strategies for projecting points like this - it all really
depends on your goals and the type of data and locations you're visualising.
You might like to look into some of the other projection strategies but each of them is their own discussion and beyond the scope of a bug 8)
from awe.js.
Thanks for the detail @awe-media, I appreciate your time.
Just to clarify:
- am I multiplying the POI xy values or the POV xy values?
- what are the near / far values and where are they set?
from awe.js.
Hi @shaneparsons glad to help.
You are basically creating a new "scaled up" coordinate system, so you need to multiply all values if you want them to maintain their general relationship to each other (e.g. both the POI and the POV's x and y values).
For the near
and far
values - you can access the current values through the pov
or camera object.
console.log("NEAR:"+awe.pov().near);
console.log("FAR:"+awe.pov().far);
These define the z axis boundaries for the cameras view frustum. Anything outside that range will be clipped.
You can also set the default values for these when you init your app.
window.addEventListener('load', function() {
...
window.awe.init({
...
settings: {
near:1, // put whatever value you need here to make the scale of your scene work for you
far:10000, // put whatever value you need here to make the scale of your scene work for you
...
},
...
});
});
from awe.js.
Hi all.
We had a crack at getting this working today but our understanding of how to do it was still off.
I assumed we'd be able to do this:
Create a pois at a lang/long/z
Create a projection
Set the default camera position to the same lat,long
See the projection.
Then we could move around the scene by just updating the x,y of the default camera but this doesn't display anything.
I feel like I've gone horribly wrong with my understanding somewhere.
Should setting the default camera position x,y,z to 10,10,0 and pois poison to 10,10,-300 achieve the same result as setting the camera position to 0,0,0 and pois to 0,0,-300?
Thanks in advance!
from awe.js.
Hi @Alan01252 - if you try the examples described above for a simple VR or AR demo in the github repos you'll see they do exactly what you describe in your second to last paragraph. These work out of the box https://github.com/awe-media/awe.js/blob/master/examples/basic
Then the rest of the descriptions above should give you everything you need to get this working as the other users here have. But if you need more detailed support please email us at support AT awe.media with some code samples or a link to your project and we'll be happy to help.
from awe.js.
I'm currently trying to work with latitude / longitude and pois.
@Alan01252 I think you first have to transform you coordinates from GPS (WGS-84) to XYZ (ECEF ?).
It will give you XYZ values.
But be carreful, Y on ECEF is an horizontal axis while Y on AWE seems to be the vertical axis. I think you need to use the ECEF's Y value as the Z coordinate of your poi.
@awe-media Could do confirm that ?
from awe.js.
hello @shaneparsons ,
right now i am facing the same problem that you mentioned in your first comment. have you solved this issue?
my current latitude: 20.9667, longitude: 72.9
and with the help of this equation
x=R * Math.cos(lat)*Math.cos(lon);
y=R * Math.cos(lat)*Math.sin(lon);
z=R * Math.sin(lat);
where R=1000
i got X:415.6972852321125 ,Y: 311.68714304769253 , Z:854.4278155054523
so i added these to awe.pov();
awe.povs.add({ id:'pov', position: { x:415.6972852321125, y:311.68714304769253, z:854.4278155054523 } });
my poi is located on latitude:21.188602 and longitude:72.829761 and from that above equation i got
X:583.8416386261581 Y:376.80749852395235 Z:719.1279789178309
then i plot this poi as below
awe.pois.add({ id:'talav', position: { x:58.38416386261581, y:0, z:71.91279789178309} });
awe.projections.add({
id:'train',
geometry: {shape: 'plane', height: 30, width: 50},
rotation: { x:0, y:0, z:0 },
material:{ type: 'phong', color: 0xFFFFFF },
texture: { path: 'ferry.png' },
}, { poi_id: 'talav' });
this POI is currently in left hand side (North East) location but it display in my right hand side(East South) location.
@awe-media is there anything that i am missing here ?
@shaneparsons my equation of calculation of X,Y,Z is correct? if no then correct me.
from awe.js.
Hey @Dhamu143 ,
Rather than doing things with sin / cos, I just simply multiplied all values by 10,000. I also had to put the lng
value on the z
coordinate for the pois to appear in front of me... you may or may not have to do the same.
var scale = 10000;
awe.pois.add({ id:'poi', position: { x: lat * scale, y: 0, z: lng * scale } });
As far as the pov, it seems to use the default
pov unless you specify otherwise... Since I didn't know how to do that, I just update
the default
pov instead of creating a new one.
awe.povs.update({ data: { position: { x: current_lat * scale, y: 0, z: current_lng * scale } }, where: { id: 'default' } });
In the end I still had problems with accuracy / consistancy of the pois, but @awe-media informed me that they have an upcoming update to the gyro / compass functionality that should fix it.
@awe-media any update on when the update's being released?
from awe.js.
I think you should use an ECEF converter as ecef-projector for example instead of:
x=R * Math.cos(lat)*Math.cos(lon);
y=R * Math.cos(lat)*Math.sin(lon);
z=R * Math.sin(lat);
where R=1000
Because the earth is not a perfect sphere.
Once you have it, you can convert a Lat/Lng to better XYZ coords.
I did this and it works like a charm. I'm now navigating through my POI :)
from awe.js.
hello @gpanneti with the help of ecef-projector i got X=1752005.5925738232 Y=5694983.182822637 Z=2267952.6459292946 of my current latitude: 20.9667, longitude: 72.9, the x,y,z are in meter
i am not getting my desired resule even i tried all combination with this X,Y,Z
awe.povs.update({ data: { position: { x:17520.055925738232 , y:0, z:56949.83182822637 } }, where: { id: 'default' } });
awe.pois.add({ id:'dk', position: { x:17563.773750123205, y:0, z:56843.89251789216 }, visible: true });
awe.projections.add({
id:'da',
geometry: {shape: 'plane', height: 30, width: 50},
material:{ type: 'phong', color: 0xFFFFFF },
texture: { path: 'bus.png' },
}, { poi_id: 'dk' });
do i need convert these XYZ in km ? i do have so much confusion can i have your email id so we can discuss over there please?
from awe.js.
Hello !
Actually the scene and the ECEF axis are differents.
For example, Y:
- means altitude in the scene
- means an horizontal axis in ECEF
After several research, I finally found how to convert from ECEF coords to scene coords:
scenePosition = {
x: ecefPosition[0],
y: 0,
z: -1 * ecefPosition[1]
}
Enjoy :)
from awe.js.
it doesn't work for me. thank you so much for your time. :)
from awe.js.
we are trying to do something like this http://www.wikitude.com/external/doc/documentation/4.0/ios/poi.html
we want to show POI in 3d on top of the camera, at a direction/location where it is, not at just any random location in sphere in awe.
all the example that awe is showing have random projections of POI, even if you check the AR demo, in that you have divided the screen with compass points of
north X=0 Z= positive value
south X=0 Z= - negative value
west X= - value Z=0
east Z= + value Z=0
north east X= positive value and Z= positive value
north west X= negative value and Z= positive value
sourt east X= positive value and Z= negative value
sount west X= negative value and Z= negative value
and all the GPS cordinates that we are getting, are all positive, latitude positive and longitude positive,
So all the GPS cordinates that we are putting as POI are all showing in north east direction or you can say in one direction.
so the question is, how we can show POI on specific location of a GPS coordinates so that i can show that POI on exact position on camera of its respective direction.???
we also even tried ECEF projector things but didnt work cause it was also giving us all the positive values, Positive X and positive Y that is equal to Z
Cause Y, we dont need to use, according to AR example as it is 0
this problem is frustrating now and there is no clue, how it will work? what we are missing here?
from awe.js.
Hi all, we have another awe.js release with more examples coming up soon. But in the meantime you can see how the Locative AR and 360°/VR patterns work by setting up a free trial at https://try.awe.media. You'll see that the geolocation and positioning of POIs works fine.
from awe.js.
This is all very confusing to me. Can someone answer some simple questions?
- Does the ar.html demo use the device GPS?
- Given
awe.pois.add({id: 'north', position: {x: 0, y: 0, z: 200}});
, if I kept walking north, would I pass this object and eventually have to turn around and look south to see it?
from awe.js.
I'd rather not sign up for yet another thing but thanks for the answers. They're perfect.
from awe.js.
Hi @ezartech thanks for the contribution. I'm sure some people on this thread will use this.
from awe.js.
Hi @awe-media , I've tried the example you liked up in earlier comments.But they seemed to be not working!
Browser go blank and not even camera opens.Is there a prerequisite for this application?please provide demo video of this working example.
Using Google Chrome browser latest on Android.
from awe.js.
Hi awe-media, I am trying your library to do a proof of concept. Just want to understand that in your basic ar.html example, the y coordinate is always 0. Why is this?
As gpanneti suggested, can I go with
scenePosition = {
x: ecefPosition[0],
y: 0,
z: -1 * ecefPosition[1] which is nothing but y
}
from awe.js.
Hey. Sorry to slightly repeat the request of others, but does anyone have an example of code to fix a point of interest / projection to a real world location, and allow the user to walk towards, away, around it?
In case that's not clear, for example:
Create a plane on the face of a building. Each corner of the plane matches each corner of the face of the building. If you are standing near the building, you're near the plane; if far away, you're far away.
from awe.js.
Has anyone succeeded in putting a point of interest using latitude and longitude? Someone who has been able to resolve this issue, please shares your code. Greetings.
from awe.js.
@jucall you can use Angle , from latitude and longitude
check this https://github.com/ezartech/AwePoiPositionHelper
there is also an option for angle.
from awe.js.
This github repos is now focused on supporting the development of apps using awe.js on the awe.media platform. You can still access our older awe.js library as the deprecated
branch, however we no longer support that code.
from awe.js.
Related Issues (20)
- what can I pass in texture in awe.projections.add as displaying image? HOT 1
- how to animate or update image via texture using six different frames? HOT 1
- how to load .fbx file to animate an object? HOT 1
- Is texture property supported in awe.pois.update({data:{})? HOT 1
- how to unregister click event HOT 2
- Why object is going on beside of its actual position when an object is clicked/tapped? HOT 1
- how can i shake object from center on device? HOT 1
- object is appearing on another angle HOT 1
- Adding video texture to projections in an onclick event (Android) HOT 1
- texture not load HOT 1
- Use augmented reality in STEREO mode with AWE HOT 1
- Augmented Reality with camera active, with background black, for Hololens. HOT 1
- Non Mobile platform HOT 1
- Dispose method HOT 1
- Nothing HOT 1
- Text Example HOT 1
- How can I reload/update/change .obj model? HOT 2
- projection scale not working HOT 1
- Is there a function to manually run snapshot function HOT 5
- How do I link my AR scene to another scene in the same project?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from awe.js.