1. A Pixel Is a Question

A ray traced image is often introduced by showing a polished scene containing glass, mirrors and soft shadows. That picture is attractive, but it is a poor place to begin. It encourages us to treat the renderer as a machine into which a scene goes and from which an image appears. If the result looks plausible, the machine is assumed to work. A plausible image is useful evidence, but it is not an explanation.

We shall begin with one pixel. The important question is not how to colour it, because setting three numbers is easy. The important question is what those numbers are meant to report. A ray tracer treats the pixel as the destination of a visibility calculation. It asks which route through the camera belongs to a sample of that pixel, which surface is first on that route and what light could arrive from that surface. We do not yet know how to answer any of those questions. We do, however, know precisely what must eventually be answered.

The raster is storage

A raster is a finite rectangular grid. If its width is W and its height is H, it contains W × H pixels. We shall use the conventional browser image coordinates: x increases from left to right, y increases from top to bottom, and the top-left pixel is (0, 0). This is a storage convention. It is not yet a camera and it says nothing about three-dimensional space.

Each pixel in our buffer has four eight-bit channels: red, green, blue and alpha. The alpha value will remain 255, meaning fully opaque. Four consecutive array entries therefore belong to each pixel. The row-major index is:

index = 4 × (y × width + x)

The multiplication by four is not a decorative piece of syntax. Remove it and neighbouring pixels will share channels. Reverse x and y and the image will be transposed or corrupted. A rendered image can conceal this sort of error when its colours vary gently, so we first use a deliberately obvious selected pixel.

const width = 16;
const height = 10;
const image = context.createImageData(width, height);

function writePixel(x, y, red, green, blue) {
    const index = 4 * (y * width + x);
    image.data[index + 0] = red;
    image.data[index + 1] = green;
    image.data[index + 2] = blue;
    image.data[index + 3] = 255;
}

This function does not draw a circle, a line or a sphere. It changes four entries in an array. After all required entries have been written, putImageData transfers that array to the visible canvas. The distinction matters because later lessons will calculate the channels themselves. If we called context.arc to obtain a sphere, Canvas would already have decided which pixels belong to the circle. That is exactly the decision we are trying to understand.

A pixel is a region, not a mathematical point

It is tempting to say that a pixel is one point on the image. The raster gives each pixel an integer address, which makes that account look sensible. However, a displayed pixel covers a small rectangular region. A ray tracer normally evaluates one or more sample positions associated with that region, then reconstructs a stored pixel value from the samples. Using the centre, (x + 0.5, y + 0.5), is a convenient first estimate. It is not the complete pixel.

This distinction does not change our first program, but it prevents a later confusion. When a diagonal edge forms steps, the pixel has not failed to be small enough in some absolute sense. We have estimated a continuous signal using a finite grid and perhaps only one sample per region. Lesson 13 will return to the pixel and spend more work on that estimate. For now, one centre sample gives us a traceable starting rule.

Construct a diagnostic image

A diagnostic image should make the state we care about easy to inspect. Every ordinary pixel therefore stores the same dark green value. The selected pixel stores one fixed gold value. The thin lines between cells are an interface guide placed over the enlarged image; they are not extra colours in the image buffer. If the gold cell appears in the requested row and column, the address calculation is supported. If it appears elsewhere, we have a specific disagreement to investigate.

for (let y = 0; y < height; ++y) {
    for (let x = 0; x < width; ++x) {
        const selected = x === selectedX && y === selectedY;
        const red   = selected ? 247 : 24;
        const green = selected ? 184 : 42;
        const blue  = selected ? 75  : 36;
        writePixel(x, y, red, green, blue);
    }
}

context.putImageData(image, 0, 0);

Move the selected pixel and watch the two kinds of number separately. The array addresses change because a different piece of storage has been selected. The gold values remain 247, 184, 75 and 255 because we are moving the same colour. An address answers where?; an RGBA value answers what is stored there? The successful display supports the indexing rule, channel order and transfer to Canvas. It does not prove that a camera exists, that the colours are physically meaningful or that an object has been intersected.

Attach a question to the sample

The laboratory deliberately stops at the four array addresses. It does not draw a camera or a ray because neither has been constructed yet. Our next responsibility is to turn a sample associated with this integer pixel address into an origin and direction in a three-dimensional coordinate system. Once we have those values, we shall have a ray with positions that can be calculated. Once we have an intersection equation, that ray can ask whether a surface occupies one of those positions.

Keeping these responsibilities separate is valuable. The image buffer stores answers. The camera constructs questions. Geometry tests the questions. Materials and lights interpret successful results. A finished renderer combines them, but combining them early does not make them easier to understand. It merely makes an error harder to locate.

We now have a raster that can receive a result and a precise address for every pixel. Lesson 2 supplies the mathematical object that will carry a sample away from the camera. Until that ray exists, the highlighted pixel is only a highlighted piece of storage.