A-frame: 3D Markup
`a-frame` addresses a different problem space in VR and AR: Authoring WebGL is really hard. We will skip the raw WebGL version, don't want to scare readers away by talking about shaders and compiling them into Javascript and how to use them. Instead, we'll move straight into the abstractions. I prefer to use [three.js](https://threejs.org), a very powerful abstraction on top of native WebGL implementations... but even as an abstraction the code is still not easy to understand if you're not familiar with 3D concepts. The code below assumes you've already [downloaded](https://cdnjs.com/libraries/three.js) and linked the library using `script` tags. ```js // Step 1 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); // Step 2 var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); // Step 3 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; // Step 4 var animate = function () { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); }; // Step 5 animate(); ``` The code draws a cube and rotates in both the X and Y axes. The demo is in this [Codepen](https://codepen.io/caraya/full/oRyXNb) I've broken the code into 5 different steps 1. Initialize the scene and the camera we'll use to view it 2. Create the WebGL render, set its size and attach it to the DOM 3. Create the Box and Mesh Object. Then create a cuber using the two objects we just created 4. Set up a Requet Animation Frame loop where we rotate the cube on the X and Y axes 5. Run the animation for the first time so the loop will start The code is fairly simple as far as Three.js code is concerned, but you can see the difficulties for someone who's just starting or someone who just wants to throw together a quick prototype. The code becomes more complex when working with AR and more advanced features. `a-frame` abstract the complexity of the Three.js code into a procedural language. The code below produces a similar result to the Three.js code. The biggest difference is that `a-frame` uses markup, rather than Javascript, to describe the scene and the interactivity. ```html