9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping.

9.1Si23_03

SI23Introduction to Computer

Graphics

SI23Introduction to Computer

Graphics

Lecture 9 – Clipping

9.2Si23_03

ClippingClipping

Fundamental operation in computer graphics

Extracts a portion of graphical data we wish to see

Needs to be fast, so often implemented in hardware

9.3Si23_03

Clipping Points to a Window

Clipping Points to a Window

PQ

.

.

xmin xmax

ymin

ymax

(x,y) VISIBLE IF xmin < x < xmax; ymin < y < ymax

Here a simple test can be applied:

9.4Si23_03

Clipping Lines to a Window

Clipping Lines to a Window

A

B

C

D

E

F G

H

I

J

Can we quickly recognise lines which need clipping?

9.5Si23_03

Clipping to a WindowClipping to a Window

Looking at end-points gives us a quick classification:– Both ends visible => line visible (AB)– One end visible, other invisible =>

line partly visible (CD)– Both ends invisible:

If both end-points lie to same side of window edge, line is invisible (EF)

Otherwise, line may be invisible (IJ) or partially visible (GH)

9.6Si23_03

Cohen-Sutherland Line Clipping Algorithm


Each end-point is coded according to its position relative to the window– Four-bit code assigned as follows:

Bit 1 Set if x < xmin

Bit 2 Set if x > xmax

Bit 3 Set if y < ymin

Bit 4 Set if y > ymax

Both end-point codes 0000 => VISIBLE

Logical AND = NOT 0000 => INVISIBLE

Logical AND = 0000 => INVISIBLE or PART VISIBLE

1001 1000 1010

0001 0000 0010

0101 0100 0110

9.7Si23_03



To clip P1P2:– Check if P1P2 totally visible or invisible– If not, for each edge in turn

(left/right/bottom/top):(i) Is edge crossed ? (if so, the

corresponding bit is set for ONE of the points, say P1)

(ii) If so, replace P1 with intersection with edge.

9.8Si23_03

ExampleExample

Clip againstleft, right,bottom, topboundaries in turn.

P1: 1001P2: 0100

P1

P2

x=xmin

P1’

First clip to leftedge, givingP1’P2

9.9Si23_03

ExampleExample

P2

x=xmin

P1’ P1’: 1000P2 : 0100

No need to clipagainst right edge

Clip againstbottom gives P1’P2’

Clip against topgives P1’’P2’

P2’

P1’’

9.10Si23_03

Calculating the Intersection

Calculating the Intersection

To calculate intersection of P1P2 with, say left edge:

Left edge: x = xmin

Line : y - y2 = m (x-x2)

where m = (y2 - y1) / (x2 -x1)

Thus intersection is (xmin, y*)

where y* = y2 + m (xmin - x2)

P1

P2

9.11Si23_03

Other Line ClippersOther Line Clippers

Cohen-Sutherland is efficient for quick acceptance or rejection of lines.

Less so when many lines need clipping.

Other algorithms are:– Liang-Barsky– Nicholl-Lee-Nicholl

see:Hearn and Baker for details

9.12Si23_03

Ivan SutherlandIvan Sutherland

Founder figure of computer graphics

Sketchpad developed in 1963

See:

http://www.sun.com/960710/feature3/ivan-profile.html

9.13Si23_03

Clipping in SVGClipping in SVG

There is very powerful clipping support in SVG– Elements are clipped against a path

The clip path can be more general than just a rectangle

<clipPath id=“clipper”><rect x=“50” y=“50” width=“100” height=“100”/>

</clipPath>

9.14Si23_03

Clipping in SVGClipping in SVG

This clip path is then associated with the drawing elements to be clipped, as part of the style attribute

<g style=“stroke:black;clip-path:url(#clipper)”>{… drawing elements…}

</g>

9.15Si23_03

Polygon ClippingPolygon Clipping

Basic idea: clip each polygon side - but care needed to ensure clipped polygon is closed.

A

B

C

D

E

F

9.16Si23_03

Sutherland-Hodgman Algorithm


This algorithm clips a polygon against each edge of window in turn, ALWAYS keeping the polygon CLOSED

Points pass through as in a pipeline

INPUT: List of polygon vertices

OUTPUT: List of polygon vertices on visible side of window edge

9.17Si23_03



Consider a polygon side:

starting vertex S; end vertex P

and window edge x = xmin.

What vertices are output?

xmin xmin xmin xmin

S

P

S

P

S

P

S

P

I I

OUTPUT: - I, P I P

9.18Si23_03

Example - Sutherland-Hodgman Algorithm


Take each edge in turn -start with left edge

Take each point in turn:

(i) Input point and call it P- thus P = A

(ii) If P is first point:- store as P1

- output if visible (not inthis particular example)- let S = P

A

B

C

D

E

F

Input: A B C D E F

9.19Si23_03



A

B

C

D

E

F

Input: A B C D E F

(iii) If P not first point,then if SP crosses windowedge:- compute intersection I- output Ioutput P if visible(iv) let S = P

Output: A’ B C D E F

A’

9.20Si23_03



Finally, if some pointshave been output, thenif SP1 crosses windowedge:- compute intersection I- output I

A

B

C

D

E

F

Input: A B C D E F

A’

G

Output: A’ B C D E F G

9.21Si23_03

Example - after clipping to left edge

Example - after clipping to left edge

B

C

D

E

F

A’

G

The result of clippingagainst the left edge

9.22Si23_03

Example - clip against right edge

Example - clip against right edge

B

C

D

E

F

A’

G

E’

E’’

B

C

D

F

A’

G E’

E’’

INPUT: A’ B C D E F G OUTPUT: A’ B C D E’ E’’ F G

9.23Si23_03

Example - clip against bottom edge

Example - clip against bottom edge

B

C

D

F

A’

G E’

E’’E’’’

F’

B

C

D

A’

G E’

E’’’F’

INPUT: A’ B C D E E’ E’’ F G OUTPUT: A’ B C D E’ E’’’ F’ G

9.24Si23_03

Example - clip against top edge

Example - clip against top edge

B

C

D

A’

G E’

E’’’F’

C

D

A’

G E’

E’’’F’

A’’ B’ A’’ B’

INPUT: A’ B C D E E’ E’’’ F’ G OUTPUT: A’ A’’ B’ C D E’ E’’’ F’ G

9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping.

Documents

Transcript of 9.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 9 – Clipping.