Colours and Textures PDF

Colours and Textures 3D Modelling Games and Multimedia Author: Alexandrino Gonçalves Last revision: 30/10/2024  Colour Digital games have developed into an entire genre that combines: Writing Sculpture Music...

Colours and Textures 3D Modelling Games and Multimedia Author: Alexandrino Gonçalves Last revision: 30/10/2024  Colour Digital games have developed into an entire genre that combines: Writing Sculpture Music Storytelling Cinematography Painting 3DM 2  Colour The colour of a surface is one of the most notorious feature of that surface Colours set the tone of a scene/game/movie and contribute, for example, to the personality of a 3D character 3DM 3  Surface Colour The colour we perceive on an object is directly related to the properties of the object surface itself But the colour appearance of that object is also influenced by: The colour of the illumination of all the light sources in the scene The geometry of those light sources The colour of the surrounding objects when using global illumination models such as ray-tracing or radiosity 3DM 4  Colour The color perceived by the human visual system is a wavelength in the electromagnetic spectrum 3DM 5  Colour Models The colour of a surface can be defined in a variety of colour models, such as: RGB CMYK HSL You must be aware that when an image is converted from an additive model (RGB) to a subtractive model (CMYK), a phenomenon called colour shifting occur, which led to some colour variations 3DM 6  RGB According to the Young-Helmholtz theory of the 3 stimuli (19th century), the human visual system interprets colour by stimulating the 3 visual pigments present in the retinal cones (there are also the rods), which have approximate sensitivity peaks at the following wavelengths: 630 nm (Red (R)) 540 nm (Green (G)) 450 nm (Blue (B)) 3DM 7  RGB (Additive) RGB: Red, Green, Blue Red + Green + Blue = White (255, 255, 255) Green + Blue = Cyan (0, 255, 255) Red+ Blue = Magenta (255, 0, 255) Red + Green = Yellow (255, 255, 0) ▪ Used in screens, projectors, video cameras… 3DM 8 Human Visual System vs RGB 3DM 9  CMYK (Subtractive) CMYK: Cyan, Magenta, Yellow, blacK Cyan + Magenta + Yellow  Black Yellow + Magenta = Red Yellow + Cyan = Green Cyan + Magenta = Blue ▪ Used in printers 3DM 10  HSL (Light-Based) HSL: Hue Saturation Luminance 3DM 11  Colour Palettes The success of a visual project, such as a digital game, is highly related to the harmony of the colours used and the psychological/cultural meaning of them We should take advantage of the meanings associated with colors Colours can be used to highlight something, diffuse information, indicate feelings, moods, etc. 3DM 12 Colour Palettes 3DM 13  Colour Palettes Thus, the colour palette selection is of paramount importance in the success of any digital (visual) project 3DM 14  Colour Palettes Final Fantasy X (2001) 3DM 15  Colour Palettes Silent Hill 2 (2001) 3DM 16  Colour Palettes The Elder Scrolls V: Skyrim (2011) 3DM 17  Colour Palettes Journey (2012) 3DM 18  Colour Palettes Halo 4 (2012) 3DM 19  Colour Palettes The Last of Us (2013) 3DM 20  Colour Palettes The Last of Us Part II (2020) 3DM 21  Colour Palettes Baldour’s Gate III (2023) 3DM 22  Colour Palettes Sega Rally Championship (1995) 3DM 23  Colour Palettes Edward Scissorhands (1990) 3DM 24  Colour Palettes The Silence of the Lambs (1991) 3DM 25  Colour Palettes Titanic (1997) 3DM 26  Colour Palettes Frozen (2013) 3DM 27  Colour Palettes Star Wars: The Force Awakens (2015) 3DM 28  Colour Palettes The Martian (2015) 3DM 29  Colour Palettes The Revenant (2015) 3DM 30  Colour Palettes Alice Through the Looking Glass (2016) 3DM 31  Colour Palettes 1917 (2019) 3DM 32  Colour Palettes Joker: Folie à Deux (2024) 3DM 33  Colour Palettes Inception (2010) 3DM 34 How to choose a colour palette? Various colour schemes: Analogous: one main colour and two adjacent Monochromatic: multiple shades of a single colour Triad: three equidistant colours Complementary: two complementary colours Tetrad: four equidistant colours Tools: color.adobe.com paletton.com colorpalette.imageonline.co … 3DM 35 Colour Chose Importance 3DM 36 Colour Blindness 3DM 37 Colour Chose Importance 3DM 38 Colour Chose Importance 3DM 39  Materials Define the appearance of a surface Items to be set: Colour Surface reflectivity properties: ▪ Diffuse ▪ Specular ▪ Transparency ▪ Metallic ▪... 3DM 40  Textures Texturing is the use of flat (2D) images in the surface of 3D objects Texturing is one of the main features to bring realism to a scene 3DM 41  Textures Textures allow: The creation of more aesthetic environments Efficient simulation of real textures in a 3D surface The creation of complex 3D content with minimal investment of polygons (sometimes a simple plane is enough) 3DM 42  Textures Textures allow: Efficient simulation of surface attributes such as reflectivity and roughness Simulate illumination, avoiding the lighting calculations Simple (and small) textures can create tiled long, complex and realistic patterns 3DM 43  Mipmaps Sequences of the same texture with different resolutions LOD (Level of Detail) principle Normally each texture is 2n smaller than the previous one Example for a 128x128 pixels texture: 128x128 64x64 32x32 16x18 8x8 … 3DM 44  Mipmaps Objects closer to the camera: use higher resolution images, while objects farther from the camera: use lower resolution images Advantages: Reduce the time required to render a scene Improves performance Improves realism Disadvantage: Require more memory 3DM 45 Mipmaps 3DM 46  Mipmaps Example: https://www.youtube.com/watch?v=shw_IlSZ_8U 3DM 47  Applying Textures Textures can be applied in a 3D surface using several methods, such as: Projection: project the image onto a 3D surface Wrapping: the textures are also projected in the 3D surface, but are stretched until the four sides of the textures connect each other 3DM 48 Applying Textures - Projection Based on the desired effect, textures can be projected in several ways: Flat/Planar Cubic Cylindrical Spherical 3DM 49  Applying Textures - Wrapping Useful for placing textures on objects that require adjustments in the texture for a perfect fit in the 3D object, like terrains, faces or complex surfaces This method is also suited for applying textures into small portions of a 3D surface 3DM 50  Applying Textures There are several techniques to dispose textures into 3D surfaces Normally the (rectangular) textures are mapped by their UV “coordinates”: the upper left corner (0,0) is designated as the origin, along with the other corners (0,1), (1,0) and (1,1) UV texture coordinates are similar to XY coordinates, where U represent the horizontal value (longitude) and the V represents the vertical value (latitude) 3DM 51  Textures – UV Mapping Without and with UV Mapping UV Mapping 3DM 52  Textures – UV Mapping UV Mapping of a sphere 3DM 53  Textures – UV Mapping UV Mapping 3DM 54  Textures – UV Mapping 3D Model Imagem4 3DM 55  Textures – UV Mapping Textures to map onto the 3D Model 3DM 56  Textures – UV Mapping Textured 3D Model 3DM 57 Simple Texturing 3DM 58  Colour/Diffuse Maps Colour maps (also known as diffuse maps) contain colour information related to a 3D object They are used to compute the colour of light reflected by a 3D surface on which the colour map has been placed For example, the skin tones of a virtual character 3DM 59 Colour/Diffuse Map 3DM 60  Light Maps Light maps pre-compute lighting effects in a colour/diffuse map Usually used in static objects Achieve lighting effects with low computational cost Widely used in the digital games industry 3DM 61 Light Maps 3DM 62 Light Maps 3DM 63  Bump Maps Used to simulate roughness on a smooth surface without altering the surface itself To achieve this effect, it alters the orientation of the surface normal using a greyscale image This is a clear advantage since it increase the realism without compromising performance as modelling the roughness of a surface can result in a huge growth in the number of polygons 3DM 64  Bump Maps Bump mapping alters the lighting across the surface to provide the illusion of a rough texture 3DM 65  Bump Maps Bump Map 3DM 66 Bump Maps 3DM 67 Bump Maps 3DM 68  Specular/Reflection Maps Images that simulate the material reflectivity of a specific surface (also known as Reflection Map) The (greyscale) reflection map indicate which parts of the surface are reflective and which are not Simulate material properties with low computational cost (no need to use a global illumination method) 3DM 69 Specular/Reflection Maps 3DM 70  Normal Maps Normal Maps work in a similar way as Bump Maps. They allow you to add surface detail such as grooves, bumps and scratches to simulate the light effect in a real geometry Instead of using a greyscale image, it uses RGB values to be mapped on a UV layout 3DM 71 Normal Maps 3DM 72  Normal Maps A common use of this technique is generating the normal map from a high poly model and then applied it to the low poly version This method is widely used in the videogame industry, since low polygon models can generate high and detailed quality models 3DM 73 Normal Maps 3DM 74 Normal Maps 3DM 75  Ambient Occlusion An Ambient Occlusion map simulates soft shadowing, considering the model is lit without a direct light source, i.e. ambient light (seen later) These greyscale maps are not entirely physically accurate, but provide a good shadow effect that are not intended to simulate in real-time 3DM 76 Ambient Occlusion 3DM 77  Heightmaps Store “elevation” data in a black and white (greyscale) image. It modifies the geometry's vertical position based on pixel values, creating the illusion of depth and contour These heightmaps may be procedurally generated Mostly used in terrain generation 3DM 78 Heightmaps 3DM 79 Heightmaps 3DM 80  Displacement Maps Very similar to heightmaps, but in this case, it changes the surface itself by displacing some vertices and the surface normal leading to shading modifications in the surface Like heightmaps, the greyscale Displacement Maps are used to add (elevation) detail to a surface so, in this case the mesh must be subdivided or tessellated so this geometric detail can be created Displacement Maps requires more computational power than Heightmaps 3DM 81 Displacement Maps 3DM 82 Displacement Maps 3DM 83 Displacement Maps 3DM 84 Displacement Maps 3DM 85  Triplanar mapping The Triplanar mapping (in Blender known as Box Mapping) allows the application of textures on objects that don't have suitable UV coordinates (or don’t have them at all) This technique projects images from several angles and blends them based on the object normals 3DM 86 Triplanar mapping 3DM 87  Environment Maps Similar to reflection maps, but in this case, along with the surrounding objects, it also reflects the environment These maps are applied into all surfaces in the scene with reflective (specular) properties and not only in a specific object as happen in reflection maps Simulate environments reflection with low computational cost (no need to use a global illumination method) 3DM 88  Environment Maps Without environment map With environment map 3DM 89 Environment Maps 3DM 90  Realistic Texturing Apply all these maps, layer style, to produce the final result 3DM 91 Realistic Texturing 3DM 92 Realistic Texturing 3DM 93  Texturing Example Classic Oil Painting 3D Redux - Making of the Lady of Shalott (1888) 3DM 94 3D Model 3DM 95 3D Model 3DM 96 UV Coordinates 3DM 97 Colour Map 3DM 98 Bump Map 3DM 99 Specular/Reflection Map 3DM 100 Texturing Result 3DM 101