Blog

A-Frame v1.0.0 - WebXR Support, AR Mode

Dec 16, 2019

Today marks A-Frame’s fourth birthday. Four years ago, on December 16th, 2015, we released the first version of A-Frame to make it easier to build VR experiences and make the Web keep pace with the VR industry.

With the help of a community of hundreds of thousands of developers over the years, we’re releasing A-Frame v1.0.0 to support the coming out of the WebXR spec which has been under discussion for the past several years. The upgrade to A-Frame v1 and beyond will become necessary on more and more browsers as they deprecate WebVR and only support the WebXR specification.

To clear confusion, WebXR refers to both AR and VR support on the Web. To that end, we’ve included an AR mode out of the box in A-Frame for browsers that support ARCore and ARKit. In production, make sure to use HTTPS for VR and AR support.

We’d like to thank in part Google for providing a bit of funding to us at Supermedium to help develop and maintain WebXR support for A-Frame. And to thank people within Google, Oculus, and importantly the Web community for testing this version for us. We’ll continue to provide necessary updates to A-Frame.

We’d also like to celebrate now 300+ contributors, 10,000+ GitHub stars, and 300+ email subscribers to the A-Frame project.

If you’d like to continue to support us, please subscribe to the A-Frame newsletter where we’ll not only provide updates and showcase community projects, but requests for testing and user feedback support every now and then to keep us going in this grassroots project.

Read the release notes and changelog.

A-Frame 1.0.0 is out! 🥳 With full WebXR support shipping now in Chrome 79 and Oculus Browser stable channels. Deliver VR experiences instantaneously to millions of users today! Happy immersive Christmas! 🎄
— A-Frame (@aframevr) December 16, 2019

We're still at it! Today marks the exact date of @aframevr's fourth birthday, and we're excited to release v1 with the help of the #WebVR community. https://t.co/rlvFSpjBvu https://t.co/DHgRoEgb9f
— Supermedium (@supermediumvr) December 16, 2019

For those who are using AR.js with #aframe in WebAR apps, please import latest #aframe, v1.0.0 has been shipped 🚀

This will avoid problems with new Chrome 79 that has WebXR Device API enabled by default.

Thanks to @aframevr team for the great work. It's outstanding.
— Nicolò Carpignoli (@nicolocarp) <a href=”
For those who are using AR.js with #aframe in WebAR apps, please import latest #aframe, v1.0.0 has been shipped 🚀

This will avoid problems with new Chrome 79 that has WebXR Device API enabled by default.

Thanks to @aframevr team for the great work. It's outstanding.
— Nicolò Carpignoli (@nicolocarp) December 15, 2019
?ref_src=twsrc%5Etfw”>December 15, 2019

Hey devs! 👋 Remember to serve your content over HTTPS to enter VR mode in Chrome with A-Frame 1.0.0. WebXR is not available over HTTP.
— A-Frame (@aframevr) December 16, 2019

🎉I'm SUPER excited for the 1.0.0 release of @aframevr now that #WebXR is shipping in Chrome 79🎉
There's SO much potential of merging spatial computing with the open web to form the #widerweb & early seeds for what may become "The Metaverse."
Congrats to the @supermediumvr team! https://t.co/FuEgbBstFS
— Kent Bye VoicesOfVR (@kentbye) December 16, 2019

A-Frame Newsletter 1

Dec 6, 2019

By Kevin Ngo

What's up with A-Frame, a WebVR framework for building virtual reality experiences, from Jul 12, 2019 to Dec 6, 2019.

The return of the A-Frame roundups! Thank you for subscribing to the email newsletter if you have! If you have not already, subscribe through aframe.io/subscribe.

A-Frame v1 with WebXR and AR support will be releasing shortly as the industry-wide rollout of WebXR commences. Everything is ready to go after a bit more testing. After years of work, we’re excited to be ready for the wave on day 1.

And we’re excited to release Night Sky, a VR planetarium built with A-Frame to look and learn about the stars! You can set your location and see constellations above you in real time.

Night Sky

Without further ado, check out cool A-Frame projects from the recent months.

Built a huge 5ft Gameboy you can fully play in Web VR - https://t.co/RxkwFVwtPO - open source & made with @aframevr @dmarcos @Tojiro pic.twitter.com/nUsdLOqLTd
— Tal Kol (@koltal) December 6, 2019

Built Flappy Birds VR with @aframevr ! WebVR is awesome. Warning, game is intense - https://t.co/Z1b4fqoX9E pic.twitter.com/fCGvYcWEq2
— Tal Kol (@koltal) November 20, 2019

A demo of the different modes and opportunities to workout with Towermax Fitness Drill Track.
The length of running you see is 6 meters, in VR it's 12 meters with the room extender.
Full Video here:https://t.co/dHF3bsg4E2 #vrfitness #OculusQuest #webxr #runningmotivation pic.twitter.com/UtukWV5zAe
— TowermaxFitness (@towermaxfitness) November 19, 2019

Thank you @spaceappslondon âï¸Had a blast playing with @aframevr again + NASA models to make this with @Rushlet_ and @PrinaShah2 The story from Apollo to Artemis in webVR: https://t.co/bh4U7bBrr6 ð ð§ pic.twitter.com/oN3Yly5GRi
— Sumi Senthi (@SumiSenthi) October 20, 2019

Slowly learning how to play a #WebVR marimba.
You can try it out here: https://t.co/xpS5mIwia2
Made with @aframevr and #threejs #VR #music #instrument pic.twitter.com/uRfsoS3QUY
— Oliver Fei (@OliverFei_VR) November 26, 2019

Done and submitted. Here's a clip of yesterdays stream playing the finished the @aframevr #webxr game build for the #js13k competition. It's intense… pic.twitter.com/xENSMiSgLA
— É¬Ä±É±É±á§ ÆÆ¡ÆÆÉ ð· (@Sorskoot) September 13, 2019

Amazing AR poster made by @tzs007 for @HBO using @aframevr Awesome work! ð pic.twitter.com/Jdm7XbG65P
— A-Frame (@aframevr) December 1, 2019

Added haptics, keyboard support, a basic menu system, and a name to the #WebVR rhythm game prototype I made a while ago with @aframevr.

You can now play Cadenza!! here: https://t.co/wDzrUnvRtW
— Oliver Fei (@OliverFei_VR) August 11, 2019

We got new enter AR / VR icons!🎉Thanks to @klausweidner @theDart76 @brendanciccone @andgokevin designs and everyone that provided feedback. Leave your thoughts in the comments👇 pic.twitter.com/loDglNJjXA
— A-Frame (@aframevr) December 2, 2019

Here's a sneak peek at a feature in the upcoming "Barista Express" update!@MadeWithAFrame @aframevr #webvr #webxr #vr #barista #gamedev #aframe pic.twitter.com/5t6vaMhmuH
— Construct Arcade (@ConstructArcade) October 22, 2019

Yay! New office doggy ï¿½ï¿½@googlechrome is now shipping AR ð experimental features as part of the WebXR implementation. You can play with them today using @aframevr thanks to @klausweidner Have fun! Instructions in the comments pic.twitter.com/PyFHUDbjrN
— Diego (@dmarcos) October 29, 2019

US Civil War resurrection with @aframevr using #ARjs https://t.co/FDVTUdIywc pic.twitter.com/rj1Jrtz7VH
— Vinh T Nguyen (@VinhTTU) August 22, 2019

A Week of A-Frame 170 - 172

Jul 12, 2019

By Kevin Ngo

What's up with A-Frame, a WebVR framework for building virtual reality experiences, from Jun 21, 2019 to Jul 12, 2019.

OculusQuestのコントローラーの座標とアクションを読み取って、動的にアニメーション生成するVRできたーーー！JavaScript初心者すぎて、めちゃくちゃ苦労したけど、丸一日頑張ったらなんとかなったー！やったー！#OculusQuest #aframevr pic.twitter.com/buT2gLRNVK
— 零 (@shadow_burst) June 23, 2019

Messing about with client side per-vertex AO baking in @aframevr, over the top right now, but cheap & easy 😉 Props to #threejs, @mrdoob & @aframevr team 👍. I had to code next to nothing myself, octree for raytracing in <80 lines…mind blown🤯#webxr #webvr pic.twitter.com/MVh55Ytj8w
— Paul Brunt (@super_eggbert) July 11, 2019

A new component for aframevr that allows you to include normal html and css in your scene. Plus, it allows for direct manipulation and interaction from inside aframe, so you can quickly build UI using simple html and css. https://t.co/wLD0WrzJSM @aframevr #vr #webxr #webvr pic.twitter.com/ME4LkwN0aH
— Paul Brunt (@super_eggbert) June 30, 2019

VR portfolio in Oculus Quest with A-Frame https://t.co/SfnT5ZX2wl #aframevr pic.twitter.com/rWKV2kTziH
— だら🍔技術系投稿サービス運営中 (@dala00) July 5, 2019

"The Journey To My New #WebVR Website" 🚀
( series of steps before bringing it to life ) 👣

3. "Come To Daddy" 🎣@aframevr #TheJourneyToMyNewWebVRWebsite #WebXR #VR #UXofVR #Immersive #WebDesign pic.twitter.com/OYCqiGvgns
— Danilo Pasquariello (@theDart76) July 5, 2019

VR radio controled car with stick. (also wasd control is available for pc browser) https://t.co/EqJo4jW7IJ #oculusquest #oculusquestdev #aframevr pic.twitter.com/0pm7MBXYx4
— だら🍔技術系投稿サービス運営中 (@dala00) June 22, 2019

A Week of A-Frame 164 - 169

Jun 21, 2019

By Kevin Ngo

What's up with A-Frame, a WebVR framework for building virtual reality experiences, from May 10, 2019 to Jun 21, 2019.

Thanks to @aframevr for making it so easy to develop this easter minigame! Took two of us maybe 15 hours from start to finish. #vr #webvr pic.twitter.com/ugYJf5Szh5
— Ted Wallace-Williams (@ted_w_w) June 3, 2019

本日の進捗です。
コントローラーからブロック置いて削除できるようになりました。#oculusquest #oculusquestdev #福岡XR部 #aframevr pic.twitter.com/8qh62x39nG
— すぎどん (@sgidon) June 3, 2019

Finished a basic prototype for a rhythm game made with @aframevr .#WebVR #VR #indiedev #gamedev pic.twitter.com/RTifrSKjoE
— Oliver Fei (@OliverFei_VR) May 15, 2019

A change from the usual fitness routine?

Try out Moon Rider in the Punch Mode:https://t.co/P3X1LNSs5R
It is ideal for practicing for the tower, also WebVR!

Here is an article about it on VRScout:https://t.co/uMneAcciI i pic.twitter.com/xFaRI831QF
— TowermaxFitness (@towermaxfitness) May 28, 2019

Tonight’s rabbit hole: a few hours of @aframevr on @glitch and you have an optical illusion you can step into. W A S D to explore 🔎 https://t.co/Ur3xWLkiAw https://t.co/Ph14RHebHu
— Kate 🎉 (@SBinLondon) June 17, 2019

"The Journey To My New #WebVR Website" 🚀

( series of steps before bringing it to life ) 👣

2. "A Bit Of Both" ⚖️@aframevr #TheJourneyToMyNewWebVRWebsite #WebXR #VR #UXofVR #Immersive #WebDesign pic.twitter.com/XE7noRUKYG
— Danilo Pasquariello (@theDart76) June 18, 2019

Ever felt like re-arranging your #bathroom furniture? We developed this application a few months back to test @aframevr using a #cannonjs physics engine. The# interactive tool can be used on all desktop browsers at https://t.co/Qd10hsl5aW #webGL #3d #aframe #3dtools #cannonjs pic.twitter.com/xBMYZfoeMh
— Pikcells (@PikcellsUK) May 29, 2019

Like 15% done, but working on an @aframevr guide for building user interfaces. Will include using slice9, layout, raycaster, state components for building menus that dynamically affect the application, hand-attached menus, pagination, XHRs, texture atlas. https://t.co/FOiuaY43wq pic.twitter.com/bYmg3EytpT
— Kevin Ngo (@andgokevin) May 10, 2019

A Week of A-Frame 162 + 163

May 10, 2019

By Kevin Ngo

What's up with A-Frame, a WebVR framework for building virtual reality experiences, from Apr 25, 2019 to May 10, 2019.

We've released @aframevr v0️⃣.9️⃣.1️⃣! Follow up fixes and improvements to 0.9.0 such as WebXR compatibility and browser updates, new component events API, and improved animation performance. https://t.co/bFF0mUVZho
— Supermedium (@supermediumvr) April 25, 2019

🔧 We've released @aframevr v0.9.2 with fixes and improvements around link traversal and auto-entering VR where supported (e.g., @supermediumvr). Thanks to @sromline @towermaxfitness for reporting the issue and helping us track it down! https://t.co/MKVUkvyX1H
— Supermedium (@supermediumvr) May 7, 2019

🔷 What will be the equivalent of the Hugo Award for VR? Come catch a glimpse with Blue Cyber, a science fantasy VR series. You are charged to protect the galaxy, given the powers from a mysterious artifact. Experience episode 1, now playing on @supermediumvr. pic.twitter.com/RbpqA1VN8G
— Supermedium (@supermediumvr) May 3, 2019

👾 A multi-legged procedural creature swirls around you. Does it want to play? Built with @aframevr by @snayyss and @kif11. Visit Monster or Friend in @supermediumvr. pic.twitter.com/mC1m2jB4Xo
— Supermedium (@supermediumvr) May 8, 2019

A Week of A-Frame 159 - 161

Apr 25, 2019

By Kevin Ngo

What's up with A-Frame, a WebVR framework for building virtual reality experiences, from Apr 4, 2019 to Apr 25, 2019.

Our #VR browser game Barista Express has finally been released! âï¸

Go play it now! #webvr #webxr #webgl #aframe @MadeWithAFrame https://t.co/tiTsVKGlJx
— Construct Arcade (@ConstructArcade) April 12, 2019

Our final demo, so far ;)

-Nerly pic.twitter.com/uJRM7iavvQ
— BumbleBee_Studios (@BumblBeeStudios) April 10, 2019

We've released @aframevr v0️⃣.9️⃣.1️⃣! Follow up fixes and improvements to 0.9.0 such as WebXR compatibility and browser updates, new component events API, and improved animation performance. https://t.co/bFF0mUVZho
— Supermedium (@supermediumvr) April 25, 2019

♨️ If there was an @aframevr boilerplate I'd recommend, it'd be this one featuring Hot Reloading (change code = auto update scene), HTML requires, and templating. Try it out. https://t.co/XIGDSi6vc3
— Kevin Ngo (@andgokevin) April 12, 2019

Component .events API landed in @aframevr to register event handlers that bind/detach/attach themselves depending on entity/scene state. Improves hot reload experience. https://t.co/yhoUE1qqLu

events: {
click: function (evt) {
this.el.object3D.scale.set(2, 2, 2);
}
}
— Kevin Ngo (@andgokevin) April 12, 2019

Blocked Car VR - License our HTML5 VR games for your brand or website. No download required, please contact us for more info.https://t.co/dQCrLXsifF #webxr #webvr #html5games #html5 #vr #virtualreality #vrgames #daydream #oculus #gearvr #webgames #onlinegames @aframevr pic.twitter.com/9paddOuo25
— DS Effects (@dseffects) April 10, 2019

A Week of A-Frame 157 + 158

Apr 4, 2019

By Kevin Ngo

What's up with A-Frame, a WebVR framework for building virtual reality experiences, from Mar 20, 2019 to Apr 4, 2019.

I got a #WebVR terminal emulator working on my phone using @aframevr and Google Daydream on Android.

Now I can do CLI based development from anywhere. 🤯

Gonna slowly work on a fancy mobile VR development environment.https://t.co/NHxqMGwxmp
— Mauve 🎉 (@RangerMauve) April 3, 2019

Visual timeline editor for #WebXR animations. Proof of concept motivated by https://t.co/wImtVnWfL1 relying on @AFrameVR and vis.js (cf https://t.co/zaD1rBMC8H ) pic.twitter.com/m3uI8UpTLe
— Fabien Benetou (@utopiah) March 26, 2019

Making a really wild scene out of torus knots placed in concentric rings using @aframevr! All these shots are from the inspector, which is really great for getting insight & new perspective on a scene! pic.twitter.com/CDEBTm7j3o
— cwervo @ home lol (@acwervo) March 27, 2019

Watch the cast of @SpiderVerse scale your wall!🕸Our latest Web AR project built by #igniteie and powered by #8thWall and @aframevr for @SpiderVerse @SonyPictures @VuduFans. Try it out here 👇https://t.co/P757tteNsy #WebAR #AugmentedReality pic.twitter.com/efp21VVPfz
— 8th Wall (@the8thwall) March 26, 2019

A brand new port of GlMol for A-Frame! Allows access to the PDB database of over 120k proteins. @aframevr #webvr https://t.co/t8k2VEnZx4 pic.twitter.com/JIU7S0VxIe
— TLT Media (@tltmedia) March 25, 2019

Beatsaver Viewer from @supermediumvr on #Exokit/#MagicLeapOne: https://t.co/2LCyw41DXx
— Exokit (@exokitXR) April 2, 2019

Some @supermediumvr @aframevr Gunters of OASIS action on #Exokit #MagicLeapOne : https://t.co/17o0VT1Twy
— Exokit (@exokitXR) April 2, 2019

#Exokit on Magic Leap One running Supercraft from @supermediumvr https://t.co/sVLUryJC9D
— Christopher P. La Torres (@chrisplatorres) March 29, 2019

A Week of A-Frame 155 + 156

Mar 21, 2019

By Kevin Ngo

What's up with A-Frame, a WebVR framework for building virtual reality experiences, from Mar 7, 2019 to Mar 21, 2019.

A bit of fun for today, our dev team have been working on our new website where we’re adding a few interactive WebGL models. #contentcreator #interactive #webGL #designtools #design @aframevr pic.twitter.com/UvEReJnJQ1
— Pikcells (@PikcellsUK) March 14, 2019

Used @aframevr to re-make the opening level in Unreal. I learned how to create the gltf model files in #Blender3d to make the beds and flood lights. https://t.co/vSznAdBxkq
— ripter001 (@ripter001) March 11, 2019

We @vreewijs created a web application that generates a unique portrait based on your health data using @aframevr It wraps dynamically build texture and displacement maps around a sphere. Try it out yourself and see what you look like! https://t.co/WhlGiZtZSm #aframe pic.twitter.com/Ppv5Ehai9h
— Koen Vinken (@ikoene) March 15, 2019

Info + Video of the XRAD Remote Positioning that allowed @albtaiuti and me to win the Community Vote Award at the #SCAPEHACK last week! 👇https://t.co/rJMycwel4W
Thank you all again!@Scape @AccuCities @KILOGRAPH @AiReverywhereAR @samhoudmedia @pikawayapp @aframevr #WebVR #AR pic.twitter.com/d8YofwELSg
— Danilo Pasquariello (@theDart76) March 13, 2019

Barista Express (work in progress) by Jonathan Hale:

barista_express_making_espresso

A Week of A-Frame 153 - 154

Mar 7, 2019

By Kevin Ngo

What's up with A-Frame, a WebVR framework for building virtual reality experiences, from Feb 20, 2019 to Mar 7, 2019.

🔥 Hot reloading @aframevr HTML, components, and shaders. Save changes to your code and watch your #vr scene update live. Never refresh the browser again! https://t.co/1ZDGQCoFvj pic.twitter.com/heoMiXcneY
— Supermedium (@supermediumvr) February 26, 2019

It was cool seeing how something I sketched out could translate into a real experience thanks to the power of developer magic ð¥ð¥ð¥.

My dreams of exploding virtual barrels had finally been realized!#IWD2019 #InternationalWomansDay @aframevr #webVR #vrgames pic.twitter.com/IsZ3uR3Rvj
— gskinner (@gskinner_team) March 8, 2019

I created an installation that generates unique art for every interaction using blockchain, augmented reality from @jerome_etienne's AR.js and 3D models from @aframevr. Here you can see it in action: https://t.co/3gPNETMjvu
— manuel basanta (@manuelbasanta) March 4, 2019

Fire Blocks VR - License our HTML5 VR games for your brand or website. No download required, please contact us for more info.https://t.co/tkYKcSjLeW #webxr #webvr #html5games #html5 #vr #virtualreality #vrgames #daydream #oculus #gearvr #webgames #onlinegames @aframevr pic.twitter.com/HSagBGMFso
— DS Effects (@dseffects) March 1, 2019

Square Box VR - License our HTML5 VR games for your brand or website. No download required, please contact us for more info.https://t.co/rsr4RKpqdM #webxr #webvr #html5games #html5 #vr #virtualreality #vrgames #daydream #oculus #gearvr #webgames #onlinegames @aframevr pic.twitter.com/FTsxw1ZdHb
— DS Effects (@dseffects) March 6, 2019

Frame Academy Project 5: Bringing Audio, Video, + 360 Video in WebXR is now live. Now at Frame Academy: 5 Projects, 20 pages of content, + 20 videos to take you from scratch to building cross-platform immersive experiences w/ @aframevr . https://t.co/YaM0d2c88m #arvrinedu #edtech pic.twitter.com/CgSltjcX1J
— Gabriel Baker (@gabrieljbaker) February 25, 2019

Capitals AR - License our HTML5 AR games for your brand or website. No download required, please contact us for more info.#webxr #webar #markerless #html5games #html5 #ar #augmentedreality #argames #threejs @aframevr pic.twitter.com/7gxWkN3hp6
— DS Effects (@dseffects) February 25, 2019

More work in progress #WebXR @aframevr meets #ProjectionMapping meets @NYCTBus for my @GrayAreaorg "semester" project! Tracking is loose by a few centimeters but good enough for fun. pic.twitter.com/JBXNaAGFFH
— Kieran Farr (@kfarr) March 6, 2019

A Week of A-Frame 149 - 152

Feb 21, 2019

By Kevin Ngo

What's up with A-Frame, a WebVR framework for building virtual reality experiences, from Jan 23, 2019 to Feb 21, 2019.

⚡ A-Frame v0.9.0 has been released! Perf improvements, Inspector updates. And initial WebXR support (shout-out to @ExpWithGoogle for helping fund the work w/ @supermediumvr)! Big thanks for everyone's contributions for making VR (and AR) more awesome! 🤜 https://t.co/p20i7Zcif3 pic.twitter.com/7bHTcaaa32
— A-Frame (@aframevr) February 11, 2019

We built an experience to explore three trims on all-new Chevy Silverado. Check it out now in 3D. https://t.co/c4es2eC4UC @aframevr @isobarUS
— Zach DeBord (@zacharydebord) January 26, 2019

This was sort of glossed over. But Sony's $1 million dollar sweepstakes 360/VR challenge for marketing their Hollywood movie "Escape Room" was built with @aframevr! https://t.co/PDbnA4XHyi pic.twitter.com/ESoBSdnmkd
— Kevin Ngo (@andgokevin) February 1, 2019

Learn how to build a VR experience with our new WebVR Starter Kit: a free, 5-part video course with interactive code examples that will teach you the fundamentals of #WebVR using @aframevr https://t.co/muUVCXm4Te pic.twitter.com/zng2LXniyk
— 🎏Glitch (@glitch) February 12, 2019