# How to view mesh‘s pointscloud

**URL:** <https://forum.babylonjs.com/t/how-to-view-mesh-s-pointscloud/28464>\
**Category:** Questions\
**Tags:** material\
**Created:** [March 16, 2022, 6:36am UTC](https://forum.babylonjs.com/t/how-to-view-mesh-s-pointscloud/28464 "2022-03-16T06:36:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![yuemiao](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yuemiao/32/13136_2.png) [@yuemiao](https://forum.babylonjs.com/u/yuemiao)\
**Post date:** [March 16, 2022, 6:36am UTC](https://forum.babylonjs.com/t/how-to-view-mesh-s-pointscloud/28464/1 "2022-03-16T06:36:30Z")

</div>

var model = new BABYLON.Mesh(“model”, this.\_scene)  
model.material=this.\_NormalMaterial  
model.setVerticesData(BABYLON.VertexBuffer.PositionKind, tup[0], true) model.setVerticesData(BABYLON.VertexBuffer.ColorKind, tup[1], true)  
model.setVerticesData(BABYLON.VertexBuffer.NormalKind, tup[2], true)  
model.setIndices(tup[3])  
1)this.\_NormalMaterial.wireframe= true,no problem,I can see model’s wireframe view  
2)this.\_NormalMaterial.pointsCloud= true,I can see nothing in the scene, model disappeared,even set pointSize=2,  
My question is How to view mesh‘s pointscloud，Is there another way to do this?

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [March 16, 2022, 8:39am UTC](https://forum.babylonjs.com/t/how-to-view-mesh-s-pointscloud/28464/2 "2022-03-16T08:39:55Z")

</div>

Please supply a repo of the problem in a playground using a simplified version of your project. This will enable us to see more clearly what the issue might be.

---

<div class="post-metadata">

**Author:** ![yuemiao](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yuemiao/32/13136_2.png) [@yuemiao](https://forum.babylonjs.com/u/yuemiao)\
**Post date:** [March 17, 2022, 6:46am UTC](https://forum.babylonjs.com/t/how-to-view-mesh-s-pointscloud/28464/3 "2022-03-17T06:46:31Z")

</div>

BABYLON.Effect.ShadersStore[“modelVertexShader”] = “precision highp float;\r\n”+

“attribute vec3 position;\r\n”+

“attribute vec4 color;\r\n”+

“varying vec4 v\_color;\r\n”+

“uniform float time;\r\n”+

“void main(void) {\r\n”+

" gl\_Position = vec4(position, 1.0);\r\n"+

" v\_color=color;\r\n"+

“}\r\n”;

BABYLON.Effect.ShadersStore[“modelFragmentShader”] = “precision highp float;\r\n”+

“varying vec4 v\_color;\r\n”+

“void main(void) {gl\_FragColor = v\_color;}\r\n”;

var createScene = function () {

```
// This creates a basic Babylon Scene object (non-mesh)

var scene = new BABYLON.Scene(engine);

// This creates and positions a free camera (non-mesh)

var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

// This targets the camera to scene origin

camera.setTarget(BABYLON.Vector3.Zero());

// This attaches the camera to the canvas

camera.attachControl(canvas, true);

// This creates a light, aiming 0,1,0 - to the sky (non-mesh)

var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

// Default intensity is 1. Let's dim the light a small amount

light.intensity = 0.7;

let vs = [0,0,-1,-1,1,-1,1,1,-1];

let cs = [0.5,0.5,0.5,1,0.5,0.5,0.5,1,0.5,0.5,0.5,1];

let is = [0,1,2];

var mMaterial = new BABYLON.ShaderMaterial("modelMaterial", 

scene,

    { 

        vertex: "model", 

        fragment: "model" 

    }, 

        {

        uniforms: [

            "time"

        ],

        attributes: [

            "position",

            "color"

        ],

    });//new BABYLON.NormalMaterial("modelMaterial", scene);//new ModelMaterial("modelMaterial", scene);

mMaterial.backFaceCulling = false

var model = new BABYLON.Mesh("model", scene);

model.material=mMaterial;

model.setVerticesData(BABYLON.VertexBuffer.PositionKind, vs, true);

model.setVerticesData(BABYLON.VertexBuffer.ColorKind, cs, true);

model.setIndices(is);

scene.onKeyboardObservable.add((kbInfo) => {

        switch(kbInfo.event.key){

            case 'p':

                mMaterial.pointSize=20

                mMaterial.fillMode=2

                break;

            case 'w':

                mMaterial.fillMode=1

                break;

            case 's':

                mMaterial.fillMode=0

                break;

        }

});

return scene;

```

};

---

<div class="post-metadata">

**Author:** ![yuemiao](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yuemiao/32/13136_2.png) [@yuemiao](https://forum.babylonjs.com/u/yuemiao)\
**Post date:** [March 17, 2022, 6:52am UTC](https://forum.babylonjs.com/t/how-to-view-mesh-s-pointscloud/28464/4 "2022-03-17T06:52:50Z")

</div>

The above is my code in playground,Run it,Keyboard input “P”,can’t see pointsCloud,“W” wireframe normal.Why pointsCloud doesn’t work？

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [March 17, 2022, 8:38am UTC](https://forum.babylonjs.com/t/how-to-view-mesh-s-pointscloud/28464/5 "2022-03-17T08:38:20Z")

</div>

Please supply the playground not the code within it.

> **[Playground | Babylon.js Documentation](https://doc.babylonjs.com/toolsAndResources/tools/playground)**
>
> Learn about the incredibly powerful playground, the online Babylon.js IDE.

---

<div class="post-metadata">

**Author:** ![yuemiao](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yuemiao/32/13136_2.png) [@yuemiao](https://forum.babylonjs.com/u/yuemiao)\
**Post date:** [March 18, 2022, 1:35am UTC](https://forum.babylonjs.com/t/how-to-view-mesh-s-pointscloud/28464/6 "2022-03-18T01:35:27Z")

</div>

so sorry

https://www.babylonjs-playground.com/#LTD1RM

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

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [March 18, 2022, 11:38am UTC](https://forum.babylonjs.com/t/how-to-view-mesh-s-pointscloud/28464/7 "2022-03-18T11:38:14Z")

</div>

Unfortunately I am not able to help with custom shader material. Here is a playground showing how it is done within the available features of babylon.js

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

> **[Material | Babylon.js Documentation](https://doc.babylonjs.com/typedoc/classes/babylon.material#pointscloud)**
>
> Base class for the main features of a material in Babylon.js \[API\]

> **[Point Cloud System | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/particles/point_cloud_system)**
>
> Learn all about the point cloud system in Babylon.js.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [March 18, 2022, 5:08pm UTC](https://forum.babylonjs.com/t/how-to-view-mesh-s-pointscloud/28464/8 "2022-03-18T17:08:53Z")

</div>

glPointsize needs to be set by your shader [https://www.babylonjs-playground.com/#LTD1RM#1](https://www.babylonjs-playground.com/#LTD1RM#1)

---

<div class="post-metadata">

**Author:** ![yuemiao](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yuemiao/32/13136_2.png) [@yuemiao](https://forum.babylonjs.com/u/yuemiao)\
**Post date:** [March 22, 2022, 2:08am UTC](https://forum.babylonjs.com/t/how-to-view-mesh-s-pointscloud/28464/9 "2022-03-22T02:08:25Z")

</div>

Thank you very much!