# P5 point cloud with textures

**URL:** <https://discourse.processing.org/t/p5-point-cloud-with-textures/46393>\
**Category:** Coding Questions\
**Created:** [May 15, 2025, 9:36am UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393 "2025-05-15T09:36:07Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![hallohallo1234](https://avatars.discourse-cdn.com/v4/letter/h/bc8723/32.png) [@hallohallo1234](https://discourse.processing.org/u/hallohallo1234)\
**Post date:** [May 15, 2025, 9:36am UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393/1 "2025-05-15T09:36:07Z")

</div>

is there a way to map a texture of a obj on points that i create in p5 with beginShape(POINTS). i would like that the user is able to load a texture alongside a .obj and it will map the colors of the texture accurately on the points.

 ![Bildschirmfoto 2025-05-15 um 11.35.14](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/1/61eae1efd256cbd6a66dddb61bd73aec05aeb8e2.png)

---

<div class="post-metadata">

**Author:** ![ffd8](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ffd8/32/815_2.png) [@ffd8](https://discourse.processing.org/u/ffd8)\
**Post date:** [May 22, 2025, 12:30pm UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393/2 "2025-05-22T12:30:27Z")

</div>

Quick followup question – can anyone explain why drawing a pointcloud with `beginShape(POINTS)` + `vertex(....)` + `endShape()` is sooooo much faster to render, then looping through the vertices and drawing a `point()` with individual stroke color per point?? Is there a good alternative to render a point cloud with RGB points? does it require a shader or new p5 geom tricks?

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [May 22, 2025, 2:02pm UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393/3 "2025-05-22T14:02:14Z")

</div>

Calling `point()` renders a piece of geometry. Calling `point()` a million times in a loop renders a million pieces of geometry.

Calling `beginShape()` … `endShape()` sets up a buffer, fills it with geometry and then renders it all with a single, efficient, graphics call.

`stroke()` (and `fill()`) is a somewhat messy function. Because Processing supports multiple color modes with user-chosen number ranges, each call to `stroke()` has to check what mode it’s in and do the appropriate math to convert from your number range to the hardware-native color range.

By far, the most efficient way to render a cloud of points with a texture is using a shader, though that requires you to figure out the texture uv-mapping yourself for each point.

---

<div class="post-metadata">

**Author:** ![davepagurek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davepagurek/32/17535_2.png) [@davepagurek](https://discourse.processing.org/u/davepagurek)\
**Post date:** [May 22, 2025, 2:09pm UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393/4 "2025-05-22T14:09:43Z")

</div>

I don’t think there’s an easy way to do this for POINTS just yet. For regular fills/strokes, you can change the color between each `vertex()` call, but that seems to not be working for points (worth filing a bug report for, if you’re interested!)

So to explore some alternative solutions: one could be to switch from points to tiny meshes, and then applying a color to each one. This could be either via calling `fill()` before drawing the triangles, or by giving it texture coordinates in each `vertex()` call that maps to your imported texture. [Here’s a quick example that does that with triangles](https://editor.p5js.org/davepagurek/sketches/Ojmgfd5Vc), but to make it look better from different orientations, you might want to consider doing a tetrahedron or something more 3D. The tradeoff being, it’ll look better with more triangles, but will run slower.

> [@ffd8](#):
>
> can anyone explain why drawing a pointcloud with `beginShape(POINTS)` + `vertex(....)` + `endShape()` is sooooo much faster to render, then looping through the vertices and drawing a `point()` with individual stroke color per point??

This has to do with batching: drawing with `beginShape`/`endShape` does it all in one go, while separate `point`s have back-and-forth between the CPU and GPU for each one. On many systems, that back-and-forth is a much bigger bottleneck than the actual rendering. Based on that, if your data doesn’t change much, I’d recommend putting it in a `p5.Geometry`, which stores its data on the GPU so that there’s _no_ back and forth after the first render. This might also allow you to use more vertices per point too, compared to the `beginShape`/`endShape` approach, or use a sphere as each point. Take a look at [the last example in the `buildGeometry` reference](https://p5js.org/reference/p5/buildGeometry/) for how to draw a bunch of spheres at different points, saved to a `p5.Geometry` for performance.

---

<div class="post-metadata">

**Author:** ![ffd8](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ffd8/32/815_2.png) [@ffd8](https://discourse.processing.org/u/ffd8)\
**Post date:** [May 22, 2025, 10:13pm UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393/5 "2025-05-22T22:13:14Z")

</div>

Thanks @scudly + @davepagurek for the quick replies! Indeed a shader is likely what’s needed for handling most point clouds, but curious what can be done within the p5 friendly domain. Thanks for the clarifications as to why `point()` is slow and sounds like `buildGeometry()` could be a nice approach, however a big part of their plan is to offset/warp the position of points, so a ‘fixed’ shape/model maybe doesn’t work. While trying out, found a [potential issue](https://github.com/processing/p5.js/issues/7838) with `point()` within `buildGeometry()`? Also just [filed an issue](https://github.com/processing/p5.js/issues/7839) about `beginShape(POINTS)` not using the given stroke(), since it does work great with `LINES` and `TRIANGLES` = could of course make hacky short lines… = [aha, hacky works!](https://editor.p5js.org/ffd8/sketches/NJZgVrsVy)

---

<div class="post-metadata">

**Author:** ![davepagurek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davepagurek/32/17535_2.png) [@davepagurek](https://discourse.processing.org/u/davepagurek)\
**Post date:** [May 23, 2025, 12:11pm UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393/6 "2025-05-23T12:11:04Z")

</div>

> [@ffd8](#):
>
> a big part of their plan is to offset/warp the position of points

That could potentially be done in a shader too if you’re interested! By modifying the positions in a shader using something like the [last example here](https://beta.p5js.org/reference/p5/basestrokeshader/), you could end up with [something like this](https://editor.p5js.org/davepagurek/sketches/nrQwJjPr8) (but, in the process, I noticed that stroke colors seem to be not saving correctly in `p5.Geometry`, so… maybe this approach is best saved for later 😅)

---

<div class="post-metadata">

**Author:** ![ffd8](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ffd8/32/815_2.png) [@ffd8](https://discourse.processing.org/u/ffd8)\
**Post date:** [May 23, 2025, 7:14pm UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393/7 "2025-05-23T19:14:11Z")

</div>

For now, no shaders necessary but neat to see what’s possible and now part of 2.0 (`baseStrokeShader` is wild). In the end, the hack above of using `LINES` that appear as dots seems to be a viable solution.

---

<div class="post-metadata">

**Author:** ![hallohallo1234](https://avatars.discourse-cdn.com/v4/letter/h/bc8723/32.png) [@hallohallo1234](https://discourse.processing.org/u/hallohallo1234)\
**Post date:** [May 28, 2025, 9:07am UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393/8 "2025-05-28T09:07:29Z")

</div>

Can you help me set up a shader for this? or where do i have to look?

---

<div class="post-metadata">

**Author:** ![davepagurek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davepagurek/32/17535_2.png) [@davepagurek](https://discourse.processing.org/u/davepagurek)\
**Post date:** [June 4, 2025, 7:07pm UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393/9 "2025-06-04T19:07:11Z")

</div>

I also saw I think a post from you on Reddit, here’s the answer I left there for continuity:

Here’s a demo that animates points with a shader: [Point shader demo by davepagurek -p5.js Web Editor](https://editor.p5js.org/davepagurek/sketches/Xn6GPTrWi)

We don’t have a point shader yet, so the approach I took was:

- Make each point out of tiny strokes
- Cache all the strokes in a p5.Geometry so that each frame updates fast
- Make a stroke shader that animates each point

The main downside of this is that you can only animate each point based on its position, since there isn’t really any other way to identify points here. That could be all you need though!

---

<div class="post-metadata">

**Author:** ![ffd8](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ffd8/32/815_2.png) [@ffd8](https://discourse.processing.org/u/ffd8)\
**Post date:** [June 5, 2025, 9:45am UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393/10 "2025-06-05T09:45:43Z")

</div>

@davepagurek - we just had a look at your example (thanks for that!) and attempted to set the color within the shader, but unfortunately they are ‘static’ and the same across all points. Do you have a suggestion of how to treat each one separately? Implemented by just adding the following for a quick test, expecting it to be wild colors:

```auto
getWorldInputs((inputs) => {
      inputs.color.r = Math.random();
      inputs.color.g = Math.random();
      inputs.color.b = Math.random();
      inputs.position.x += warpScale * sin(t * 0.001 + inputs.position.y * 0.05)
      
      return inputs
    })

```

---

<div class="post-metadata">

**Author:** ![ffd8](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ffd8/32/815_2.png) [@ffd8](https://discourse.processing.org/u/ffd8)\
**Post date:** [June 5, 2025, 10:15am UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393/11 "2025-06-05T10:15:56Z")

</div>

Aha - just [figured out a hack](https://editor.p5js.org/ffd8/sketches/ojZQqJCjx) – just placing an image/texture over all the points with `blendMode(MULTIPLY)` to colorize our view of all the points.. perhaps a simplest approach, to then use any source as overlay.

 ![Screenshot 2025-06-05 at 12.16.42](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/b/fb8ea7876257fb4e770d3c2c2e2af6198e74a43d.png)

---

<div class="post-metadata">

**Author:** ![davepagurek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davepagurek/32/17535_2.png) [@davepagurek](https://discourse.processing.org/u/davepagurek)\
**Post date:** [June 5, 2025, 8:22pm UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393/12 "2025-06-05T20:22:32Z")

</div>

I think the main issue with your snippet is that we don’t yet support random() within a shader (follow along here if you’re interested in progress on that! [[p5.strands] Bridging p5.strands and p5.js functions · Issue #7849 · processing/p5.js · GitHub](https://github.com/processing/p5.js/issues/7849))

So if you want something random per vertex, you may need to write your own randomizer based on the x,y,z position of each point. E.g. if you add enough sins and coses together, you’ll get something looking fairly random. Here’s a demo of that (using [a one-liner random function from github](https://gist.github.com/yiwenl/dbbaa48e1bc8efd3d89a)): [Point shader demo copy by davepagurek -p5.js Web Editor](https://editor.p5js.org/davepagurek/sketches/YV7ZChTed) The main downside here is that because it’s based on the x, y, and z values of the point and I’ve made the points out of lines, the two halves of the line get colored differently. So you maybe want to do something to round the y values to avoid that.

---

<div class="post-metadata">

**Author:** ![ffd8](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ffd8/32/815_2.png) [@ffd8](https://discourse.processing.org/u/ffd8)\
**Post date:** [June 5, 2025, 10:37pm UTC](https://discourse.processing.org/t/p5-point-cloud-with-textures/46393/13 "2025-06-05T22:37:30Z")

</div>

Aha, that explains why attempts of random etc weren’t working… yeah, I’m not at all versed in shaders, so I backed away towards other solutions. The previous hack using `beginShape(LINES)` seemed good, but struggled once getting up to 10,000+ vertices. Using `POINTS` doesn’t have the same issue, so for simplicity sake (and using wild textures) – this overlay hack is probably best. Nevertheless, will stay tuned for progress mentioned above. thanks!