Developer Misaki Nakano explains a liquid-foundation effect built with Three.js
Archived — this story has rotated out of today’s deck. It is kept here in full.
The gist
Developer Misaki Nakano published an article explaining how a liquid foundation effect was built with Three.js.
The piece reuses his earlier fluid simulation and drew a mostly positive developer response.
Background
Misaki Nakano is the developer behind a site simulating the textures of primavisa liquid foundations and primers, built for a Japanese cosmetics brand's promotional project released in 2021. In the article, he explains how the liquid effect was made, continuing from an earlier article of his on fluid simulation with Three.js, a JavaScript 3D graphics library. The effect renders raised liquid in a fragment shader using a height map for liquid thickness, updated each frame via backtraced advection.
How it unfolded
- Jan 2021Nakano was asked to implement a foundation simulation and spent about a month studying how foundation looks and behaves.
- Jun 2021A site simulating the textures of primavisa foundations and primers was published, which Nakano implemented after being contacted by homunculus.
- Dec 18, 2021Nakano posted on X about the primavisa foundation and primers texture simulation site.
- 2026Nakano spoke about implementing a liquid foundation effect at Vue Fes Japan 2026.
- Nov 5, 2026"Spreading Liquid with Three.js" was posted to Hacker News by user mooreds, receiving 14 points and 1 comment; daily.dev also published a post about it.
Key terms
- Three.js
- A cross-browser JavaScript library and API for creating and displaying animated 3D graphics in a web browser using WebGL.
- height map
- A raster image whose pixels store elevation values, used to display 3D surface data in computer graphics.
Source: Wikipedia
Who’s saying what
- Public
- Most daily.dev commenters were impressed by the demo and its color-mixing effects.
- Caution
- Some daily.dev commenters were skeptical, questioning whether three.js was necessary and debating the author's lament that LLMs will absorb such techniques without credit.
- Public
- Hacker News commenter Conscat wrote: "I wish foundation really did spread this smoothly."
Still unverified
The daily.dev community take describes a side debate over the author's lament that LLMs will absorb such techniques without credit, and a nitpick about whether three.js was necessary; these are summarized as community discussion rather than confirmed statements.