A-Frame https://aframe.io/ A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, mobile platforms. Fri, 17 Mar 2017 09:00:17 GMT http://hexo.io/ A Week of A-Frame 52 https://aframe.io/blog/awoa-52/ https://aframe.io/blog/awoa-52/ Fri, 17 Mar 2017 00:00:00 GMT <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><div class="tweets tweets-feature"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">⛏️ &quot;Minecraft in WebVR with HTML Using A-Frame&quot; tutorial on <a href="https://twitter.com/Real_CSS_Tricks">@Real_CSS_Tricks</a> by <a href="https://twitter.com/andgokevin">@andgokevin</a>. 11 lines of HTML! <a href="https://t.co/wj4dXqzCQf">https://t.co/wj4dXqzCQf</a> <a href="https://t.co/CouEW3HLHT">pic.twitter.com/CouEW3HLHT</a></p>&mdash; A-Frame (@aframevr) <a href="https://twitter.com/aframevr/status/842032593512026112">March 15, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Thanks to everyone who came to <a href="https://twitter.com/webgamesday">@webgamesday</a> and tried our next <a href="https://twitter.com/hashtag/aframevr?src=hash">#aframevr</a> <a href="https://twitter.com/hashtag/webvr?src=hash">#webvr</a> project by <a href="https://twitter.com/mozillavr">@mozillavr</a> :) Stay tuned next week 🕺💃 <a href="https://t.co/1XLJUe0HDV">pic.twitter.com/1XLJUe0HDV</a></p>&mdash; Fernando Serrano (@fernandojsg) <a href="https://twitter.com/fernandojsg/status/841017053221912580">March 12, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Want to do Augmented Reality on the web ? You can do it in 11 lines of html now :) ar.js with aframe magic 😜 <a href="https://t.co/jM0J0HtydZ">pic.twitter.com/jM0J0HtydZ</a></p>&mdash; Jerome Etienne (@jerome_etienne) <a href="https://twitter.com/jerome_etienne/status/842192608256512000">March 16, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="en" dir="ltr">I built a VR experience for my site, using <a href="https://twitter.com/hashtag/WebVR?src=hash">#WebVR</a> and <a href="https://twitter.com/aframevr">@AFrameVR</a>. Compatible with📱💻👓. This was a blast to make. <a href="https://t.co/eKuVR6dLwP">https://t.co/eKuVR6dLwP</a></p>&mdash; Austin Knight @ 🇳🇴 (@ustinKnight) <a href="https://twitter.com/ustinKnight/status/842126805406494721">March 15, 2017</a></blockquote></div>

Projects

Web Audio VR Sequencer by @vibertthio

Room Painter by @pudymody. Paint the walls of a 360° room with any colors using dat.gui.

incheon.gg, a Node-based game server, now supports networked A-Frame with physics. By @opherv

Articles

Events

@andgokevin and @dmarcos will be at IEEE VR 2017 to give an A-Frame workshop. We’ve started maintaining A-Frame Workshop, official interactive lessons for learning and teaching A-Frame.

Miscellaneous

]]> https://aframe.io/blog/awoa-52/#disqus_thread A Week of A-Frame 51 https://aframe.io/blog/awoa-51/ https://aframe.io/blog/awoa-51/ Fri, 10 Mar 2017 00:00:00 GMT <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><div class="tweets tweets-feature"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">I wrote a library for multi-user <a href="https://twitter.com/aframe">@aframe</a> y&#39;all, introducing Networked-Aframe: <a href="https://t.co/LuOTGjto4D">https://t.co/LuOTGjto4D</a><br><br>Make Social WebVR in minutes! <a href="https://t.co/0GsXcVn4jZ">pic.twitter.com/0GsXcVn4jZ</a></p>&mdash; Hayden Lee (@HaydenLee37) <a href="https://twitter.com/HaydenLee37/status/839572278576717824">March 8, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="en" dir="ltr">🎶 Band Explorer VR by <a href="https://twitter.com/wearethetin">@wearethetin</a>. Groove to Spotify in <a href="https://twitter.com/hashtag/webvr?src=hash">#webvr</a>, desktop or mobile!<br><br>🔗 <a href="https://t.co/gRbtN180Z2">https://t.co/gRbtN180Z2</a><br>📰 <a href="https://t.co/Cb45dafm5o">https://t.co/Cb45dafm5o</a> <a href="https://t.co/68c0kkNbjP">pic.twitter.com/68c0kkNbjP</a></p>&mdash; A-Frame (@aframevr) <a href="https://twitter.com/aframevr/status/839236429561520128">March 7, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Today&#39;s <a href="https://twitter.com/aframevr">@aframevr</a> test on <a href="https://twitter.com/CodePen">@CodePen</a> by <a href="https://twitter.com/pollyvinyard">@pollyvinyard</a> <a href="https://twitter.com/_kultur">@_kultur</a>. Animating cubes based on noise values. <a href="https://twitter.com/hashtag/vr?src=hash">#vr</a> <a href="https://twitter.com/hashtag/dataviz?src=hash">#dataviz</a> <a href="https://t.co/dkFaE08KRz">https://t.co/dkFaE08KRz</a> <a href="https://t.co/IfvAgEWbWu">pic.twitter.com/IfvAgEWbWu</a></p>&mdash; Mike Brondbjerg (@mikebrondbjerg) <a href="https://twitter.com/mikebrondbjerg/status/838798098688192512">March 6, 2017</a></blockquote><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Try out Fader if you want to create your own 360 <a href="https://twitter.com/hashtag/VR?src=hash">#VR</a> stories: <a href="https://t.co/XeAgXalgwP">https://t.co/XeAgXalgwP</a> Let us know if you have any questions <a href="https://twitter.com/Vragments">@Vragments</a> <a href="https://t.co/R7t983227K">pic.twitter.com/R7t983227K</a></p>&mdash; Linda Rath-Wiggins (@Lynda420) <a href="https://twitter.com/Lynda420/status/839656260060479489">March 9, 2017</a></blockquote></div>

Projects

David Rodriguez’s Portfolio Site

Components

Mirror Component by Craig Li

UI Widgets added to Registry.

Controller Cursor Component added to Registry.

Stereo Component updated for 0.5.0 in Registry.

Events

Miscellaneous

]]> https://aframe.io/blog/awoa-51/#disqus_thread A Week of A-Frame 50 https://aframe.io/blog/awoa-50/ https://aframe.io/blog/awoa-50/ Fri, 03 Mar 2017 00:00:00 GMT <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><div class="tweets tweets-feature"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">🌒 A-Frame casting a long shadow on <a href="https://twitter.com/hashtag/webvr?src=hash">#webvr</a>! Thanks to <a href="https://twitter.com/donrmccurdy">@donrmccurdy</a> for shepherding real-time shadow support through. <a href="https://t.co/q8WxIgmgsj">https://t.co/q8WxIgmgsj</a> <a href="https://t.co/dHvgWY5ai6">pic.twitter.com/dHvgWY5ai6</a></p>&mdash; A-Frame (@aframevr) <a href="https://twitter.com/aframevr/status/836664908901056512">February 28, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="en" dir="ltr">And here we have the <a href="https://twitter.com/hashtag/aframe?src=hash">#aframe</a> / <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a> version of the camera scale, rotate &amp; zoom controls :) <a href="https://twitter.com/hashtag/webvr?src=hash">#webvr</a> <a href="https://t.co/10z7IcMrFA">pic.twitter.com/10z7IcMrFA</a></p>&mdash; Fernando Serrano (@fernandojsg) <a href="https://twitter.com/fernandojsg/status/836371728976719872">February 28, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Web VRでゲーム作ってみた！こんな簡単なゲームでも普通に楽しい。<br>Vive持ってる人向け: <a href="https://t.co/emS2mlMbF8">https://t.co/emS2mlMbF8</a><br>持ってない人向け: <a href="https://t.co/iV0kgdryBy">https://t.co/iV0kgdryBy</a> <a href="https://t.co/Qm9aUvtavX">pic.twitter.com/Qm9aUvtavX</a></p>&mdash; Jun Ito (@jujunjun110) <a href="https://twitter.com/jujunjun110/status/837167939983835136">March 2, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Fun <a href="https://twitter.com/aframevr">@aframevr</a> mvp of a <a href="https://twitter.com/hashtag/webvr?src=hash">#webvr</a> puppet theater with head movements controlled by Vive trigger, inspired by <a href="https://twitter.com/pushmatrix">@pushmatrix</a> model by <a href="https://twitter.com/SunlessFiend">@SunlessFiend</a> <a href="https://t.co/xt7eNnC6qw">pic.twitter.com/xt7eNnC6qw</a></p>&mdash; Kieran Farr (@kfarr) <a href="https://twitter.com/kfarr/status/835382236350296064">February 25, 2017</a></blockquote></div>

Projects

Components

Leap Hands by @donrmccurdy added to Registry.

Controller Cursor Component by @bryik_ws added to Registry.

controllercursor

Switch Component preview by @casonclagg

switch

Autotiler by @alfredofrlp

Articles

Events

Check out our quick A-Frame update at GDC WebGL/WebVR/glTF Meetup around the 55-minute mark. Slides for A-Frame update.

Miscellaneous

]]> https://aframe.io/blog/awoa-50/#disqus_thread A Week of A-Frame 49 https://aframe.io/blog/awoa-49/ https://aframe.io/blog/awoa-49/ Fri, 24 Feb 2017 00:00:00 GMT <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><p>The global <a href="http://www.virtuleap.com">Virtuleap WebVR Hackathon</a> has come to a conclusion. They announced the top ten projects and winners, voted on by a panel of 17 judges from all different VR companies. <strong>Nine out of the top ten projects, including both winners, were built using A-Frame!</strong> We’ll list the <a href="#virtuleap-hackathon-projects">Virtuleap A-Frame projects below with links</a>. Congratulations to <a href="https://twitter.com/@ThePascalRascal">@ThePascalRascal</a> and <a href="https://twitter.com/@Geczy">@Geczy</a> for winning &#8364;30K and spots to VR acclerator programs in Amsterdam.</p><div class="tweets tweets-feature"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">My tribute to the <a href="https://twitter.com/Virtuleap">@Virtuleap</a> <a href="https://twitter.com/hashtag/WebVR?src=hash">#WebVR</a> hackathon.<br>Contgrats <a href="https://twitter.com/Geczy">@Geczy</a> &amp; <a href="https://twitter.com/ThePascalRascal">@ThePascalRascal</a>! <a href="https://t.co/lGpHqGVaFX">pic.twitter.com/lGpHqGVaFX</a></p>&mdash; Will Murphy 🔥E🌳½1⃣ (@Datatitian) <a href="https://twitter.com/Datatitian/status/833182534301253632">February 19, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="en" dir="ltr">A-Frame logo in <a href="https://twitter.com/hashtag/AR?src=hash">#AR</a> on a phone! Coded itself in <a href="https://twitter.com/aframevr">@aframevr</a> with AR.js in 10min! <a href="https://twitter.com/hashtag/AR?src=hash">#AR</a> is becoming so easy now :) <a href="https://t.co/IkZAlx7rdI">https://t.co/IkZAlx7rdI</a> <a href="https://t.co/DDrwPHApBa">pic.twitter.com/DDrwPHApBa</a></p>&mdash; Jerome Etienne (@jerome_etienne) <a href="https://twitter.com/jerome_etienne/status/834768597264244737">February 23, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Check out my VR demo &quot;Research Station&quot; on your mobile 📱: <a href="https://t.co/OG8NWfgAJx">https://t.co/OG8NWfgAJx</a> Made with the A-Frame Inspector <a href="https://twitter.com/aframevr">@aframevr</a> <a href="https://twitter.com/hashtag/VR?src=hash">#VR</a> <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a> <a href="https://t.co/lV7Bp83wwQ">pic.twitter.com/lV7Bp83wwQ</a></p>&mdash; Octavector (@Octavector) <a href="https://twitter.com/Octavector/status/833337345038499842">February 19, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="en" dir="ltr">February&#39;s <a href="https://twitter.com/aframevr">@aframevr</a> Bay Area Meetup went swell.<br><br>📹 <a href="https://t.co/91M0hyC2uA">https://t.co/91M0hyC2uA</a><br>🔗 <a href="https://t.co/TYSe97y9kr">https://t.co/TYSe97y9kr</a> <a href="https://t.co/zVFkZXzbKm">pic.twitter.com/zVFkZXzbKm</a></p>&mdash; Kevin Ngo (@andgokevin) <a href="https://twitter.com/andgokevin/status/835098738334957569">February 24, 2017</a></blockquote></div>

The global Virtuleap WebVR Hackathon has come to a conclusion. They announced the top ten projects and winners, voted on by a panel of 17 judges from all different VR companies. Nine out of the top ten projects, including both winners, were built using A-Frame! We’ll list the Virtuleap A-Frame projects below with links. Congratulations to @ThePascalRascal and @Geczy for winning €30K and spots to VR acclerator programs in Amsterdam.

Projects

Virtuleap Hackathon Projects

Below are Virtuleap’s nine out of the top ten voted WebVR projects built with A-Frame.

1. Paint the World by @ThePascalRascal and @Geczy (code) - Collaborative-real time painting in VR! What your friends draw on a 2D canvas will appear in the 3D world in real-time.

painttheworld

2. Adit: Enter the Data Mine (code) by @Datatitian - Adit is a tool for exploratory data analysis that brings together the R language for statistical computing and virtual reality via shiny and A-Frame.

adit

3. CityViewR by @runhar- Open data for smart cities, in VR! Aimed at decision-makers and data-analysts, CityViewR combines the best of the Web and VR. It uses open data to collect low regional statistical data which users can combine with their own data. CityViewR presents these data in an immersive room-scale setting, letting users view these data in new ways.

screen shot 2017-02-24 at 5 05 24 am

4. A-Frame Video Viewer by Lee Nolan - A hands-free way to navigate video files.

screen shot 2017-02-24 at 5 06 43 am

5. gravr: Globally Recognized Avatar for WebVR (code) by @rolanddubois - Gravr is your VR profile API that follows you from VR experience to VR experience customized by you and based on your hardware and real life environment. Gravr focuses on user comfort and accessibility. The Gravr A-Frame component adds a round profile menu to your WebVR environment that allows you to switch between a set of preferences while you are immersed in virtual space.

gravr

7. PPT VR by @Azathor - PPT-VR is a web platform that enables everyone to create complex VR applications in a few simple steps. The VR content created one our platform can be instantly published to all platforms (Android, iOS, Windows, Mac, Web, etc) on a single click.

pptvr

8. File Manager VR (code) by Ivan Petrichenko - File manager in 3D VR environment. Browse local or remote file systems, organize files across directories by dragging with HTC Vive controllers, preview images. Includes visualization of OLAP cubes. This project tries to prototype a universal shell for system administrators or data analysts, some kind of business intelligence dashboard, and so on.

file manager

9. OverUnder Panorama Viewer (code) by @bryik_ws - A free web app that can be used to view over/under stereo panoramas stored locally (currently NVIDIA recommends paying $16 for Virtual Desktop), and a way a to share these panoramas on the web.

overunder

10. MathworldVR by @michaltakac - MathworldVR is an experimental project focused on how WebVR can be used for math education, where people can grasp hard, abstract concepts or just play around freely with in math world, where everything can be visualized.

mathworldvr-ui

Components

Articles

Events

A-Frame Bay Area Meetup

Miscellaneous

]]> https://aframe.io/blog/awoa-49/#disqus_thread A Week of A-Frame 48 https://aframe.io/blog/awoa-48/ https://aframe.io/blog/awoa-48/ Fri, 17 Feb 2017 00:00:00 GMT <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><div class="tweets tweets-feature"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">A-Frame Inspector v0.5.0 released! 🙌 take a look at the new features: <a href="https://t.co/l9M48zHxln">https://t.co/l9M48zHxln</a> <a href="https://twitter.com/hashtag/aframevr?src=hash">#aframevr</a> <a href="https://twitter.com/hashtag/WebVR?src=hash">#WebVR</a> <a href="https://t.co/qJGkQD269c">pic.twitter.com/qJGkQD269c</a></p>&mdash; Fernando Serrano (@fernandojsg) <a href="https://twitter.com/fernandojsg/status/831655213983477761">February 15, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="en" dir="ltr">We decided to convert our <a href="https://twitter.com/hashtag/webvr?src=hash">#webvr</a> demo to <a href="https://twitter.com/aframevr">@aframevr</a> and it&#39;s quite cool! <a href="https://twitter.com/hashtag/vr?src=hash">#vr</a> <a href="https://twitter.com/hashtag/aframevr?src=hash">#aframevr</a> <a href="https://t.co/MR1XRG4CQv">https://t.co/MR1XRG4CQv</a> Feedback is welcome! <a href="https://t.co/DHKxOCNITK">pic.twitter.com/DHKxOCNITK</a></p>&mdash; Sebastián Sanabria (@Absulit) <a href="https://twitter.com/Absulit/status/832332925186228224">February 16, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/recifs">@recifs</a> a trippy Voronoi shader for you<br>🌈 <a href="https://twitter.com/machenmusik">@machenmusik</a> <a href="https://twitter.com/hashtag/webvr?src=hash">#webvr</a> <a href="https://twitter.com/hashtag/aframevr?src=hash">#aframevr</a> <a href="https://twitter.com/hashtag/shaderfrog?src=hash">#shaderfrog</a><a href="https://t.co/th1qmibDKu">https://t.co/th1qmibDKu</a> <a href="https://t.co/eWa9RbZ3kj">pic.twitter.com/eWa9RbZ3kj</a></p>&mdash; Micah Stubbs (@micahstubbs) <a href="https://twitter.com/micahstubbs/status/830536970090618883">February 11, 2017</a></blockquote><blockquote class="twitter-tweet"><p lang="fr" dir="ltr">Hands-on with WebVR 🙌<a href="https://t.co/1WRA5NEeyk">https://t.co/1WRA5NEeyk</a><br>// <a href="https://twitter.com/LeapMotion">@leapmotion</a> + <a href="https://twitter.com/aframevr">@aframevr</a> + <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a> <a href="https://t.co/FzWjIfuzkf">pic.twitter.com/FzWjIfuzkf</a></p>&mdash; Don McCurdy (@donrmccurdy) <a href="https://twitter.com/donrmccurdy/status/832057552636612612">February 16, 2017</a></blockquote></div><p>The theme this week is tools. Starting with <a href="https://blog.mozvr.com/aframe-inspector-v0-5-0/">an update to the A-Frame Inspector</a> featuring asset modals and sample assets:</p><p><img src="https://cloud.githubusercontent.com/assets/674727/23284666/9d467a1a-f9e1-11e6-88e8-54201c366783.png" alt=""></p><p>And a tool to configure curved images by <a href="https://twitter.com/akaStefie">@akaStefie</a>:</p><p><img src="https://cloud.githubusercontent.com/assets/674727/23284664/9d3a2544-f9e1-11e6-9cac-ff3976232dc4.png" alt=""></p><p>And a tool to create A-Frame scenes by <a href="https://twitter.com/webvrstudio">@webvrstudio</a>:</p><p><img src="https://cloud.githubusercontent.com/assets/674727/23284665/9d3e30a8-f9e1-11e6-8707-b225292d7bf3.png" alt=""></p><p><img src="https://cloud.githubusercontent.com/assets/674727/23284668/9d48434a-f9e1-11e6-940b-452e45770f8f.png" alt=""></p><p><img src="https://cloud.githubusercontent.com/assets/674727/23284667/9d483a30-f9e1-11e6-8e0a-7e8117dd17c0.png" alt=""></p><p><img src="https://cloud.githubusercontent.com/assets/674727/23284663/9d2d2fce-f9e1-11e6-862d-f955febb82e8.png" alt=""></p>

The theme this week is tools. Starting with an update to the A-Frame Inspector featuring asset modals and sample assets:

And a tool to configure curved images by @akaStefie:

And a tool to create A-Frame scenes by @webvrstudio:

Projects

Components

Events

Miscellaneous

]]> https://aframe.io/blog/awoa-48/#disqus_thread A Week of A-Frame 47 https://aframe.io/blog/awoa-47/ https://aframe.io/blog/awoa-47/ Fri, 10 Feb 2017 13:00:00 GMT <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <div class="tweets tweets-feature"> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">A-Frame ✋v0.5.0! New core features (text, glTF), bug fixes (incl. WebVR polyfill), preview of motion capture tools. <a href="https://t.co/Mb3pobemCi">https://t.co/Mb3pobemCi</a> <a href="https://t.co/yWO47TJMqB">pic.twitter.com/yWO47TJMqB</a></p>&mdash; A-Frame (@aframevr) <a href="https://twitter.com/aframevr/status/829950620543000576">February 10, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">A-Frame friends! I made a simple lerp component for smooth animations: <a href="https://t.co/OZqWx278Ph">https://t.co/OZqWx278Ph</a> <a href="https://twitter.com/aframevr">@aframevr</a> <a href="https://twitter.com/hashtag/webvr?src=hash">#webvr</a> <a href="https://t.co/1LuO972s5l">pic.twitter.com/1LuO972s5l</a></p>&mdash; Hayden Lee (@HaydenLee37) <a href="https://twitter.com/HaydenLee37/status/829110311445680128">February 7, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Work in progress: Physical interfaces for VR based upon Verlet Integration, currently made a radio selector and a button. <a href="https://twitter.com/aframevr">@aframevr</a> <a href="https://t.co/lpxonf0j2W">pic.twitter.com/lpxonf0j2W</a></p>&mdash; Ada Rose 🏳️‍🌈✊🏾🌍 (@Lady_Ada_King) <a href="https://twitter.com/Lady_Ada_King/status/830054305780596740">February 10, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Finally I&#39;ve released A-Frame rain effect component! <a href="https://t.co/I6dWNJiGrV">https://t.co/I6dWNJiGrV</a> <a href="https://twitter.com/hashtag/aframevr?src=hash">#aframevr</a> <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a> <a href="https://t.co/Cj3hvt3G1G">pic.twitter.com/Cj3hvt3G1G</a></p>&mdash; takahiro(John Smith) (@superhoge) &lt;a href=”<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Finally I&#39;ve released A-Frame rain effect component! <a href="https://t.co/I6dWNJiGrV">https://t.co/I6dWNJiGrV</a> <a href="https://twitter.com/hashtag/aframevr?src=hash">#aframevr</a> <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a> <a href="https://t.co/Cj3hvt3G1G">pic.twitter.com/Cj3hvt3G1G</a></p>&mdash; takahiro(John Smith) (@superhoge) <a href="https://twitter.com/superhoge/status/828498424697745408">February 6, 2017</a></blockquote> </div>

Projects

Paper Prototype by @corindonders - Draw using a black, blue and red marker to have it transformed to 3 different planes.

Paper Prototype

Sneak Peek of a 3D Multiplayer Game from @opherv using Incheon

3dmultiplayer_cont

Cities in Alameda County - A-Frame, JSON data, Google Street View with customized 360° Image Gallery template which allows a user to select a city within Alameda County and then displaying points of interests within the city.

React + Fluxible Test by @ltfschoen to test A-Frame React with isomorophic rendering.

Prototype with Ionic by @rvdleun

Components

dat.guiVR Component by @mflux

dat.guiVR

Rainfall Effect Component by @superhoge

Lerp Component by @haydenlee37

Articles

Events

]]> https://aframe.io/blog/awoa-47/#disqus_thread A-Frame v0.5.0 - Features & Tools https://aframe.io/blog/aframe-v0.5.0/ https://aframe.io/blog/aframe-v0.5.0/ Thu, 09 Feb 2017 10:00:00 GMT <p>Give A-Frame a high five for the release of <strong>v0.5.0</strong>! This release pulls in highly-awaited components from the ecosystem such as text and glTF, addresses several large WebVR Polyfill bugs for smartphones, comes with a slew of enhancements and bug fixes, and enables upcoming motion capture tools.</p> <h2 id="what’s-new"><a href="#what’s-new" class="headerlink" title="What’s New?"></a>What’s New?</h2><p>A <strong>text</strong> component, using SDF and MSDF, has landed into A-Frame core! Based on <a href="https://twitter.com/mattdesl">mattdesl’s</a> <a href="https://github.com/Jam3/three-bmfont-text">three-bmfont-text</a>, the text component has gone through a long lineage starting with <a href="https://twitter.com/bryik_ws">@bryik</a>‘s initial <code>aframe-bmfont-text-component</code> to <a href="https://twitter.com/fernandojsg">fernandojsg</a>‘s improvements to <a href="https://twitter.com/machenmusik">mchen</a>‘s fork to mchen shepherding the component into A-Frame. The text component comes with several stock fonts and supports custom fonts, alignment, anchors, baselines, spacing, and wrapping. <a href="https://aframe.io/docs/0.5.0/components/text.html">Read more about the text component</a>.</p> <p><img src="https://cloud.githubusercontent.com/assets/674727/22808347/4daf3bc4-eee0-11e6-9af7-048faf188b0f.png" alt="Text"></p> <p>The <strong>glTF model</strong> component has also landed into A-Frame core! glTF (GL Transmission Format) is an open project by <a href="https://www.khronos.org/">The Khronos Group</a> providing a standard efficient 3D file format that is tailored for transmitting models over the Web. The <code>gltf-model</code> component loads a 3D glTF model with a line of HTML. Note that glTF is a fairly new specification and adoption is still growing, but a large portion of the WebVR community are optimistic that glTF will become the <code>.jpg</code> of 3D assets. <a href="https://aframe.io/docs/0.5.0/components/gltf-model.html">Read more about the <code>gltf-model</code> component</a>.</p> <p>Thanks to everyone who worked on the three.js glTF loader (<a href="https://github.com/richtr">richtr</a>, <a href="https://twitter.com/mrdoob">@mrdoob</a>, <a href="https://twitter.com/auradeluxe">@auradeluxe</a>, <a href="https://twitter.com/superhoge">@superhoge</a>) and the A-Frame component (<a href="https://twitter.com/donmccurdy">@donmccurdy</a>, <a href="https://twitter.com/xirvr">@xirvr</a>)!</p> <p>Long-awaited bug fixes relating for smartphones include:</p> <ul> <li>Fixing mobile iOS resolution and bluriness. Thanks to <a href="https://github.com/nullcode">nullcode</a> for the fix!</li> <li>Fixing Cardboard support for many mobile devices, especially those with large screens. Thanks to <a href="https://twitter.com/thoragio">@thoragio</a> for forking WebVR polyfill to update its device database.</li> <li>Fixing and forking WebVR polyfill for better WebView support. Thanks to <a href="https://github.com/grigorkh">grigorkh</a> for the fix and <a href="https://github.com/andymartinwork">andymartinwork</a> for QAing.</li> </ul> <p>The <a href="https://github.com/aframevr/aframe-inspector">Inspector</a> also contains a slew of updates including sample assets and texture modals so give that a look as well!</p> <p>Check out the <a href="https://github.com/aframevr/aframe/releases/tag/v0.5.0">release notes</a> for the complete changelog, includes a list of all new features, optimizations, and bug fixes.</p> Give A-Frame a high five for the release of v0.5.0! This release pulls in highly-awaited components from the ecosystem such as text and glTF, addresses several large WebVR Polyfill bugs for smartphones, comes with a slew of enhancements and bug fixes, and enables upcoming motion capture tools.

What’s New?

A text component, using SDF and MSDF, has landed into A-Frame core! Based on mattdesl’s three-bmfont-text, the text component has gone through a long lineage starting with @bryik‘s initial aframe-bmfont-text-component to fernandojsg‘s improvements to mchen‘s fork to mchen shepherding the component into A-Frame. The text component comes with several stock fonts and supports custom fonts, alignment, anchors, baselines, spacing, and wrapping. Read more about the text component.

Text

The glTF model component has also landed into A-Frame core! glTF (GL Transmission Format) is an open project by The Khronos Group providing a standard efficient 3D file format that is tailored for transmitting models over the Web. The gltf-model component loads a 3D glTF model with a line of HTML. Note that glTF is a fairly new specification and adoption is still growing, but a large portion of the WebVR community are optimistic that glTF will become the .jpg of 3D assets. Read more about the gltf-model component.

Thanks to everyone who worked on the three.js glTF loader (richtr, @mrdoob, @auradeluxe, @superhoge) and the A-Frame component (@donmccurdy, @xirvr)!

Long-awaited bug fixes relating for smartphones include:

  • Fixing mobile iOS resolution and bluriness. Thanks to nullcode for the fix!
  • Fixing Cardboard support for many mobile devices, especially those with large screens. Thanks to @thoragio for forking WebVR polyfill to update its device database.
  • Fixing and forking WebVR polyfill for better WebView support. Thanks to grigorkh for the fix and andymartinwork for QAing.

The Inspector also contains a slew of updates including sample assets and texture modals so give that a look as well!

Check out the release notes for the complete changelog, includes a list of all new features, optimizations, and bug fixes.

What Have People Built?

A-Frame has enabled rapid innovation and open experimentation around room scale WebVR interactions and patterns! Check out some of these novel A-Frame scenes, or visit the blog to check out editions of A Week of A-Frame.

A-Frame now boasts nearly 120 contributors on the primary A-Frame repository! While we haven’t started seriously focusing on populating the A-Frame Registry yet, the A-Frame Registry now contains 25 curated components.

What’s Next?

Release cycles may seem a bit faster as our new friend, A-Frobot is generating new builds and supply fresh rawgit.com CDN URLs on each commit to A-Frame. Documentation will be automatically deployed. And we can test the bleeding edge version of A-Frame at https://a-frobot.github.io/aframe/.

A-Frame

The largest and most awaited feature coming up is link traversal, which is dependent on stability in the browsers. Currently, link traversal works in Firefox Nightly.

Shadows are also about to land and will go out in a subsequent 0.5.1 release.

Shadows

Keep up with the 0.6.0 milestone for an initial idea of what may be next. We’re holding an open Skype meeting amongst A-Frame developers to do talk about roadmap. Join #planning on the A-Frame Slack if you’re interested!

Record-and-Replay Motion Capture Tools

We’re currently working on record-and-replay tools using motion capture of the headset and controllers, led by @dmarcos. Motion capture tools will enable a large realm of possibilities for VR development.

You’ll be able to open a scene, start a recording, enter VR, move around with the headset, interact with objects with the controllers, and save the recording. Then later, you can replay the recording without needing a VR headset nor having to refresh and enter VR on each file change. Rapidly develop VR on to go, or send a recording for someone to take a look at!

You’ll also be able to do motion capture. Not only could you record yourself, but you could record paths and events on entities. Imagine creating a non-playable character (NPC) whose movements are pre-recorded through dancing or drawing the paths of airborne enemies with your hands. Perhaps you could paint a work of art with A-Painter and have others spectate the painting being drawn live.

A fun demo around this tool will be released shortly. As we can say is, A-Frame’s gonna shake it off!

Shake it Off

]]> https://aframe.io/blog/aframe-v0.5.0/#disqus_thread A Week of A-Frame 46 https://aframe.io/blog/awoa-46/ https://aframe.io/blog/awoa-46/ Fri, 03 Feb 2017 13:00:00 GMT <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <p>glTF support has landed! This is an early, but more performant alternative to COLLADA and OBJ formats, and we’ll likely see it becoming heavily adopted in WebVR.</p> <p>We’ve started <a href="https://github.com/aframevr/aframe/milestone/4">the countdown to the release of <strong>0.5.0</strong></a> looking to solve some long-standing WebVR polyfill issues once and for all.</p> <div class="tweets tweets-feature"> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Great, lovely, terrific, fantastic news. glTF model support has landed in A-Frame <a href="https://twitter.com/hashtag/webvr?src=hash">#webvr</a><br>📄 <a href="https://t.co/S4bcihzKdF">https://t.co/S4bcihzKdF</a><br>🔗 <a href="https://t.co/i1YK4ev6tE">https://t.co/i1YK4ev6tE</a> <a href="https://t.co/PKb9mLbRAJ">pic.twitter.com/PKb9mLbRAJ</a></p>&mdash; A-Frame (@aframevr) <a href="https://twitter.com/aframevr/status/827131320891346944">February 2, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">New release of A-Frame City Builder <a href="https://twitter.com/hashtag/webvr?src=hash">#webvr</a> game built on <a href="https://twitter.com/aframevr">@aframevr</a> <a href="https://t.co/dN4PRyUGjV">https://t.co/dN4PRyUGjV</a> works on both <a href="https://twitter.com/hashtag/oculus?src=hash">#oculus</a> and <a href="https://twitter.com/hashtag/vive?src=hash">#vive</a> touch controls <a href="https://t.co/qbNhagXoWg">pic.twitter.com/qbNhagXoWg</a></p>&mdash; Kieran Farr (@kfarr) <a href="https://twitter.com/kfarr/status/825643364519251968">January 29, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/aframevr?src=hash">#aframevr</a> is amazing: built prototype <a href="https://twitter.com/hashtag/VR?src=hash">#VR</a> app CityViewR within a couple of days. <a href="https://twitter.com/hashtag/opendata?src=hash">#opendata</a> <a href="https://twitter.com/hashtag/smartcities?src=hash">#smartcities</a> <a href="https://t.co/aTFsgf0SxH">https://t.co/aTFsgf0SxH</a> <a href="https://t.co/3TkLhM9YWA">pic.twitter.com/3TkLhM9YWA</a></p>&mdash; Harold Kroeze (@runhar) <a href="https://twitter.com/runhar/status/825679358337626112">January 29, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">With no programming experience in &lt; 2 hours, my brother created a <a href="https://twitter.com/hashtag/WebVR?src=hash">#WebVR</a> scene of the escape from Vietnam. <a href="https://t.co/5aBJqSjE0E">https://t.co/5aBJqSjE0E</a> <a href="https://t.co/vYFO9kKnQH">pic.twitter.com/vYFO9kKnQH</a></p>&mdash; Kevin Ngo (@andgokevin) <a href="https://twitter.com/andgokevin/status/826192591213391872">January 30, 2017</a></blockquote> </div>

glTF support has landed! This is an early, but more performant alternative to COLLADA and OBJ formats, and we’ll likely see it becoming heavily adopted in WebVR.

We’ve started the countdown to the release of 0.5.0 looking to solve some long-standing WebVR polyfill issues once and for all.

Projects

Leupsi VR - Large-scale virtual tours on mobile using a smartphone as a controller with other various WebVR experiments.

Conway’s Game of Life

Meditate VR

Virtuleap Hackathon Submissions

Gravr - A Globally Recognized Avatar for VR on the web. By @rolanddubois.

Dashboard VR - Dashboard VR is a WebVR experience that displays real time local information to the user. By @valcourgames.

Paint the World - Collaborative real-time painting in VR.

Dreamlands - Dreamlands is an open world where people can come together, interact, and create.

Budget Your Future by @utopiah

Avenue: Immersive Destination Booking - With Avenue, travelers can discover their destinations beforehand, meaning less time guessing, and more time exploring.

Components

Select Bar Component by @kfarr

Gravr Component by @rolanddubois

Sticky Cursor Component by @casonclagg (view GIF)

Point Component by @naugtur

Ambient Occlusion Component by mynameislau.

Articles

Wow that was some night in VR! by @lady_ada_king. Recap of A-Frame + WebVR LDNWebPerf talk.

Poster VR: Re-imagining the Movie Poster by @shaundunne.

Emitting Custom Events Between Components (StackOverflow)

Events

Miscellaneous

]]> https://aframe.io/blog/awoa-46/#disqus_thread A Week of A-Frame 45 https://aframe.io/blog/awoa-45/ https://aframe.io/blog/awoa-45/ Fri, 27 Jan 2017 13:00:00 GMT <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <p><a href="https://github.com/aframevr/aframe/pull/2200">The text component has landed!</a>. Thanks to <a href="https://twitter.com/mattdesl">@mattdesl</a> for the implementation and initial component, then <a href="https://twitter.com/bryik_ws">@bryik_ws</a> for finishing the component, <a href="https://twitter.com/fernandojsg">@fernandojsg</a> for improving the component, and <a href="https://twitter.com/machenmusik">@machenmusik</a> for shepherding it into core!</p> <p><img src="https://cloud.githubusercontent.com/assets/674727/22370965/2fd4ab62-e449-11e6-9bcd-46289ace8db3.png" alt="Text"></p> <p><a href="https://aframe.io/docs/master/components/text.html">Read about the text component</a> or <a href="https://a-frobot.github.io/aframe/examples/test/text/">try it out (best played with the Inspector)!</a>.</p> <p>And we’re about to release a tool that will make room scale VR development much more efficient and convenient!</p> <div class="tweets tweets-feature"> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">📰 Building a Bow &amp; Arrow for tracked controllers in <a href="https://twitter.com/hashtag/webvr?src=hash">#webvr</a> <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a>!<br>✍️ <a href="https://t.co/2LgZ7LYVrf">https://t.co/2LgZ7LYVrf</a><br>🔗 <a href="https://t.co/PRYdpFvKly">https://t.co/PRYdpFvKly</a></p>&mdash; A-Frame (@aframevr) <a href="https://twitter.com/aframevr/status/824458764354940928">January 26, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">VRList updated with new WebVR projects + 360 panorama previews built with <a href="https://twitter.com/aframevr">@aframevr</a> 🙌<a href="https://t.co/y5S4uGOQSM">https://t.co/y5S4uGOQSM</a><a href="https://t.co/DL99M3iLQi">https://t.co/DL99M3iLQi</a> <a href="https://t.co/7yDvWthlj5">pic.twitter.com/7yDvWthlj5</a></p>&mdash; Jonathan Z. White (@JonathanZWhite) <a href="https://twitter.com/JonathanZWhite/status/823558690661957634">January 23, 2017</a></blockquote> <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Text component has landed in A-Frame! Long lineage from <a href="https://twitter.com/mattdesl">@mattdesl</a> to <a href="https://twitter.com/bryik">@bryik</a> to <a href="https://twitter.com/fernandojsg">@fernandojsg</a> to finally <a href="https://twitter.com/machenmusik">@machenmusik</a>. <a href="https://t.co/JNtU722e6B">https://t.co/JNtU722e6B</a> <a href="https://t.co/PNFFalHroi">pic.twitter.com/PNFFalHroi</a></p>&mdash; A-Frame (@aframevr) <a href="https://twitter.com/aframevr/status/824986150074855424">January 27, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Having fun with <a href="https://twitter.com/hashtag/VirtualReality?src=hash">#VirtualReality</a> , <a href="https://twitter.com/aframevr">@aframevr</a>, <a href="https://twitter.com/blender3d">@blender3d</a> and <a href="https://twitter.com/hashtag/lowpoly?src=hash">#lowpoly</a>. Best using <a href="https://twitter.com/hashtag/GoogleCardboard?src=hash">#GoogleCardboard</a> <a href="https://t.co/RnwLmcwaJq">https://t.co/RnwLmcwaJq</a></p>&mdash; Onepopcorn (@onepopcorn) <a href="https://twitter.com/onepopcorn/status/824689998322663424">January 26, 2017</a></blockquote> </div>

The text component has landed!. Thanks to @mattdesl for the implementation and initial component, then @bryik_ws for finishing the component, @fernandojsg for improving the component, and @machenmusik for shepherding it into core!

Text

Read about the text component or try it out (best played with the Inspector)!.

And we’re about to release a tool that will make room scale VR development much more efficient and convenient!

Projects

Tarski’s Truth Machine for HTC Vive by Stony Brook TLT Media Lab.

Tarski's Truth Machine

AARRRR! THE WAVES!! - Pirate ships in a cove. Created at Global Game Jam 2017.

AARRRR!

Video Player by Lee Nolan. Supports link traversal on Firefox Nightly.

Video Player

Cambridge Census

Cambridge Census

Tattoo Sim - NSFW (Nudity) - Place tattoos on a human model.

Components

Gradient Sky by Zac Canter.

Gradient Sky

Mouse Cursor Component added to the Registry!

Mouse Cursor GIF

Articles

How to Share 360 Panorama Photos with WebVR and A-Frame by @kezzbracey.

Events

A-Frame SF Meetup in February announced.

Mozilla Bangladesh

Seminar on WebVR @ IIUC

Painting Jam

Painting Jam WriteUp

Painting Jam

Painting Jam 2

Miscellaneous

]]> https://aframe.io/blog/awoa-45/#disqus_thread A Week of A-Frame 44 https://aframe.io/blog/awoa-44/ https://aframe.io/blog/awoa-44/ Fri, 20 Jan 2017 13:00:00 GMT <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <p><a href="https://blog.mozvr.com/a-blast/">A-Blast has been released</a>! Save the world from the cutest creatures in the universe. A fun shooter mini-game where you fire laser guns at waves of adorable enemies. No components were harmed, but many were created in the making of this project.</p> <p><a href="https://github.com/aframevr/aframe/pull/2200">A core text implementation is close to landing</a> thanks to <a href="https://twitter.com/machenmusik">@machenmusik</a>!</p> <div class="tweets tweets-feature"> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Introducing A-Blast 👾. A wave shooting game made with <a href="https://twitter.com/aframevr">@aframevr</a> by <a href="https://twitter.com/mozillavr">@mozillavr</a> <a href="https://t.co/aI2Wf1GvDH">https://t.co/aI2Wf1GvDH</a> <a href="https://twitter.com/hashtag/aframevr?src=hash">#aframevr</a> <a href="https://twitter.com/hashtag/webvr?src=hash">#webvr</a> <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a> <a href="https://t.co/SQl6akRKl4">pic.twitter.com/SQl6akRKl4</a></p>&mdash; Fernando Serrano (@fernandojsg) <a href="https://twitter.com/fernandojsg/status/821471460871041024">January 17, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">🕶️ I made <a href="https://twitter.com/hashtag/WebVR?src=hash">#WebVR</a> UI widgets for <a href="https://twitter.com/aframevr">@aframevr</a> 🎛️🎚️ Hook&#39;em up to something cool! <a href="https://t.co/Hr09EDWCwJ">https://t.co/Hr09EDWCwJ</a> <a href="https://t.co/AFcfTa98LK">pic.twitter.com/AFcfTa98LK</a></p>&mdash; Casey Yee (@whoyee) <a href="https://twitter.com/whoyee/status/821271916451229697">January 17, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">VRList now has a VR mode built with <a href="https://twitter.com/aframevr">@aframevr</a>. Browse and preview WebVR experiences in VR 🔥<a href="https://t.co/lGD00S1sTW">https://t.co/lGD00S1sTW</a><a href="https://t.co/nEYFN7LOy7">https://t.co/nEYFN7LOy7</a> <a href="https://t.co/k5nb0VIwen">pic.twitter.com/k5nb0VIwen</a></p>&mdash; Jonathan Z. White (@JonathanZWhite) <a href="https://twitter.com/JonathanZWhite/status/821373074796937216">January 17, 2017</a></blockquote> <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">A few of my 7/8th grader&#39;s <a href="https://twitter.com/hashtag/VR?src=hash">#VR</a> kinectic sculptures in .<a href="https://twitter.com/aframevr">@aframevr</a>. <a href="https://t.co/T1yueeyY6J">https://t.co/T1yueeyY6J</a> <a href="https://t.co/xMn1oPHL0O">https://t.co/xMn1oPHL0O</a> <a href="https://t.co/4dvpQeWSHE">https://t.co/4dvpQeWSHE</a></p>&mdash; JD Pirtle (@jd_pirtle) <a href="https://twitter.com/jd_pirtle/status/821523376481177600">January 18, 2017</a></blockquote> </div>

A-Blast has been released! Save the world from the cutest creatures in the universe. A fun shooter mini-game where you fire laser guns at waves of adorable enemies. No components were harmed, but many were created in the making of this project.

A core text implementation is close to landing thanks to @machenmusik!

Projects

PanoModeling: Building 3D Environments from 360 Photos (demo) - 32Studios shows off creating fully 3D and VR indoor virtual tours by modeling off of a flat 360° panorama image with Walkabout Worlds, rendered in A-Frame.

PanoModeling

File Manager VR - File manager with A-Frame UI and Jetty backend. Works with FF Nightly and HTC Vive.

File Manager VR

Kinetic Sculptures by 7th and 8th Graders from @jd_pirtle

https://barbehe.neocities.org/

barbehe

https://collita.neocities.org/ThisIsReallyConfusing.html

collita

https://neisja.neocities.org/HW2.html

neisja

https://chriset.neocities.org/

chrisset

Tarski’s Truth Machine by Stony Brook TLT Media Lab

Components

Minecraft Avatar Components (code) by @jerome_etienne

Minecraft Avatar Components

Ammo Physics Component by @jerome_etienne

Ammo Physics Component

Events

]]> https://aframe.io/blog/awoa-44/#disqus_thread A Week of A-Frame 43 https://aframe.io/blog/awoa-43/ https://aframe.io/blog/awoa-43/ Fri, 13 Jan 2017 13:00:00 GMT <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <p>We wrote three new guides for the A-Frame documentation. We automated GitHub repository builds with our new friend, <a href="https://github.com/a-frobot">A-Frobot</a>. Meetups and events spawning around the world. The Inspector was updated, and our super secret cool demo will be released soon!</p> <p>We ran our first official <a href="https://meetup.com/A-Frame/">A-Frame Bay Area Meetup</a>. We had a Vive in the middle of the Mozilla San Francisco community space. People came up to show off Vive demos such as A-Painter, <a href="https://twitter.com/iamnayr">@iamnayr</a>‘s Kubernetes VR, VR d3.js snippets on <a href="https://twitter.com/enjalot">@enjalot’s</a> <a href="https://blockbuilder.org">blockbuilder.org</a>, <a href="https://twitter.com/datatitian">@datatitian’s</a> <a href="https://github.com/wmurphyrd/aframe-super-hands-component">super-hands component</a>, and <a href="https://twitter.com/superhoge">@superhoge’s</a> MMD model + deferred rendering + instancing demos.</p> <p>One of the coolest demos yet was <a href="https://github.com/kfarr/aframe-city-builder">@kfarr’s City Builder</a>. He placed neighborhoods and streets that snapped themselves to the grid, and he added aliens and narrated an extraterrestial attack in seconds. Complete with a VR UI from the Vive touchpad to choose between models to place.</p> <p>Want to run recurring meetup in your local area? Let us know so we can keep the A-Flame going!</p> <div class="tweets tweets-feature"> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">aframe-city-builder <br>(found a Vive demo link!) <br>👷 <a href="https://twitter.com/kfarr">@kfarr</a> <br>🛣️ <a href="https://twitter.com/hashtag/aframevr?src=hash">#aframevr</a> 🏗️ <a href="https://twitter.com/hashtag/roomScale?src=hash">#roomScale</a> 🏘️ <a href="https://twitter.com/hashtag/webvr?src=hash">#webvr</a> 🏡<br>🔗 <a href="https://t.co/16tFtykHU9">https://t.co/16tFtykHU9</a> <a href="https://t.co/4fvVqOt2Eq">pic.twitter.com/4fvVqOt2Eq</a></p>&mdash; Micah Stubbs (@micahstubbs) <a href="https://twitter.com/micahstubbs/status/819535160274059264">January 12, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Ready Player One? Tons of playable <a href="https://twitter.com/aframevr">@aframevr</a> classic arcade with Vive + Touch in one room.<br>👤 Made by <a href="https://twitter.com/machenmusik">@machenmusik</a> <br>🔗 <a href="https://t.co/VKwDuCY682">https://t.co/VKwDuCY682</a> <a href="https://t.co/Hx6yVXT8Xt">pic.twitter.com/Hx6yVXT8Xt</a></p>&mdash; Kevin Ngo (@andgokevin) <a href="https://twitter.com/andgokevin/status/819899447169560577">January 13, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Winter project finished! Viewing and sharing stereo panoramas with <a href="https://twitter.com/aframevr">@aframevr</a> and <a href="https://twitter.com/hashtag/threejs?src=hash">#threejs</a> <a href="https://t.co/TRKxQFPYjB">https://t.co/TRKxQFPYjB</a> <a href="https://t.co/FAVZ55K0Ls">pic.twitter.com/FAVZ55K0Ls</a></p>&mdash; Ben Pyrik (@bryik_ws) <a href="https://twitter.com/bryik_ws/status/817832135784546304">January 7, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Taking <a href="https://twitter.com/aframevr">@aframevr</a> animation component for a spin 🍭<br>👤 Philip Bell <a href="https://t.co/qZ0vtx1FMz">https://t.co/qZ0vtx1FMz</a><br>🐙 <a href="https://t.co/u9tTk6Gqh1">https://t.co/u9tTk6Gqh1</a><br>🔗 <a href="https://t.co/U4PmcerjMC">https://t.co/U4PmcerjMC</a> <a href="https://t.co/K3OcqGqaib">pic.twitter.com/K3OcqGqaib</a></p>&mdash; Kevin Ngo (@andgokevin) <a href="https://twitter.com/andgokevin/status/819895116542263296">January 13, 2017</a></blockquote> </div>

We wrote three new guides for the A-Frame documentation. We automated GitHub repository builds with our new friend, A-Frobot. Meetups and events spawning around the world. The Inspector was updated, and our super secret cool demo will be released soon!

We ran our first official A-Frame Bay Area Meetup. We had a Vive in the middle of the Mozilla San Francisco community space. People came up to show off Vive demos such as A-Painter, @iamnayr‘s Kubernetes VR, VR d3.js snippets on @enjalot’s blockbuilder.org, @datatitian’s super-hands component, and @superhoge’s MMD model + deferred rendering + instancing demos.

One of the coolest demos yet was @kfarr’s City Builder. He placed neighborhoods and streets that snapped themselves to the grid, and he added aliens and narrated an extraterrestial attack in seconds. Complete with a VR UI from the Vive touchpad to choose between models to place.

Want to run recurring meetup in your local area? Let us know so we can keep the A-Flame going!

Projects

Theremin with Tone.js by @shaundunne

Bedroom Model by @32studios

Bedroom Model

Components

Pipe Component by jellix79

Events

Mozilla India

A-Frame Bay Area Meetup

London Web Perf

Articles

Miscellaneous

]]> https://aframe.io/blog/awoa-43/#disqus_thread A Week of A-Frame 42 https://aframe.io/blog/awoa-42/ https://aframe.io/blog/awoa-42/ Fri, 06 Jan 2017 13:00:00 GMT <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <p><strong>A happy new year!</strong> Just one year ago, WebVR was a small group of crazy people, and A-Frame had just been born. And just one year later, WebVR has support from all the major tech players, and A-Frame has sparked WebVR content creation for the web community to build stellar projects. In 2017, A-Frame will get the good word out to the greater web community as WebVR hits stable releases of browsers and grow its component and asset ecosystem!</p> <p>For the first week of this new year: a smooth NYC snowglobe, VR graphing calculator, room scale data visualization, bow and arrow with tracked controllers, Daydream controllers, Project Tango sculpting. There’s been work on fixing various A-Frame bugs, investigating resolution issues on mobile with the WebVR polyfill, automating GitHub builds and releases, adding components to the Registry, and improving documentation.</p> <div class="tweets tweets-feature"> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Beautiful snow globe WebVR experience. Take a ride around NYC in a zeppelin. Made with <a href="https://twitter.com/aframevr">@aframevr</a> by <a href="https://twitter.com/ronikdesign">@ronikdesign</a><a href="https://t.co/E7llCl8PDM">https://t.co/E7llCl8PDM</a> <a href="https://t.co/Iz8WH8XV44">pic.twitter.com/Iz8WH8XV44</a></p>&mdash; Jonathan Z. White (@JonathanZWhite) <a href="https://twitter.com/JonathanZWhite/status/816755095371137024">January 4, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/WebVR?src=hash">#WebVR</a> Grammar of Graphics <br>built on <a href="https://twitter.com/hashtag/aframevr?src=hash">#aframevr</a> <a href="https://twitter.com/hashtag/shiny?src=hash">#shiny</a> <a href="https://twitter.com/hashtag/gglplot2?src=hash">#gglplot2</a> <a href="https://twitter.com/hashtag/rstats?src=hash">#rstats</a><br>🌐 <a href="https://twitter.com/Datatitian">@Datatitian</a> <br>📊 <a href="https://t.co/mOgW4y0796">https://t.co/mOgW4y0796</a> <br>🔀 <a href="https://t.co/oJHJWy0VJW">https://t.co/oJHJWy0VJW</a> <a href="https://t.co/yNtqXGHuH4">pic.twitter.com/yNtqXGHuH4</a></p>&mdash; Micah Stubbs (@micahstubbs) <a href="https://twitter.com/micahstubbs/status/814622454597328896">December 30, 2016</a></blockquote> <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">🏹 Two-handed bow and arrow with physics in <a href="https://twitter.com/aframevr">@aframevr</a><br>👤 Made by <a href="https://t.co/b9ajHxZ1Ec">https://t.co/b9ajHxZ1Ec</a><br>🐙 <a href="https://t.co/SSKraRjZf3">https://t.co/SSKraRjZf3</a><br>🔗 <a href="https://t.co/TLWWRxKckw">https://t.co/TLWWRxKckw</a> <a href="https://t.co/4DyyAylNqO">pic.twitter.com/4DyyAylNqO</a></p>&mdash; Kevin Ngo (@andgokevin) <a href="https://twitter.com/andgokevin/status/817385125772083200">January 6, 2017</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Look at our new virtual calculator inside <a href="https://twitter.com/hashtag/MathWorldVR?src=hash">#MathWorldVR</a>. Release is near! <a href="https://twitter.com/TheDimensionLab">@TheDimensionLab</a> <a href="https://twitter.com/aframevr">@aframevr</a> <a href="https://twitter.com/hashtag/WebVR?src=hash">#WebVR</a> <a href="https://twitter.com/hashtag/VR?src=hash">#VR</a> <a href="https://twitter.com/hashtag/HTCvive?src=hash">#HTCvive</a> <a href="https://t.co/gKY281iKwy">pic.twitter.com/gKY281iKwy</a></p>&mdash; Maros Pekarik (@maros_pekarik) <a href="https://twitter.com/maros_pekarik/status/815912259704750080">January 2, 2017</a></blockquote> </div>

A happy new year! Just one year ago, WebVR was a small group of crazy people, and A-Frame had just been born. And just one year later, WebVR has support from all the major tech players, and A-Frame has sparked WebVR content creation for the web community to build stellar projects. In 2017, A-Frame will get the good word out to the greater web community as WebVR hits stable releases of browsers and grow its component and asset ecosystem!

For the first week of this new year: a smooth NYC snowglobe, VR graphing calculator, room scale data visualization, bow and arrow with tracked controllers, Daydream controllers, Project Tango sculpting. There’s been work on fixing various A-Frame bugs, investigating resolution issues on mobile with the WebVR polyfill, automating GitHub builds and releases, adding components to the Registry, and improving documentation.

Projects

Shiny A-Frame - R interface to WebVR via Shiny.

A-Frame Visual Studio Code Snippets

Daydream Controller Model

Components

Events

Articles

Miscellaneous

]]> https://aframe.io/blog/awoa-42/#disqus_thread A Week of A-Frame 40 - 41 https://aframe.io/blog/awoa-40-41/ https://aframe.io/blog/awoa-40-41/ Wed, 28 Dec 2016 13:00:00 GMT <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <p>Happy birthday to A-Frame! We released v0.4.0. Activity is picking back up again after the holidays as the good tidings of pull requests and components roll in. Let’s keep WebVR going in 2017!</p> <div class="tweets tweets-feature"> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Happy first 🎂 to A-Frame! Got a surprise 🎁: the release of v0.4.0! Featuring the Registry and Oculus Touch support 👌 <a href="https://t.co/UQ17E75gUD">https://t.co/UQ17E75gUD</a> <a href="https://t.co/k3JsuGhCTT">pic.twitter.com/k3JsuGhCTT</a></p>&mdash; A-Frame (@aframevr) <a href="https://twitter.com/aframevr/status/809978724066197505">December 17, 2016</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Added dat.gui VR integration into <a href="https://twitter.com/hashtag/MathWorld?src=hash">#MathWorld</a>! Can&#39;t wait to release it! Just few more days… <a href="https://twitter.com/aframevr">@aframevr</a> <a href="https://twitter.com/hashtag/WebVR?src=hash">#WebVR</a> <a href="https://twitter.com/hashtag/VR?src=hash">#VR</a> <a href="https://twitter.com/hashtag/HTCvive?src=hash">#HTCvive</a> <a href="https://twitter.com/hashtag/dataviz?src=hash">#dataviz</a> <a href="https://t.co/3auoZazt9d">pic.twitter.com/3auoZazt9d</a></p>&mdash; Michal Takac (@michaltakac) <a href="https://twitter.com/michaltakac/status/812796835534409728">December 24, 2016</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">A-Frame Voice Command Component <br>🗣👂🤖🌐 <a href="https://twitter.com/hashtag/aframevr?src=hash">#aframevr</a> <a href="https://twitter.com/hashtag/lmalave?src=hash">#lmalave</a> <br>🔀 <a href="https://t.co/aXbM2kIPC2">https://t.co/aXbM2kIPC2</a> <br>📑 <a href="https://t.co/42tZs5HkvY">https://t.co/42tZs5HkvY</a> <a href="https://t.co/QO48C2WNvW">pic.twitter.com/QO48C2WNvW</a></p>&mdash; Micah Stubbs (@micahstubbs) <a href="https://twitter.com/micahstubbs/status/813654438720045056">December 27, 2016</a></blockquote> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">We worked with <a href="https://twitter.com/Vragments">@Vragments</a> to turn one woman&#39;s story of abuse and shunning into a VR story: <a href="https://t.co/CezgVcWOCZ">https://t.co/CezgVcWOCZ</a></p>&mdash; Reveal (@reveal) <a href="https://twitter.com/reveal/status/809197559713513472">December 15, 2016</a></blockquote> </div>

Happy birthday to A-Frame! We released v0.4.0. Activity is picking back up again after the holidays as the good tidings of pull requests and components roll in. Let’s keep WebVR going in 2017!

Projects

VirtualSpeech - WebVR Public Speaking Environment

VirtualSpeech

JSNES - Nintendo Emulator Within Virtual Reality

JSNES

VistaTerra - Explore the Agriparco

VistaTerra

Visuals - WebVR Website Generator

Components

Events

Articles

Miscellaneous

]]> https://aframe.io/blog/awoa-40-41/#disqus_thread Taking Screenshots in A-Frame https://aframe.io/blog/screenshot/ https://aframe.io/blog/screenshot/ Fri, 23 Dec 2016 10:00:00 GMT <p>Did you know that <a href="/blog/aframe-v0.4.0/">A-Frame v0.4.0</a> lets you take a screenshot of any scene? Press <code>&lt;ctrl&gt; + &lt;alt&gt; + s</code> to take a regular screenshot or <code>&lt;ctrl&gt; + &lt;alt&gt; + &lt;shift&gt; + s</code> to capture an equirectangular panorama.</p> <p>The latter is very handy to create scene previews so users can take a quick peek without having to wait for the whole experience to load. You could create a gallery of content that presents a grid of interactive previews without the overhead of initializing every single scene.</p> Did you know that A-Frame v0.4.0 lets you take a screenshot of any scene? Press <ctrl> + <alt> + s to take a regular screenshot or <ctrl> + <alt> + <shift> + s to capture an equirectangular panorama.

The latter is very handy to create scene previews so users can take a quick peek without having to wait for the whole experience to load. You could create a gallery of content that presents a grid of interactive previews without the overhead of initializing every single scene.

Below is what it takes to create a preview of the A-Frame Anime UI example based on an image generated with <ctrl> + <alt> + <shift> + s:

<a-scene embedded style="height:400px; width: 100%; margin: auto;">
   <a-sky src="/images/blog/screenshot.png"></a-sky>
</a-scene>

And below is the result! The example looks like the normal example, but it’s actually a skysphere:

]]> https://aframe.io/blog/screenshot/#disqus_thread A-Frame v0.4.0 - The Registry https://aframe.io/blog/aframe-v0.4.0/ https://aframe.io/blog/aframe-v0.4.0/ Fri, 16 Dec 2016 10:00:00 GMT <p><strong>Happy first birthday to A-Frame!</strong>. A-Frame was born exactly one year ago with the mission to make WebVR content creation accessible and to enable rapid innovation. We can’t begin to describe how much the community has grown and the amazing things people have contributed and built in the past year.</p> <p>We celebrate with the release of <strong>v0.4.0</strong>! v0.4.0 comes with Oculus Touch support, API polish, bug fixes, and an update to the <a href="https://github.com/aframevr/aframe-inspector">A-Frame Inspector</a>. In the past few months, we started the <a href="https://github.com/aframevr/aframe-registry">A-Frame Registry</a>! We’ll be expanding upon the Registry and focus on building out more tooling and ecosystem on top of A-Frame.</p> <p><img src="https://cloud.githubusercontent.com/assets/674727/20548359/a7d71d20-b0d7-11e6-8024-8022c4cd1fd9.png" alt="registryimage"></p> Happy first birthday to A-Frame!. A-Frame was born exactly one year ago with the mission to make WebVR content creation accessible and to enable rapid innovation. We can’t begin to describe how much the community has grown and the amazing things people have contributed and built in the past year.

We celebrate with the release of v0.4.0! v0.4.0 comes with Oculus Touch support, API polish, bug fixes, and an update to the A-Frame Inspector. In the past few months, we started the A-Frame Registry! We’ll be expanding upon the Registry and focus on building out more tooling and ecosystem on top of A-Frame.

registryimage

Grab the latest build at https://aframe.io/releases/0.4.0/aframe.min.js or npm install aframe.

What’s New?

The Registry is a curated repository of open source community A-Frame components, like the Unity Asset Store for A-Frame. In the next few months, we’ll be working with community developers on getting the Registry populated with quality A-Frame components.

The Inspector update includes UI polish and bug fixes. The Inspector has initial integration with the Registry; in the component dropdown on the entity panel, we are able to inject and attach components straight from the Registry. This integration makes components such as physics, particle systems, text, mountains, or animations a few clicks away:

inspector

Oculus Touch controllers have landed thanks to @machenmusik (@mchen on Slack) with models provided by @arturitu! The hand-controls component supports all different the Oculus Touch hand poses for each finger. Speaking of Oculus, @machenmusik also added automatic Enter VR support for browsers that support it, primarily Carmel!

For A-Frame itself, we’ve improved API surrounding getAttribute and setAttribute, and fixed major bugs regarding component dependencies, the cursor component, and primitives.

Some new features include a reverseDrag property for look-controls for static 360° use cases, support for ambient occlusion/displacement/normal/spherical environment maps for the standard material (thanks for Ada Rose Edwards), and keyboard shortcuts to take perspective (<ctrl> + <alt> + s) and equirectangular (<ctrl> + <alt> + <shift> + s) screenshots.

Check out the release notes for the complete changelog, which includes a list of breaking changes and deprecations to help migrate.

What Have People Built?

A-Frame has been hyping up since the last release. We are really glad that everyone is enjoying A-Frame and finds it useful. We’ve seen an approximate 50% growth in activity across Slack, GitHub, websites since late August. In the meetups we’ve attended, we’ve received great feedback of A-Frame and the support on Stack Overflow. We even got sent flowers from abroad! With that, people have been able to build awesome A-Frame projects:

What’s Next?

We will populate and build out the A-Frame Registry, we’re aiming for 20 by the end of the year, and at least 100 by the end of next year. This will enable powerful and easy-to-use features for A-Frame developers. We will expand ecosystem and tools on top of A-Frame, as we have with the Inspector.

We will continue producing showcase content for A-Frame and WebVR as we’ve done with A-Painter. Within the next month, we will be releasing a room scale first-person shooting game built with A-Frame.

In the next release of A-Frame, there may be movement with animations, systems, materials, and textures as we improve APIs. Link traversal will arrive shortly as the API stabilizes and ships on browser platforms.

2016 was a monumental year for WebVR. A-Frame got tens of thousands of designer, developers, and creators excited about the future of the Web. Let’s carry that momentum and then some into 2017!

Scenes

]]> https://aframe.io/blog/aframe-v0.4.0/#disqus_thread