Chapters
Chapters

Chapters

Hide chapters

Metal by Tutorials

Fifth Edition · macOS 26, iOS 26 · Swift 6, Metal 3 · Xcode 26

Before You Begin

Section 0: 6 chapters
Show chapters Hide chapters

Section I: Beginning Metal

Section 1: 10 chapters
Show chapters Hide chapters

Section II: Intermediate Metal

Section 2: 8 chapters
Show chapters Hide chapters

Section III: Advanced Metal

Section 3: 8 chapters
Show chapters Hide chapters

Section IV: Pushing the GPU

Section 4: 6 chapters
Show chapters Hide chapters

10. Lighting Fundamentals
Written by Marius Horga & Caroline Begbie

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Light and shade are important requirements for making your scenes pop. With some shader artistry, you can emphasize important objects, describe the weather and time of day and set the mood of the scene. Even if your scene consists of cartoon objects, if you don’t light them properly, the scene will be flat and uninteresting.

One of the simplest methods of lighting is the Phong reflection model. It’s named after Bui Tong Phong who published a paper in 1975 extending older lighting models. The idea is not to attempt duplication of light and reflection physics but to generate pictures that look realistic.

This model has been popular for over 40 years and is a great place to start learning how to fake lighting using a few lines of code. All computer images are fake, but there are more modern real-time rendering methods that model the physics of light.

In Chapter 11, “Maps & Materials”, you’ll take a look at Physically Based Rendering (PBR), the lighting technique that your renderer will eventually use. PBR is a more realistic lighting model, but Phong is initially easier to understand how light and shade work.

The Starter Project

➤ Open the starter project for this chapter.

In the Game folder, the project contains a new game controller class which further separates scene updates and rendering. Renderer is now independent from GameScene. GameController initializes and owns both Renderer and GameScene. On each frame, as MetalView’s delegate, GameController first updates the scene then passes it to Renderer to draw.

Object ownership
Object ownership

In GameScene.swift, the new scene contains a sphere and a 3D gizmo that indicates scene rotation.

DebugLights.swift in the Utility folder contains some code that you’ll use later for debugging where lights are located. Point lights will draw as dots and the direction of the sun will draw as lines.

➤ Familiarize yourself with the code, and build and run the project.

The starter app
The starter app

To rotate around the sphere and fully appreciate your lighting, the camera is an ArcballCamera type. Press 1 (above the alpha keys) to set the camera to a front view, and 2 to reset the camera to the default view. GameScene contains the key pressing code for this.

You can see that the sphere colors are very flat. In this chapter, you’ll add shading and specular highlights.

Representing Color

In this book, you’ll learn the necessary basics to get you rendering light, color and simple shading. However, the physics of light is a vast, fascinating topic with many books and a large part of the internet dedicated to it. You can find further reading in references.markdown in the resources directory for this chapter.

let result = float3(1.0, 0.0, 0.0) * float3(0.5, 0.5, 0.5)
Color shading
Litud dfopobh

A 3D shaded sphere
I 2H bmejuv fbfolu

Normals

The slope of a surface can determine how much a surface reflects light.

Surface normals on a sphere
Fehcami maxcufl ex e fyqugo

Light Types

There are several standard light options in computer graphics, each of which has their origin in the real world.

Directional Light

A scene can have many lights. In fact, in studio photography, it would be highly unusual to have just a single light. By putting lights into a scene, you control where shadows fall and the level of darkness. You’ll add several lights to your scene through the chapter.

The direction of sunlight
Fto ricohweiw ey hurvaqsg

typedef enum {
  unused = 0,
  Sun = 1,
  Spot = 2,
  Point = 3,
  Ambient = 4
} LightType;

typedef struct {
  LightType type;
  vector_float3 position;  
  vector_float3 color;
  float intensity;
  vector_float3 specularColor;
  float radius;
  vector_float3 attenuation;
  float coneAngle;
  vector_float3 coneDirection;
  float coneAttenuation;
} Light;

struct SceneLighting {
  static func buildDefaultLight() -> Light {
    var light = Light()
    light.position = [0, 0, 0]
    light.color = [1, 1, 1]
    light.intensity = 1.0
    light.specularColor = [0.6, 0.6, 0.6]
    light.attenuation = [1, 0, 0]
    light.type = Sun
    return light
  }
}

let sunlight: Light = {
  var light = Self.buildDefaultLight()
  light.position = [1, 2, -2]
  return light
}()

var lights: [Light] = []

init() {
  lights.append(sunlight)
}

let lighting = SceneLighting()

uint32_t lightCount;
vector_float3 cameraPosition;

LightBuffer = 13

params.lightCount = UInt32(scene.lighting.lights.count)

var lights = scene.lighting.lights
renderEncoder.setFragmentBytes(
  &lights,
  length: MemoryLayout<Light>.stride * lights.count,
  index: LightBuffer.index)

The Phong Reflection Model

In the Phong reflection model, there are three types of light reflection. You’ll calculate each of these, and then add them up to produce a final color.

Diffuse shading and micro-facets
Rubkudo nyemant udy jazpu-vimifx

The Dot Product

Fortunately, there’s a straightforward mathematical operation to discover the angle between two vectors called the dot product.

The dot product
Ddi sec fcijehc

The dot product of sunlight and normal vectors
Lje xep dzonern ej nogmimjl ihc wupguk keggukr

Diffuse Reflection

Shading from the sun does not depend on where the camera is. When you rotate the scene, you’re rotating the world, including the sun. The sun’s position will be in world space, and you’ll put the model’s normals into the same world space to be able to calculate the dot product against the sunlight direction. You can choose any coordinate space, as long as you are consistent and calculate all vectors and positions in the same coordinate space.

float3 worldPosition;
float3 worldNormal;

matrix_float3x3 normalMatrix;

uniforms.normalMatrix = uniforms.modelMatrix.upperLeft

float4 worldPosition = uniforms.modelMatrix * in.position;

.worldPosition = worldPosition.xyz / worldPosition.w,
.worldNormal = uniforms.normalMatrix * in.normal

constant Light *lights [[buffer(LightBuffer)]],

Creating Shared Functions in C++

Often you’ll want to access C++ functions from multiple files. Lighting functions are a good example of some that you might want to separate out, as you can have various lighting models, which might call some of the same code.

#import "Common.h"

float3 phongLighting(
  float3 normal,
  float3 position,
  constant Params &params,
  constant Light *lights,
  float3 baseColor);

#import "Lighting.h"

float3 phongLighting(
  float3 normal,
  float3 position,
  constant Params &params,
  constant Light *lights,
  float3 baseColor) {
    return float3(0);
}

#import "Lighting.h"

float3 normalDirection = normalize(in.worldNormal);
float3 color = phongLighting(
  normalDirection,
  in.worldPosition,
  params,
  lights,
  baseColor
);
return float4(color, 1);
No lighting
Ke gawhbost

float3 diffuseColor = 0;
float3 ambientColor = 0;
float3 specularColor = 0;
for (uint i = 0; i < params.lightCount; i++) {
  Light light = lights[i];
  float3 surfaceColor = light.color * light.intensity * baseColor;
  switch (light.type) {
    case Sun: {
      break;
    }
    case Point: {
      break;
    }
    case Spot: {
      break;
    }
    case Ambient: {
      break;
    }
    case unused: {
      break;
    }
  }
}
return diffuseColor + specularColor + ambientColor;

// 1
float3 lightDirection = normalize(light.position);
// 2
float diffuseIntensity =
  saturate(dot(lightDirection, normal));
// 3
diffuseColor += surfaceColor * diffuseIntensity;
Diffuse shading
Jorbora sbafuzg

Visualizing the normal and diffuse intensity
Wazuinimogx dba zetyad iqk legxuve igguvzofm

DebugLights.draw(
  lights: scene.lighting.lights,
  encoder: renderEncoder,
  uniforms: uniforms)
Debugging sunlight direction
Rabafwadd bejhigvl lukotquof

Ambient Reflection

In the real-world, colors are rarely pure black. There’s light bouncing about all over the place. To simulate this, you can use ambient lighting. You’d find an average color of the lights in the scene and apply this to all of the surfaces in the scene.

let ambientLight: Light = {
  var light = Self.buildDefaultLight()
  light.color = [0.05, 0.2, 0]
  light.type = Ambient
  return light
}()

lights.append(ambientLight)

ambientColor += surfaceColor;
Ambient lighting
Egcaeff rednqorr

Specular Reflection

The final component of the Phong reflection model is the specular reflection. This is your chance to put a coat of shiny varnish on the sphere. The specular highlight depends upon the position of the observer. If you pass a shiny car, you’ll only see the highlight at certain angles.

Specular reflection
Gbacitim gegtedlied

params.cameraPosition = scene.camera.position

float materialShininess = 32;
float3 materialSpecularColor = float3(1, 1, 1);

if (diffuseIntensity > 0) {
  // 1 (R)
  float3 reflection =
      reflect(-lightDirection, normal);
  // 2 (V)
  float3 viewDirection =
      normalize(params.cameraPosition - position);
  // 3
  float specularIntensity =
      pow(saturate(dot(reflection, viewDirection)),
          materialShininess);
  specularColor +=
      light.specularColor * materialSpecularColor
        * specularIntensity;
}
Specular reflection
Jmuraxim zulpehfuih

Point Lights

As opposed to the sun light, where you converted the position into parallel direction vectors, point lights shoot out light rays in all directions.

Point light direction
Puicc bimwv besejfeev

Point light attenuation
Waukp hunkt uzdadeecuez

let redLight: Light = {
  var light = Self.buildDefaultLight()
  light.type = Point
  light.position = [-0.8, 0.76, -0.18]
  light.color = [1, 0, 0]
  light.attenuation = [0.2, 0.8, 1.0]
  return light
}()

lights.append(redLight)
Debugging a point light
Sajardelp o juijd lodyv

// 1
float d = distance(light.position, position);
// 2
float3 lightDirection = normalize(light.position - position);
// 3
float attenuation = 1.0 / (light.attenuation.x +
    light.attenuation.y * d + light.attenuation.z * d * d);

float diffuseIntensity =
    saturate(dot(lightDirection, normal));
float3 color = surfaceColor * diffuseIntensity;
// 4
color *= attenuation;
diffuseColor += color;
Rendering a point light
Rugsuyoyc e roadk zisdp

Spotlights

The last type of light you’ll create in this chapter is the spotlight. This sends light rays in limited directions. Think of a flashlight where the light emanates from a small point, but by the time it hits the ground, it’s a larger ellipse.

Spotlight angle and attenuation
Nmafwekqg iqspa obp ajpequewaac

lazy var spotlight: Light = {
  var light = Self.buildDefaultLight()
  light.type = Spot
  light.position = [-0.64, 0.64, -1.07]
  light.color = [1, 0, 1]
  light.attenuation = [0.2, 0.4, 0.2]
  light.coneAngle = Float(40).degreesToRadians
  light.coneDirection = [0.5, -0.7, 1]
  light.coneAttenuation = 20
  return light
}()

lights.append(spotlight)

// 1
float d = distance(light.position, position);
float3 lightDirection = normalize(light.position - position);
// 2
float3 coneDirection = normalize(light.coneDirection);
float spotResult = dot(lightDirection, -coneDirection);
// 3
if (spotResult > cos(light.coneAngle)) {
  float attenuation = 1.0 / (light.attenuation.x +
      light.attenuation.y * d + light.attenuation.z * d * d);
  // 4
  attenuation *= pow(spotResult, light.coneAttenuation);
  float diffuseIntensity =
           saturate(dot(lightDirection, normal));
  float3 color = surfaceColor * diffuseIntensity;
  color *= attenuation;
  diffuseColor += color;
}
Rendering a spotlight
Xebfatorl a ymeghemhj

Key Points

  • Shading is the reason why objects don’t look flat. Lights provide illumination from different directions.
  • Normals describe the slope of the curve at a point. By comparing the direction of the normal with the direction of the light, you can determine the amount that the surface is lit.
  • In computer graphics, lights can generally be categorized as sun lights, point lights and spot lights. In addition, you can have area lights and surfaces can emit light. These are only approximations of real-world lighting scenarios.
  • The Phong reflection model is made up of diffuse, ambient and specular components.
  • Diffuse reflection uses the dot product of the normal and the light direction.
  • Ambient reflection is a value added to all surfaces in the scene.
  • Specular highlights are calculated from each light’s reflection about the surface normal.

Where to Go From Here?

You’ve covered a lot of lighting information in this chapter. You’ve done most of the critical code in the fragment shader, and this is where you can affect the look and style of your scene the most.

9. Navigating a 3D Scene
11. Maps & Materials
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2025 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now