{"id":249,"date":"2017-08-10T01:57:38","date_gmt":"2017-08-09T23:57:38","guid":{"rendered":"https:\/\/www.caribou360.com\/blog\/?p=249"},"modified":"2017-10-08T18:12:42","modified_gmt":"2017-10-08T16:12:42","slug":"vr-basics-frame","status":"publish","type":"post","link":"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/","title":{"rendered":"VR Basics: What is A-Frame?"},"content":{"rendered":"

A-Frame is an open-source web framework for building virtual reality (VR) applications. Developers can create 3D and WebVR scenes using HTML. It’s that simple! Today we’re going to take a look at A-Frame, WebVR and cover everything you need to know about the future in Web Development.<\/p>\n

<\/p>\n

What is WebVR?<\/h2>\n

It is the future. WebVR is an experimental JavaScript API that provides support for virtual reality devices, such as the HTC Vive, Oculus Rift or Google Cardboard, in a web browser. Everyone has high hopes for WebVR, don’t you? Imagine the possibilities. Now imagine turning it into almost a reality. Isn\u2019t that adventurous?<\/p>\n

To create WebVR Apps, A-Frame uses custom HTML elements to achieve this. In more technical words, these elements use WebGL and three.js. Three.js is a 3D JavaScript library (https:\/\/threejs.org\/<\/a>). HTML provides a familiar authoring tool for web developers and designers while incorporating a popular game development pattern used by engines such as Unity. You don’t have to learn lower level API’s like WebGL to build VR applications if you are already a designer. This is exactly where A-Frame should be used.<\/p>\n

Surprisingly, A-Frame is cross-browser compatible. A-Frame applications work well on a variety of platforms, with the 3D scene (in absence of VR) being visible as a fallback as long as the browser is WebGL compatible.<\/p>\n

What you can do using A-Frame?<\/h3>\n

Paint in VR within your browser using A-Painter: https:\/\/aframe.io\/a-painter\/<\/a><\/p>\n

    \n
  1. Paint in 3D, and share with the world<\/li>\n
  2. View 3D drawings even without headset<\/li>\n
  3. Use over 30 brushes.<\/li>\n<\/ol>\n

    Grab your controllers, hold the trigger button, and start painting!<\/p>\n

    \"VR<\/p>\n

    How to enable WebVR in Google Chrome:
    \nGo to chrome:\/\/flags\/#enable-webvr<\/strong>, enable it.
    \nAnd gamepad-extensions: chrome:\/\/flags\/#enable-gamepad-extensions<\/strong>, enable this too.
    \nNeed more information? Here you go:     https:\/\/webvr.info\/get-chrome\/<\/a><\/p>\n

    Also created using A-Frame is Tiltbrush.
    \nTilt Brush:     https:\/\/www.tiltbrush.com\/<\/a>
    \nPaint from a new perspective. Everything is a canvas as you keep painting in a virtual 3D space. Imagination in the only limit. Available for HTC Vibe as well as Oculus Rift<\/p>\n

    Don’t have HTC Vibe or Oculus Rift?
    \nUse WebGL enabled browser for basic non-VR experience.
    \nUse Google Cardboard or Gear VR headset with your phone for semi-VR experience. It’s not as much fun, but you don’t miss everything either!<\/p>\n

    Why A-Frame?<\/h4>\n
      \n
    1. Can it get simpler? <script> and a <a-scene> tag is what you need.<\/li>\n
    2. Great performance because it uses the DOM, and 3D object updates are done in memory. No BSing with browser layout engine.<\/li>\n
    3. Easy to learn. If you can use HTML and JavaScript, A-Frame is as much easier.<\/li>\n<\/ol>\n

      Update:<\/strong> WebVR is coming to Firefox in version 55. It will support both HTC Vibe as well as Oculus Rift. If you use Microsoft’s Edge browser, it also supports WebVR functionality since April, make sure you aren’t on really old version of the browser.<\/p>\n

      What people have done using A-Frame?<\/h5>\n

      Visit https:\/\/aframe.io\/blog\/<\/a> for a collection of stationary pictures, gifs and videos. All using A-Frame.<\/p>\n

      Get started using A-frame: https:\/\/aframe.io\/docs\/0.6.0\/introduction\/#getting-started<\/a><\/p>\n

      Caribou360 is happy to provide VR Web Apps in this early stage additionally to our Alaska Website Designs. Unique designs and a fantastic functionality, not just generic templates.<\/p>\n","protected":false},"excerpt":{"rendered":"

      A-Frame is an open-source web framework for building virtual reality (VR) applications. Developers can create 3D and WebVR scenes using HTML. It’s that simple! Today we’re going to take a look at A-Frame, WebVR and cover everything you need to know about the future in Web Development.<\/p>\n","protected":false},"author":1,"featured_media":250,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[24],"tags":[26,27,25],"yoast_head":"\nVR Basics: What is A-Frame? | Caribou360<\/title>\n<link rel=\"canonical\" href=\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"VR Basics: What is A-Frame? | Caribou360\" \/>\n<meta property=\"og:description\" content=\"A-Frame is an open-source web framework for building virtual reality (VR) applications. Developers can create 3D and WebVR scenes using HTML. It’s that simple! Today we’re going to take a look at A-Frame, WebVR and cover everything you need to know about the future in Web Development.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/\" \/>\n<meta property=\"og:site_name\" content=\"Caribou360\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Caribou360\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-09T23:57:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-08T16:12:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.caribou360.com\/blog\/wp-content\/uploads\/2017\/08\/vr.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@Caribou360\" \/>\n<meta name=\"twitter:site\" content=\"@Caribou360\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.caribou360.com\/blog\/#organization\",\"name\":\"Caribou360\",\"url\":\"https:\/\/www.caribou360.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/Caribou360\/\",\"https:\/\/www.instagram.com\/caribou360\/\",\"https:\/\/www.linkedin.com\/company\/caribou360\/\",\"https:\/\/twitter.com\/Caribou360\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.caribou360.com\/blog\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.caribou360.com\/blog\/wp-content\/uploads\/2017\/07\/caribou360-logo.png\",\"contentUrl\":\"https:\/\/www.caribou360.com\/blog\/wp-content\/uploads\/2017\/07\/caribou360-logo.png\",\"width\":675,\"height\":225,\"caption\":\"Caribou360\"},\"image\":{\"@id\":\"https:\/\/www.caribou360.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.caribou360.com\/blog\/#website\",\"url\":\"https:\/\/www.caribou360.com\/blog\/\",\"name\":\"Caribou360\",\"description\":\"Superior Alaska Web Design\",\"publisher\":{\"@id\":\"https:\/\/www.caribou360.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.caribou360.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.caribou360.com\/blog\/wp-content\/uploads\/2017\/08\/vr.png\",\"contentUrl\":\"https:\/\/www.caribou360.com\/blog\/wp-content\/uploads\/2017\/08\/vr.png\",\"width\":750,\"height\":350,\"caption\":\"Caribou360 - Superior Alaska Web Design\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/#webpage\",\"url\":\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/\",\"name\":\"VR Basics: What is A-Frame? | Caribou360\",\"isPartOf\":{\"@id\":\"https:\/\/www.caribou360.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/#primaryimage\"},\"datePublished\":\"2017-08-09T23:57:38+00:00\",\"dateModified\":\"2017-10-08T16:12:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.caribou360.com\/blog\/\",\"url\":\"https:\/\/www.caribou360.com\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/\",\"url\":\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/\",\"name\":\"VR Basics: What is A-Frame?\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.caribou360.com\/blog\/#\/schema\/person\/ab9d766e213f226f255726e9d23d3303\"},\"headline\":\"VR Basics: What is A-Frame?\",\"datePublished\":\"2017-08-09T23:57:38+00:00\",\"dateModified\":\"2017-10-08T16:12:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.caribou360.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.caribou360.com\/blog\/vr-basics-what-is-a-frame\/#primaryimage\"},\"keywords\":\"A-Frame,Virtual Reality,WebVR\",\"articleSection\":\"WebVR\",\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.caribou360.com\/blog\/#\/schema\/person\/ab9d766e213f226f255726e9d23d3303\",\"name\":\"caribou\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.caribou360.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a44c75f8c33c20644e5b338e4f1ad752?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a44c75f8c33c20644e5b338e4f1ad752?s=96&d=mm&r=g\",\"caption\":\"caribou\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","jetpack_featured_media_url":"https:\/\/www.caribou360.com\/blog\/wp-content\/uploads\/2017\/08\/vr.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p93bBe-41","_links":{"self":[{"href":"https:\/\/www.caribou360.com\/blog\/wp-json\/wp\/v2\/posts\/249"}],"collection":[{"href":"https:\/\/www.caribou360.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.caribou360.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.caribou360.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.caribou360.com\/blog\/wp-json\/wp\/v2\/comments?post=249"}],"version-history":[{"count":0,"href":"https:\/\/www.caribou360.com\/blog\/wp-json\/wp\/v2\/posts\/249\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.caribou360.com\/blog\/wp-json\/wp\/v2\/media\/250"}],"wp:attachment":[{"href":"https:\/\/www.caribou360.com\/blog\/wp-json\/wp\/v2\/media?parent=249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.caribou360.com\/blog\/wp-json\/wp\/v2\/categories?post=249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.caribou360.com\/blog\/wp-json\/wp\/v2\/tags?post=249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}