Filling The Pipeline CS418 Computer Graphics John C. Hart Window - - PowerPoint PPT Presentation

▶
filling the pipeline
SMART_READER_LITE
LIVE PREVIEW

Filling The Pipeline CS418 Computer Graphics John C. Hart Window - - PowerPoint PPT Presentation

Sep 30, 2023 269 likes •417 views

Filling The Pipeline CS418 Computer Graphics John C. Hart Window Coordinates (1,1) (-1,1) (-1,-1) (1,-1) Points (1,1) (-1,1) [-0.6, 1.0, -0.6, 0.6, -0.2, 0.6, -0.2, -0.6, -0.6, -0.6, -0.6, -1.0, 0.6, -1.0, 0.6, -0.6, 0.2, -0.6,

slide-1
SLIDE 1

Filling The Pipeline

CS418 Computer Graphics John C. Hart

slide-2
SLIDE 2

Window Coordinates

(-1,-1) (1,-1) (1,1) (-1,1)

slide-3
SLIDE 3

Points

[-0.6, 1.0,

  • 0.6, 0.6,
  • 0.2, 0.6,
  • 0.2, -0.6,
  • 0.6, -0.6,
  • 0.6, -1.0,

0.6, -1.0, 0.6, -0.6, 0.2, -0.6, 0.2, -0.6, 0.6, 0.6, 0.6, 1.0]; gl.drawArrays( gl.POINTS,…) (-1,-1) (1,-1) (1,1) (-1,1)

slide-4
SLIDE 4

Lines

(-1,-1) (1,-1) (1,1) (-1,1) [-0.6, 1.0,

  • 0.6, 0.6,
  • 0.2, 0.6,
  • 0.2, -0.6,
  • 0.6, -0.6,
  • 0.6, -1.0,

0.6, -1.0, 0.6, -0.6, 0.2, -0.6, 0.2, -0.6, 0.6, 0.6, 0.6, 1.0]; gl.drawArrays( gl.LINES,…)

slide-5
SLIDE 5

Line Strip

(-1,-1) (1,-1) (1,1) (-1,1) [-0.6, 1.0,

  • 0.6, 0.6,
  • 0.2, 0.6,
  • 0.2, -0.6,
  • 0.6, -0.6,
  • 0.6, -1.0,

0.6, -1.0, 0.6, -0.6, 0.2, -0.6, 0.2, -0.6, 0.6, 0.6, 0.6, 1.0]; gl.drawArrays( gl.LINE_STRIP,…)

slide-6
SLIDE 6

Line Loop

(-1,-1) (1,-1) (1,1) (-1,1) [-0.6, 1.0,

  • 0.6, 0.6,
  • 0.2, 0.6,
  • 0.2, -0.6,
  • 0.6, -0.6,
  • 0.6, -1.0,

0.6, -1.0, 0.6, -0.6, 0.2, -0.6, 0.2, -0.6, 0.6, 0.6, 0.6, 1.0 ]; gl.drawArrays( gl.LINE_LOOP,…)

slide-7
SLIDE 7

Triangles

(-1,-1) (1,-1) (1,1) (-1,1) [-0.6, 1.0,

  • 0.6, 0.6,
  • 0.2, 0.6,
  • 0.2, -0.6,
  • 0.6, -0.6,
  • 0.6, -1.0,

0.6, -1.0, 0.6, -0.6, 0.2, -0.6, 0.2, -0.6, 0.6, 0.6, 0.6, 1.0]; gl.drawArrays( gl.TRIANGLES,…)

slide-8
SLIDE 8

Triangles

(-1,-1) (1,-1) (1,1) (-1,1) [-0.6, 1.0,

  • 0.6, 0.6,
  • 0.2, 0.6,
  • 0.6, 1.0,
  • 0.2, 0.6,

0.6, 1.0,

  • 0.2, 0.6,

0.2, 0.6, 0.6, 1.0, 0.2, 0.6, 0.6, 0.6, 0.6, 1.0, …]; gl.drawArrays( gl.TRIANGLES,…)

slide-9
SLIDE 9

No T Vertices!

(-1,-1) (1,-1) (1,1) (-1,1)

Triangle edges should

NEVER

pass through a neighboring vertex

slide-10
SLIDE 10

Triangle Strip

(-1,-1) (1,-1) (1,1) (-1,1) [-0.6, 1.0,

  • 0.6, 0.6,
  • 0.2, 0.6,
  • 0.2, -0.6,
  • 0.6, -0.6,
  • 0.6, -1.0,

0.6, -1.0, 0.6, -0.6, 0.2, -0.6, 0.2, -0.6, 0.6, 0.6, 0.6, 1.0]; gl.drawArrays( gl.TRIANGLE_STRIP,…)

slide-11
SLIDE 11

Triangle Strip

(-1,-1) (1,-1) (1,1) (-1,1) First two vertices prime the pump, then every new vertex creates a triangle connecting it to the previous two vertices [-0.6, 1.0, 0.6, 1.0,

  • 0.2, 0.6,

0.2, 0.6,

  • 0.2, -0.6,

0.2, -0.6, 0.6, -1.0, 0.6, -0.6]; […]; gl.drawArrays( gl.TRIANGLE_STRIP,…)

slide-12
SLIDE 12

Triangle Fan

(-1,-1) (1,-1) (1,1) (-1,1) First two vertices prime the pump, then every new vertex creates a triangle connecting it to the previous vertex and the first vertex [-0.2, 0.6,

  • 0.6, 0.6,
  • 0.6, 1.0,

0.6, 1.0, 0.2, 0.6, 0.2, -0.6,

  • 0.2, -0.6];

[…]; […]; […]; gl.drawArrays( gl.TRIANGLE_FAN,…)

slide-13
SLIDE 13

Indexed Face Set

  • Popular file format

– VRML, Wavefront “.obj”, etc.

  • Ordered list of vertices

– Prefaced by “v” (Wavefront) – Spatial coordinates x,y,z – Index given by order

  • List of polygons

– Prefaced by “f” (Wavefront) – Ordered list of vertex indices – Length = # of sides – Orientation given by order

v x1 y1 z1 v x2 y2 z2 v x3 y3 z3 v x4 y4 z4 f 1 2 3 f 2 4 3

(x1,y1,z1) (x2,y2,z2) (x3,y3,z3) (x4,y4,z4)