DEV Community: Chryen

Please Do Not Read: A-Frame

Chryen — Mon, 01 Jun 2020 05:39:44 +0000

Greetings, fellow coders. And welcome back to another installation of Please Do Not Read, where we will be discussing brand new technologies and how to use them. For this week's tech, I will be going over A-Frame, a very popular web framework for building virtual reality experiences. I dabbled a little into A-Frame because I was interested in virtual reality development. Having a bit of experience with augmented reality and loading different 3D objects, virtual reality was not too bad of a transition. So let's begin!

Like I said before, A-Frame is a web framework for virtual reality experiences. It is completely open source and available to use! It is written in JavaScript, which we should all be very familiar with at this point (if you have been keeping up with toy problems). It also utilized the Three.js framework, which we used during the last blog to create our augmented reality scene. And what's really amazing about A-Frame is that the scene and models are all created via HTML.

We can get started by adding this script tag to the head of our index.html:

<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>

Once we have this script tag included, we can start creating the scene inside of the body. To initialize an A-Frame scene, we can start by adding the "a-scene" tag inside the body. Everything, including models and background, will go inside of this "a-scene" tag. The tag will look something like this:

<body>
  <a-scene>
  </a-scene>
</body>

This will create a space where we can add models and adjust lighting/scenery for our virtual reality scene. And inside of the "a-scene" tag, we can add the following to create a very basic scene:

<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4">
    </a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

This will create a few models inside of our scene. A box, a sphere, and a cylinder should appear on top of a flat area with an empty background.
And if everything is set up properly, your index.html file should look something like this:

<html>
 <head>
   <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
 </head>
 <body>
   <a-scene>
     <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
     <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
     <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
     <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4">
       </a-plane>
     <a-sky color="#ECECEC"></a-sky>
   </a-scene>
 </body>
</html>

Your application when launched should then look something like this. Congratulations, you created a virtual reality scene using only HTML! You can even move around the models using WASD keys. And again, this was just a small example of a very basic virtual reality scene using A-Frame. The example link above has more custom virtual reality scenes with example code as well.

Thanks for reading my very brief blog on A-Frame. There is a lot more information on their docs, and I recommend checking them out if you're looking to dive into virtual reality. Thanks again, and I'll see you all later for another tech time.

Please Do Not Read: Augmented Reality with Expo

Chryen — Sun, 24 May 2020 16:52:31 +0000

Welcome back, coders! We are back with another informational blog on cool technologies that I have been working on. Like I said last week, toy problem time has been postponed for an indefinite amount of time; so instead, we will have tech time. This week's tech is going to be on more Expo features, specifically augmented reality. Augmented reality has been on my bucket list for a while because it is so cool and looks impressive. Today, I will show you how to implement a very basic augmented reality screen using Expo. Just a warning, this will only work on IOS devices. Let's get started!

First and foremost, we will we need to create an Expo project. If you have not checked out my blog last week, I highly recommend following the instructions there on setting up an Expo project. Here is a link to the blog:

https://dev.to/chryen/please-do-not-read-expo-5fbh

After setting up an Expo project, we can start with the installation process. We will need to install a few dependencies for Expo's augmented reality. For a basic augmented reality application, all we need install are these dependencies:

$npm install three expo-three expo-three-ar expo-graphics expo-gl expo-permissions

After successfully installing these dependencies, we can start messing around with App.js. Let's go ahead and import these libraries into App.js. We can even cut some of the template code that they have given us. This is what our imports should look like:

import React, { useEffect } from 'react';
import { AR } from 'expo';
import * as Permissions from 'expo-permissions';
import { Renderer, THREE } from 'expo-three';
import { GraphicsView } from 'expo-graphics';
import { BackgroundTexture, Camera } from 'expo-three-ar';

Before we actually get into setting up the augmented reality scene, we must first ask for permission to use the camera, which is handled conveniently through expo-permissions. We can implement this feature by adding it within a useEffect:

export default function App() {
  // Ask for permission to use camera
  useEffect(() => {
    (async () => {
      const { status } = await Permissions.askAsync(Permissions.CAMERA);
      if (status !== 'granted') {
        console.log('no access to camera');
      }
      // Turn off extra warnings
      THREE.suppressExpoWarnings(true);
    })();
  }, []);

We can now create our augmented reality scene. Augmented reality will be created within an onContextCreate function that will hold the scene, lighting, and even the 3D model. I will go ahead and share the code with some pseudo-code for you to follow along:

// Create Augmented Reality with 3D model and camera
  const onContextCreate = async ({ gl, scale: pixelRatio, width, height }) => {
    // This will allow ARKit to collect Horizontal surfaces
    AR.setPlaneDetection(AR.PlaneDetectionTypes.Horizontal);
    renderer = new Renderer({ gl, pixelRatio, width, height });
    renderer.gammaInput = true;
    renderer.gammaOutput = true;
    renderer.shadowMap.enabled = true;

    // Create scene to capture model and background
    scene = new THREE.Scene();
    scene.background = new BackgroundTexture(renderer);
    camera = new Camera(width, height, 0.01, 1000);

    // Create lighting for 3D model
    scene.add(new THREE.AmbientLight( 0x404040 ));
    let light = new THREE.DirectionalLight( 0xffffff, 0.5 );
    light.position.set( 3, 3, 3 )
    scene.add(light);

    // Create simple cube 3D model
    const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
    const material = new THREE.MeshPhongMaterial({
      color: 0xff00ff,
    });
    let cube = new THREE.Mesh(geometry, material);
    cube.position.z = -0.4;
    scene.add(cube);
  }

After setting up the scene, we can implement an onResize function that will adjust the size and projection of the camera:

// When the phone rotates, or the view changes size, this method will be called.
  const onResize = ({ x, y, scale, width, height }) => {
    if (!renderer) {
      return;
    }
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setPixelRatio(scale);
    renderer.setSize(width, height);
  };

And finally for our last function, we need a function that will render the scene along with the camera from onContextCreate.

// Called every frame.
  const onRender = () => {
    renderer.render(scene, camera);
  };

After that, go ahead and implement your return statement, where you will render a GraphicsView containing the functions above and some other parameters. This will close off the entirety of App.js:

return (
    (<GraphicsView
      style={{ flex: 1 }}
      onContextCreate={onContextCreate}
      onRender={onRender}
      onResize={onResize}
      isArEnabled
      isArRunningStateEnabled
      isArCameraStateEnabled
      arTrackingConfiguration={'ARWorldTrackingConfiguration'}
      />)
  );
} // end of App.js

Go ahead and npm start your application. Get your iPhone out, and if all goes well, it should look a little something like this(sorry, can only give link because mp4):

https://i.gyazo.com/0fd63518e294cfa1fd088bae2463c504.mp4

Congrats! You have just implemented a very basic augmented reality application! If you have any more questions or need clarification, feel free to ask or check out the Expo docs. Thanks for reading, and I'll see you all next week!

Please Do Not Read: Expo

Chryen — Mon, 18 May 2020 03:54:39 +0000

Welcome back, coders. I have an important announcement to make concerning previous posts about toy problems and all future posts. For the time being, the past blogs on this account will be taken down for legal purposes. And future blogs will be written about cool new technologies that I have been working on. Sorry for the sudden change in topics, and I hope you will still read my blogs. Let us give a farewell salute to the old toy problems, and begin with this week's blog!

My blog for this week will be about Expo, a cool framework and platform for universal React applications. A very popular use for Expo is mobile development. And this blog will introduce you to Expo, as well as getting started!

The features of Expo are built around Reactive Native, and they utilize JavaScript, which we have played around with in the toy problems. To get started, you must first update your node to a version that is compatible with expo. A safe version of Node.js to use would be the latest stable. You can run this line to check which version of Node.js that you currently have to adjust accordingly:

nvm --version

For additional instructions on how to install a specific version of node, you can run this line:

nvm --help

So after installing that version of node, we can finally set up expo. We must first install expo:

// Install the command line tools
npm install --global expo-cli

Once you have installed expo, you can now create an expo project! This expo project will contain basic templates that you may choose from to get started with your application. You may choose from blank templates or templates that have some basic tabs, routing, and buttons. You can create it by running this line:

// Create expo project with name "my-project"
expo init my-project

And of course, you can change "my-project" to whatever name you would like. After creating your expo project and selecting your template, you can go ahead and change directory to your project.

// Change directory
cd my-project

Once inside of your project directory, you can start up the app!

// Start the app
expo start

Now, a few things will pop up in your terminal after running that line. You'll see a few messages about Expo tools running on your localhost, and then a giant QR code will appear. After that, a set of instructions will appear under the QR code that will enable live reloading. This is what it should look like:

Also, your browser should open to a page with a similar setup, where you can see our application compile, as well as some simulators your can choose from on the side. A QR code should appear on the bottom left corner as well. And if you want to download the mobile application(IOS and Android are compatible), you can even run the application directly through your phone!

And now, you have a fully functional expo application to start building from! I highly recommend checking out the expo docs for all of the cool features and APIs they have.
https://docs.expo.io/versions/latest/

And that is all! Thank you for reading my guide to setting up Expo! If you run into any issues about the set up, please let me know in the comments below. And again, sorry for the sudden change in themes. I will keep you all updated on the toy problems, and I will see you all next week for another blog!