• 沒有找到結果。

Introduction to 3D Graphics

N/A
N/A
Protected

Academic year: 2022

Share "Introduction to 3D Graphics"

Copied!
46
0
0

加載中.... (立即查看全文)

全文

(1)

Introduction to 3D Graphics

Using OpenGL 3D

(2)

Bin SHENG © 2/46

Mesh objects with 3D polygons (triangles or quads usually)

Apply material properties to each object (for reflectance computation)

Texture-map (i.e., superimpose an image on) polygons as needed

Light scene

Place camera

Render (for each object/shape, for each polygon)

Enjoy the view (map it to the display)

Classical Polygon Graphics (H/W) Pipeline

3D Graphics using OpenGL – 9/13/2016

(3)

 Widely used in industry and academia for interactive or real- time 3D graphics

 Old fixed-function API (OpenGL 1.x) assisted rapid prototyping of simple 3D scenes with “classical” lighting effects

Experiment with simple ideas quickly

 Modern programmable API allows for more flexibility and control

TAs will initially provide shaders for projects/labs; you will write

your own in Labs 2 and 3

(4)

Bin SHENG © 4/46

 Material specification

Describes the light reflecting properties of the polygon

Color, shininess, reflectiveness, etc.

Provided as input to shader

Provide values as uniforms to apply to entire shapes

Provide values as attributes to apply to individual vertices

Specify yellow color of triangle as (1.0, 1.0, 0.3), an RGB triple

Alpha (translucency) can be specified as an additional parameter, or defaulted to 1.0

3D Polygons (1/2)

3D Graphics using OpenGL – 9/13/2016

(5)

OpenGL defaults to a right-handed coordinate system

Polygons are defined in a single array of vertices:

GLfloat vertexData[] = {

0, 75, 0, // Vertex 1 -50, 0, 50, // Vertex 2 50, 0, 50, // Vertex 3 };

This defines one triangle

A 3D shape would have multiple triangles in one array

Coordinate values are arbitrary - can set virtual camera up to capture any size scene, so use convenient values

Remember counter-clockwise winding order!

Surface normal uses right-hand rule: E1 x E2 is normal to plane defined by edges E1, E2

(6)

Bin SHENG © 6/46

Intensity and direction of all light that strikes a point on object's surface, whether directly from light source or after multiple bounces from other objects ( global illumination, inter-object reflection)

How an object's surface appears to us as it reflects, absorbs, and diffracts light (“material properties”)

Location of eye/camera relative to scene

Distribution of intensity per wavelength of incident light

Human visual system (HVS) and its

differential, highly non-linear response to light stimuli

Lights may have geometry themselves

Modern lighting/illumination models address these complexities (except for HVS)

Complexities of Light Reflection from Surfaces – Need to Know

3D Graphics using OpenGL – 9/13/2016

(7)

Classic lighting models (also called illumination or reflection models, not to be confused with shading models discussed later) developed at the dawn of raster graphics in early 70s.

Epicenter at University of Utah in SLC where Ivan Sutherland worked with David Evans, a Mormon

Spawned the Evans & Sutherland flight simulator (with graphics) business

Other pioneers:

Henri Gouraud (shading model – filling in interior pixels from colors at vertices of a triangle)

Bui Tuong Phong (lighting and shading models)

Martin Newell (the Utah teapot (SIGGRAPH icon), meshing algorithms)

James Clark (geometry engine, Silicon Graphics, Netscape)

John Warnock (Hidden Surface Elimination, Adobe)

Ed Catmull (splines, Pixar, Disney)

Alvy Ray Smith (SuperPaint, HSV color space, partnered with Catmull on LucasFilm -> Pixar)

etc...

(8)

Bin SHENG © 8/46

Back then:

CPUs > 6 orders of magnitude less powerful, no GPU to speak of, just plot pixels

memory limited (measured in KB!)

Even on today's machines, a physically accurate light simulation requires computational power beyond the capabilities of

supercomputers!

An Imperfect World

3D Graphics using OpenGL – 9/13/2016

(9)

Bin SHENG © 9/46

Color of point on surface dependent on lighting of scene and surface material

First approximation: model diffuse reflection from a matte surface (light reflected equally in all directions, viewer- independent) based only on angle of surface normal to light source

Modeling light "drop-off“ with angle to light

Lambert's diffuse-reflection cosine law

models reflected light intensity I

In between: Some fraction of light reflected

θ

dir

cos I

I =

Note: Idir and other quantities are fractions in [0, 1].

These units are convenient BUT completely arbitrary and not physically-based!

Facing light source:

Maximum reflection to light source:

No reflection

3D Graphics using OpenGL – 9/13/2016

Idir = measure of intensity of directional light (all rays parallel) at point of contact with surface, like rays from “infinitely far away” sun

θ = angle between surface normal (n) and vector from light source ( )

(10)

Bin SHENG © 10/46

Lambert light attenuation based on surface's angle to light source

Visualization of Lambert's law in 2D

Simple Lighting (Illumination) Models (2/2)

θ

dir

cos I

I =

• Note: crudely approximate intrinsic material properties of object with RGB values. For example, the greater the R, the more reddish the object will appear under white light.

• In reality, need surface (micro)geometry and wavelength-dependent reflectivity, not just RGB 3D Graphics using OpenGL – 9/13/2016

(11)

Goal: finding color at each pixel,

preferably w/o having to evaluate a full lighting model at each pixel

First approach: Lambert's cosine law (flat/constant shading for whole facet)

faceted appearance, perfect for this rectangular pyramid.

What if we want to approximate a rounded object?

Lambert-shaded, faceted;

appearance is no longer ideal

http://math.hws.edu/graphicsbook/demos/c4/smooth-vs-flat.html

(12)

Bin SHENG © 12/46

First solution: increase the number of polygons

Better shape approximation, more expensive to render

Ultimately, still faceted when rendered (higher poly count => less faceted)

Adaptive meshing is an improvement - more polygons in areas of high curvature

Shading Rule (2/6)

“Utah Teapot” by Martin Newell 3D Graphics using OpenGL – 9/13/2016

(13)

Get this:

Want this:

faceted shading

smooth shading

(14)

Bin SHENG © 14/46

Gouraud smooth shading

compute lighting equation at each vertex of mesh (requires angle between normal, vector to light) for Lambertian diffuse reflection

linearly interpolate vertex color values to get colors at all points: C = C1 + t(C2- C1)

weighted averaging: the closer point is to a vertex, the more it is influenced by that vertex

How do we determine vertex colors? Need a normal…

Vertex normals are an artifice; the normal is mathematically undefined since a vertex is a discontinuity

Sol’n 1: use plane normal, get faceted shading

Sol’n 2: hack: average face/plane normals

Shading Rule (4/6)

Smooth Faceted

The normal at a vertex is the same as the plane normal. Therefore, each vertex has as many

normals as the number of planes it helps define.

Only one vertex normal per vertex; average of face normals of the faces the vertex is part of

3D Graphics using OpenGL – 9/13/2016

(15)

Vertex normals

if vertex used by only one face, normal is set to face's normal

typically computed from the face’s plane equation

otherwise, normal is set to average of normals of all faces sharing it

if mesh is not too coarse, vertex normal is a decent approximation to the normal of modeled surface closest to that vertex

adaptive meshing adds more triangles in areas with rapid changes in curvature

in assignments, you use some hacks to compute better approximations of the normal to the original surface

2D curve approximation (vertex normals in green)

3D mesh approximation (looking down on an irregular pyramid, face normals roughly cancel each other out, hence normal points out) Vertex normals shown in

color, face normals in black

(16)

Bin SHENG © 16/46

Programmable OpenGL API doesn’t provide any lighting or shading. Use shaders to implement lighting model and shading rule of your choice

to get flat shading, specify the same surface normal for vertices of the same facet (each vertex gets n normals, where n is the number of facets it is a part of)

to get smooth shading, you must specify a single shared normal for each (shared) vertex in the object

Shading Rule (6/6)

3D Graphics using OpenGL – 9/13/2016

Smooth

Faceted

(17)
(18)

Bin SHENG © 18/46

Sending vertex normal to the shader requires a small extension to the way we specify vertices

Each vertex is now a position plus a normal, e.g., GLfloat[] vertexData = {

-1, 0, 0, // Position 1 0, 0, -1, // Normal 1 1, 0, 0, // Position 2 1, 0, 0, // Normal 2

… };

Normals needn’t be axis-aligned, of course…

For flat shading a shared vertex has as many (position, normal) entries as the facets it’s a part of

3D Graphics using OpenGL – 9/13/2016

Vertex Normals

(19)

Non-geometric lights:

Ambient: crudest approximation (i.e., total hack) to inter-object (“global”) reflection - all surfaces receive same light intensity. Allows all facets to be minimally visible

Directional: illuminates all objects equally from a given direction; light rays are parallel (models sun, sufficiently far away)

Geometric lights:

Point: Originates from single point, spreads outward equally in all directions

Spotlight: Originates from single point, spreads outward inside cone’s directions

Point

Directional Spotlight

(20)

Bin SHENG © 20/46

Many models exist to approximate lighting physics – more accurate => more computation

Fixed-function OpenGL: Phong reflection model, survives today (though crude)

implemented in fixed function hardware for decades, easily implemented in shaders

approximates lighting by breaking down into three components: ambient, diffuse, specular

can think of these as coincident, independent layers, each with its own characteristics, and sum them to get the final result

is a non-global illumination model – no inter-object reflections, non-physically based

Phong Reflectance Model (2/7)

AMBIENT

Effect of light that is non-directional,

affecting all surfaces equally.

+

DIFFUSE Effect of directional light on a

surface with a dull/rough finish.

+

SPECULAR Effect of directional light on a shiny surface when the vector to the eye- point is closely aligned to the light’s reflected rays.

=

THE COMPOSITE

The three independent reflectivity types are accumulated to produce the result.

3D Graphics using OpenGL – 9/13/2016

(21)

𝐼𝐼

𝑡𝑡𝑡𝑡𝑡𝑡𝑡𝑡𝑡𝑡,𝜆𝜆

=

Equation is wavelength-dependent; approximate with separate equations for 𝜆𝜆 ∈ 𝑅𝑅, 𝐺𝐺, 𝐵𝐵

All values unitless real numbers between 0 and 1

Evaluates total reflected light 𝐼𝐼

𝑡𝑡𝑡𝑡𝑡𝑡𝑡𝑡𝑡𝑡,𝜆𝜆

at a single point, based on all lights

Phong Reflectance Model (3/7)

Ambient Component

𝐼𝐼

𝑡𝑡𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑡𝑡,𝜆𝜆

𝑘𝑘

𝑡𝑡𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑡𝑡,𝜆𝜆

𝑂𝑂

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝜆𝜆

+

Diffuse Component

Σ

𝑑𝑑𝑎𝑎𝑑𝑑𝑎𝑎𝑑𝑑𝑡𝑡𝑎𝑎𝑡𝑡𝑎𝑎𝑡𝑡𝑡𝑡 𝑡𝑡𝑎𝑎𝑙𝑙𝑙𝑡𝑡𝑑𝑑

𝐼𝐼

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝜆𝜆

𝑘𝑘

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝜆𝜆

𝑂𝑂

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝜆𝜆

(cos 𝜃𝜃 )

+ Σ

𝑙𝑙𝑎𝑎𝑡𝑡𝑎𝑎𝑎𝑎𝑡𝑡𝑑𝑑𝑎𝑎𝑑𝑑 𝑡𝑡𝑎𝑎𝑙𝑙𝑙𝑡𝑡𝑑𝑑

𝑓𝑓

𝑡𝑡𝑡𝑡𝑡𝑡

𝐼𝐼

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝜆𝜆

𝑘𝑘

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝜆𝜆

𝑂𝑂

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝜆𝜆

cos 𝜃𝜃 +

Specular Component

Σ

𝑑𝑑𝑎𝑎𝑑𝑑𝑎𝑎𝑑𝑑𝑡𝑡𝑎𝑎𝑡𝑡𝑎𝑎𝑡𝑡𝑡𝑡 𝑡𝑡𝑎𝑎𝑙𝑙𝑙𝑡𝑡𝑑𝑑

𝐼𝐼

𝑑𝑑𝑠𝑠𝑎𝑎𝑑𝑑𝑑𝑑𝑡𝑡𝑡𝑡𝑑𝑑,𝜆𝜆

𝑘𝑘

𝑑𝑑𝑠𝑠𝑎𝑎𝑑𝑑𝑑𝑑𝑡𝑡𝑡𝑡𝑑𝑑,𝜆𝜆

𝑂𝑂

𝑑𝑑𝑠𝑠𝑎𝑎𝑑𝑑𝑑𝑑𝑡𝑡𝑡𝑡𝑑𝑑,𝜆𝜆

cos 𝛿𝛿

𝑎𝑎

𝑙𝑙𝑎𝑎𝑡𝑡𝑎𝑎𝑎𝑎𝑡𝑡𝑑𝑑𝑎𝑎𝑑𝑑 𝑡𝑡𝑎𝑎𝑙𝑙𝑙𝑡𝑡𝑑𝑑

𝑓𝑓

𝑡𝑡𝑡𝑡𝑡𝑡

𝐼𝐼

𝑑𝑑𝑠𝑠𝑎𝑎𝑑𝑑𝑑𝑑𝑡𝑡𝑡𝑡𝑑𝑑,𝜆𝜆

𝑘𝑘

𝑑𝑑𝑠𝑠𝑎𝑎𝑑𝑑𝑑𝑑𝑡𝑡𝑡𝑡𝑑𝑑,𝜆𝜆

𝑂𝑂

𝑑𝑑𝑠𝑠𝑎𝑎𝑑𝑑𝑑𝑑𝑡𝑡𝑡𝑡𝑑𝑑,𝜆𝜆

cos 𝛿𝛿

𝑎𝑎

(22)

Bin SHENG © 22/46

Variables

𝜆𝜆 = wavelength / color component (e.g. R, G, and B)

𝐼𝐼𝑡𝑡𝑡𝑡𝑡𝑡𝑡𝑡𝑡𝑡,𝜆𝜆 = total amount of light reflected at the point

𝐼𝐼𝑡𝑡𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑡𝑡 = intensity of incident ambient light; similar for diffuse, specular incident light

𝑓𝑓𝑡𝑡𝑡𝑡𝑡𝑡 = attenuation function for a geometric light

𝑂𝑂 = innate color of object's material at specific point on surface (RGB approximation)

𝑘𝑘

= object’s efficiency at reflecting light

Since both 𝑂𝑂 and 𝑘𝑘 are dimensionless fractions we really only need one of them

Ambient component

𝐼𝐼𝑡𝑡𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑡𝑡,𝜆𝜆𝑘𝑘𝑡𝑡𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑡𝑡,𝜆𝜆𝑂𝑂𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝜆𝜆 -- think of 𝑘𝑘𝑡𝑡𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑡𝑡,𝜆𝜆 as the fraction of 𝐼𝐼𝑡𝑡𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑡𝑡 reflected for that 𝜆𝜆. Note that here we use 𝑂𝑂𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝜆𝜆 for the ambient component; in Sceneview we use distinct 𝑂𝑂𝑡𝑡𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑎𝑡𝑡,𝜆𝜆

effect on surface is constant regardless of orientation, no geometric information

total hack (crudest possible approximation to global lighting based on inter-object reflection), but makes all objects a little visible - scene looks too stark without it

Phong Reflectance Model (4/7)

3D Graphics using OpenGL – 9/13/2016

(23)

Bin SHENG © 23/46

Diffuse component (R component shown below, same for G, B) - viewer independent !

uses Lambert's diffuse-reflection cosine law

Σ 𝐼𝐼

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝑅𝑅

𝑘𝑘

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝑅𝑅

𝑂𝑂

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝑅𝑅

(cos 𝜃𝜃)

𝐼𝐼

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎

= light’s diffuse color

𝑘𝑘

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎

= the efficiency of incident light reflection

𝑂𝑂

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎

= innate color of object's diffuse material property at specific point

on surface

cos 𝜃𝜃 = Lambert's attenuation factor where 𝜃𝜃 is the angle between normal and light vector

3D Graphics using OpenGL – 9/13/2016

(24)

Bin SHENG © 24/46

Specular falloff of (cos δ)

n

Specular Component (for R) – viewer-dependent

highlights seen on shiny objects (plastic, metal, mirrors, etc.)

cosine-based attenuation factor ensures highlight only visible if reflected light vector and vector to viewer are closely aligned

n = specular power, how "sharp" highlight is – the sharper, the more intense

specular highlight of most metals are the color of the metal but those on plastic, shiny apple, pearl, etc. are mostly the color of the light (see Materials chapter 27)

Phong Reflectance Model (6/7)

e = viewpoint

r = reflected image of light source ℓ = vector from the light source n = surface normal

δ = angle between e and r n = specular coefficient

3D Graphics using OpenGL – 9/13/2016

Note: Fixed-function OpenGL uses a slightly different lighting model called Blinn-Phong. See 14.9.3

Σ

𝑡𝑡𝑎𝑎𝑙𝑙𝑙𝑡𝑡𝑑𝑑

𝐼𝐼

𝑑𝑑𝑠𝑠𝑎𝑎𝑑𝑑𝑑𝑑𝑡𝑡𝑡𝑡𝑑𝑑,𝜆𝜆

𝑘𝑘

𝑑𝑑𝑠𝑠𝑎𝑎𝑑𝑑𝑑𝑑𝑡𝑡𝑡𝑡𝑑𝑑,𝜆𝜆

𝑂𝑂

𝑑𝑑𝑠𝑠𝑎𝑎𝑑𝑑𝑑𝑑𝑡𝑡𝑡𝑡𝑑𝑑,𝜆𝜆

cos 𝛿𝛿

𝑎𝑎

(25)

Attenuation factor

Used in diffuse and specular light calculation:

Directional lights have no attenuation (infinitely far away)

Geometric lights (point lights, spot lights) get dimmer with distance

Inverse square law

area covered increases by square of distance from light

thus, light intensity is inversely proportional to square of distance from light

light twice as far away is one quarter as intense

though physics says inverse square law,

doesn't always look good in practice so OpenGL lets you choose attenuation function (quadratic, linear, or constant)

d

d

d

𝑓𝑓 𝑎𝑎𝑎𝑎𝑎𝑎

...+ Σ

𝑙𝑙𝑎𝑎𝑡𝑡𝑎𝑎𝑎𝑎𝑡𝑡𝑑𝑑𝑎𝑎𝑑𝑑 𝑡𝑡𝑎𝑎𝑙𝑙𝑙𝑡𝑡𝑑𝑑

𝑓𝑓

𝑡𝑡𝑡𝑡𝑡𝑡

𝐼𝐼

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝜆𝜆

𝑘𝑘

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝜆𝜆

𝑂𝑂

𝑑𝑑𝑎𝑎𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑑𝑎𝑎,𝜆𝜆

cos 𝜃𝜃 +...

(26)

Bin SHENG © 26/46

Goal: adding more detail to geometry of scene without adding more actual polygons

Solution: texture mapping

used extensively in video games, e.g., for backgrounds, billboards

also used for many other techniques such as level-of-detail management

cover the mesh's surface in stretchable "contact paper" with pattern or image on it

in general, difficult to specify mapping from contact paper to every point on an arbitrary 3D surface

mapping to planar polygons is easy: specify mapping for each vertex and interpolate to find mapping of interior points

Texture Mapping (1/2)

3D Graphics using OpenGL – 9/13/2016

(27)

Specifying "texture point" mapped to particular vertex

requires coordinate system for referring to positions within texture image

convention:

points on pixmap described in abstract floating-point "texture-coordinate system"

axes labeled u and v, range 0 to 1.

origin located at the upper-left corner of the pixmap

U axis (1,0) (0,0)

(0,1)

V a xi s

(28)

Bin SHENG © 28/46

Let’s map from two coplanar triangles from a face in the 3D model to a texture map

Texture map uses UV texture coordinates: just use ratios

Texture mapping arbitrary solids is much harder – we’ll study this later

Texture Mapping UV Coordinates

3D Graphics using OpenGL – 9/13/2016

Object Quad Face Texture Map

(29)

We add texture coordinates* in the same way we added normals GLfloat[] vertexData = {

-10, 0, 0, // Position 1 0, 1, 0, // Normal 1

0, 0, // Texture Coordinate 1 10, 0, 0, // Position 2

0, 1, 0, // Normal 2

1, 0, // Texture Coordinate 2

… };

* We’ll teach how to set up texture maps in Lab 3

(30)

Bin SHENG © 30/46

Create a brick wall by applying brick texture to plane

Produces realistic-looking image, but very few bricks in wall

Tiling increases number of apparent bricks

Texture Mapping (Tiling)

3D Graphics using OpenGL – 9/13/2016

(31)

Create a sky backdrop by applying a sky image to a plane

Would look unnatural if tiled

Stretch to cover whole plane

Your texture shader can implement tiling and stretching by multiplying UV

coordinates by a value >1 for tiling and <1 for stretching

(32)

Bin SHENG © 32/46

Camera Properties:

Perspective or Orthographic

Position: placement of camera

Look Direction: direction camera is aimed (vector determining lens axis)

Up Direction: rotates camera about look vector, specifying which way is “up” – must not be collinear to the look vector

Far-Plane Distance: objects behind do not appear

Near-Plane Distance: objects in front do not appear

Field Of View: (Width, height or diagonal angle)

Aspect Ratio (Relative width and height)

Camera (1/3)

3D Graphics using OpenGL – 9/13/2016

(33)

Perspective Projection

Look Vector

Position Projection of Up Direction Up Direction

Near-Plane Distance

Far-Plane Distance

FOV in y-direction

y

(34)

Bin SHENG © 34/46

Orthographic Projection

Camera (3/3)

3D Graphics using OpenGL – 9/13/2016

Height Width

Look Vector Near

distance

Position distance Far

Up vector Projection of up vector

(35)

Fixed-function API has support for perspective and orthographic cameras

With the Programmable API you must construct and supply all model, view, and projection matrices, and then use them in your shaders

In the Viewing lectures you will learn how to construct these

matrices yourselves, to use in the Camtrans lab (We will take care of the camera until then)

In the shader labs you will learn how the matrices are used in

shaders

(36)

Bin SHENG © 36/46

Pipeline of rendering with OpenGL

Calculate vertex data (position, normals, texture coords)

Calculate scene data (light position/type, camera position/orientation etc.)

Pass scene data to shader (specifying uniforms, in OGL parlance)

Pass vertex data to shader (specifying attributes, in OGL parlance)

Tell OpenGL to draw

To be extra clear:

You write most code in C++

The C++ code involves using the OpenGL API to set up data structures for scene geometry, lights, and camera, which are then passed to the shaders for execution

You write the shaders in GLSL to process this data for rendering

Easy enough, but just how do you pass data to shader?

3D Graphics using OpenGL – 9/13/2016

Rendering with OpenGL

(37)

What kinds of data do we have in the scene?

Vertex data (position, normal, tex coords)

Pass as attributes in a single large array

Requires two OpenGL objects

VBOs (Vertex Buffer Objects)

VAOs (Vertex Array Objects)

Also have data that remains constant across vertices (e.g., camera matrices)

Pass as uniforms using a named variable

(38)

Bin SHENG © 38/46

Used for data that remains constant for all vertices

e.g. color,* camera position, light position

Three steps

1. In GLSL shader => declare uniform variable

Ex: uniform vec3 color;

2. In C++ OpenGL => Find memory address of uniform variable

Ex: GLint color_loc = glGetUniformLocation(m_shaderID, "color");

3. In C++ OpenGL => Store data in memory address

Ex:

glUniform3f(color_loc, 0.5, 0.9, 0.8);

Note: 3f stands for 3 floats (RGB). To store 2 floats, use glUniform2f. To store 4 ints, use glUniform4i

See here for list of entire glUniform family

3D Graphics using OpenGL – 9/13/2016

Passing Data to Shader (2/5) -- Uniforms

* Here color is constant for the whole object, but it can also be a vertex attribute

(39)

// passing information for color

// ambient term is specified as RGB(A). Use glUniform4f to provide optional alpha value // this specifies a dark grey ambient “light”

glUniform4f(<Ambient Location>, 0.2, 0.2, 0.2, 1.0 ); // 4f = 4 floats

// passing information for lighting

glUniform3f(<Position Location>, 10.0, 5.0, 8.0 ); // 3f = 3 floats glUniform3f(<Direction Location>, 1.0, 2.0, 3.0 );

// specify an integer constant to describe type of light, here a point light glUniform1i(<Type Location>, POINT_LIGHT_TYPE); // 1i = 1 int

// To use a directional light

glUniform1i(<Type Location>, DIRECTIONAL_LIGHT_TYPE);

(40)

Bin SHENG © 40/46

Passing vertex data is more complicated than uniform data

Have vertex data (pos, normal, tex) in single large array

Note: In OGL parlance, pos, normal, tex etc. are attributes each vertex has

Two steps

1. Store data in Vertex Buffer Object (VBO)

2. Specify attribute layout in VBO with Vertex Array Object (VAO)

3D Graphics using OpenGL – 9/13/2016

Passing Data to Shader (4/5) – Vertex Data

(41)

VBO (Vertex Buffer Object) stores vertex data, such as position, normal, and texture coordinates. Created in C++ program, passed to shader

(all numbers below are really GL_FLOATs)

Meaningless w/o interpretation - VAO tells shader how attributes are stored

-5 0 0 0 0 -1 5 0 0 0 0 -1 0 7 0 0 0 -1

Position 1 Normal 1 Position 2 Normal 2 Position 3 Normal 3

Triangle 1

Position Pointer

Normal Pointer

Position Stride Size

Normal Stride

(42)

Bin SHENG © 42/46

For each attribute, VAO takes three parameters, details in lab 1

size parameter is how many values an attribute has (e.g. 3 for position)

stride specifies how far apart values of the same type are in our array

pointer is a pointer to the index of the first value of that attribute

Because VBO is byte array, multiply parameters by sizeof(Glfloat)

3D Graphics using OpenGL – 9/11/2014

Vertex Array Objects

Position 1 Normal 1 Position 2 Normal 2 Position 3 Normal 3

Triangle 1

Position Pointer: 0

Normal Pointer: 3*sizeof(GLfloat)

Stride: 6*sizeof(GLfloat) Size: 3*sizeof(GLfloat)

-5 0 0 0 0 -1 5 0 0 0 0 -1 0 7 0 0 0 -1

(43)

TA has written a guide to OpenGL:

http://www.cs.sjtu.edu.cn/~shengbin/course/cg/course.html Question 1:

Write a program to draw a simple red cube.

Question 2:

Write a program to draw a simple blue triangle.

Reference:

http://www.opengl-tutorial.org/beginners-tutorials/tutorial-2-the-first-triangle/

https://graphics.stanford.edu/courses/cs248-99/OpenGLSession/tri.html

http://antongerdelan.net/opengl/hellotriangle.html

(44)

Bin SHENG © 44/46

Question 3:

Write a C++ class to draw and move a car using the geometrical classes.

The car should be kind of similar to the one below. You can implement more complex car shapes if you want.

3D Graphics using OpenGL – 9/13/2016

Assignment 1- Introduction to OpenGL

(45)

Hands on exploration of concepts discussed in this lecture

Modeling smooth surfaces

http://math.hws.edu/graphicsbook/demos/c4/smooth-vs-flat.html

(46)

Bin SHENG © 46/46

Lighting and shading model

Demos (2/2)

http://sklardevelopment.com/graftext/ChapWPF3D/

See the “Materials and Reflectivity” part

3D Graphics using OpenGL – 9/13/2016

A different one with shader code http://www.mathematik.uni-

marburg.de/~thormae/lectures/graphics1/code/WebG LShaderLightMat/ShaderLightMat.html

參考文獻

相關文件

O.K., let’s study chiral phase transition. Quark

a) Excess charge in a conductor always moves to the surface of the conductor. b) Flux is always perpendicular to the surface. c) If it was not perpendicular, then charges on

z gases made of light molecules diffuse through pores in membranes faster than heavy molecules. Differences

Income is generated from wages and salaries, interest, rent and profits. In a labour-intensive industry such as tourism, a large part of income comes from wages and salaries earned

These images are the results of relighting the synthesized target object under Lambertian model (left column) and Phong model (right column) with different light directions ....

Reflection from Layered Surfaces due to Subsurface Scattering.. Pat Hanrahan

• Delta hedge is based on the first-order approximation to changes in the derivative price, ∆f , due to changes in the stock price, ∆S.. • When ∆S is not small, the

To illustrate how LINDO can be used to solve a preemptive goal programming problem, let’s look at the Priceler example with our original set of priorities (HIM followed by LIP