Class 12: How 3D Computer Graphics Work

3D Graphics are practically everywhere you look these days. TV commercials, video games, and especially today's blockbuster movies use some form of 3d generated graphics. What are 3D graphics? And what do all of those technological software terms really mean?

The most basic element of any 3D geometric shape is a vertex point. Vertex points are points that lie in the 3D space along the X,Y, and Z axis. When associated or connected together, these vertices form a polygon or 3D geometric shape. The most basic and most common common polygon is the triangle. Triangles, as you know, consist of only 3 vertex points. Any 3D model you see, is basically made up of thousands, if not millions of polygons and 3D geometric shapes. These polygons form polygon mesh models that can be posed, animated, and shown with different textures and lighting that make them look VERY real. The smaller polygon count an object has, the simpler, and more blocky it will look. The larger polygon count an object has, the smoother, and rounded an object will look. See example picture below.

Lighting is also very important in 3D graphics. In addition to a higher polygon counts, effective lighting on a model is key in making it look ultra realistic. In the early days of 3D games, objects didn't include a lighting source. They were just self illuminated objects. These days, the use of external dynamic lighting and shading adds a layer of realism that casts volumetric shadows on objects and characters.

Every well lit 3D character needs Normals. Normals are basically a perpendicular line drawn up from the face of every 3D polygon on an object. These normals help the object and 3D software calculate the lighting and proper placement of shadows. If the normal of the polygon is facing the light, or close to the light, that polygon will be well lit. If the normal is to the side, or far away from the polygon, it will appear darker or shadowed. See picture below.

Another important feature of making an 3D object look ultra realistic, is Texture Mapping. Texture mapping is done by adding a 2D image, or a 2D texture to the surface of the 3D object or polygon. Texture mapping can give an object that next-level of detail. It can make that brick wall, or stone road, look like it's been there for years. Texture mapping can make that metal shed look all weathered and that army tank look rusty.  See examples below of objects that have been texture mapped.

 With the use of  hi-res polygon models, normals, effective volumetric lighting, and texture mapping. you can turn a lot of simple triangles into a badass scene or action figure. 3D graphics are going to be around for a LONG time. I hope this helped you understand some of the basic terms and concepts.

WebGL Chrome Experiments FAIL IN FIREFOX

Even Though WebGL is meant to be cross browser, It is not totally compatible in ALL browsers.  This post is to list which WebGL experiments (that our classmates chose) will work in the Firefox browser, and which ones will NOT. I've included some Screen caps for your convenience even though not required.

My Three WebGL experiments all worked in the Firefox browser. In fact, ALL of the experiments I tried on my version of Firefox worked!  They are listed below;

The Cathedral. - WORKED

Xibalba. - WORKED

A Journey Through Middle Earth - WORKED

Some other classmates Experiments that I tried are;

Gravity 3D -- WORKED

Amiga Boing Balls - WORKED

Endurance Interstellar - WORKED

Graffiti General - WORKED

Instant Mesh - WORKED

CubeRunner - WORKED

Volumetric Particle Flow - WORKED

Eye Texture Raytracer - WORKED

Umalizer -  WORKED

FPV CODE - WORKED

InstaMusicBox - WORKED

Downloading Firefox. I liked it!

Worked, No problem

Worked, No Problem

I had NO FAILS in FIREFOX

WebGL Chrome Experiments using Google's Chrome Browser

     Below are three stunning examples of WebGL experiments using Googles Chrome Browser

            This first one is called Xibalba. It's like a combination of Minecraft Meets DOOM!!

                  Here's the link so you can try it if you like http://phoboslab.org/xibalba/

Talk about your modern, meets retro Gaming. I thought this was Very Cool!!

This next one was called A Journey Through Middle Earth. It was the most in-depth and detailed WebGL game I encountered. Not only could you explore MiddleEarth, there was a ton of actual Movie clips and animations.  Here's the link http://middle-earth.thehobbit.com/

You could explore the map of Hobbiton

Many many cinematic movie clips

Explore the Elven Enclave Rivendell

The beautiful Galadriel

Explore, and even do battle in Helm's Deep

Navigate your way through the 3D generated terrain

And the bast part, Choose your character, and Battle Orcs and Demons!

Lastly but certainly not least is The Cathedral. It is a very detailed 3D rendering of the inside of the Saint Jean Cathedral in Lyon, France. 

Here is a link to the experiment . Check it out!  http://patapom.com/topics/WebGL/cathedral/index.html

It took a while to load, but the details of the stone and stained glass were unbelievable

You almost felt like you were really there!

The Experiment demonstrated realtime Spherical Harmonics, HDR lighting, and real time rendering. You could actually tweak the rendering, lighting, luminosity, etc.

I was extremely impressed

This experiment wasn't the most FUN, but definitely the most pleasing to the eye.

Final #3: Group 3D Building Project.

Below are screen caps of the group Building that the while class collaborated on to construct. I think it came out great. I will describe in the pictures some of the things that I contributed. ENJOY

 Here we are meeting in a grassy field. It was kind of cleared out so we decided to build here.

 I chose the cobblestone flooring. Myself and another classmate put it down. It looks solid

I also chose the blue glass blocks for the roof. It really gives the house character. I think Haley helped my install them. She also put the torches on the roof as well; 

Finished constructing the roof. I'm REALLY impressed with how it came out. 

The view of my glass blocks from inside. It's raining outside, but I'm nice and dry, thank you,

I  Created all of the beds in the loft, just under my glass roof. 

The beds from the inside. I also created the brick floor with some assistance. 

The brick ceiling was installed by myself and another classmate. Then I jumped up to the glass block roof.

Somebody helping by installing a side door to get in to the loft from outside

An areal view of the whole house, plot, pools, diving boards, and gardens

We discovered that there was a cellar below the house, so we broke up through the house floor. Pretty cool.

I also planted all of these flower pots and Allium flowers along the path way and around the perimeter of the house.

Another view of all the flowers I planted

Another areal view of the whole creation. We really worked well together. I'm proud of our house!

Here's a group photo we tried to take near the end. Everybody gathered up in the loft for a picture!

This is Final #3 Group 3D Building Project. It is a final exercise from the Immersive Education course that I am taking at Boston College. The course is called Discovering Computer Graphics. For details, visit the immersive BC portal at http://ImmersiveEducation.org/@/bc