MSCS Project

This project addresses the current limited technologies that are available for Augmented Reality and how the latest and soon-to-be-available Web technologies such as HTML5, CSS3 and WebGL can be used to make AR and Gaming widely available in more web-capable devices. This project would cover topics in: 3D Graphics, Augmented Reality, Video Gaming, Graphical User Interfaces and Web Development.

Camera Sync of HTML and WebGL objects

The objective is to mix webGL and CSS3 objects and apply transformations to both in sync, such as if they were placed on the same scene. This combination of a DIV container with a WebGL context is needed in order to display dynamic data and UI components such as buttons, select drop-downs or any other HTML component.

Intro to CSS3 and webGL

The objective is to mix webGL and CSS3 objects and apply transformations to both in sync, such as if they were placed on the same scene. This combination of a DIV container with a WebGL context is needed in order to display dynamic data and UI components such as buttons, select drop-downs or any other HTML component.

Intro to three.js and webGL

After some basic examples of webGL and Three.js. I will have a mini project using many of the features in three.js/WebGL. This mini-project would be a car driving game where player can move drive a car and evade obstacles

An Intro to WebGL

By using Three.js you would be able to import 3D models from different formats such as OBJ, FBX and a few others. The file conversion is offline, meaning that you need to run a script that converts your 3D model into a JSON file containing geometry, material and other information about the model. Then you can use this JSON file in your WebGL code.

An Intro to WebGL

After doing some test with WebGL, one would notice that a lot of code is needed just for drawing something as simple as a 2D square; moreover, you have to deal with GLSL Shaders and all the low level programming in OpenGL ES.

There are some libraries that abstract some low level OpenGL ES, and I have chosen one of the most used: THREE.js. When trying to implement something similar as the previous webGL example (sample 4) it takes around 400 lines of code, but doing it using three.js takes only 80 lines of code (5X less!!!)

An Intro to WebGL

After an introductory exercise for drawing three primitive 2D shapes using WebGL, I am introducing some 3D shapes: a cube and pyramid. Not many changes are required for 3D; except adding more vertices. Here we introduce the drawElements function in order to draw each face of the cube independently and be able to color them.

An Intro to WebGL

This is my first WebGL example. Although I have some OpenGL background, I noticed many differences while coding for WebGL since it is based on OpenGL ES 2.0. This examples shows how to make WebGL calls to an HTML5 Canvas and the drawing of 3 simple geometric figures with simple fragment shading.