Hi There,
This is my first post so please excuse me if I have missed anything or this isnt the right place. to post this.
I am looking for a bit of advice on the best way to approach something. I’m not new to threejs but certainly not a master and I know there are a number of ways to achieve what I’m after but I also know that it will take a very long time whichever route I take so I wanted to get some opinions.
I’m trying to create the effect of an expressionist painting made of ‘splatters’ and ‘flecks’ but in 3d which can be rotated and zoomed in/out of. Have a look at the reference below.
My thoughts were to build the geometry then use a THREE.PointsMaterial and then either use some kind of sprited points or perhaps a randomly generated ‘splatter’ shader or some kind of algorithmic application of a paint ‘fleck’ like this:
I know this is probably going to take weeks to achieve (for me at least) and wondered if this was even the best approach? Maybe I should be thinking about SVGs instead of WebGL? Maybe it’s better to model every single paint ‘fleck’ in 3d and then pass the monster geometry through to threejs?
I’d gladly love to hear any suggestions at all as to how you might approach this and why. Maybe it’s already been done before and I havent seen it?
Do you want to make it fully generative, or do you want to start with an image and then modify it? Do you want a single carefully crafted image where you’ve defined where each splatter/fleck is, or should it work procedurally from any given image?
When you say it should be in 3D so it can be rotated/zoomed, does this mean you want
a 2D painting that the user can rotate/zoom in 3D
a 3D painting where all the splatters and flecks are in 3D
a 2D painting where the splatters and flecks have a bit of thickness, so essentially like a real painting?
can be done with a shader and some experimentation with various noise functions. Though I’d go with a simpler approach - these kind of semi random lines and dots are IMO easier to reason with from a JS point of view, so I would create a CanvasTexture with random elements. Then either layer it just above the painting image with some transparency, or do a quick shader to mix between the painting and the CanvasTexture
There you’ll need that geometry you mention. Lines and points don’t have thickness though, so you’d probably be better off using tubes and thin boxes, and displacing the vertexes with some kind of noise
same as 1., except I’d also create a canvastexture for a displacement map or bump map based on the initial canvas texture, to aply some pseudo depth where the paint is concentrated.
Hi Arthur,
Thanks for the reply.
I think ideally it should be generative. I can craft the artwork in a 3d program so that it gives me the points/vertices & geometry etc that I want but it would be nice to control the points to morph, transition or move them in some way.
With regards to the 3D part, the intention is that it’s one big scene of ‘flecks’ and splatters that, when the camera and points all move into alignment at particular points it reveals picture - a bit like ‘anamorphic’ artworks (see reference below). This is the intent but it’s quite ambitious and might not work out that way.
Ideally all of these particles/flecks have some interactivity even if its just some very slight mouse or page scroll reaction or even just a little camera movement.
