awe-media / awe.js Goto Github PK

if i have 6 image frames

for below gif

so, how can i set those frames in loop to flapping for butterfly.

Please give me any solution.

Hello, I'm considering awe.js for a small augmented reality game/application. Instead of using a marker, I'd like to track a colored rectangle or a custom object (a very simple object like a jar)/an image, etc. Do we have something like that in awe.js? (a marker-less object detection)
I was taking a look at the location based AR video example (https://www.youtube.com/watch?v=OJHgBSRJNJY&feature=youtu.be) and those objects are keeping the 3D position. So, I wonder if it is possible to track the 3D position/projection of any of the detected objects and then reposition the assets based on it.
Thanks!

Hello, I can create a mesh with video, but Android keeps the video from playing by default. How can I access the video and have it play on click? I see there is a play() method in the wiki, but not how (or where) to access the mesh.

I'm trying to apply matrix transformation from ar_tracking_marker event to another projection / poi, but to no effect. Also, adding multiple objects to a marker poi doesn't seem to be supported.

I've got roughly this:

awe.pois.add({
  id:'masterPoi',
  position: { x:0, y:0, z:0 },
  visible: false
});

awe.pois.add({
  id:'jsartoolkit_marker_64',
  position: { x:0, y:0, z:0 },
  visible: false
});

Then I add one projection to the marker poi, and another projection to masterPoi.
From the tracking event, I'm doing the following:

if (marker) {
  awe.pois.update({
    data: {
      visible: true,
      matrix: marker.transform,
    },
    where: { id: 'masterPoi' }
  });
}
else {
  awe.pois.update({
    data: {
      visible: false
    },
    where: { id: 'masterPoi' }
  });
}

I've tried updating the projections directly with the same transform, but that doesn't work either.

I've also tried creating nested projections in the marker in hopes that it would update automatically according to the marker, but they don't seem to work with marker pois.

Is there anything obviously wrong with what I'm trying to do here?

Recently, I have seen a closed issue where the awe team replied saying that they will add support for scanning of custom markers. Is it available now ?
Basically, i want to scan a image and get overlay image displayed on it. Is this possible using awe.js?

Hey there,

Tnx for great library, keep going 👍

I have one question: Did you published example anywere with this transformation / moving like on this demo?
https://youtu.be/LxVRBxC-SHY?t=20s

I'm using the basic example that I've loaded on my server:

https://maps.horrocks.com/awe/examples/basic/ar.html

No matter which compass direction I'm facing when the page loads, the page loads facing the white cube (id: south). I've tested it on a Google Pixel and Samsung Galaxy 7. Shouldn't the red block always be on the north of the camera?

Thanks!

Hey there.

If I add a .png image as texture at the marker example, the png background is always white. Even if I set the transparent value.

Do you have any idea?

Is it possible to detect a marker on an image, get its pose in 3d and remember this position relative to the camera? So that moving or tilting will transform the detected marker position to the right spot even if the marker itself cant be detected anymore (because out of view, to far away, to near etc...)

In my special case I detect aruco markers and calculate their 3d position with posit (I am using js-aruco).
This gives me translation, rotation, tilt... of the marke.
I would like to remember these position so that I can draw something on the marker even if the marker is not detected anymore. See it as a backup until the marker is detected again.
For this I would use the position and acceleration sensors of my android device.

Is this possible with awe.js?

I tried the example of geoAR. It works perfectly on Android (need to serve it over HTTPS), but nothing on iOS.

When I remove the dependecy to "gum", it works well.

Does someone knows how to fix this ?

Hi @awe-media, I got into a problem when running awe.js from inside a WebView using Cordova, where the scene always capturing media from the front camera instead of rear camera. And since using this under a WebView, by default there is no confirmation popup to select which video capturing device to use like when running in the browser.

After inspecting with Chrome devtool, it seems that this behavior happened because every devices returned from enumerateDevices() in https://github.com/awe-media/awe.js/blob/master/js/awe-standard.js#L1434 has no label (tested on Sony Xperia M and Oppo F1), so the selected source always the first videoinput device, which in my case is the front-facing camera.

Any thought on this? Thanks 😁

Hi,

Is this project still alive? There hasn't been a commit for months and the website is down.

Thanks.

I'm just wondering if there's a way to simply add an image (ideally an svg image) on the screen without having to apply it as a texture to a 3D object?

I have no need for 3D objects or orientation / rotation, I just want a flat, svg, marker placed in front of a chosen location. Is that possible? or is my only option to add a png to a plane object?

As this awe.js uses getUSERMEDIA which is only supported on android and not in ios, we are here making a POI location based mobile app where you display POI around your current lat and long on camera feed and that too in 3d.

i didnt get any free SDK for this thus i am trying to use combination of ezar and awe.js.

so idea is i want to disable getusermedia of awe.js for camera feed and instead use ezar camera feed so that it works on both ios and android and then rest of the logic of awe.js to render POI on 3d view.. is that possible? if yes how can i achieve it.

Please help as we are stuck on it and i will really really really appreciate it.

Hi, I'm using a text object and I want to change the word from one to two like it is was counting, it´s possible? I tried using awe.projection.update() function but it doesn't work.

trying with
geometry:{ shape: 'plane', width:100, height:100 },
material:{ type: 'phong', color: 0xFFFFFF, transparent:true },
texture: { path: 'mygif.gif' },

says that gif format is not valid (and also puts a black background).

Is it possible to do it with a transparent mp4 instead of a gif?

Is it possible to destroy or delete awe?
I work with dynamic javascript routes to show pages. When i go to my AR page i initials Awe. When i go to a different page i want to delete the active awe so it won't throw errors because the dom elements doesn't exists anymore.
Getting this error now:

ReferenceError: FLARException is not defined
    at c.detectMarkerLite (http://localhost:8080/static/libraries/awe/plugins/awe-jsartoolkit-dependencies.js:11191:17)
    at handler (http://localhost:8080/static/libraries/awe/plugins/awe.marker_ar.js?_=1479532201377:357:37)
    at http://localhost:8080/static/libraries/awe/awe-standard.js?_=1479532201377:4139:20

I have converted gif in .mp4 and used it in texture,

texture: {
path: 'img/SB-butterfly.mp4'
},

it is working, but i am not getting expected result, it works as a downloading video, means where i want animated gif there i getting video as downloading on full scene.

how can i load .mp4 video in awe.js?
Please Give me solution asap.

I am trying to make an object rotate with touch start and touch move, but I have many objects loaded, and only one generic eventListener (building my stuff off the example from basic). I do not know how to tell it that if someone touches an object and moves it's finger, the object should rotate as the finger drags it.
(my concern is that all of the objects will move when you try to rotate only one.)
[and another problem is how do I ask that.]

Thank you for your help!

I tried out the basic AR example https://github.com/awe-media/awe.js/tree/master/examples/basic on iOS 11. The camera access prompt shows up as expected, but instead of displaying the camera input stream, it shows a black screen instead.

I tried to use awe geolocation example and managed to setup everything correctly and see 3D models but no camera view.
I am using Cordova with ionic on Android. I tried adding crosswalk but still nothing. It gives me warning: "Your browser doesn't support VR" i am using Android 6, its WebView should support camera view as far as i know.

disregard

Using the position (0,0,-200) I can spawn objects in front of the camera on the browser, but when switching to mobile that is not always valid since the camera will not always be facing the same way.
is there a way to get the vector that the camera is facing to or something like that? Any way to spawn an object right in front of the current camera position?
Sorry for asking a lot of questions hehe... the documentation is short

Hi There,

I'm testing your Geo AR examples and it all works fine on an android device but not on iOS.
For what I now WebGL are now supported on iOS devices.

So in theory this should work on my iPhone but it get a fallback message still.

Is this something related to the library itself or is there some line of code on the on the example that I need to deactivate/remove?

Cheers,
Salvo

following code is not working in awe demo or also in my app to animate object as a butterfly.

NOTE: You can also use the projection.update() api to update the texture periodically too. e.g.

var butterfly = awe.projections.view(PROJECTION_ID_HERE);
var i = 1;
b.update({
  position:{ y:1 }, // use a minimal non-zero update here
  animation:{
    duration:0.2, // 5 animation steps are 1/5th of a second
    repeat:5, // play for 1 second total
    persist:0,
    step_callback:function() { 
      i++; if (i>5) { i = 1; } // add time scaling here if the animation is too fast
      b.update({ texture:{ path:i+'.png' } });
    }
  }
});

how can i use this code to fulfill my functionality?

Typescript's fairly new to me so I don't have any examples, but I know typings make it a lot easier to integrate external code like this into a ts project.

I try to load fbx scene but I think my code is wrong.
You have some example code for fbx animation?

Best regards,

Miguel Angel

hello ,

this shape is used for display text

                   geometry : {
                                    font_url : "Hack_Regular.js",
                                    parameters : {
                                        height : 5, // depth of the extruded text
                                        size : 10
                                    },
                                    shape : "text", 
                                    text : "hello ",
                                    },
                                rotation: {
                                    x: 0,
                                    y: 180,
                                    z: 0
                                },
                                material: {
                                    type: 'basic',  //default
                                    color: 0xFF0000,
                                },
                            }, {
                                poi_id: 'north'
                            });

and this is used for cube display

 geometry: {
                 shape: 'cube',
                      x: 50,
                       y: 50,
                         z: 50
                   },

is it possible that we can display both with having same id. like i want text exact below cube.
how can i do this with same id ?

Hello guys,

It would be great if this package was available on npm.

Keep up the good work!

Is there a way to solve this problem? Is there a way to spawn a cube initially in the middle of the camera screen and make it so it doesnt drift? (maybe its a gps thing idk)

I try load a .obj with UV texture with this code.
awe.projections.add({
id:'marker_projection',
geometry: { path: 'carro.obj' },
position: { x:0, y:0, z:0 },
rotation: { x:0, y:0, z:0 },
scale: { x:0.3, y:0.3, z:0.3 },
material:{ path: 'carro.mtl' },
visible: false,
}, { poi_id: 'jsartoolkit_marker_64' });

But in the AR show all in black.
This is my test link
https://comunadigital.com.ec/awemiguel/

Best regards,

Hi!

I put your examples on our server today to test awe.js a little bit, but I recognized that it neither works on my Mac, nor on my iPhone ("This demo currently requires a standards compliant mobile browser.").

Android is working fine. Is this a known issue? Or am I doing something wrong?

Thanks,
Philipp

We tried to use below mention steps, but unfortunately doesn't work. anyone can help with this ?
Binding a POI to a jsartoolkit marker is easy
- First add the awe-jsartoolkit-dependencies.js plugin (see above)
- Then select a marker image you'd like to use
- Then add the matching number as a suffix for your POI id (e.g. _64)
NOTE: See 64.png in this directory or https://github.com/kig/JSARToolKit/blob/master/demos/markers
This automatically binds your POI to that marker id - easy!

I've been testing this library for a bit and have the same problem on each project / demo. The objects flutter. I've narrowed it down to the awe.gyro.js . I've tested all the demos on a variety of devices and the objects always flutter. I've tried smoothing the gyro and accelerometer readings, but the delay is annoying.

Any thoughts?

Having created a fixed projection, how can I move around the POI to see around the projection? I m able to display the model in the scene but am unsure of the approach to take to viewing around it . A short example/pseudo code would be appreciated.

awe.pois.add({ 
  id: 'fixedObj', 
  position: { x: 0, y: -2, z: 0 },
  scale: { x: 2, y: 2, z: 2 },
});
awe.projections.add({ 
  id: 'BracProjection', 
  geometry: {
    path: 'models/Brac.obj'
  },
  material: {
    path: 'models/Brac.mtl' 
  },
  position: { x: 0, y: 0, z: 0 },
  rotation: { x: 0, y: 180, z: 0 },
}, { poi_id: 'fixedObj' });

its looking for this plugin, but I was not able to located with the download packages geo_ar.js

All other examples are working good for me.

Thanks for the great work.
Are there any plans to upgrade to a newer version of three.js?
If yes, can you share a timeframe when it the update is planned?

hey -- just wondering what the license is for this software, thanks!

Hi,
I am trying out the examples, to see if this is something I can use in some clever business case.

What I think I need is to have the video stream of the environment facing camera shown, and to then overlay it with objects that are "fixed in space" by some sort of geo-tag. So when I move the device around, it will show me the environment, but only those objects that are located where I point the device.

When I try the examples/basic/ar.html I get the video stream, but the object (the spinning cube) is always shown on my screen no matter where I point the phone.

When I try the examples/basic/vr.html however, no video stream is shown (this is expected), but the objects stay on their places in space, so when I move the phone around, I can look at different objects.

What I need to accomplish is have BOTH the video (from the ar.html example) AND the "objects fixed in space not on screen" effect from the vt.html example.

How can I accomplish this?

Regards
Leif

Accoording to the old project the issue "There's also an issue with Firefox on Android where videos are rendered upside down - but that's fixed from version 40 onwards." is in this version.
The old repo https://github.com/buildar/awe.js works fine but in this repo the camera is rendered upside down in firefox.

The marker is working in my laptop with the webcam but not in Android.

Hi, I try to run a basic AR Marker demo on Safari with my Ipad, but in the screen nothing appear.

Regards,

Hi,
i'm trying to display a plane with "concept.png" texture (with alpha chanel = transparency)
The following code was OK with older repository Buildar. No more with awe-media.
Any idea ?
Thanks :)

awe.projections.add({
id:'e',
geometry:{ shape:'plane', width:252, height:100, widthSegments:10, heightSegments:10 },
texture: { path: 'concept.png' },
rotation:{ x:0, y:90, z:0 },
material:{ color:0xFFFFFF },
}, { poi_id: 'east' });

In the meantime checkout the code.

I saw the example of awe.js，there is some code like window.awe.init``awe.util.require`` capabilities: ['gum', 'webgl'], files: [ ['#link(../lib/awe-standard-dependencies.js)', '#link(../lib/awe-standard.js)'], '#link(../lib/awe-jsartoolkit-dependencies.js)', '#link(../lib/awe.marker_ar.js)' ],
but I never find the doc of those function in wiki..

Similar to #10

I cannot load a .obj file into awe.js

awe.projections.add({ 
  id: 'bacon', 
  geometry: {
    path: 'https://raw.githubusercontent.com/turnerniles/awe-kawaii-breakfast/master/public/basic/models/CuteBacon.obj'
  },
  position: { x: 0, y: 0, z: 0 },
  rotation: { x: 0, y: 180, z: 0 },
}, { poi_id: 'bacon' });

I get the error:
Uncaught Error: Unexpected line: mtllib CuteBacon.mtl
at THREE.OBJLoader.parse (awe-standard-dependencies.js?=1494708458859:1316)
at awe-standard-dependencies.js?=1494708458859:1001
at XMLHttpRequest. (awe-standard-dependencies.js?_=1494708458859:387)

The prior issue recommends loading it into the web platform. But that doesn't work either. Is there a specific file type I need to use or some type of cleaning I need to perform on the file?

Since there doesn't seem to be a file named awe.js (as stated in the readme), I'm just wondering which js file/s to import?

examples/ar.html is importing awe-v8.js and awe-loader.js, but there is no mention of this in the readme so I'm unsure. Also, if those are the only files needed, what are the other 2 for?

I've been trying to work out how to plot a 'point of interest' at a real world geolocation using awe.js. A code example of how this is done would be very useful and greatly appreciated.

How does one add a custom marker for detection? Every example I've seen uses the 64 marker, but how do i define my own marker pattern

Which properties can be specified in awe.pois.update({data:{}?

awe.projections.add({
id: zoneUser.email + '->' + Math.random(),
// geometry: { shape: 'cube', x:50, y:50, z:50 },
geometry: {
shape: 'plane',
height: 10,
width: 20
},
position: {
x: 0,
y: 0,
z: 0
},
rotation: getRotation($scope.poiBarrings[zoneUser.fullname]),
material: {
type: 'phong',
color: 0xFFFFFF
},
texture: {
path: 'img/SB-Butterfly.gif'
},
}, {
poi_id: zoneUser.fullname
});

Please give me any solution as soon as possible.