Computer Graphics CSI4130 – Winter 2019
Jochen Lang
EECS, University of Ottawa Canada
Drawing Curves and Surfaces
• Need a mathematical representation in order to draw in 2D and 3D, or we want more than points
• Examples – lines
– curves – planes – triangles
CSI4130 Computer Graphics
Curve Representations
• Explicit representation – Curve as a function
,0
• Implicit representation
– Curve as the zero-set of a function
• Parametric representation – Use of a free parameter
CSI4130 Computer Graphics
2D Implicit Curves
• Equation of a particular form:
• Consider a circle at the origin:
– Translate circle to a center point c
• Implicit Equation:
– Write as a vector equation:
CSI4130 Computer Graphics
Implicit Quadric Curves
• Quadrics are ellipses and parabolas and include the special cases of hyperbolas, circles and lines.
• Example: Circle
CSI4130 Computer Graphics
2D Lines
• Line equation
• Corresponds to
• Poor solution
– lines parallel to y-axis have
– infinite slope m and no intersect b with y axis
• BUT implicit lines only defined up to scale – free to choose different parameters
CSI4130 Computer Graphics
Implicit 2D Lines
• Chose other parameters
• Pick two points (0 and 1) on the line
– Implicit lines only defined up to scale, free to choose
CSI4130 Computer Graphics
Implicit 2D Line Equation
• Solve system of linear equations
• Multiply by denominator
• Dot product
CSI4130 Computer Graphics
Distance of a Point from a Line
• Use implicit formulation
• Signed distance d
CSI4130 Computer Graphics
Gradient
• (A, B) is the gradient of the line
• In general
• Partial derivative reminder
• Example:
CSI4130 Computer Graphics
Implicit 3D Curves
• Do not exist in the form
– Only degenerate cases of implicit surfaces – Intersection of 2 surfaces
• Often parametric curves are used instead
CSI4130 Computer Graphics
2D Parametric Curves
• Curve is controlled by a single parameter – Velocity t of the curve
– Construct the curve easily
– Vector form
• Parametric line equation – 2 points on the curve
CSI4130 Computer Graphics
Linear Interpolation
• In linear interpolation 2 points are connected by a line – Parametric line equation
• Rewrite as weighted average of 2 points – t determines the weight of each point
CSI4130 Computer Graphics
3D Parametric Curve
• Parametric curves work in any dimension
• Example: Spiral in 3D
CSI4130 Computer Graphics
3D Implicit Surfaces
• Same form than implicit 2D curves
• Gradient is normal to the surface tangent plane → lighting calculations
CSI4130 Computer Graphics
3D Implicit Plane Equation
• Vectors in the plane are normal to the plane normal – arbitrary point a in the plane
– Example: normal by cross product a,b,c 3 non-co-linear points in the plane
– Plane equation can be expressed as determinant
CSI4130 Computer Graphics
3D Parametric Surfaces
• Carries over from 2D/3D parametric curves but need additional parameter for surface (2D entity vs. 1D)
CSI4130 Computer Graphics
Curves and Surfaces in Three.js
• Various parametric curves and surfaces are available – Vertex position are generated and meshed for surfaces – Surface examples:
• SphereGeometry, TorusGeometry, PlaneGeometry, RingGeometry etc.
– Curve examples:
• THREE.Curve is the abstract base
• LineCurve is a parametric line (use with parameter t)
• BezierCurve3 and CatmullRomCurve3 are cubic splines in parameter t (Splines will be discussed later)
• TubeBufferGeometry extrudes a curves to a “tube” custom curves can be created and used based on
THREE.Curve.prototype
CSI4130 Computer Graphics
Next Lecture
• Triangles and Rasterization
– Textbook: Chapter 2.6, 2.7, 8.1.2, 8.3 – Triangles
– Triangle Rasterization
– Simple Anti-Aliasing
CSI4130 Computer Graphics