CODEWITHSUNDEEP
three.js
Hazem Samir
Hazem Samir

Reputation: 11

Split texture image in threejs

I am working on displaying cubemap panoramas using three.js I have the panorama in this format stacked in one image:

cubemap panorama

I load this image using THREE.ImageUtils.loadTexture(url) then I was able to display it by modifying the faceVertexUvs array as described in this tutorial but I forced to use sampler2D for the texture and texture2D in the fragment shader with uv coordinates.

But I want to use textureCube function in the fragment shader (as it takes a direction vector which I need to perform some trick) so I need a samplerCube variable whose value is a texture with array of 6 separated images for each face of the cube.

So How can I split the image texture into 6 images?

Upvotes: 0

Views: 1110

Answers (1)

Kirill Dmitrenko
Kirill Dmitrenko

Reputation: 3649

Unfortunately, there's no way to easily split an image in WebGL. You could possibly use rendering to texture to draw every side of a cubemap, but I think using canvas would be easier.

var cubemapImage, // the cubemap
    cubemapSize, // size of a side of the cubemap
    posXImageCtx = document.createElement('canvas').getContext('2d'),
    negXImageCtx, posYImageCtx, /* etc */;

posXImageCtx.canvas.width = posXImageCtx.canvas.height = cubemapSize;
posXImageCtx.drawImage(
    cubemapImage,
    0, 0,
    cubemapSize, cubemapSize,
    0, 0,
    cubemapSize, cubemapSize
);

/* by analogy other sides */

var cubemap = new THREE.CubeTexture([
        posXImageCtx.canvas,
        negXImageCtx.canvas,
        posYImageCtx.canvas,
        /* etc */
    ], /* ... */);

Upvotes: 3

Related Questions