WebAR For Beginners (Hands-on Workshop/ 18 Seats ONLY)

aCAT Penang

Saturday, 23 November 2019
10:00am - 5:00pm MYT

Augmented Reality (AR) is the technology that merges virtual reality with real world, by overlay computer-generated content to enhance our interaction with reality. This is commonly done through apps; such as popular game Pokémon GO. Around the world it has been used as guiding system to troubleshoot problems remotely, provide immersive presentation for complex data, state of the art design review process and many more.In the workshop you will learn the fundamental blocks and programming languages needed for WebAR development. Also, exploring the potential application of AR technology in depth. You are encouraged to ask questions and discuss the concerns and problems you encountered.In this 1 day workshop*, you will learn:-

  1. Create AR app that can play video & display 3D model.
  2. Learn fundamental of HTML elements & attributes.
  3. Design 3D model using A-Frame inspection tool.
  4. Understand the workflow to design AR solution.

*Subject to minor changes.

Prerequisites (optional)

Knowledge in HTML & JavaScript is advantage.


  1. Bring your laptop (you are advised to bring extra extension cord as we have limited power points).
  2. No requirement on OS (Windows/ Mac/ Linux)
  3. Bring your phone/tablet (Android/iOS)


Module 1: Fundamentals of HTML

  • Register Glitch.com
  • HTML elements
  • HTML attributes
  • DOM manipulation

Module 2: A-Frame Web Framework

  • Basics of A-Frame project
  • Object position, rotation & scale
  • Understand the 3D space

Module 3: 3D modelling

  • Design 3D model using Inspection Tools
  • Save 3D model in correct file format
  • SketchUp *subject to changes

Module 4: AR.js

  • Display image as AR
  • Play video on top of marker
  • Show 3D model in AR

Module 5: A-Frame Entity-Components

  • JavaScript Basics
  • Write marker detection component
  • Manipulate video using component

Module 6: Custom Marker

  • Train custom marker
  • Tips and trick for custom marker

Module 7: 8th Wall

  • Use A-Frame with 8th wall
  • Use Natural Features Tracking

Module 8: AR Project

  • Workflow to design AR app
  • Open discussion for personal project


A.Hakim Noor

Instructor Bio

Hakim Noor is the producer of the workshops and classes at Forward School, a revolutionary technology and future skills school based in Penang, Malaysia. A mechanical engineer by training but pursuing software development as passion. He an alumni of MaGIC’s Stanford Go2Market program, NASA Space App Challenge Instructor & TEDx speaker.

During his undergraduate study, he developed Bookklik; student oriented marketplace to buy and sell used textbooks. A big advocate of web based technologies especially in WebVR (Virtual Reality) & WebAR (Augmented Reality).


  • Certification of Completion will be provided.
  • Lunch will be provided.


Payment Option

You may make payment via Paypal/ Credit Card/ Debit Card through this Eventbrite online ticketing platform.


Alternatively, you may make the payment directly to the company.

Below are the bank account details : -

Beneficiary Name: Forwardemy Sdn Bhd

Bank Name: CIMB Bank Berhad

Bank Account No.: 8009584872


Please send the proof of payment to [email protected]

You will be notified with the entrance of ticket.


By the way, it's HRDF Claimable!