Real-time graffiti painting on 3D surfaces with Three.js

Showcase
, , , ,
1

Hi everyone!

I’ve been working on a browser-based real-time graffiti simulator using Three.js.

Here is a short video showing the current result:

The idea is to paint directly onto 3D surfaces and make the spray feel as physical as possible.

Currently I’m experimenting with:

  • Spray paint with adjustable dispersion

  • Paint drops and drips

  • Different spray angles

  • Painting directly onto 3D mesh surfaces

  • Stencil / plate visualization

  • Real-time interaction

The project is part of XKTCH.PRO, a larger creative 3D environment I’m developing.

:artist_palette: Live demo: https://xktch.pro

I’m particularly interested in feedback from the Three.js community regarding:

  • Performance optimization

  • Painting onto arbitrary meshes

  • Realistic spray and drip simulation

  • Decals vs. render targets vs. other approaches

  • GPU-based techniques for handling large amounts of paint

I’m still actively developing it, so any technical feedback or suggestions would be greatly appreciated!

Thanks!

2

I think you might find something useful here: Splash Canvas — Google Arts & Culture. There are many ways to create a realistic splash effect, but achieving a natural look isn’t easy; the optimal approach depends on the specific method you choose.

3

I made a mesh texture painting tool you might find some inspiration from : MonkeyPaint