Render 3D surface plots z=f(x,y) with WebGL. Rotate, zoom, and toggle wireframe, color maps, and contour projections.
You type an expression in x and y, set the sampling range for each axis, and the tool evaluates the function on a grid to build a WebGL mesh you can orbit and zoom with the mouse. Wireframe, a color map keyed to height, and a flattened contour projection can each be toggled on top of the same mesh. The most common surprise is that a function with a division, log, or square root can go undefined at some grid points, leaving a visible hole, spike, or clipped patch in the surface rather than a clean warning.
A concrete input and expected output from the current implementation.
Input
z = x^2 + y^2, x range -2 to 2, y range -2 to 2
Expected output
An upward-opening paraboloid bowl: z=0 at the origin (0,0), rising symmetrically to z=8 at each of the four corners (2,2), (2,-2), (-2,2), (-2,-2).
z=x^2+y^2 is the sum of two squares, so it is smallest (zero) only where x=0 and y=0, and at each corner 2^2+2^2=4+4=8.
The x and y ranges you set are divided into a fixed-resolution grid; the expression is evaluated at every (x,y) vertex to get a z value, and adjacent vertices are stitched into triangles to form the mesh. Finer grid spacing shows sharper curvature; features narrower than the grid step (thin spikes, tight ridges) can be smoothed over or missed entirely between sample points.
WebGL renders the mesh with orbit controls for rotate and zoom, driven by mouse or touch input on the canvas. The color map shades each vertex by its z height, wireframe draws the underlying grid edges over the shaded surface, and the contour toggle projects iso-height lines onto the base plane. These are display layers on the same computed z data, not separate calculations.
That is almost always the function going undefined at those grid points, for example 1/(x*y) near x=0 or y=0, or sqrt of a negative value. The mesh has nothing real to plot there, so you get a gap, a clamped value, or a stray spike depending on how the neighboring vertices connect. Narrow the range or check the expression's domain.
No. Rotation and zoom only move the camera around the mesh that was already built from your x and y ranges, and switching wireframe, color map, or contour projection only changes how that same z data is drawn. To see a different surface you need to change the expression or the sampling range itself.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Calculate percentages, percentage change, and what percent one number is of another with step-by-step breakdowns.
Calculate tips and split bills between multiple people with customizable tip percentages and rounding options.
Calculate monthly payments, total interest, and generate amortization schedules for loans and mortgages.
Calculate Body Mass Index from height and weight with category classification and healthy range guidance.
Calculate sale prices, savings amounts, and final costs after single or stacked percentage discounts.
Compute mean, median, mode, standard deviation, variance, and other descriptive statistics from a data set.