DEV Community: Maksum Rifai

VoxelArt Web Augumented Reality (WebAR)

Maksum Rifai — Sat, 23 Jan 2021 15:31:33 +0000

Voxel AR

For this Project, I used AR.js and Aframe.js library, Image Descriptor, and Voxel.

https://github.com/MaksumRifai/voxelar (Repo) | https://maksumrifai.github.io/voxelar (Live)

Open Live Demo with Chrome Mobile Browser or AR/VR/XR Devices, When cam ready, Scan BekasiDev Sticker or Logo from bekasidev.org Or you can use image below.

Note for Desktop Browser you need latest Chrome or Edge that suported and enabled for WebVR Experiences, and also good desktop camera (Webcam), Recommended use Mobile Browser.

Libraries

AR.js

AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Image Tracking, Location based AR and Marker tracking.

Aframe.js

Web framework for building virtual reality experiences.

Import the library

Import AR.js:

<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js">

Import Aframe.js:

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>

For this expample, we use Image Tracking Type of AR.js with Aframe.js.
Further Reading for another types from AR.js official docs.

Image Tracking

Natural Feature Tracking or NFT is a technology that enables the use of images instead of markers like QR Codes or the Hiro marker.
It comes in two versions: the Web version (recommended), and the node.js version.

Choose Good Images

If you want to understand the creation of markers in more depth, check out the NFT Marker Creator wiki. It explains also why certain images work way better than others. An important factor is the DPI of the image: a good dpi (300 or more) will give a very good stabilization, while low DPI (like 72) will require the user to stay very still and close to the image, otherwise tracking will lag.

Create Image Descriptors:

We create descriptor with this picture (photo.jpg) by uploading to NFT creator web version above then return 3 files to use: .fset, .fset3, .iset.
Each of them will have the same prefix before the file extension. That one will be the Image Descriptor name that you will use on the AR.js web app. For example: with files photo.fset, photo.fset3 and photo.iset, your Image Descriptors name will be photo.

Create Object

You can download and use 3D models or object from anywhere or create your own with Blender. For this repo, I created my own model based on Bekasidev Logo with MagicaVoxel, this logo vector and raster is also originaly created by me.

You can watch tutorial on my youtube channel here for DTS Kominfo Logo:

Render Content to the Scene

<!-- Main Scene -->
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!-- we use cors proxy to avoid cross-origin problems -->
    <a-nft
      type="nft"
      url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/MaksumRifai/voxelar/master/photo"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
    <!-- as a child of the a-nft entity, you can define the content to show. here's a OBJ model entity -->
    <a-entity rotation="-135 -90 90" scale="5 5 5" position="0 0 0" obj-model="obj: #tree-obj; mtl: #tree-mtl"></a-entity>
    </a-nft>
    <!--Load assets to use by nft entity above-->
       <a-assets>
        <a-asset-item id="tree-obj" src="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/MaksumRifai/voxelar/master/bekdev.obj"></a-asset-item>
        <a-asset-item id="tree-mtl" src="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/MaksumRifai/voxelar/master/bekdev.mtl"></a-asset-item>
       </a-assets>
    <!--End of assets-->
    <!-- static camera that moves according to the device movemenents -->
    <a-entity camera></a-entity>
  </a-scene>
  <!--End of Scene-->

You can refer to A-Frame docs to know everything about content and customization. You can add geometries, 3D models, videos, images. And you can customize their position, scale, rotation and so on.

The only custom component here is the a-nft, the Image Tracking HTML anchor. You may see my other project for references.

360° Image VR, Add 3D bus into 360 Degree Image (Repo | Demo)
Simple Object and Animation VR, Add 3D DTS logo Into Environment (Repo | Demo)
WebAR Image Tracking with Kumparan Logo Umbrella (Repo | Demo)

How to use this template

Clonning

Run the following command to clone this template to your local directory:

$ git clone https://github.com/MaksumRifai/voxelar.git

Download

Use green button on my repo and click "Download Zip" or simply click here

Customizing

In case you want to use your own models, simply replace the .obj .mtl .png files with yours. Don't forget to export your MagicaVoxel or Blender project properly.

And edit this repo as you needed, you only need to replace URL/File name with yours, and the descripted files (fset, iset, fset3) you created with your own source image, use your favorite code editor, directly in web browser or github desktop.

For better and faster development or debugging this project, you can use Spck Code/Git Editor for Android, I mainly use this way.

References & Resources

A-Frame Boilerplate

Web framework for building virtual reality experiences.

Github | Website.

Alternatively, check out the A-Frame Starter on glitch.com for a more interactive way on getting started.

MagicaVoxel @ephtracy

A free lightweight GPU-based voxel art editor and interactive path tracing renderer.

Github | Website | Demo

Tutorial Videos

Articles

Support Me

VoxelArt Web Virtual Reality (WebVR)

Maksum Rifai — Thu, 14 Jan 2021 19:29:31 +0000

Create Your Own Web Virtual Reality

Virtual Reality

I used A-Frame, A-Frame Is A web framework for building virtual reality experiences, A-Frame handles the 3D and WebVR boilerplate required to get running across platforms including mobile, desktop, Vive, and Rift.

3D Model

You can download and use 3D models or object from anywhere or create your own with Blender. For this repo, I created my own model based on DTS Kominfo Logo with MagicaVoxel, you can watch tutorial on my youtube channel here:

Live and Preview

Preview

Live

How to use this template

Clonning

Run the following command to clone this template to your local directory:

$ git clone https://github.com/MaksumRifai/digitaltalent.git

Download

Use green button above and click "Download Zip" or simply click here

Customizing

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>Digital Talent Sholarship - VR Maksum Rifai</title>
 <meta name="description" content="Digital Talent Sholarship - A-Frame VR - Maksum Rifai">
 <!--Aframe.js Core, not the latest release but most stable for this project-->
 <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
 <!--Aframe environment component, you can remove it if you use custom sky and plane entity -->
 <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
</head>

<body>
 <a-scene>
  <!--Load assets Object 3D, Preserve all your assets below before placing it to the scene (recommended)-->
  <a-assets>
  <!--Always Asign ID to assets item for using-->
   <a-asset-item id="dts-obj" src="/DTS.obj"></a-asset-item>
   <a-asset-item id="dts-mtl" src="/DTS.mtl"></a-asset-item>
  </a-assets>
  <!--End of assets Object-->
  <!--Using Assets Above with assets ID, add desire position/scale/rotation and simple Animation-->
  <a-entity rotation="0 45 0" scale="0.01 0.01 0.01" position="0 0 -3" obj-model="obj: #dts-obj; mtl: #dts-mtl" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-entity>
  <!--Add Environtment Forest Preset, alternatively use <a-plane> and <a-sky> for custom ground and sky-->
  <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
  <!--Add Camera with custom height (3 meter), default is 1.6 (160 cm), remove line below will inject default camera-->
  <a-entity camera look-controls position="0 3 0"></a-entity>
  <!--End of scene, add everything you want to show above this line-->
 </a-scene>
</body>

</html>

In case you want to use your own models, simply replace the .obj .mtl .png files with yours. Don't forget to export your MagicaVoxel or Blender project properly.

For better and faster development you can use Spck Code/Git Editor for Android, I mainly use this Way.

References & Resources

A-Frame Boilerplate

Web framework for building virtual reality experiences.

Github | Website.

Alternatively, check out the A-Frame Starter on
glitch.com for a more interactive way on getting
started.

MagicaVoxel @ephtracy

A free lightweight GPU-based voxel art editor and interactive path tracing renderer.

Github | Website | Demo

Tutorial Videos

Articles

Digital Talent Scholarship (DTS) Kominfo

Copyright Notice & Disclaimer

All product (DTS) and company/entity names (Kominfo) are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
Please refer to DTS official website for more Information.

Support Me

15+ Apps For Create Website Mockup

Maksum Rifai — Thu, 05 Dec 2019 12:54:13 +0000

Creating a website mockup is an important step in the process of web development . To facilitate collaboration in the process, the design must be made with a good design that is easy to understand. Then, using paper and pen is not enough.

Currently, there are more apps that facilitate web designer to create a website mockup. In this article, we have selected the best applications 15+ can be used without the hassle own research.

You can read full article here:
https://desainerhub.com/2019/12/15aplikasi-mockup-website

Need feedback for my personal portfolio

Maksum Rifai — Mon, 28 Oct 2019 14:21:53 +0000

Hello, I'm Maksum Rifai from Indonesia.
Please take time to see/test and feedback for my personal portfolio. Thanks.

https://maksumrifai.github.com
https://maksumrifai.netlify.com