Plot and visualize 3D mathematical functions and surfaces
What does a multivariable function actually look like? This 3D graphing tool answers that question by rendering surfaces from equations of the form z = f(x, y). Rotate, zoom, and tilt the view to explore peaks, valleys, saddle points, and other surface features that flat diagrams can never fully convey.
Initializing in your browser…
You want to visualise the saddle-like surface z = sin(x)·cos(y) before using it in a shader.
Surface
z = sin(x) * cos(y)
Result
An interactive 3D surface (rotate/zoom) showing the periodic egg-carton ripple.
The surface is sampled over a grid and rendered as a rotatable mesh, so the periodic peaks and troughs of the product of sine and cosine are immediately intuitive. Spinning the camera reveals structure that a static contour plot hides.
What does a multivariable function actually look like? This 3D graphing tool answers that question by rendering surfaces from equations of the form z = f(x, y). Rotate, zoom, and tilt the view to explore peaks, valleys, saddle points, and other surface features that flat diagrams can never fully convey.
Visualize surfaces, partial derivatives, and critical points to build geometric intuition for abstract concepts.
Explore potential energy surfaces, electromagnetic fields, or stress distributions as 3D plots.
Generate publication-quality 3D surface images for papers, slides, or reports.
Experiment with exotic functions to discover interesting surface geometries and symmetries.
Three-dimensional plotting evaluates f(x, y) across a grid of sample points and connects them into a triangulated mesh that your browser renders using WebGL. Color gradients map to the z-value so elevation differences are immediately visible. You can rotate the surface freely by dragging, zoom with scroll, and adjust the sampling resolution for smoother or faster rendering depending on your hardware.
This is especially valuable for multivariable calculus, where concepts like partial derivatives, gradient fields, and constrained optimization become far more intuitive when you can see the surface they operate on.
Increase the grid resolution in the settings. Higher resolution produces smoother surfaces but may slow rendering on older hardware.
Yes, add a second function to overlay another surface on the same axes, each rendered in a different color.
Points where the function is undefined (such as division by zero) are skipped, leaving gaps in the surface mesh.
It works on most modern mobile browsers with WebGL support. Touch gestures handle rotation and zoom.
Every calculation runs locally in your browser. Your numbers and expressions are not transmitted or stored.