Applying noise function to a mesh

Questions
1

Good day, if I have a mesh loaded into babylon, is it possible, is there a way to apply some kind of a noise function to the mesh to alter its shape by applying such a method or function?
thank you :slight_smile:

2

I don’t think there’s such methods out of the box.

You will need to either update the vertices (and normals) by hand or create a custom / node material shader that will update the vertices on the GPU side.

For eg, here’s a shader that uses turbulence to move the vertices (all credits to @dannybucksch for this material):
https://nme.babylonjs.com/#JN2BSF#29

1 Like
3

@Evgeni_Popov thank you, interesting I didnt know the node material editor of babylon, so is this editor a way to build shaders without coding right? very interesting, and then how are these used inside babylon? can you export what you create from the node material editor into what format and how do you use it inside your app then? maybe there is a basic tutorial somewhere that I can check, thank you :slight_smile:

4
2 Likes
5

@labris @Evgeni_Popov
So I downloaded that material and I apply it successfully with this code

var spherenew = MeshBuilder.CreateSphere(“sphere”, {}, scene);
spherenew.scaling = new Vector3(25, 25, 25);
spherenew.position = new Vector3(0, 150, 0);
spherenew.rotation = new Vector3(0, 0, 0);

var nodeMaterial = new NodeMaterial(“custom node material”);

nodeMaterial
.loadAsync(
matPath+“nodeMaterial.json”
)
.then(() => {
nodeMaterial.build(true);
});

spherenew.material = nodeMaterial;

thats great, it works, your node editor is incredible, wow
just a question, I am getting dozens of lines out in the javascript console outputting all the code of the shader, is this normal? can this be stopped? so I get tons of these in the console:

…VectorSplitter [VectorSplitterBlock]
nodeMaterialBlock.ts:543 Vertex shader: Building Time [InputBlock]
nodeMaterialBlock.ts:543 Vertex shader: Building [InputBlock]
nodeMaterialBlock.ts:543 Vertex shader: Building Scale [ScaleBlock]
3nodeMaterialBlock.ts:543 Vertex shader: Building Add [AddBlock]
nodeMaterialBlock.ts:543 Vertex shader: Building VectorMerger [VectorMergerBlock]
nodeMaterialBlock.ts:543 Vertex shader: Building Remap [RemapBlock]
nodeMaterialBlock.ts:543 Vertex shader: Building SimplexPerlin3D [SimplexPerlin3DBlock]
nodeMaterialBlock.ts:543 Vertex shader: Building Abs [TrigonometryBlock]
nodeMaterialBlock.ts:543 etc

6

Just use nodeMaterial.build(false); instead of nodeMaterial.build(true);

1 Like
7

@labris @Evgeni_Popov
now the next question would be, if I have a mesh with a PBR material that I must preserve, because the colors come from it and I have to preserve it. But I want to modify the vertexes to put noise into the mesh. I guess then that I would have to create a node material in the node material editor that only modified the vertexes data and not the color, right? but then how could I apply that material to the mesh without overriding its existing PBR material so that I don’t get rid of its colors?

8

im trying to eliminate the color output of the shader, but when I eliminate that node i get:
“You must define at least one fragmentOutputNode”

mmm so I wonder what is the way to preserve a PBR material of a mesh while impacting only its vertexes with a custom node editor material

9

You can’t, your node material must account for everything you need, you can’t just add to an existing material. You have PBR blocks to create PBR materials in the NME (the doc is your friend).

As this PG demonstrates, you can recreate the exact same look in a node material than using a PBRMaterial in the first place:

1 Like
10

@Evgeni_Popov mmm I get it thank you so, couple of questions:

  • ok so in theory if I want to create a shader that dynamically as needed puts more or less noise into the vertexes of mesh, I could recreate my original PBR material in the nodel material editor to then account for both color and geometry

  • now, once that is done, if I want to dynamically impact the amount of noise, I could have a uniform variable that specifies that amount of noise right, and then from the babylon code I can change the uniform variables of the shader outside of the material to then change the amount of noise applied in the material? is that possible? because if I cannot do that then it wouldnt be useful for me really

11

Yes for both points.

The nodematerial.getBlockByXXX methods will let you get a block from the material and change its value: Node Material | Babylon.js Documentation