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>