CT336/CT404Graphics & Image Processing

Section 2:

3D Coordinate Systems and Projections

Introduction to X3D

3D Coordinate Systems

In a 3D coordinate system, a point P is referred to by three real numbers (coordinates): x, y, z

These coordinates refer to the position of P relative to the origin (0,0,0) in terms of the three dimensions

The meaning of x, y, and z are not universally defined, but normally y rather than z is the ‘up’ axis

In this case z defines the coordinate’s

distance ‘out of’ the monitor,

or in other words, negative z values

go ‘into’ the monitor xz

y

3D Viewing: Planar Projection

Parallel Projection and Perspective Projection

projectors

projection

projection plane

Orthogonal Parallel Projection

1 point Perspective Projection

projection plane

centre of projection

xy

z

Parallel Projections

Oblique

Orthographic

Multi-View

Orthographic

Orthographic Projection

Isometric Projection

• Angle between each (projected)

principal axis is 120 degrees

• Defined as a set of rotations,

followed by a normal

orthographic projection

Perspective Projections

1-Point Perspective Projection

HTML5/Canvas Demo

See perspectiveProjectionDemo.pdf

Order of vertices:

Graphics APIs

API: Application Programming Interface

Graphics APIs assist the developer to make

graphics applications

Low-Level (Procedural) APIs

E.g. OpenGL, Canvas

High-Level (Descriptive) languages

E.g. VRML/X3D

Hardware

API

Application

Software

Low Level Graphics APIs

Low Level Graphics APIs:

Libraries of graphics functions that can be accessed from

a standard programming language

Procedural rather than descriptive => fast!

Procedural: the programmer calls the graphics functions

which carry out operations immediately – programmer

also has to write all other application code: interface, etc.

Examples: OpenGL, DirectX, Java Media APIs

Examples that run inside the browser (Javascript):

Canvas, SVG

High Level Graphics APIs

High Level Graphics APIs:

The programmer describes the required graphics,

animations, interactivity etc. and doesn't need to

deal with how this will be displayed and updated

Descriptive rather than procedural => slower and

less flexible, because it is generally interpreted

and general purpose rather than task specific

Example: VRML/X3D

Virtual Reality Modelling Language – VRML.. and its successor X3D

Internet standard for describing 3-D virtual worlds - to be explored using a 'web browser or stand-alone viewing software

Normally use a 'web browser plug-in, e.g. "Cosmo Player" from Silicon Graphics.

Many of the available plug-ins are listed at:

http://www.web3d.org/x3d-resources/content/examples/X3dResources.html

Also, the Instant Reality Player is good:

• http://www.instantreality.org/

Or, Octaga Player:

http://www.octagavs.com/softwarem/octaga-player

Features include animation, sounds, support for movie files, an event model for user interaction, and complex scripting via Java or JavaScript

X3D is the ISO standard XML-based file format for representing 3D computer graphics, the successor to VRML

VRML/X3D Web Sites

Web3D.org provides up-to-date information and software, example worlds, documentation, etc: http://www.web3d.org/

Wiley's Web site provides many of the examples that are used in this module (in VRML syntax): http://www.wiley.com/compbooks/vrml2sbk/cover/cover.htm

Some X3D sites: http://www.web3d.org/getting-started-x3d

http://x3dgraphics.com/

X3D Files

Text files, written in a text editor or

authoring package, describing 3D

'worlds' for the browser/viewer to

interpret and draw

.x3d file extension

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.0//EN"

"http://www.web3d.org/specifications/x3d-3.0.dtd"> <X3D

xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' profile='Full' version='3.0'

xsd:noNamespaceSchemaLocation= 'http://www.web3d.org/specifications/x3d-3.0.xsd'>

<Scene DEF='scene'>

<Shape>

<Cylinder radius='5'/>

</Shape>

</Scene>

</X3D>

Nodes and Fields

Nodes are the building blocks of a VRML or X3D file. They describe such things as:

shapes (as in example above)

colours

lights

viewpoints

position and orientation information

animation timers

sensors

To define a node, you require:

the type of node (e.g. Shape)

a set of tags, e.g. <Cylinder> </Cylinder> delimiting the node

some fields and their values (e.g. height=2.0)

Fields define the properties of a node:

They relate to an object's appearance and behaviour.

Each field has a default value (e.g. radius=1.0) - so you only need to specify a field if it's value is to be different to the default.

Node Names

You can DEFine a name for any node: this will let you USE that node

more than once in an X3D file without having to detail it over and over.

The usual variable naming rules hold.

The node with the defined name is the original node, and each re-use is

called an instance.

Field values can only be set in the original node… not real OOP!

Example: 2 identical

cylinders occupying

the same space!

<Scene DEF='scene'>

<Shape>

<Cylinder DEF='cyl1' radius='5'/>

</Shape>

<Shape>

<Cylinder USE='cyl1'/>

</Shape>

</Scene>

X3D Primitives

Primitive shapes are standard and predefined, and can be placed together

to build more complex shapes

They are always centred at the ‘world’ origin. (Use Transform nodes to

move them – see later).

These nodes only make sense when inside a Shape node

<Box size='2 2 2'/>

<Cone height=2.0

bottomRadius=1.0

side=TRUE

bottom=TRUE /><Sphere radius=1.0 />

<Cylinder

radius=1.0

height=2.0

side=TRUE

top=TRUE

bottom=TRUE />

Groups

The Group node is used to group together other

XML nodes into a single entity

Typical children include Shape nodes and other

Group nodes

<Scene DEF='scene'>

<Group bboxCenter='0 0 0' bboxSize='-1 -1 -1'>

<Shape>

<Box/>

</Shape>

</Group>

</Scene>

Groups/Primitives Example

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D

3.0//EN" "http://www.web3d.org/specifications/x3d-3.0.dtd"><X3D

xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' profile='Full' version='3.0'

xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.0.xsd'>

<Scene DEF='scene'>

<Group>

<Shape>

<Box size='25 2 2'/>

</Shape>

<Shape>

<Box size='2 25 2'/>

</Shape>

<Shape>

<Box size='2 2 25'/>

</Shape>

</Group>

</Scene>

</X3D>

Another Example

<Scene DEF='scene'>

<Group>

<Shape>

<Box size='10 10 10'/>

</Shape>

<Shape>

<Sphere radius='7'/>

</Shape>

<Shape>

<Cylinder height='0.5' radius='12.5'/>

</Shape>

<Shape>

<Cylinder height='20' radius='4'/>

</Shape>

<Shape>

<Cylinder height='30' radius='3'/>

</Shape>

<Shape>

<Cylinder height='60'/>

</Shape>

</Group>

</Scene>

Basic X3D Materials

<Scene DEF='scene'>

<Shape>

<Appearance>

<Material diffuseColor='1 0 0'/>

</Appearance>

<Cylinder radius='5'/>

</Shape>

</Scene>

The Material Node

Diffuse reflection is caused by light

scattering off a surface in all directions -

the result is a dull effect with no sparkles

or glints

Specular reflection is caused by light

bouncing off a shiny surface in a

predictable way

Emissive Colour refers to a surface that

glows with its own light

A material’s ambient intensity defines how

strongly it reacts to ambient lighting (see

later)

<Material

diffuseColor = "1 0 1"

specularColor = "1 1 0"

emissiveColor = "1 0 0"

ambientIntensity = "1 1 1"

transparency = 0

shininess = 0.5

/>

A Material node is used to

specify the material component

of an Appearance node

An Appearance node is used to

specify the appearance of a

Shape

X3D Text

The Text node is used to create 3D text

Text nodes are used as the value for the geometry of Shape

nodes

FontStyle nodes are used to specify the fontStyle field of

Text nodes

<Text

string = ' "String1" "String2" "StringX" '

length = ' 1 2 3 '

maxExtent = 0.0 >

<FontStyle />

</Text>

Text Example #1

<Scene DEF='scene'>

<Shape>

<Text string='"Qwerty" "Qwerty"' length='3 4'/>

</Shape>

</Scene>

• The length field allows you to

specify the exact rendered

length of each of the lines of

text, in world units

Text Example #2

<Scene DEF='scene'>

<Shape>

<Text string='"Qwerty Uiop" "Asdf"' maxExtent='4'/>

</Shape>

</Scene>

Text Example #3

<Scene DEF='scene'>

<Group>

<Shape>

<Appearance DEF='White'>

<Material/>

</Appearance>

<Text string='First'>

<FontStyle family='SERIF' justify='END' style='ITALIC'/>

</Text>

</Shape>

<Shape>

<Appearance USE='White'/>

<Text string='Second'>

<FontStyle family='SANS' justify='BEGIN' style='BOLD'/>

</Text>

</Shape>

</Group>

</Scene>