Lighting concepts in Computer Graphics

My research into the lighting of computer graphics leads me to explore certain concepts and considerations that determine what to calculate and what to leave out, based on the viewing requirements. Advances in computation have now made it possible to create accurate simulations of real-world lighting today.

I will introduce some of the concepts in this post.

Types of Light Sources

Point Light: Light emanating from a source in all directions, with the intensity of light decreases as a function of space. Eg: Light bulb

Directional Light: Uniform lighting from one direction, such as sunlight. The source is modelled to be infinitely far away from the object being illuminated, and the intensity of the light stays constant (the change or decrease in intensity as a function of space is negligible) Eg: Sunlight

SpotLight: A directional cone of light, with the intensity being brightest in the central axis of the cone. Eg: Flashlight

Ambient light: No source is modelled. Ambient light is uniformly distributed throughout the scene and is independent of the direction, intensity or distance of the object being illuminated.

A few other types of light are volume lights and area lights, but these are just particular use-cases of the four types of light sources.

Lighting interactions

Diffuse Lighting: This models how light interacts with the surface of the object, creating lighter and darker pixels to simulate dark and light parts. This simulates the material and texture of the object.

Ambient Lighting: Makes the shape of the object visible even when no light source is modelled. It gives a flat, 2-dimensional representation of the object for a given perspective.

Specular Lighting: This models the highlights and shininess of the object, depicting smoothness and metallicity or reflexivity of the object.

Illumination Models

Local Illumination: Light interactions are calculated only with individual objects in the scene separately. This gives a more unrealistic or simulated lighting effect, but it is much faster and takes comparatively lesser computational power.

Global illumination: Light interactions are calculated considering all objects in the scene, including secondary interactions based on reflection and refraction of light with other objects. This gives a more realistic effect but at the cost of higher computational power.

One smart way to reduce the number of calculations through the scene is to go backwards from the viewers perspective to the light source, which ensures that the only interactions calculated are the ones that are relevant to the viewer’s perspective.

Posted by

Uncategorized - Leave a comment

Light and Shadows in Material Design System

The Material Design Environment

In Google’s Material Design System, UIs are displayed in an environment that is a metaphor of the physical world. It is inspired by the physical world and its textures, including how they reflect light and cast shadows.

In the physical world, objects can be stacked or attached to one another, but cannot pass through each other. They cast shadows and reflect light.

Material Design reflects these qualities in how surfaces are displayed and move across the Material UI. Surfaces, and how they move in three dimensions (3D), are communicated in ways that resemble how they move in the physical world, using light, surfaces, and cast shadows.

The goal of Material Design is to create hierarchy, meaning, and focus that immerse viewers in the experience.

Light in Material Design

In the Material Design environment, virtual lights illuminate the UI. Key lights create sharper, directional shadows, called key shadows. Ambient light appears from all angles to create diffused, soft shadows, called ambient shadows.

Shadow cast by a key light
Shadow cast by ambient light
Combined shadow from key and ambient lights
Elements use shadows on dark surfaces, even if they are less visible.


Light sources

Shadows in the Material environment are cast by a key light and ambient light. In Android and iOS development, shadows occur when light sources are blocked by Material surfaces at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only.

In Material environment, you should always combined shadow from key and ambient lights.

Shadows in Material Design

Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.

Material surfaces at different elevations cast shadows. As you can see from video, the smaller the elevation value, the more solid the shadow gets.

Shadows show the elevation of different Material surfaces.

Usage of Shadows

Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product.

Elevation is depicted by consistent use of shadow.
Shadow size reflects elevation. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.

Posted by Qi Chen

Uncategorized - 2 Comments

Light & Rendering Maths

Rendering equations are a mathematical representation for an amount of light emitting from a point along a specific viewing direction. (That is a fancy way of saying how a light-beam moves in space and bumps from surfaces.)

The equations root to light pyhsics in a straight-forward manner: due to energy conservation, no ‘light is lost’ – thus, calculating its distribution is fairly (?) simple.

Bidirectional reflectance distribution functions (BRDF) define how light is reflected at an opaque – that is, ‘normal’, tangible, not-all-absorbing – surface. That is, how light behaves when confronting an obstacle.

Image result for brdf image

As the example from  Coding Labs  suggests, a way of modelling the behaviour of light is making a distinction between diffuse reflection and specular reflection. “The idea is that the material we are simulating reflects a certain amount of light in all directions and another amount in a specular way (like a mirror).

However, re-constructing these phenomena of light that are “obvious” in the real world, is  is a tardy process in the world of 3D graphics. Namely, simulated lights do not automatically cast shadows. And, even if an object itself may be shiny and nicely lit, it likely won’t reflect the scene around it. Reflections have to be made either manually or with computer assistance.

Image result for minecraft water


As an example, the sky is blue and so is the water in Minecraft, but it doesn’t reflect land objects. Though, this is likely done on purpose – no reflection is much less rendering, obviously.

Taking a swing in the maths behind 3D graphs leads immediately to matrices – as those are the way of representing an object moving from point A to point B in a linear way.

Image result for matrix transformation 3d graphics

This video (~ 10 minutes) opens the foundational mathematics thoroughly yet very visually.  If you’d like the fast-lane, this is a compact representation.




We’ll finish with this sweet-bite: a 12-minute video covering many of the key topics of the 3D game industry domain, e.g. scanline-rendering, anti-aliasing, rendering algotirhms – and shading. I enojoyed & learned a lot!

Posted by maija

Uncategorized - Leave a comment

First post

This is our first post for the Dynamic Visualization course. Our chosen topic (and hence the blog name) is Light and Lighting.

Our group members are Maija, Kiko, Ameya and Jenna.

Posted by

Uncategorized - 1 Comment