MeltGL

MeltGL melts images and video in the browser.

Try it

Drop a picture or a video on the box. There is also a page of experiments: the standard test cases used while building the solver, one phenomenon per figure, each running live.

source
progress 0.00
material
viscosity 0.020
tension 0.50
yield 0.08
ground

A picture with a transparent or flat background melts as an object, like the teapot. A photo with a busy background is a slab of material with the picture printed on it, and melts like one.

Usage

import { createMelt } from 'meltgl'

const melt = await createMelt({
  target: document.querySelector('#poster'),
  source: 'teapot.png',
  material: 'wax',
  duration: 8
})

melt.play()
melt.on('complete', () => location.href = '/next')

Target is an box; the canvas is placed over it and extends below by dripRoom. The source is an <img>, a <video>, or a URL to either. A material is a preset name or a preset with numbers changed, { base: 'honey', viscosity: 1.2, yield: 0.2 }. layers takes a list of materials, outer first, for a shell over a core. seek, reverse, configure and dispose do what they say. backend: 'svg' forces the fallback.

Material options

FieldRangeWhat it does
viscosity0.001 to 50Kinematic viscosity of the liquid, log scale. Molten wax 0.02, honey 2.5, tar 12, solder 0.005. The solid sits four decades above the liquid and creeps.
density0.1 to 4Divides the viscosity, so a dense liquid of the same viscosity runs faster.
tension0 to 1Surface tension. Rounds drops, pinches necks. Higher gives fewer, fatter drips.
yield0 to 1Yield stress. Below it the liquid does not flow at all, so it piles and holds a shape. Chocolate 0.35, honey 0.
meltRate0.05 to 6How fast heat moves through the solid.
cooling0 to 3How fast liquid near the surface loses heat and sets. Wax freezes mid drip, honey does not.
gloss, fresnel, refraction0 to 1, 0 to 1, 0 to 0.08Highlight sharpness, rim brightness, how much the wet surface bends the picture under it.
blend, tint0 to 1, 4 numbersHow much the liquid takes the material's own colour instead of the picture's, and what that colour is.
translucency, absorption0 to 1, 3 numbersHow see-through a thin film is, and colour loss per unit thickness per channel.

Simulation options

OptionDefaultWhat it does
duration1.6Simulated seconds at progress 1. A slow material may not be done by then, which is correct.
groundopenopen lets liquid fall out of the bottom. floor is a wall, so liquid lands and spreads into a puddle.
simulationScale0.4Field resolution as a fraction of the canvas. The picture is always drawn at full resolution through the reference map.
substeps2Solver steps per time step. Surface tension strength is limited by the substep, so more allow fatter drops.
viscosityIterations16Jacobi iterations of the implicit viscosity solve. More makes stiff regions stiffer.
pressureSolver, pressureCyclesmultigrid, 2Multigrid V-cycles for the pressure projection. jacobi with pressureIterations is the fallback.
stepDuration, snapshotEvery, maxKeyframes1/60, 12, 48Fixed time step, steps between keyframes for scrubbing, and how many keyframes to hold. A run is repeatable for a seed. When the keyframes are full every other one is dropped and the spacing doubles, so memory is bounded whatever the duration.
maxStepsPerFrame24How many simulation steps one frame may run while catching up to a seek. A jump to the end of a long melt is spread over frames instead of blocking.
gravity, drag1, 1Pull strength, and the wall friction the liquid feels as it runs.
heatTop, coreHeat, surfaceHeat, surfaceDepth1.2, 0.1, 2, 5Extra heat at the top edge, heat reaching the core, heat at the surface, and how many cells deep the surface is. The defaults melt a picture from its edges inward rather than all at once.
onsetSpread, columnFeed, noiseScale, seed0.6, 0.5, 4, 11How unevenly the surface lets go, how much liquid the drip columns are fed, the size of that noise, and which pattern.
meltPoint, freezePoint, conduction0.5, 0.45, 4The temperature solid becomes liquid, the temperature liquid sets again, and how fast heat spreads. Wax freezes mid drip, honey does not.
solidViscosity, curvatureFlow, volumeGuard40, 0.1, 0.15How stiff the unmelted solid is, how much the outline rounds and necks pinch, and how hard the level set is held to its starting volume.
rim, edgeWidth, light6, 0.6, [-0.35, 0.6, 1]How many cells the normal takes to turn and face the viewer, how soft the outline is, and the light direction. A zero light vector falls back to the default.
dripRoom, topRoom, sideRoom0.6, 0.08, 0.15Extra canvas below, above and beside the box, as fractions of its size, so the body has air to move into.
layerDelay0.35Seconds each extra layer waits before it starts heating, when layers is set.
keyautoauto keys out a flat background so an opaque picture gets a silhouette. none keeps the whole rectangle. Or a colour and tolerance of your own.

Credits

MeltGL is a small implementation of ideas from these papers. Wouldn't be possible without them!

Download

meltgl.min.js (ES module, with source map), meltgl.js (unminified), or npm install meltgl.

The simulation needs WebGL 2 with EXT_color_buffer_float or EXT_color_buffer_half_float: Chrome 56, Firefox 51, Safari 15, Edge 79 and later. Everything else gets the SVG filter path, which is a displacement warp of the source rather than a simulation, and honours only material, noiseScale, seed and duration.

git clone https://github.com/1etu/meltgl.git