Parametric

The Parametric surface is tessellated from a function of two parameters. Normals come from the analytic partial derivatives, so a smooth surface shades smoothly with no averaging pass, and the parameters themselves become the texture coordinates.

NOTE

For the full API, see the 3D API Reference.

Demo

Properties

• surface: the function to tessellate, mapping (u, v) in 0–1 to a world-space point
• uSegments: subdivisions along the first parameter (default 24)
• vSegments: subdivisions along the second parameter (default 24)
• revision: a counter bumped whenever the surface function is replaced

Surfaces of revolution

Spinning a profile around an axis is the most common use, and covers any turned shape — a vase, a bowl, a lampshade.

const vase = createParametric({
    surface: (u, v) => {
        const angle = u * Math.PI * 2;
        const radius = 0.6 + Math.sin(v * Math.PI) * 0.5;

        return [Math.cos(angle) * radius, v * 3 - 1.5, Math.sin(angle) * radius];
    },
});

Poles

A surface of revolution collapses to a point at each pole, where the two tangents are parallel and the normal is undefined. Rather than hand back a zero normal — which would shade the pole black — the normal is taken a little way inside the domain, which for a smooth surface is the limit the pole is approaching.

Replacing the surface

element.setSurface(nextSurface);

Type Guard

import {
    elementIsParametric,
} from '@ripl/3d';

if (elementIsParametric(element)) {
    console.log(element.uSegments);
}