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