Texture to Point Cloud: mapping color and size per pixel

Hi!
Sorry if someone as already post something similar but i didn’t find anything from forum search, so:
I want to transform a texture into a point cloud,

From this

To this

I created this example in TouchDesigner and want to replicate it in vvvv Gamma 7.x with Stride: map each pixel’s brightness to control circle size in a grid, with color inherited from the texture. Is there an help patch or example that shows this process?

Thank you!

There is already Dots shader that almost do that:

However you can patch that using shader fx quite easily:

  • You draw circle on UV
  • You multiply UV by the amount of cells, you get circle grid
  • Then you find center of each cell (basically frac(TexCoord * CellSize) would be you left, top corner, so offset that on half cell size you get center of cell, then inverse it by CellSize (e.g. result / CellSize) you’ll get sampling position on texture so you can use it as color for whole circle + radius from brightness

I recommend checking:

Patch TextureFX help patch.

And starting from drawing a circle

Thanks @antokhio !
My bad, I should’ve specified more clearly that the goal is to work in the 3D domain, not on textures or shaders, so basically to create a geometric grid where these circles are placed, each carrying scale and color properties defined by the reference texture.
So i can process it like point cloud:

Thanks for your examples they’ll still be useful anyway to get familiar with the vvvv environment! I tried searching further in the help browser and found the old but gold Rutt-Etra example, and I think I might be able to extract what I’m looking for from there.

If you’re planning to work with particles, I suggest you check out VL.Fuse.
I attached a patch demonstrating your usecase and applying some forces to it.

Seeing you’re coming from TouchDesigner, this might seem like a lot having to set this up.
vvvv tends to be a bit more low level, while TouchDesigner does a lot under the hood in a single node.
But on the other hand you have more control.

You will have to install VL.Fuse for this to work.

ParticleGrid.vl (46.9 KB)

2 Likes

@readme thank you!
From what I understand, FUSE it’s the GPU-based way to do object-oriented shader programming, right?, which is really interesting. I see vvvv as somewhat in between Max/MSP and TouchDesigner but with its own peculiarity and complexity. Thanks a lot for your valuable example.

Probably the old website still does a decent job at explaining FUSE.
Object-Oriented is not the right term, but it exposes shader-programming on the GPU to vvvv.

It features a very broad node set which helps you setup complex shader systems without having to write shader code (but you can). It also abstracts a lot of boilerplate code away from the user.
Where it really stands out is the interoperability of multiple domains like distance fields, particle/compute systems, fluid dynamics and more.

2 Likes

InstancedPixelsWithTexture.vl (39.9 KB)

I was doing something along those lines this week. Which might help you solve the texture to points. You’ll need to bring you texture coords into the right range (thats where I am multiplying them and centering them to 0.5 rather than 0, on the left )

1 Like

Cool, thanks for your example @catweasel !

I’d like to reopen this thread because I’m wondering what the CPU-based approach is for reading image data in vvvv. Is there an object that can output a spread of pixel values from an image? I know this is quite CPU-intensive, but it would still be more straightforward and manageable if the image is low resolution, for example 25×25 pixels.

Check “Pipet” and its help patches.

1 Like

@readme Thanks!

1 Like

Also look into the instancing help patch…

1 Like

@tonfilm Homework completed ✓


I wonder if with this instancing mode it is also possible to control the specific parameters of the disc, such as inner and outer radius. From the examples and from what I’ve been able to understand, I need to use the ‘Components’ input and provide the values I’m interested in, which in this case were the generic transformation srt values

Instancing only works when using the same mesh for all instances.
Out of the box it’s not possible to do what you’re asking (inner+outer radius), but if you were to write your own shader and identify the inner and outer vertices of your mesh (for example by uv coordinate) you could use a concentric scaling parameter for groups of vertices only and provide those values via Buffer and access them by InstanceID in the shader.

But it’s not possible to do that out of the box I’m afraid.

But you could it, the way you did it first, the cpu way. Often I will proptype in the quickest method, and then if I need to optimise for performance, dig deeper.

But using a shader to draw the ring texture on a quad/sprite should be fairly easy

Yes, putting a geometry inside a foreach without generating too many copies was enoughfor my goal, just like doing all the little custom tweaks as i needed.

Instancing lightened the workload of generating the geometry itself, letting me focus on data generation on the CPU side. However, I find the logic of instancing plugged into the ‘Components’ input a bit convoluted for someone who’s not very familiar with vvvv.

I wonder how these operators figure out what kind of data they’re receiving. I tend to think they’re only mapped to the most common geometry properties, such as size, translation, and rotation, and not to more specific ones that have a Components input, like in the case of a Disc with its inner and outer radius.

From the instancing examples I’ve seen there were only cubes and spheres.

EDIT:
Anyway, the main goal of this thread has been achieved. Since I’m still in discovery mode, I could keep asking lots of questions and risk going a bit off-topic :D So, thanks a lot for your support! Once I become a bit more familiar with the vvvv environment, I’ll dive into VL.Fuse and shader buffer management as suggested by @readme

1 Like