3-Graphics in Game (Game Development - UMT Spring 2017/2018)
5 likes1,019 views
This document provides an overview of computer graphics in game development, detailing 2D and 3D graphics, rendering techniques, and transformations. It covers key concepts such as raster and vector graphics, affine transformations, projections, and lighting models. Additionally, the document discusses texture mapping, shading techniques, and reflects on various light sources used in rendering.
![3D Geometric Models
• Surface: Surface is set of points that satisfy two or more equations and form a
continuous plane
FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
x = r cos (∅), y = r sin (∅), z = r2 [r= 1/3 to 1, ∅ = 0 to 2 𝜋]](https://image.slidesharecdn.com/3-graphicsingame-170215175434/85/3-Graphics-in-Game-Game-Development-UMT-Spring-2017-2018-18-320.jpg)
3-Graphics in Game (Game Development - UMT Spring 2017/2018)
- 2. Computer Graphics and Rendering • Computer graphics is the generation and manipulation of images using a computer as a renderingtool • Graphics rendering is a process of generating a graphical output from images or models by means of computer programs. It can contain geometry, camera viewpoint, texture and lighting information.Two popular graphics renderingtechniques are • Rasterization • Ray Tracing FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
- 4. 2D Graphics • 2D graphics is the computer-based generation of 2D visuals from digital images, text or 2D geometric models • There aretwo basic types of 2D graphics • Raster Graphics (DigitalImages) • Vector Graphics (2D Geometric Models) FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
- 5. Raster Graphics (Digital Images) • Raster graphics are digital images which contain picture elements called pixels, each of which has a particularlocation and value • Digital image represents rectangular grid of pixels • Each pixel in digital image has a color FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
- 6. Raster Graphics (Digital Images) • Sprite: A sprite is a 2D rectangular digital image that is drawn to the screen • Static Sprite: Contains a single sprite image (no animation) • Dynamic Sprite: Contains multiple spriteimages (image sequence creates animation) FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
- 7. Vector Graphics (2D Geometric Models) • Vector graphics are geometric models which are created through a sequence of commands or mathematical statements, a 2D geometric model file describes a series of points to be connected by edges or mathematicalequations • 2D geometric models contain points, lines, polygons and curves • Each pointin 2D geometric model has a definite position on X and Y axes FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
- 8. Vector Graphics (2D Geometric Models) • Point: Point or vertex is an exact position or location in space • Line: Line or edge is a connection between two points in space FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY Point at (1,1) Line from (0,0) to (1,1)
- 9. Vector Graphics (2D Geometric Models) • Polygon: Polygon is closed shapeformed with straight lines FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY Polygon with lines (0,0) to (1,0) (1,0) to (1,1) (1,1) to (0,1) (0,1) to (0,0)
- 10. Vector Graphics (2D Geometric Models) • Curve: Curve is set of points that satisfy one or more equations and form a continuouslybendingline without angles FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY x2+y2 = r2 y = sin(x)
- 12. 3D Graphics • 3D graphics is the computer-basedgeneration of3D visuals from 3D geometric models • 3D geometric models are created through a sequence of commands or mathematical statements, a 3D geometric model file describes a series of points to be connected by edges or mathematicalequations • 3D geometric models contain points, lines, faces and surfaces • Each pointin 3D geometric model has a definite position on X, Y and Z axes FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
- 13. 3D Geometric Models • Point: Point or vertex is an exact position or location in space FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY Point at (1,1,1)
- 14. 3D Geometric Models • Line: Line or edge is a connection between two points in space FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY Line from (1,1,1) to (2,2,2)
- 15. 3D Geometric Models • Face: Face is closed shapeformed with straight lines which is equivalentto polygon FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY Face with lines (0,0,1) to (1,1,1), (1,1,1) to (2,0,2), (2,0,2) to (0,0,1)
- 16. 3D Geometric Models • Mesh: Mesh is composed of points, lines and faces that defines a 3D shape FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY Mesh of unit cube
- 17. 3D Geometric Models • Meshes FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
- 18. 3D Geometric Models • Surface: Surface is set of points that satisfy two or more equations and form a continuous plane FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY x = r cos (∅), y = r sin (∅), z = r2 [r= 1/3 to 1, ∅ = 0 to 2 𝜋]
- 20. Coordinate Spaces • A coordinatespacerepresents an object’s relationship to the rest of the scene • Local Coordinate Space: Coordinates of object are defined locally with respect to the object itself (usingan origin pointwhich exists within the object) • Global (World) Coordinate Space: Coordinates of object are global with respect to the scene (using an origin point which exists within the scene) • Object in a scene is represented byits position and orientation FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
- 21. Affine Transformations • Affine transformation is any transformation which preserves collinearity (points, straightlines and planes) after transformation • Basic affine transformationsare • Translate • Rotate • Scale • Shear FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
- 22. Translate • Translate changes position of 2D or 3D object in space in direction of at least one axis by some units FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY Translated in positive x-axis direction by 5 units Translated in negative x-axis direction by 5 units 5 5
- 23. Rotate • Rotate a 2D object at particular angle from its origin and rotate a 3D object around at least one axis at particularangle FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY Rotated at angle of 45 degrees Rotated at angle of 45 degrees around z-axis
- 24. Scale • Scale changes size of a 2D or 3D object in space along at least one axis by some factor FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY Scaled up along x-axis by 2 factor Scaled down along y-axis by 0.5 factor
- 25. Shear • Shear slants shapeof a 2D or 3D object along particularaxis by some factor FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY Sheared along positive x-axis by 0.25 factor Sheared along negative x-axis by 0.25 factor
- 27. Projection • Projection is the display of 3D objects on a 2D plane also known as the view plane (output display - viewport with camera perspective and viewpoint), defines how objects will appear on the screen after mappingto 2D • Projection is formed by intersection of projector lines with the viewing plane • Two types of projections • ParallelProjection • Perspective Projection FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
- 28. Parallel Projection • Orthographic: Projector lines are paralleland perpendicular to the view plane • Oblique: Projector lines are parallelbut not perpendicular to the view plane FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY View plane View plane Front view Top view Side view Actual object
- 29. Perspective Projection • 1 Point Perspective: Lines of any1 axis convergeto its vanishingpointin view plane FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY
- 30. Perspective Projection FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY • 2 Point Perspective: Lines of any 2 axes converge to their vanishing points in view plane
- 31. Perspective Projection FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY • 3 Point Perspective: Lines of all 3 axes convergeto their vanishingpoints in view plane
- 33. Coloring FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY • Coloring is applying solid colors to a geometric model • Every point (vertex) in a geometric model contains color information that is applied on a polygon (face) which contains that point (vertex) Polygons with single color Polygons with multiple colors
- 34. Texturing Mapping FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY • Texture: Array of values (1D, 2D, 3D) containing color, alpha, depth and normal. Can be loaded from images or generated procedurallybya program • Texel: A single array element in a texture which is characterized by texture coordinates ranges from 0 to 1 • Texture Mapping: Process of applying texture to a geometric model. Point (vertex) in a geometric modelcontain texture coordinateinformation thatis mapped to a texture
- 35. Texturing Mapping FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY 0 1 0 1 u v 2D Texture with texture coordinates 3D Geometric model Texture mapped
- 36. Texturing Mapping FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY Texture mapping of a cube (cube mapping)
- 37. Other Maps & Mappings FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY • Height Map: Grayscale8-bit image which represents informationin 1 dimension • Bump Mapping: Create fake bumps on the surface of object by perturbing the surfacenormals which are used in lighting calculations • Displacement Mapping: Manipulatethe position of points of a geometric model • Normal Map: Color RGB 24-bit image which represents informationin 3 dimensions • Normal Mapping: Create fake depth illusions on the surface of object by changing the surfacenormals in 3 dimensions which are used in lighting calculations
- 40. Lighting FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY • Light is emitted by light sources • When light interacts with object, it gets reflected (scattered) or absorbed bysurface • Lighting: The process of computing the light intensity reflected from a surface Light source Human eye Object
- 41. Shading FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY • Process of assigning a color to a pixel (creates illusion of depth in object by varying the amount of darkness by evaluating angles between light rays, surface normals and camera) • Two most common types of shading • Flat Shading: Pixels on the same polygon (surface) havesamecolor • Smooth Shading: Each pixel haveits own (usuallydifferent) color
- 42. Shading FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY Flat shading Smooth shading
- 43. Light Sources FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY • Ambient Light: It does not have a direction or position and its intensity is constant at all points in a scene • Point Light: Light rays are emitted from a point at some position in all possible directions and their intensity decreases with squareofdistance Point light
- 44. Light Sources FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY • Spot Light: Light rays are emitted from a point at some position that are directed with cone projection and their intensity is highest at the center which decreases with square of distance Spot light
- 45. Light Sources FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY • Directional Light: Light rays are emitted in specified fixed direction (as if the point is infinitely far away) and their intensity remains constant • Area Light: Light rays are emitted from a 2D area in all directions uniformly across their surfacearea and their intensity decreases with squareofdistance Directional light
- 46. Light Reflections FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY • Ambient Reflection: Reflect light from other objects • Diffuse Reflection: Reflect incoming light in all outgoing directions (assume equally) which is independentfrom the viewing direction, for examplea rough surface • Specular Reflection: Reflect incoming light in the direction of reflection which is dependenton the viewing direction, for examplea shinysurfaceor mirror is ideal Diffuse SpecularIncoming
- 47. Light Reflections FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY Ambient Diffuse Specular Combine
- 48. Reference • Game Graphics Programming - Allen Sherrod • 3D Math Primer for Graphics and Game Development - Fletcher Dunn, Ian Parberry • Fundamentals of Computer Graphics - Peter Shirley, Steve Marschner • Principles of Computer Graphics – Shalini Govil FROM: HAFIZ AMMAR SIDDIQUI – COURSE: GAME DEVELOPMENT – INSTITUTE: UNIVERSITY OF MANAGEMENT AND TECHNOLOGY