I'm trying to use values generated with a 2D Perlin noise function to determine the height of each vertex on my sphere. Just like a terrain height map but spherical. Unfortunately I can't seem to figure it out.

So far it's easy to push any particular vertex along its calculated normal, and that seems to work. As you can see in the following image, I'm pulling only one vertex along its normal vector.

This was accomplished with the following code. No noise yet btw:

// Happens after normals are calculated for every vertex in the model
// xlen and ylen are the segments and rings of the sphere
for(let x = 0; x <= xLen; x += 1){

    for(let y = 0; y <= yLen; y += 1){
        
        // Normals
        const nx = model.normals[index];
        const ny = model.normals[index + 1];
        const nz = model.normals[index + 2];

        let noise =  1.5;

      	// Just pull one vert...
        if (x === 18 && y === 12) {

            // Verts
            model.verts[index]      = nx * noise;
            model.verts[index + 1]  = ny * noise;
            model.verts[index + 2]  = nz * noise;
        }
        index  +=  3;
    }
}

But what if I want to use 2D Perlin noise values on my sphere to create mountains on top of it? I thought it would be easy displacing the sphere's vertices using its normals and Perlin noise, but clearly I'm way off:

This horrible object was created with the following code:

// Happens after normals are calculated for every vertex in the model
// xlen and ylen are the segments and rings of the sphere
// Keep in mind I'm not using height map image. I'm actually feeding the noise value directly. 
for(let x = 0; x <= xLen; x += 1){

    for(let y = 0; y <= yLen; y += 1){
        
        // Normals
        const nx = model.normals[index];
        const ny = model.normals[index + 1];
        const nz = model.normals[index + 2];

        const sampleX = x * 1.5;
        const sampleY = y * 1.5;

        let noise = perlin2(sampleX, sampleY);

        // Update model verts height
        model.verts[index]      = nx * noise;
        model.verts[index + 1]  = ny * noise;
        model.verts[index + 2]  = nz * noise;

    
        index += 3;
    }
}

I have a feeling the direction I'm pulling the vertices are okay, the problem might be the intensity, perhaps I need to clamp the noise value? I've seen terrain planes where they create the mesh based on the height map image dimensions. In my case, the sphere model verts and normals are already calculated and I want to add height afterwards (but before creating the VAO).

Is there a way I could accomplish this so my sphere displays terrain like geometry on it? Hope I was able to explain myself properly. Thanks! 

Why not just

float scale = 0.1; // or whatever height is appropriate

model.verts[index] = nx * (1.0 + noise * scale);

8 hours ago, TeaTreeTim said:

Why not just

float scale = 0.1; // or whatever height is appropriate

model.verts[index] = nx * (1.0 + noise * scale);

 

Actually that did work, also understood what I was missing now. Thanks a lot Tim!