Create-a-simple-web-AR-application.md

@@ -112,3 +112,31 @@ const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.2, 0.2, 0.2), material
 cube.position.set(1, 1, 1);
 scene.add(cube);
 ```
+
+## Set up rendering using three.js
+To be able to view this scene in AR, you'll need a renderer and a camera. The renderer uses WebGL to draw your scene to the screen. The camera describes the viewport from which the scene is viewed.
+
+Add this code to the bottom of the **activateXR()** function:
+```
+// Set up the WebGLRenderer, which handles rendering to the session's base layer.
+const renderer = new THREE.WebGLRenderer({
+  alpha: true,
+  preserveDrawingBuffer: true,
+  canvas: canvas,
+  context: gl
+});
+renderer.autoClear = false;
+
+// The API directly updates the camera matrices.
+// Disable matrix auto updates so three.js doesn't attempt
+// to handle the matrices independently.
+const camera = new THREE.PerspectiveCamera();
+camera.matrixAutoUpdate = false;
+```
+
+## Create an XRSession
+The entrypoint to WebXR is through **XRSystem.requestSession()**. Use the **immersive-ar** mode to allow rendered content to be viewed in a real-world environment.
+
+An **XRReferenceSpace** describes the coordinate system used for objects within the virtual world. The 'local' mode is best suited for an AR experience, with a reference space that has an origin near the viewer and stable tracking.
+
+To create an **XRSession** and **XRReferenceSpace**, add this code to the bottom of the **activateXR()** function:
\ No newline at end of file