Sample parametric surfaces, loft smooth bodies and sculpt geometry.

Parametric surfaces

parametricSurface(sample, options) turns (u, v) from 0 to 1 into positions, for terrain, cloth, wings and ribbons. Triangles wind by dP/du × dP/dv, so order coordinates so the front faces outward.

Parametric surfaces reference
ParametricSurfaceOptions	Meaning
uSegments / vSegments	Grid steps, 1..1024 each (at most a million vertices). Defaults 32 and 16.
wrapU / wrapV	Join the edges' positions and normals, keeping separate 0/1 UVs.
color	Tuple, or ({ u, v, position, normal }) => tuple.

Rolling terrain

React and React Native · shared engine API

Rolling terrain

import { createShape, parametricSurface } from "@nayan-ui/engine";

export function terrainMesh() {
  return createShape(parametricSurface((u, v) => {
    const x = (u - 0.5) * 20, z = (0.5 - v) * 20; // this order faces up
    return [x, 0.4 * Math.sin(x * 0.5) * Math.cos(z * 0.4), z];
  }, {
    uSegments: 64,
    vSegments: 64,
    color: ({ position }) => (position[1] > 0.2 ? [0.3, 0.5, 0.2] : [0.2, 0.35, 0.12]),
  }), { center: false });
}

Lofts, blocks and ellipsoids

loft(sections, options) runs a smooth closed body through rounded-rectangle cross-sections along Z: vehicle shells, cabins, shoes. It needs at least two sections in strictly increasing or decreasing z.

block(w, h, d, square = 6, color?) is a rounded box with flat end caps, and ellipsoid(radii, color?, around = 16) an exact ellipsoid. All three return Geometry to merge or deform before createShape.

Lofts, blocks and ellipsoids reference
API / option	Meaning
LoftSection.z	Position along Z.
bottom / top	Lower and upper edge heights; top must be above bottom.
width / topWidth	Half-width at the lower corners; at the top (default width).
square	Superellipse exponent: 2 is oval, higher is boxier. Default 4.
LoftOptions.around	Steps around each section, 6..512. Default 32.
smoothness	Steps between sections, 1..64. Default 4.
color	Tuple, or (position, normal) => tuple.

A car-like shell

React and React Native · shared engine API

A car-like shell

import { block, createShape, ellipsoid, loft, merge } from "@nayan-ui/engine";

export function shellMesh() {
  const body = loft([
    { z: -2, bottom: 0, top: 0.8, width: 0.6, square: 3 },
    { z: 0, bottom: 0, top: 1.2, width: 1, topWidth: 0.8 },
    { z: 2, bottom: 0.1, top: 0.6, width: 0.5, square: 3 },
  ], { around: 24, smoothness: 5, color: [0.2, 0.55, 0.8] });
  return createShape(merge([
    { geometry: body },
    { geometry: block(1, 0.2, 1), position: [0, 1.1, 0] },
    { geometry: ellipsoid([0.3, 0.2, 0.5]), position: [0, 1.4, 0] },
  ]));
}

Smooth curves and deformation

smoothCurve(points) returns a smooth Hermite function through increasing [x, value] points, clamped past the ends, for profiles and tuning curves. deformGeometry(geometry, (position, uv) => Vec3) moves every vertex of a copy and recomputes its normals.

Deform smooth surfaces before adding hard-edged parts; it can't change a registered model or keep a rig.

Sculpt a ramp

React and React Native · shared engine API

Sculpt a ramp

import { createShape, deformGeometry, parametricSurface, smoothCurve } from "@nayan-ui/engine";

const height = smoothCurve([[0, 0], [0.5, 1], [1, 0.4]]);

export function rampMesh() {
  const flat = parametricSurface((u, v) => [(u - 0.5) * 4, 0, (0.5 - v) * 8]);
  return createShape(deformGeometry(flat, ([x, , z], [, v]) => [x, height(v), z]), { center: false });
}

Parametric surfaces, lofts and deformation