Why singularity still exists after I split equirectangular map to cubic map?

Questions
,
1

I tried to split equirectangular map to cubit map,it refer to https://stackoverflow.com/a/36976448/10988559, and it works(I think so) at here(jsfiddle).


/** MAIN CODE **/

function genOrientedMat({ texture, face }) {
  return new THREE.ShaderMaterial({
    side: THREE.DoubleSide,
    uniforms: {
      texture: { type: "t", value: texture },
    },
    vertexShader: `
      varying vec2 vUv;

      void main() {
        vUv = uv;

        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }
    `,
    fragmentShader: `
      uniform sampler2D texture;
      varying vec2 vUv;

      const float PI = 3.14159265359;
      const float PI2 = PI * 2.0;
      const float PI_DIV_2 = PI / 2.0;

      const int RIGHT  = 0;
      const int LEFT   = 1;
      const int UP     = 2;
      const int DOWN   = 3;
      const int FRONT  = 4;
      const int BACK   = 5;

      vec3 uvToXYZ(vec2 uv, int faceIndex) {
        float a = 2.0 * uv.x;
        float b = 2.0 * uv.y;
        vec3 result;

        if(faceIndex == RIGHT) {
          result = vec3(1.0 - a, 1.0, 1.0 - b);
        } else if(faceIndex == LEFT) {
          result = vec3(a - 1.0, -1.0, 1.0 - b);
        } else if(faceIndex == UP) {
          result = vec3(1.0 - b, a - 1.0, -1.0);
        } else if(faceIndex == DOWN) {
          result = vec3(b - 1.0, a - 1.0, 1.0);
        } else if(faceIndex == FRONT) {
          result = vec3(1.0, a - 1.0, 1.0 - b);
        } else if(faceIndex == BACK) {
          result = vec3(-1.0, 1.0 - a, 1.0 - b);
        }

        return result;
      }

      void main() {
        vec3 xyz = uvToXYZ(vUv, ${face});
        float x = xyz.x;
        float y = xyz.y;
        float z = xyz.z;
        float theta = PI + atan(y, x);
        float r = pow(x * x + y * y, 0.5);
        float phi = PI_DIV_2 - atan(z, r);

        float uf = theta / PI2;
        float vf = phi / PI;

        if(uf > 1.0) {
          uf -= 1.0;
        } else if (uf < 0.0) {
          uf += 1.0;
        }

        gl_FragColor = texture2D(texture, vec2(uf, vf));
      }
    `
  })
}

let src = "https://threejs.org/examples/textures/2294472375_24a3b8ef46_o.jpg"
let texture = new THREE.TextureLoader().load(src)

let rightMat = genOrientedMat({ texture, face: 0 })
let leftMat  = genOrientedMat({ texture, face: 1 })
let upMat    = genOrientedMat({ texture, face: 2 })
let downMat  = genOrientedMat({ texture, face: 3 })
let frontMat = genOrientedMat({ texture, face: 4 })
let backMat  = genOrientedMat({ texture, face: 5 })

let cube = new THREE.Mesh(
	new THREE.BoxBufferGeometry(100, 100, 100),
  [
  	rightMat,
    leftMat,
    upMat,
    downMat,
    frontMat,
    backMat
  ]
)

scene.add(cube)

animate()

BUT, Why singularity still exists in glsl and not exists in python? What’s my fault? Thanks for any help.

results of my code
screenshot.jpg1464×785 78.8 KB

2

/cc

3

Yeah, it’s my question too.

4

What do you mean with this phrase?

5

The map looks like a spherical image map which will have a point at the poles. Might be best to use a cubic map with 6 images representing each face.

6

1

7

I have to map spherical image to cube box. As we can split spherical image to cubic image, Why can’t handle this in js(shader)? I try to do it.

8

The same issue in this example:
https://threejs.org/examples/#webgl_materials_envmaps

9

%E6%9C%AA%E6%A0%87%E9%A2%98-1

10

I noticed the same artifact occurring with this tool.

Try changing the minification filter on your texture:

let texture = new THREE.TextureLoader().load(src);
texture.minFilter = NearestFilter;
2 Likes
11

@marquizzo
yeah, I remember about this post, just couldn find it :slight_smile: thanks :slight_smile:

1 Like
12

@marquizzo It works perfect! I can’t appreciate more!!! The fking question troubled me for near a week!!! THANKS!!!(I feel sorry for my pool poor English…)

13

Thank you every one! This question is solved

14

No need to apologize, your English is not pool at all! :wink:

1 Like