chenzlabs / aframe-ar Goto Github PK
View Code? Open in Web Editor NEWBasic A-Frame support for browser-based augmented reality (AR), supporting the new WebXR AR support in Chrome v81+ as well as WebXR Viewer.
License: Mozilla Public License 2.0
Basic A-Frame support for browser-based augmented reality (AR), supporting the new WebXR AR support in Chrome v81+ as well as WebXR Viewer.
License: Mozilla Public License 2.0
Issue from discussion on #4 --
From our discussion, it seems that you would indeed like to reuse the camera -- and you're probably in the vast majority there; I am thinking that maybe it would be better to refactor things slightly, so that the
ar
scene component introduces anar-camera
component on the appropriate camera (specified by selector), that can be enabled / disabled to effect your AR toggling.
With that in mind, I'm going to close this PR and open a corresponding issue.
a-frame 0.9.0 has just been released, and it brings initial support for WebXR. Do you have any plans to update this repo to work with the new standard so it can be used on standard Chrome browser?
Thanks!
From @blairmacintyre on Slack:
https://aframevr.slack.com/archives/C39D7JGQZ/p1518226437000105
Another thing: is the field of view correct. In both the Samsung demo you sent, and the fox one, on my iphone7 the graphics move around instead of staying fixed, in a way I’d expect if the field of view of the camera is wrong
Recently Mozilla released version 2.0 of their WebXR Viewer with WebXR compliance, so hopefully the old-browser-specific support can be deprecated in favor of WebXR support like Chrome on Android.
Hey,
I am getting this error on the following website: https://correnslab.de/public/ar/.
It runs on my local version but somehow throws an error on the web.
Anyone knows how to solve this?
Thanks!
Platform / Device: Android 8.1.0 - POCOPHONE F1
0.8.2
^0.2.1-a
^0.97.0
^0.1.8
Glitch examples do not work. The scene loads with sphere and white background but the camera does not respond to any device movement. The console logs mozilla-ar-xr has loaded
.
Demo:
https://songhe.surge.sh
Code:
https://github.com/edanweis/aframe-ar-test
How do I get the examples working with WebARonARCore browser? I'm using Vue.js with Webpack to import the modules like so:
import { Scene, WebGLRenderer } from 'three';
import { ARUtils, ARPerspectiveCamera, ARView, ARDebug, ARDisplay } from 'three.ar.js';
require('aframe-ar');
<a-scene ar>
<a-box width="0.25" height="0.25" depth="0.25" position="-0.25 0.125 -0.75" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 0.3125 -1.25" radius="0.3125" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="0.25 0.1875 -0.75" radius="0.125" height="0.375" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -1" rotation="-90 0 0" width="1" height="1" color="#7BC8A4" shadow></a-plane>
<ar-camera></ar-camera>
</a-scene>
regards,
Thank you very much for your contribution of augmented reality, a question for support on iOS? and what explorers or what would be necessary to do for its use?
Is image tracking possible?
I've been working with a-frame for a while and this implementation for AR with Arcore/Arkit is impressing but I have an issue when I install the npm packages aframe and aframe-ar respectively in a basic Angular project where I want to implement an AR example as a component, the camera turns on but don't detect any surface so i can't situate any object rendered.
From @blairmacintyre on Slack
blairmacintyre [3:03 PM]
@mchen the demo doesn’t seem to handle the phone rotating?
mchen [3:06 PM]
the demo doesn’t seem to handle the phone rotating?
something there seems a little broken for webxr viewer, on webaronar___ it works OK
blairmacintyre [3:30 PM]
Rotation works fine in our apps, I wonder what’s different with yours.
mchen [3:40 PM]
Rotation works fine in our apps, I wonder what’s different with yours.
yeah, good question, let me know if you have things you'd like me to try
blairmacintyre [3:54 PM]
The current polyfill handles it in various places; are you using the polyfill, or did you pull code into your library directly? Like the google ios app, we had to create our own even from native, since there are issues with wkWebView and rotations.
So users only have to do:
<a-scene ar>
From @blairmacintyre:
The clipping on the bottom is likely because you aren’t handling window resize events. Window gets bigger when url bar hides when navigating from non-AR page. Will also cause View to be crunched a bit vertically. No idea what that craziness in the middle is.
From #5...
That could certainly make sense. I've been a bit away from the AR support, but it looks like you've recently updated this component to also support Mozilla's WebXR API?
I was thinking to switch over to their webxr polyfill, but now it looks like I can get the best of both worlds if I continue to use the library? An update to the readme to clarify support would be highly appreciated.
Hello, I tried to run on iPhone and Ipad, but not working, do you know if need a specific version on Safari or something like that?
Which looks like it's this
immersive-web/webvr-polyfill#354
Rendering virtual content works but the pass-through camera is currently not displayed in the Mozilla XR viewer.
https://itunes.apple.com/us/app/webxr-viewer/id1295998056
https://github.com/mozilla-mobile/webxr-ios
i'm using aframe-ar latest version.
and the standard example aframe html
found here : https://codepen.io/mozillavr/pen/BjygdO
the tracking works that the object stays in place but the background is still white
am i doing something wrong or is there an issue ?
(Drive-by comment from looking at the AR code)
Line 55 in 27e800f
if (navigator.xr.isSessionSupported('immersive-ar')) {
isSessionSupported returns a promise, so unless I'm misunderstanding it this check will always return true. It should use something like this:
navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
if (supported) ...
});
A generic ar
component would be really cool to explore how a-frame can accomodate these use cases. Right now is tailored to three-ar but in the future we might want to folllow a different path
Chrome Beta requires the user to press the AR button to start AR, where currently WebXR Viewer does not.
Note that we may want auto-enter AR behavior in certain circumstances with WebXR Viewer, which AFAIK Chrome does not permit (?)
Is it possible to change or read the arCamera's position and rotation? I am trying to make an object follow the position of an object that has the camera inside of it (using networked-aframe). This works on the desktop version of my site, but not when I open it on arKit. The camera moves throughout the scene, but its position is not being updated.
Is there a way to turn off the pass through camera and render the vr scene instead with the ar camera updating position / matrix. This would theoretically give you a 6dof view on mobile device.
Nice work! However, when viewing the AR examples, they only work correctly when I rotate my phone. As soon as I move (i.e. translate) my phone, the result is incorrect -- the objects move as if they're "atttached" to my phone instead of remaining in place.
Not sure if this is a limitation of ARCore or not.
I cannot get your glitch examples to work in Safari. Neither do the examples on the repo when I clone them to my https server. The models show up, but my camera is not used. Is this expected behavior, or am I doing something wrong?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.