Decal Projector

I made a small utility to project mesh decals.
Here is how it works:

This is based off this technique: How to project decals - Wolfire Games Blog
Actually I just copied the implementation from the tree.js library: three.js/DecalGeometry.js at master · mrdoob/three.js · GitHub (credits to them, I don’t completely understand the math).

This is the code:

The demo class I used for the video needs some assets replaced for it to work but should be easy to fix, the usage is:

      var dist = 10f;
      var pos = cam.getLocation().add(cam.getDirection().mult(dist / 2));
      var rot = cam.getRotation();
      var projectionBox = new Vector3f(1f, 1f, dist);
      var projector = new DecalProjector(map, pos, rot, projectionBox);
      var geometry = projector.project();

I will add this to my level editor for adding details to the geometry, but it can be used for many other things like bullet holes, blood splatter, burns, tire tracks, etc. Beware if the geometry is complex it can be slow.

I may add some small features like copying the TextCoord2 buffer and others.
If anybody has any feedback or improvements I’d love to hear.



Can it be used on terrain for displaying a moving marker on terrain?

Something like this:


1 Like

Mine might not be the best technique for that case, it’d have to regenerate the geometry very frequently, every time the pointer moves.

Doing it in screen space using the depth buffer like your tutorial sounds better for dynamic projections.

1 Like

Cool, thanks for sharing!

very cool!

Also handy for making an evil lair … muahaha I mean haha