Custom mesh with Point primitive does not renders in WebGL2 and gives error on WebGPU

My requirement is to draw custom mesh with Point primitive. However, I could only draw it a as Line and Triangle primitive in WebGL2 and WebGPU. (No Error reported)

When I try using point primitives from standard material class on WebGL2 it does not display anything on WebGL2 and crashes on WebGPU.

customMeshMaterial.pointsCloud = true;

or

customMeshMaterial.fillMode = BABYLON.Material.PointFillMode;

Query1: I am missing something for WebGL2.
Query2: The same code works for other primitives but crash for point primitive. Is this expected or something I need to take care of? How can I make the custom mesh rendering with point primitive.

My system is Mac and using Canary Version 100.0.4887.0 (Official Build) canary (x86_64)

const scene = new Scene(engine);

const camera = new ArcRotateCamera("my first camera", 0, Math.PI / 3, 10, new Vector3(0, 0, 0), scene);
camera.setTarget(Vector3.Zero());
camera.attachControl(canvas, true);

const light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
light.intensity = 0.7;

var customMesh = new BABYLON.Mesh("custom", scene);
var positions = [-5, 2, -3, -7, -2, -3, -3, -2, -3, 5, 2, 3, 7, -2, 3, 3, -2, 3];
var indices = [0, 1, 2, 3, 4, 5]; // For PointListDrawMode, TriangleFillMode, LineListDrawMode

var vertexData = new BABYLON.VertexData();
vertexData.positions = positions;
vertexData.indices = indices;   
vertexData.applyToMesh(customMesh);

const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

const customMeshMaterial = new StandardMaterial("custom material", scene);
customMeshMaterial.backFaceCulling = false;

//customMeshMaterial.pointsCloud = true;                            // Compiles on WebGL2 but does not show Point Primitive, Compilation errors on WebGPU
//customMeshMaterial.fillMode = BABYLON.Material.PointFillMode;     // Compiles on WebGL2 but does not show Point Primitive, Compilation errors on WebGPU

customMeshMaterial.wireframe = true;                             // Work on WebGL, Work on WebGPU with artifacts
// customMeshMaterial.fillMode = BABYLON.Material.LineListDrawMode; // Work on WebGL, Work on WebGPU with artifacts

// customMeshMaterial.fillMode = BABYLON.Material.TriangleFillMode; // Work on WebGL, Work on WebGPU

customMesh.material = customMeshMaterial;
return scene;

It does work in WebGL2 but you should set a bigger point size to see something:

You should also disable lighting and set an emissive color as the lighting computation can’t be performed correctly in point mode:

It does not work in WebGPU because it seems that setting gl_PointSize now makes Tint produce invalid WGSL code. As WebGPU does not support point size anyway (point size is always 1 in WebGPU), I will make a PR that avoid setting gl_PointSize in WebGPU mode.

Note that wireframe=true does work for me in WebGPU (latest Chrome Canary with Windows 10). If your problem is having some black dots (but I have the same in WebGL2), you should disable lighting and set an emissive color:

Thanks for lightning fast reply it extremely productive.

  1. I confirm the WebGL2 works good with standard material point size. I can use it meanwhile the WebGPU got fixed.

  2. Thanks wireframe=true does work for me as well it has artefacts that I could see has fixed with emissive color and disabling light.

  3. I am aware of WebGPU point size limitation what I didn’t know you explained nicely. Your PR would really help me. On a secondary note, perhaps you may you like to bring this to the dawn community as this gl_PointSize is a valid GLSL code, Tint must handle this elegantly(yeah it may take longer term but your PR is the best chance to serve community).

Thank again for you help.

Here’s the PR:

1 Like