0

Im trying to texture a cube sphere, a cubed turned into a sphere with this gnomic projection, now im trying to texture it with a single square or rectangular texture generated with perlin noise. this

next i tried using this uv mapping code from codepen, but that left a seam on the back. here

i think, what i need is the Spherical mapping response from this question but im not sure how to apply it, i tried to use it like this, from this question: 

function assignUVs3(geometry) {

    geometry.faceVertexUvs[0] = [];

    geometry.faces.forEach(function(face) {

        var uvs = [];
        var ids = [ 'a', 'b', 'c'];
        for( var i = 0; i < ids.length; i++ ) {
            var vertex = geometry.vertices[ face[ ids[ i ] ] ].clone();

            var n = vertex.normalize();
            var u = .5 - Math.atan( n.z, - n.x ) / ( 2.0 * Math.PI );
            var v = .5 - Math.asin( n.y ) / Math.PI;
            uvs.push( new THREE.Vector2( u, v ) );
        }
        geometry.faceVertexUvs[ 0 ].push( uvs );
    });

    geometry.uvsNeedUpdate = true;
}

but that gave it this weird stretched look image3

is my logic wrong? is there an easier way to apply either a square or rectangular texture to a cubesphere?, im generting the textures on real time so doing some extra work on the textures themselves is not really an option, and since im not computer graphics pro, im not really ready to go to shader level.

can anyone see a better solution or point me out in the direction of some reading material that would help me, thank you very much.

EDIT: Well, kinda solved and not really my problem, the function had a mistake and fixed it according to this Sphere UV Mapping guide.

Now the function looks like this: 

function assignUV(geometry) { 
    geometry.faceVertexUvs[0] = []; 
    geometry.faces.forEach(function(face) { 
       var uvs = [];
       var ids = [ 'a', 'b', 'c'];
       for( var i = 0; i < ids.length; i++ ) {
           var vertex = geometry.vertices[ face[ ids[ i ] ] ].clone();
           var n = vertex.normalize();
           var u =  .5 + Math.atan2( n.z, - n.x ) / ( 2.0 * Math.PI ) ;
           var v =  .5 - Math.asin(n.y) / Math.PI ;
           uvs.push( new THREE.Vector2( u, v ) );
       }
       geometry.faceVertexUvs[ 0 ].push( uvs );
   });
   geometry.uvsNeedUpdate = true;
}

and gives me this result: Textured planet

And while it looks the best so far, still has the seam. Well maybe this will help someone in the future. Any ideas appreciated, thank you.

Luchingador
  • 31
  • 1
  • 4
  • 1
    A shader for noise like this is quite easy, [HERE](https://2pha.com/demos/threejs/shaders/perlin_noise_3d.html) is one I did when learning shaders. You could pretty much copy and paste it and play with the parameters a bit. click "scene" at the top right to be able to change to a sphere. – 2pha Jan 23 '18 at 15:58
  • im really a noob on shaders, the reason why im using perlin noise is so i can recover a texture using a seed, would i still be able to do that using those shaders? thank you. – Luchingador Jan 23 '18 at 21:26
  • 1
    I got the code from [HERE](https://github.com/ashima/webgl-noise). The link I posed does seem to reproduce the same texture on reload of the page. I am not sure which value in the code would be considered the "seed" though. – 2pha Jan 24 '18 at 00:53
  • 1
    There is talk of using a seed in the code I linked to [HERE](https://github.com/ashima/webgl-noise/issues/9) – 2pha Jan 24 '18 at 00:59

0 Answers0