Splitting a data texture into 6 different textures

[TheHappyKoala]

I’m playing around with creating procedural planet textures, and I have chosen to use a cube that I transform into a sphere instead of using the sphere geometry, since this makes not having textures stretch at the poles of the sphere a great deal easier.

I’ve run into an issue, though. In order for the planet texture to be smooth and continuous without awkward seams, I’m generating one texture, which I am trying to split into six textures that I can dress the cube with, but so far without success.

Here’s the code that I have for creating the texture that I want to divide into 6 textures that I can use to create six MeshPhongMaterials and populate the materials array for the mesh with:

    const size = resolution * resolution;
    const data = new Uint8Array(3 * size);

      let texture = new THREE.DataTexture(
        data,
        resolution,
        resolution,
        THREE.RGBFormat
      );
      texture5.needsUpdate = true;
  
      addScalarField(texture);
  
      const material = new THREE.MeshPhongMaterial({
        map: texture,
        bumpMap: texture,
        bumpScale: 1
      });

    const mesh = new THREE.Mesh(geometry, [material]);

If somebody could shed some light on how I could achieve this, it would be much appreciated!

[DolphinIQ]

If pole stretching is the issue, have you considered using an ICO Sphere? THREE.IcosahedronBufferGeometry

[TheHappyKoala]

Still get a wee bit of pole stretching, but it’s a marked improvement, so I’m going to proceed with this. Thanks !

[DolphinIQ]

No problem!
Hmm I expected clean triangles, but it seems like Three.js stretches the uvs to a full square:

(taken from three.js examples)

I was expecting something more along the lines of Blender, where all faces are identically universal:

The price to pay is that uvs only take up half a square, but maybe you could turn it to your advantage and paint 2 maps on 1 texture?
Perhaps it would be possible to find the Blender’s algorithm, for generating uvs, on the internet or source code and port to JS. Idk, something to think about.

But if the default Icosahedron uvs work fine for you then I guess thats good enough

[TheHappyKoala]

With the sphere geometry, the terrain at the top and bottom quarters of the sphere formed this ugly spiral pattern that converged on the poles, and with an Icosahedron, with the detail argument set to 3, there is some distortion at the very poles, but it’s barely noticeable elsewhere and with the point light you can barely see the poles, either, as you can see in the screencap below, so I’m happy, for now. I’ll probably give it another try at some later stage but I spent a week or so going bonkers about this, so being able to move on feels kind of nice

Still need to factor in longi and latitude (right now the elevation is the only factor determining the color of a unit of terrain) to get some ice at the poles and deserts above and below the equator, but it’s a work in progress.