Tour 3D

The educational technology and digital learning wiki
Jump to navigation Jump to search

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

<pageby nominor="false" comments="false"/>

Introduction

The demo

Purpose: This piece is meant to be used as an introductory demo of 3D technologies. We shall focus on 3D and the Internet, that is: 3D contents on the Web, 3D applications that use the Internet, and 3D models shared over the Internet.

3D Computer graphics is done in many areas, e.g. in design, engineering, computer science, and the arts. Also, there exist many technical fields. This tour is definitely biased...

Requirements for looking at most of the demos

(1) You will need a web browser like Firefox 4 or better, Opera 11, Chrome 10 (Spring 2011). Please, check your browser at http://www.doesmybrowsersupportwebgl.com/.

Firefox 4 users may have to do the following. On my little Dell XT2 laptop, WebGL was enabled for Chrome 10 out of the box but not for Firefox 4:

  1. Open Firefox 4.
  2. In the address bar type about:config and hit enter.
  3. Enter webgl in the filter pane (this will show webgl stuff only)
  4. Look for webgl.force-enable
  5. This option is set to false by default.
  6. Simply double-click on it to enable it (setting the value to true).

(2) You may have to update both the driver for the graphics card (e.g. for Intel mobile) and the the low-level graphics libraries (e.g. install DirectX 10 on Windows). As of March 2010, you also may have to try different browsers or force-enable WebGL (see previous point). Or more plainly spoken: Some WebGL implementations may work with some graphics cards and in other cases you will have to convince your browser.

(3) You need a decent graphics card with some 3D acceleration. For more complex and 3D scenes, you should use a special-purpose 3D graphics card, else be patient.

Under the hood

We shall not try to explain how 3D graphics really work on a computer, but it is good know a few things in order to understand why certain programs won't run well or won't run at all in given configurations.

As of 2011, most recent computers do support 3D graphics in one way or another through a graphics processing unit (GPU). They come in two basic variants:

  1. A GPU is just chip on the motherboard, i.e. the card that includes the CPU, memory and all the other chips. This is typically the case for laptops and "normal" office computers
  2. The GPU is an additional video card.
Performance

Graphics performance is hugely different in different configurations. Roughly one could distinguish several types of systems with respect to gaming and virtual environments performance.

  1. High end gaming graphics cards: Run current games with good quality settings. (Example: a 500$ GeForce GTX 580 in March 2011)
  2. High end CAD cards: Run expensive high-end CAD software and large models. Can run games but no better than mid-range gaming cards. (Example: a 4000$ Quadro 6000)
  3. Mid range gaming or CAD graphics cards: Run most current games, but using lower quality settings. E.g. my older gaming laptop (a DELL XPS 1730) has 2 Nvidia 8700 GMT cards. Good $800-1000 CAD cards are also in this range with respect to gaming.
  4. High-end embbed chips are not too frequent. Example : Nvidia GeForce 9400M chip used in Apple's MacBook Pro. As good as mid-range graphics cards.
  5. Low-mid range gaming graphics cards. Can play most games with low settings.
  6. Low-end graphic cards or embedded chips: Can barely play 3D intensive games. Most PC's fall in this category since about 90% of PCs ship without any extra video (GPU) card.
  7. Barely any 3D graphics support.
Nvidia Geforce GTX 580 GPU card

For information about performance, see for example:

It is interesting to see that a "decent" laptop chip like the Intel 4 Express series has benchmarking scores that are about 30 times lower than the very high end cards ....

Low-level graphics API support

Today, the dominant standards that specify low-level graphics languages are OpenGL (Open) and Direct3D (part of Microsoft's DirectX). Direct3D specifically targets gaming, whereas OpenGL is more popular in the professional graphics market (CAD, visualization, movies). OpenGL is available on all platforms (including Windows). Both OpenGL and Direct3D are implemented in the manufacturer made graphics card drivers.

Modern GPUs are in fact highly specialized computers that are mainly made to deal with various aspects of 3D computer graphics. However, they also include various 2D functionality and support for video decoding.

According to Wikipedia (March 2011), “Modern GPUs use most of their transistors to do calculations related to 3D computer graphics. They were initially used to accelerate the memory-intensive work of texture mapping and rendering polygons, later adding units to accelerate geometric calculations such as the rotation and translation of vertices into different coordinate systems. Recent developments in GPUs include support for programmable shaders which can manipulate vertices and textures with many of the same operations supported by CPUs, oversampling and interpolation techniques to reduce aliasing, and very high-precision color spaces.”

Abstraction Layers

If we simplify a lot, we could distinguish four layers of abstraction. In this tour we are only interested in applications. But one does have to know that applications must rely on lower level layers. In particular it is important to understand that applications on "top" rely on layers below. Since new applications target advanced funtionality, device drivers and low-level graphics APIs such as Direct3D need to be updated.

Applications (languages and formats)
Other (GDI, QuickTime, Xlib, Cairo) OpenGL, WebGL, OpenGL ES Direct3D, Direct3D Mobile
Device drivers
Graphics hardware

The most recent low-level API on the block is "WebGL". It is implemented (mostly) in Chrome 10, Firefox 4 (FF4), Safari and Opera 11.

3D and the Internet

On the Internet, 3D is used in many ways. We roughly distinguish the following three use cases:

  • Multi-user virtual worlds and games that use the transport mechanisms of the Internet
  • 3D contents and environments that display through your web browser or a browser plugin
  • The web is used for sharing 3D models and applications.

Below we shortly will expand these three use cases and present a few demos. We shall demonstrate more examples of each kind later in this tour.

Multi-user virtual worlds and games

Various virtual environments usually use special clients, i.e. software that you need to install) and that use various Internet transport and application layers. Typical examples are:

  • Virtual worlds like Second Life and 3D chat rooms
  • Massive multiplayer games
  • Virtual mapping tools like Google Earth
Vassar's Sistine Chapel in Second Life

3D contents and environments on the web

Some 3D contents are available through the world-wide web, i.e. in your browser. Web 3D technology includes:

  • Browser plugins for 3D formats like X3D or general purpose formats like Flash 3D or Java 3D. There exist many vendor-specific formats and plugins.
  • Recent WebGL technology, i.e. a 3D low-level 3D graphics API
DEMO (WebGL) rotating tea pot made with JS/Canevas
DEMO (WebGL) interactive dolphin made with X3D DOM

Typical examples include:

  • Interactive 3D models such as Google Body
  • Educational visualizations of buildings or science models
  • Data visualizations
  • A few virtual worlds and games
  • 3D modeling software that allows for real-time multi-user editing

The web for sharing 3D models and applications

The Web is used to share and distribute 3D models and applications

Of particular interest are web sites where people share designs, e.g.

Code available at thingiverse

Introduction to computer graphics

Creating 3D contents includes about four main stages:

  1. Modelling of a 3D object
  2. Adding animation and interactivity to the object
  3. Layout and inserting into a larger scene
  4. Rendering (displaying)

We shall shortly introduce various aspects of these stages below

Modelling principles

Most 3D models rely on a so-called wire frame model, i.e. mathematical model that describes their surface with points, lines and surfaces, also called vertices, edges and faces (Boundary Representations)

Sample rendering of a wireframe cube, icosahedron, and approximate sphere (Wikipedia)

Wireframe models in Internet 3D often "just" define triangles that make up the outside of a closed polyhedron. A Polyhedron is a 3D closed (watertight) geometric object with flat faces and straight edges. However, more sophistic models also can be described with lines and surfaces that are not straight (though the final model used may be rendered as polyhedron made up of lots of triangles.

Let's have a look at a little duck. It's made of 2108 dots (vertices) and 4212 faces. Most of these can be found in its eyes and mouth.

A 3D duck with a coordinate system

To create such models various strategies may be used:

  • 3D Drawing/modeling programs to draw points lines and surfaces that then can be connected. All of these programs also allow to transform surfaces in various ways, e.g.
    • by CSG (see below)
    • by manipulation of meshes (e.g. pull out a surface, subdivide and pull/push)
  • Constructive Solid Geometry (CSG) programs allow to create and object by adding building blocks and also by using a building block to substract volumes.
  • Mathematical synthesis with formulas
  • 3D scanning and 3D imagery
  • ....

Boundary representation

As we said before, most 3D models can be represented by points, lines and triangles made up from these points and lines. These models also can be called meshes.

The Meshlab duck in various rendering modes
Points (vertices)
Visible parts of the wireframe
Full wireframe view
Wireframe + solid surfaces (triangles)
Solid surface (smoothed)
Textured with a jpg
Phong shaded + some extra tricks
Phong shaded
Showing the vertices and face normals

DEMO (Software) of Meshlab. “MeshLab is an open source, portable, and extensible system for the processing and editing of unstructured 3D triangular meshes. The system is aimed to help the processing of the typical not-so-small unstructured models arising in 3D scanning, providing a set of tools for editing, cleaning, healing, inspecting, rendering and converting this kind of meshes.” In more simple terms, Meshlab is not a 3D drawing program, but it can be used to manipulate and render meshes in various ways.

Particle engines

“The term particle system refers to a computer graphics technique to simulate certain fuzzy phenomena, which are otherwise very hard to reproduce with conventional rendering techniques. Examples of such phenomena which are commonly replicated using particle systems include fire, explosions, smoke, moving water, sparks, falling leaves, clouds, fog, snow, dust, meteor tails, hair, fur, grass, or abstract visual effects like glowing trails, magic spells, etc.” (Wikipedia (March 2011)

Source: Wikipedia

NURBS modeling and similar

“Non-uniform rational basis spline (NURBS) is a mathematical model commonly used in computer graphics for generating and representing curves and surfaces which offers great flexibility and precision for handling both analytic and freeform shapes.” (NURBS / Wikipedia, March 2011).

Sculpt modeling

“Digital sculpting, also known as Sculpt Modeling or 3d Sculpting, is the use of software that offers tools to push, pull, smooth, grab, pinch or otherwise manipulate a digital object as if it were made of a real-life substance such as clay.” (Wikipedia (March 2011).

DEMO (Sculptris software)

Alternatively, there are many YouTube Videos, e.g.

Constructive solid geometry (CSG)

“Constructive solid geometry (CSG) is a technique used in solid modeling. Constructive solid geometry allows a modeler to create a complex surface or object by using Boolean operators to combine objects. Often CSG presents a model or surface that appears visually complex, but is actually little more than cleverly combined or decombined objects.” (wikipedia, March 2011)

Most CAD programs implement this way of modelling. An other option is to used a program like OpenScad where objects are defined with code (I find that easier).

Example code: 

difference() {
	// start objects
	cylinder (h = 4, r=1, center = true, $fn=100);
        // first object that will substracted
	# rotate ([90,0,0]) cylinder (h = 4, r=0.3, center = true, $fn=100);
        // second object that will be substracted
	# rotate ([0,90,0]) cylinder (h = 4, r=0.9, center = true, $fn=100);
}

The result is the yellow object (the pink transparent objects are the ones that are used to substract volume)

Debug Modifier example

Animation

Computer animation means generating animated images by using computer graphics. Technically speaking, animation just displays various "pictures" over time (about 24 frames/second). But from a modellers point of view, most animations are now created through some sort of manipulable skeletons.

Let's have a look at avatars, i.e. some kind of "puppets" that are used in various application areas such as video games and virtual worlds. One popular technology defines an avatar as:

  • skeleton that is composed of connected bones representing various body parts
  • a skin

Sometimes avatar movement is obtained through studying or capturing living persons.

Interactivity and scenes

Rendering

Can be either

  • Realtime
  • Photorealistic (not real-time)

“In this illustration of crystal structure, the virtual photo studio surrounding the reflective balls includes an umbrella light and studio camera” (wikipedia)

Stacked balls with "camera and studio light" wikipedia
  • Rendering will take into account light(s) and other paramters.
  • Various materials reflect lights and colors in a different way.

3D graphics formats and tools overview

File formats for 3D models and scenes

Since graphics combines a large area of applications such as gaming, interactive environments, movies, computer-aided design and manufacturing, there exist many (dozens) of 3D file formats.

In this tour, we primarily will meet the following ones:

X3D is a royalty-free open standards file format and run-time architecture to represent and communicate 3D scenes and objects using XML. It is an ISO ratified standard that provides a system for the storage, retrieval and playback of real time graphics content embedded in applications, all within an open architecture to support a wide array of domains and user scenarios.

  • Collada - .dae was designed as format for COLLAborative Design Activity for establishing an interchange file format for interactive 3D applications. Also used as native format in the same spirit as X3D.
  • Wavefront .obj “is a geometry definition file format first developed by Wavefront Technologies for its Advanced Visualizer animation package. The file format is open and has been adopted by other 3D graphics application vendors. For the most part it is a universally accepted format.” (Obj, Wikipedia)
  • .stl “is a file format native to the stereolithography CAD software created by 3D Systems. This file format is supported by many other software packages; it is widely used for rapid prototyping and computer-aided manufacturing.” (STL (file format, Wikipedia)
  • .skp is used as native proprietary format by Google sketchup. The free version of Sketchup can export to Collada.

Tools

We can distinguish among three big families of 3D modeling and composition software:

(1) Computer-aided design and manufacturing (CAD/CAM) tools are usually used to design all sorts of manufacturable objects like cars or buildings.

(2) General purpose modeling tools are (usually) used to create virtual objects like components of games. Most can do more than modeling, i.e. add visual effects, rendering, and compositing.

(3) Virtual environments authoring tools. Some of these can do modeling, but the main purpose is to build interactive environments, e.g. authoring tools for games or X3D tools. Most often, 3D elements are made with a modeling tool and then imported.

In addition, we can identify special purpose tools like:

  • Mesh manipulation and repair tools
  • Particle engines
  • Sculpting tools
  • CAM tools, i.e. translate a 3D model into a printable CNC format.
  • ...

Some of these are integrated within a general purpose or CAD tools

3D in the web browser

Today, we have 3 basic technologies

  • Use 3D with a plugin that must be installed. Often this requires administrator rights.
  • Use 3D with one the more popular 3D capable multi-media plugins that are usually available, i.e. Flash and Java
  • Use 3D through WebGL. WebGL is included in most recent browsers (spring 2011), e.g. Firefox 4 or Chrome 10. WebGL is a low level 3D graphics API for which an increasing amount of high-level languages and formats are being implemented.

Below we show a few examples

VRML/X3D through a plugin

  • Install Bitmanagement Contact (If I got it right, you also can install this without administrator rights)
(Note for my students: I can help you)
  • DEMO (X3D examples) at Bitmanagement: Interactive demos. I believe that as of March 2011, native X3D clients are faster and better than the new browser built-in WebGL-based rendering engines. Most of these demos are actually in VRML format, an older version of X3D.
Screenshot of the Bitmanagement VRML cathedral

WebGL and canevas

  • DEMO (Set of WebGL demos) Demo repository at Khronos. These examples demo the canevas/JavaScript interface. Lot's of programming needed, a bit like Flash 3D. Load a scene, then look at the source of the page (hit ctrl-U in Firefox).
E.g. collectibles

WebGL and X3D DOM

Simple HTML5 / X3D cube
<!DOCTYPE html >
<html >
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>Hello World</title>
        <link rel="stylesheet" type="text/css" href="x3dom.css" />
		<script type="text/javascript" src="x3dom.js"></script>
	</head>
       

<body>

   <h1>HTML5 Hello World</h1>
                <p>
                With X3DOM-namespace and lower-case element/node names. Does not work with self closing tags (e.g viewpoint and material) right now.
                </p>

                <x3d xmlns="http://www.x3dom.org/x3dom" showStat="false" showLog="false" x="0px" y="0px" width="400px" height="400px" altImg="helloX3D-alt.png">
          <scene>
            <viewpoint position='0 0 10' ></viewpoint>

              <shape>
                <appearance>
                    <material diffuseColor='0.603 0.894 0.909' ></material>
                </appearance>
                <box DEF='box' ></box>
             </shape>
          </scene>
        </x3d>

</body>
</html>

Good to know: X3Ddom has its alter ego for 2D graphics in HTML5, i.e. built-in SVG

DEMO (SVG) pendula (look at the source).

Flash 3D

3D Printing

Giant duplo-compatible duck in progress

Application areas

Below we show a few examples of application areas, several of which may share the same technologies.

Industrial design

CAD/CAM

Architecture and historical artifacts

  • Sculptures
DEMO (WebGL) Tools and expertise for 3D collection formation Shows various artifacts
  • Modeling old cities
DEMO (YouTube video) Pompeii Rendering video. This demos a proprietary 3D city rendering engine made by Procedural

Movies

“Computer-generated imagery (CGI) is the application of the field of computer graphics or, more specifically, 3D computer graphics to special effects in art, films, television programs, commercials, simulators and simulation generally, and printed media. The visual scenes may be either dynamic or static.” (Wikipedia)

  • First movies that used 3D were Westworld (1973) and Futureworld (1976).

Life and earth sciences

Several areas:

  • Medical imagery
CRT scans etc.
  • Anatomical models for training
DEMO (WebGL) Google body browser. Read this how to
DEMO (YouTube video]) Google Body Browser (many others)
Alternatives: Visible human project, 3D Indiana
  • Computer-assisted surgery
  • Biology
DEMO (WebGL) myoglobin structure
DEMO (WebGL) Myoglobin Molecule (Copy)
  • Astromony
DEMO (WebGL) Solar System simulation with asteroids (CPU/GPU intensive)

Virtual worlds

Key items:

  • The first textural and 2D environments were created in the 1980's.
DEMO (YouTube video) Lucasfilm's Habitat Promotional Video
  • The first 3D virtual worlds on the Internet appeared in the mid-1990's
  • The first well-known commercial virtual world is Active Worlds
  • Today's best known environment is Second Life


Games

Games are built using so-called game engines


Data visualization

Links

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Tour_3D&oldid=31611"