Help adding displacement to a sphere

Demos and projects
1

Hi, I’m trying to make a supernova effect by creating a mesh sphere then modifying it with a displacement map but I can’t get the sphere to change shape. Any advice as to what I am doing wrong would be appreciated! Here’s the code I am using. What I get is two perfect translucent spheres stacked on the same point, but no displacement.

    var star = new BABYLON.MeshBuilder.CreateSphere(i, {diameter: 45, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene, true);
    star.applyDisplacementMap(star_displace1.jpg, {minheight: 1, maxheight: 250, forceUpdate: true});
    var texture = new BABYLON.StandardMaterial('texture', scene);
    texture.emissiveTexture = new BABYLON.Texture(star_supernova_ii_shell.png, scene);
    star.material = texture;
    // x, y, and z are spacial coordinates established in flow of program
    star.position = new BABYLON.Vector3(x, y, z);
    texture.backFaceCulling = false;
    star.material.alpha = 0.5;
    // second star inside first to created layer affect
    var star2 = new BABYLON.MeshBuilder.CreateSphere(i, {diameter: 25, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene, true);
    star2.applyDisplacementMap(star_displace2.jpg, {minheight: 1, maxheight: 250, forceUpdate: true});
    var texture2 = new BABYLON.StandardMaterial('texture', scene);
    texture2.emissiveTexture = new BABYLON.Texture(star_array[i].second_url, scene);
    star2.material = texture2;
    // this x-y-z is the same as above in order to stack the graphics
    star2.position = new BABYLON.Vector3(x, y, z);
    star2.material.alpha = 0.5;
2

Hi @Jon-Ramer and welcome to the forum. This should be in the questions section but I am sure somebody who can will move it. Would you set up a playground as you will get help much faster.

https://doc.babylonjs.com/babylon101/first#the-playground

3 
var star = new BABYLON.MeshBuilder.CreateSphere(i, {diameter: 45, sideOrientation: BABYLON.Mesh.DOUBLESIDE, updatable:true}, scene, true);

Try that.

1 Like
4

Thanks Matt, I tried that but that code only made the star I added the code to disappear. The documentation says the “updateable: true” parameter should go after the “scene” parameter in the command line. Any other ideas?

Jon

5

You set the mesh as updatable after the scene when dealing with the Mesh constructor, not when creating a mesh using the MeshBuilder. So you have two ways of doing it. Another issue is the way you assign the displacement map. The way you do it is wrong, and is the reason it disappears:
https://doc.babylonjs.com/api/classes/babylon.mesh#applydisplacementmap

You need to apply the map like: applyDisplacementMap(displacementmapURL, 1, 250, null, null, null, true);
Instead of having the parameters inside an object.

Look at the following PG using both Mesh and MeshBuilder:
https://playground.babylonjs.com/#NE34YD#1

1 Like
6

I believe the words I am looking for are “Bingo!” “Woo hoo!” and “Thanks very much!” :slight_smile:

That worked perfectly! Now that I’ve got displacements, the next question is, is there a way to make the displacement smooth instead of pointy?

Thanks again, really appreciate the assistance…

Jon