I’m working on a site where you can add your own art as stickers to a water bottle. I want the stickers to have a bit of thickness to them instead of being flush to the surface.
The stickers would be .png files with transparency to them. Is there a way to add thickness to the decal via three.js or is my only option to make a bump map on the fly when the .png is uploaded?
When you say “thickness” do you mean just to avoid z-fighting like on the bottom cat? :
For that.. you can use polygonOffset/polygonOffsetFactor/polygonOffsetUnits
If you mean actually making them a bit ripply/bumpy, then yeah a normalMap might be the way to go…
Yep the latter. I was hoping there’d be an easier solution, but yeah it seems like I might have to use something like imageMagick to create a bump map using the transparent/non transparent pixels as the bump data.
For the first one I have these settings at the moment. I’ll be honest I don’t understand the webGL documentation for these values too well so I just fiddled with them until I got something that seemed to work most of the time.
polygonOffset: true,
polygonOffsetFactor: -1,
polygonOffsetUnits: 1
Yup I do the same.
The deal with those, is that the amount of offset required, depends on the camera perspective, and the near and far distances, and the depth buffer precision, so that’s why it takes a few numbers to dial it in.
The “units” is a like a linear amount, and the “factor” is a function of how much it changes with depth or something.
So definitely, fiddling with it until it looks right is my go to. and be prepared for the numbers to need tweaking on mobile or different types of lower end hardware with less depth buffer precision.
The actual docs aren’t really even that much more helpful: glPolygonOffset - OpenGL 4 Reference Pages
I also used THREE.Mesh.renderOrder to avoid z-fighting between stickers being placed on top of each other.
That’s good to know. Thank you.
r.e. creating a bumpmap.. yeah imagemagick, or you can even do it at runtime with canvas or similar if you don’t mind fiddling with the image bytes directly.
Oh, yes: Manhole Cover [ ExtrudeGeometry ] 
