Augmented & Virtual Reality

I have created a repo with examples on how to build easy prototypes with ARjs and AFRAME.

If you want to simply display a 3D-object you created in JSCAD, then use the 01_basic_vr or 02_basic_ar example from the repo above. To convert your 3D-object into the right format, open it in Blender and save it as gltf.

In addition here is an example on how to build a 2D augmented reality tool, which places a p5js canvas in the real world.

Setup

The easiest is to copy the boilerplate form the prototyping repo. But you can also add it to your p5js repo:

  1. Download aframe-ar.js and save it to code/libraries.

  2. Download aframe-v1.2.0.min.js and save it to code/libraries.

p5js + arjs + aframe

Here is the sample HTML setup:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="../libraries/aframe-v1.2.0.min.js"></script>
  <script src="../libraries/aframe-ar.js"></script>
  <script src="../libraries/p5js/p5.min.js"></script>
  <script src="sketch.js"></script>
</head>
<body>
  <a-scene embedded arjs>
    <a-assets id="assets-container"></a-assets>
  </a-scene>
</body>
</html>

And here is the sketch.js file:

function setup() {
  const canvas = createCanvas(400, 400);
  canvas.parent('assets-container');
  const canvasEl = document.querySelector('a-assets>canvas');
  canvasEl.setAttribute('id', 'textureCanvas');

  const plane = document.createElement('a-plane');
  plane.setAttribute('id', 'planeObject')
  plane.setAttribute('position', '0 2 -5');
  plane.setAttribute('rotation', '0 0 0');
  plane.setAttribute('width', '4');
  plane.setAttribute('height', '4');
  plane.setAttribute('material', 'src: #textureCanvas; transparent: true; opacity: 0.75;');
  document.querySelector('a-scene').appendChild(plane);
}

function draw() {
  background('red');
  stroke('black');
  fill('blue');
  rect(10, 10, 380, 380);

  fill('white');
  for (let c = 0; c < 10; c += 1) {
    circle(random(15, 385), random(15, 385), 5);
  }

  let material = document.querySelector('#planeObject').getObject3D('mesh').material;
  if (material.map) {
    material.map.needsUpdate = true;
  }
}

In the setup we are adding simple plane to our AR/VR scene and then we are using our canvas as the material/texture. After that you can simply draw things like in a normal p5js project. Just make sure to keep the last 4 lines of draw, this makes sure the ar/vr object is updated after we draw something new to the canvas.

You could also combine this with a marker setup. Explore the ar-prototyping repo for more examples.

Zurück zum Anfang