MSCS Project

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.

Project Advisor: Blair MacIntyre

Project Goals

  • Study of HTML5, CSS3, WebGL and Javascript libraries.
  • Experimentation of 3D capabilities/performance using WebGL in handhelds and desktops
  • Implementing 3D GUI widgets using WebGL
  • Analyze the options and advantages of WebGL, HTML5 and CSS3 in AR applications
  • Analyze the advantages of Web based video games using HTML5 and WebGL
  • Analyze implementations that allow users to author AR content in a user-friendly manner
  • Study the viability and advantages of using HTML5, CSS3 and WebGL in ARGON (AR browser)

Note: This project is in its initial stage, and I will be working on it at least until Summer 2012.

Camera Sync with CSS3 and WebGL (Three.js)

Written by Luis Cruz on Friday, 23 March 2012. Posted in MSCS Project

Camera Sync of HTML and WebGL objects

Camera Sync with CSS3 and WebGL (Three.js)

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.

CSS3 + webGL 3D Transforms in sync (Webkit)

Written by Luis Cruz on Sunday, 23 October 2011. Posted in MSCS Project

Intro to CSS3 and webGL

CSS3 + webGL 3D Transforms in sync (Webkit)

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.

Mini-Project

on Tuesday, 11 October 2011. Posted in MSCS Project

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

Importing 3D Models using Three.js

Written by Luis Cruz on Thursday, 06 October 2011. Posted in MSCS Project

An Intro to WebGL

Importing 3D Models using Three.js

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.

Intro to Three.js

Written by Luis Cruz on Tuesday, 04 October 2011. Posted in MSCS Project

An Intro to WebGL

Intro to Three.js

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!!!)

Basic Mouse Events

Written by Luis Cruz on Tuesday, 27 September 2011. Posted in MSCS Project

An Intro to WebGL

Basic Mouse Events

Here I introduce some basic mouse events (mouse down, move and up) to rotate a 3D model.

Simple Texture and Rotation in WebGL

Written by Luis Cruz on Thursday, 15 September 2011. Posted in MSCS Project

An Intro to WebGL

Simple Texture and Rotation in WebGL

Here I introduce a basic texturing of a cube object with linear interpolation filter, and also some basic rotation along the y-axis.

Simple 3D WebGL

Written by Luis Cruz on Thursday, 08 September 2011. Posted in MSCS Project

An Intro to WebGL

Simple 3D 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.

Simple 2D WebGL

Written by Luis Cruz on Thursday, 01 September 2011. Posted in MSCS Project

An Intro to WebGL

Simple 2D 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.