HTML canvas draw inside UV islands

Question

I am trying to create a texture on fly with many randomised circles and apply it on bowtie object in three js

I am trying to achive it with HTML canvas because I think it will give me more control over the pattern rather than glsl shaders. I am using built in THREE.canvasTexture that takes a html canvas as an agrument and applies it as a texture to my object

My question is how I can isolate the drawing area on canvas to stay within UV islands? I will need to draw at random spots the exact number of the circles for unique user, and all the circles must stay within the uv

Also I am wondering what is more performant - canvas method or glsl shaders and how I could draw the pattern with glsl controlling number of circles

Answer 1

This is a problem with many possible approaches, so maybe someone else will come with a better/easier solution. But I will describe two possible approaches that I can think of, and that I might explore if I were you.

Option 1: Rejection sampling

1. Pick a random point anywhere on the canvas / bowtie bounding box / any area you choose that contains the bowtie texture
2. Pick randomly a size and colour according to your application
3. Check if the generated point is OK(fits within the bowtie, eventual overlaps with other points etc). If yes, you've got a point: return.
4. If not, then repeat step 1.

This might be sufficient if you can consider your texture as somewhat flat and can just draw your points on top of it, as you seem to be doing in your example image here. You need to be careful with your limits though to not get stuck in an infinite loop.

Option 2: Correct surface sapling

1. Pick a triangle on your bowtie mesh randomly. If you want to be mathematically correct, then make sure the probability is proportional to the area (you can do this e.g. by creating a cumulative array of the triangle areas and running a binary search over it)
2. Randomly pick a point inside that triangle (some math to help with this)
3. Give it an area and colour according to your app
4. Map it back to your texture. The point will be guaranteed to be on the tie, but you can check if its radius also fits
5. If you wish, you can then still check for overlaps with other points, and perform rejection sampling

This option sounds like overkill for your application, but if you want the distribution to better follow the curvature of your bowtie, then this would give you a probabilistically more correct result. It also allows you to texture map the points correctly, if you want to get into that math.

Rendering them in GLSL:

As for GLSL shaders, you can certainly render random circles on GLSL and it will be more performant almost for sure. However, this seems like a one-time computation that you can precompute for your various bowties and dot frequencies, after which your current solution will be perfectly fast. Your solution will also give you more power over the point generation, as you said yourself. Rendering random circles on a flat surface in a GLSL fragment shader should not be very hard, but doing it on a complex surface like these bowties might make it a bit trickier. If you want to know how this could be done, consider posting a new question.