Replicating grease pencil's fill effect in threejs

Questions
1

Hello everyone, I’m trying to figure out if there is a way to replicate Blender’s grease pencil material fill effect in threejs (scroll down for an overview of the fill).

The grease pencil fill is a shader that “fills” the inside of a series of vertices defined by the grease pencil object. It always shows like a fill, even if the points are not coplanar.

gpencil

Now, I know that is possible to triangulate with Earcut and (kind of) create a mesh from not coplanar vertices and achieve a similar result, but… it’s expensive and sometimes buggy if the vertices aren’t playing well together.

So, since I googled quite a bit and even tried inspecting Blender’s source code to figure out if I could find the shader but came up empty ended: would this be possible with a shaderMaterial? And if yes, could someone point me in the right direction?

(I know I’m asking quite a bit since shaders are kind of their own black magic. I’m willing to put in the work but I need some pointers)

Thanks!

2

I’ve been searching for something like this too. Have you been able to do it? This kind of effect is awesome

3

Not with a shader, sadly. I’ve come somewhat close with a mesh and an algorithm (earcut with the 3d variant) that attempts to triangulate all points in the line.

You can see it in action here: https://penzil.app/. Tap the :o: Icon at the top and toggle the fill. You can also see how it works with 3d points if you select a shape like the sphere from the top left dropdown.

1 Like