# WebGPU StandardMaterial doesn't recognize pointSize

**URL:** <https://forum.babylonjs.com/t/webgpu-standardmaterial-doesnt-recognize-pointsize/56212>\
**Category:** Feature requests\
**Tags:** material, webgpu, point-cloud\
**Created:** [January 26, 2025, 4:39pm UTC](https://forum.babylonjs.com/t/webgpu-standardmaterial-doesnt-recognize-pointsize/56212 "2025-01-26T16:39:51Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![HiGreg](https://avatars.discourse-cdn.com/v4/letter/h/c5a1d2/32.png) [@HiGreg](https://forum.babylonjs.com/u/HiGreg)\
**Post date:** [January 26, 2025, 4:39pm UTC](https://forum.babylonjs.com/t/webgpu-standardmaterial-doesnt-recognize-pointsize/56212/1 "2025-01-26T16:39:51Z")

</div>

> **[Babylon.js Playground](https://playground.babylonjs.com/#B29VEU)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

StandardMaterial in WebGL2 recognizes the pointSize property.  
WebGPU does not. All points are the default size.

---

<div class="post-metadata">

**Author:** ![HiGreg](https://avatars.discourse-cdn.com/v4/letter/h/c5a1d2/32.png) [@HiGreg](https://forum.babylonjs.com/u/HiGreg)\
**Post date:** [January 26, 2025, 4:49pm UTC](https://forum.babylonjs.com/t/webgpu-standardmaterial-doesnt-recognize-pointsize/56212/2 "2025-01-26T16:49:22Z")

</div>

Not supported according to

[https://doc.babylonjs.com/setup/support/webGPU/webGPUStatus#features-with-incomplete-support](https://doc.babylonjs.com/setup/support/webGPU/webGPUStatus#features-with-incomplete-support)

> [@WebGPU and Point Size](https://forum.babylonjs.com/t/webgpu-and-point-size/45212/2):
>
> Point size is something which is not supported by WebGPU (because not supported by DX12/Vulkan/Metal), see: We will have to make a workaround for it, but I’m not sure it is an easy fix to have it working transparently…

Opening Feature Request instead.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [January 27, 2025, 4:33pm UTC](https://forum.babylonjs.com/t/webgpu-standardmaterial-doesnt-recognize-pointsize/56212/3 "2025-01-27T16:33:07Z")

</div>

Yup, we need to wait on WebGPU here

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 27, 2025, 5:43pm UTC](https://forum.babylonjs.com/t/webgpu-standardmaterial-doesnt-recognize-pointsize/56212/4 "2025-01-27T17:43:12Z")

</div>

They won’t add support in the specification, because it’s not supported by DX12 and/or Vulkan and/or Metal.

So, if we want to support it transparently, we’ll have to emulate it, which is probably not straightforward, as we’ll have to change the mesh geometry at render time, to use quads instead of points - the vertex and fragment shaders will also have to be dynamically updated.

---

<div class="post-metadata">

**Author:** ![HiGreg](https://avatars.discourse-cdn.com/v4/letter/h/c5a1d2/32.png) [@HiGreg](https://forum.babylonjs.com/u/HiGreg)\
**Post date:** [January 27, 2025, 9:03pm UTC](https://forum.babylonjs.com/t/webgpu-standardmaterial-doesnt-recognize-pointsize/56212/5 "2025-01-27T21:03:10Z")

</div>

That’s what I was thinking on how to implement. Generate the quads on the GPU. Only send points from CPU.

---

<div class="post-metadata">

**Author:** ![HiGreg](https://avatars.discourse-cdn.com/v4/letter/h/c5a1d2/32.png) [@HiGreg](https://forum.babylonjs.com/u/HiGreg)\
**Post date:** [February 1, 2025, 4:30pm UTC](https://forum.babylonjs.com/t/webgpu-standardmaterial-doesnt-recognize-pointsize/56212/6 "2025-02-01T16:30:20Z")

</div>

Here’s a very early prototype of potential pointSizeSupport in WebGPU.

It does not have enough features to realy be called a PointsCloudSystem yet.

Modified from the boid flow demonstration playground.

> **[Babylon.js Playground](https://playground.babylonjs.com/?webgpu#3URR7V%23395)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

Essentially using an instanced matrix without needing CPU buffers to contain instance parameters.

There is an essentially unused compute shader (well, used once to initialize the GPU buffer).

A lot of unused parameters passed as a uniform.

I think it has potential. It tops out (for me on Android) at around 700000 particles and starts to slow down during user camera moves after that.

Internally (i.e. on the GPU) I think it’s could be reduced to using 4 floats per particle. Z is initialized to 0, and there’s an extra, I think unused, float.

Modified from boid with

- added worldViewProjection in vertex shader, which enables changing the camera view.
- called update() only once, which I hope means the compute shader is called only once.
- made the mesh a square instead of triangles, this doubles the number of vertices processed.
- set initializing CPU buffer to null, which I hope allows it to be garbage collected.

Seeking comments on whether this is a path worth pursuing. Will this have CPU space improvements without performance degredation? How does the max number of particles compare to other methods on WebGL2 or WebGPU?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 4, 2025, 1:08pm UTC](https://forum.babylonjs.com/t/webgpu-standardmaterial-doesnt-recognize-pointsize/56212/7 "2025-02-04T13:08:53Z")

</div>

Implementing point size support in the core would probably be too complicated, for little return on investment. Updating the PCS class using quad instantiation might be easier, however, and it could also be quite fast in WebGL2, meaning we wouldn’t have to maintain two implementations…

---

<div class="post-metadata">

**Author:** ![HiGreg](https://avatars.discourse-cdn.com/v4/letter/h/c5a1d2/32.png) [@HiGreg](https://forum.babylonjs.com/u/HiGreg)\
**Post date:** [February 4, 2025, 1:51pm UTC](https://forum.babylonjs.com/t/webgpu-standardmaterial-doesnt-recognize-pointsize/56212/8 "2025-02-04T13:51:31Z")

</div>

I think you’re right. I’m using this as an opportunity to learn the basics of WGSL. Of course, I’m learning from code in Babylon that you wrote. As far as I can tell, one mechanism in WebGPU comes down to a draw(6, …) command  
on the positions buffer. This is demonstrated in [this WebGPU example](https://webgpu.github.io/webgpu-samples/?sample=points).

I think what you’re referring to boils down to a drawArray or drawElement with a Quad primitive. However, I don’t see quad as a GPUPrimitiveTopology in [the WebGPU spec](https://www.w3.org/TR/webgpu/#dom-gpuprimitivetopology-triangle-strip).

> enum GPUPrimitiveTopology {  
> “point-list”,  
> “line-list”,  
> “line-strip”,  
> “triangle-list”,  
> “triangle-strip”,  
> };

I think the closest is a 4-element triangle strip. But it may require a positions buffer that contains the vertex position data, whereas the draw(6…) approach above does not.

I’m also unsure where in the render pipeline that these draw commands exist.

You know much much more than I do. I apologize if I’m just wasting your time here.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 5, 2025, 9:52am UTC](https://forum.babylonjs.com/t/webgpu-standardmaterial-doesnt-recognize-pointsize/56212/9 "2025-02-05T09:52:36Z")

</div>

Yes, a quad is drawn as two triangles. You can use non-indexed triangles in Babylon by calling `Mesh.convertToUnIndexedMesh`. This way, you will get the vertex index thanks to `gl_VertexID` in glsl (equivalent to `vertex_index` in WebGPU) and use it to retrieve the extent of the particle for this vertex.

You can implement it like this:

> **[Babylon.js Playground](https://playground.babylonjs.com/#VPS0OV%234)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

You have to create a position vertex buffer to replace the existing vertex buffer of the ground, because this buffer must be flagged as “instanced”, meaning each entry of the buffer is used for one instance of the quad (this position buffer gives the position of each particle).

You also have to set `ground.subMeshes[0].verticesCount = 6` to indicate that the quad geometry is made of 6 vertices (2 triangles), because by default `SubMesh.verticesCount` is set to the number of entries in the position buffer (1000 in the PG).

Lastly, you have to indicate that the ground mesh must be drawn as an instanced geometry, by setting a value to `forcedInstanceCount`, which is the number of instances you want to draw (here, the number of particles).

> [@HiGreg](#):
>
> I apologize if I’m just wasting your time here.

Not at all, it’s an interesting subject to discuss!

---

<div class="post-metadata">

**Author:** ![HiGreg](https://avatars.discourse-cdn.com/v4/letter/h/c5a1d2/32.png) [@HiGreg](https://forum.babylonjs.com/u/HiGreg)\
**Post date:** [February 5, 2025, 12:58pm UTC](https://forum.babylonjs.com/t/webgpu-standardmaterial-doesnt-recognize-pointsize/56212/10 "2025-02-05T12:58:21Z")

</div>

This is awesome! I was hoping for an easy way to turn an existing mesh (and VertexBuffer) into sized points at each vertex, but I’m not sure that’s possible. It’s great that instanced is done with points and not matrices!

I think the major remnant (maybe) is to add a parameter to updateDirectly for source offset (and it’s call to engine.updateDynamicVertexBuffer).

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 5, 2025, 3:22pm UTC](https://forum.babylonjs.com/t/webgpu-standardmaterial-doesnt-recognize-pointsize/56212/11 "2025-02-05T15:22:53Z")

</div>

Yes, it could be nice to have another “srcOffset” parameter for `updateDirectly` (there’s a workaround, though, which is to create an array buffer view which takes this offset into account).
