# Replicating grease pencil's fill effect in threejs

**URL:** https://discourse.threejs.org/t/replicating-grease-pencils-fill-effect-in-threejs/26514
**Category:** Questions
**Tags:** materials
**Created:** [May 21, 2021, 7:55pm UTC](https://discourse.threejs.org/t/replicating-grease-pencils-fill-effect-in-threejs/26514 "2021-05-21T19:55:36Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![jacopocolo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jacopocolo/32/10521_2.png) [@jacopocolo](https://discourse.threejs.org/u/jacopocolo)
#### Post date: [May 21, 2021, 7:55pm UTC](https://discourse.threejs.org/t/replicating-grease-pencils-fill-effect-in-threejs/26514/1 "2021-05-21T19:55:36Z")

</div>

Hello everyone, I’m trying to figure out if there is a way to replicate Blender’s [grease pencil material fill effect](https://docs.blender.org/manual/en/latest/grease_pencil/materials/grease_pencil_shader.html) 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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/e/ae21499435d898d5e5b3d1ffe52c17890f9cf656.gif)

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!

---

<div class="post-metadata">

### Author: ![Mateo\_Martinez](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mateo_martinez/32/17517_2.png) [@Mateo\_Martinez](https://discourse.threejs.org/u/Mateo_Martinez)
#### Post date: [October 20, 2021, 1:42pm UTC](https://discourse.threejs.org/t/replicating-grease-pencils-fill-effect-in-threejs/26514/2 "2021-10-20T13:42:50Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jacopocolo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jacopocolo/32/10521_2.png) [@jacopocolo](https://discourse.threejs.org/u/jacopocolo)
#### Post date: [October 20, 2021, 3:48pm UTC](https://discourse.threejs.org/t/replicating-grease-pencils-fill-effect-in-threejs/26514/3 "2021-10-20T15:48:58Z")

</div>

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/](https://penzil.app). Tap the ⭕ 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.
