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

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 }) {
side: THREE.DoubleSide,
uniforms: {
texture: { type: "t", value: texture },
},
varying vec2 vUv;

void main() {
vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`,
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 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
]
)

animate()

``````

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

/cc

Yeah, it’s my question too.

What do you mean with this phrase?

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.

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.

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

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

@marquizzo