The Mandelbrot 3D escape-time height field again, drawn with three.js in WebGL, so you can move freely: drag to rotate, scroll or pinch to zoom, right-drag (or two fingers) to move the surface. The buttons over the picture look from the front, top or side, zoom, switch a drag from turning to moving (for a touch screen), turn it by itself and reset the view; double-click or double-tap puts a point in the middle. Higher ground means the point took more iterations to escape; the set itself is the plateau.
Loading three.js. If this note stays, the browser could not load or start it (WebGL may be switched off: Settings > System > "Use graphics acceleration when available").
The surface is drawn by ElevationGrid (lib/larsi.org/three/elevationgrid.js), a three.js version of the VRML ElevationGrid node, with VRML's own names. It is a grid of heights over the x-z plane, with y up. This page computes the escape time of every point itself and hands the grid the heights (as a fraction of the iteration limit) together with the raw iteration counts as a separate color value: grid.setHeight(heights, counts).
Options of the constructor (the same names as the VRML fields, except the last four):
xDimension, zDimension - how many vertices along x and along z (at least 2, default 64). The Grid slider sets the number of squares, so there is one more vertex than that along each side.xSpacing, zSpacing - the distance between neighboring vertices (default 1). The page uses the width of the view divided by the number of squares, so the surface keeps its size whatever the grid.height - the heights themselves, xDimension * zDimension numbers row by row (or give them later with setHeight(), as this page does).solid - VRML's default is true: only the top is drawn, so the surface vanishes seen from below. This page passes false so both sides show.heightScale - multiplies every height, so a tall peak and a gentle ripple fit one picture (the Height slider). Not in VRML.mode - how it is drawn (the Draw as menu). Not in VRML.colorMap - a function from a color value to red, green and blue (the color menu). Not in VRML.background - the color the hidden-line mode paints its surface in, so it matches the page.The five modes. Surface is the lit, colored surface; wire mesh is colored grid lines with the hidden ones removed, the classic mesh plot; surface with grid lines is both. Cubes and columns draw one box per vertex instead of a surface: a cube is centered on the vertex at its height, a column stands on zero and reaches up to it, like a bar chart. All the boxes are one instanced mesh, one draw call. The triangle count above the controls follows the mode: two triangles per grid square for a surface, twelve (a box) per vertex for cubes and columns, which is why the boxes get slow on a fine grid.
Methods. sample(fn, colorMap) evaluates a function at every vertex (the Function3D page uses it); setHeight(height, colorValue) takes ready arrays, as here, where the color comes from the iteration count rather than the height. setColorMap(), setHeightScale(), setMode(), setSolid(), setDimension() and setSpacing() change one thing without recomputing the rest, and bounds() gives a box round the surface for the camera. As in VRML, vertex (i, j) sits at (i · xSpacing, j · zSpacing) with the corner, not the middle, at the origin, and row 0 is the one farthest from the camera, so this page counts its rows down from the top of the view.
This page was created with Claude Code.