How to set two different images on sphere half and half

Is it possible to set two different images on sphere half and half.

[https://thumbs.dreamstime.com/z/d-rendering-sphere-split-halves-diagonal-line-one-half-being-planet-earth-other-volleyball-sport-takes-over-136802185.jpg](https://Like this image)

I’m trying to set huge size canvas to sphere material, but browser doesn’t support big size canvas. So i’m was thinking is it possible to split one image and set two image on sphere ?.

Thank you so much.

First solution is using two textures in one - just merged.
Second solution is changed shader. Vertex shader:

varying float texnum;
....
if(position.y>0){ texnum=1.0; }
else{ texnum=2.0; }

fragment shader:

varying float texnum;
uniform sampler2D map1;
uniform sampler2D map2;
.....
if(texnum==1.0){ gl_FragColor=texture2D(map1,vUv); }
else{ gl_FragColor=texture2D(map2,vUv; }

Third solution is in other prog blender, 3ds max, set different materials to sphere triangles

2 Likes

Fourth solution: have two halves of the sphere.

phiStart — specify horizontal starting angle. Default is 0.
phiLength — specify horizontal sweep angle size. Default is Math.PI * 2.
thetaStart — specify vertical starting angle. Default is 0.
thetaLength — specify vertical sweep angle size. Default is Math.PI.

3 Likes

Merged into one, using BufferGeometryUtils, with groups for materials.

3 Likes

How can i use ( First solution is using two textures in one - just merged. )

I have one equirectangular image but it’s too big 20000x10000 it can’t be render on canvas because browser don’t support over 8000x4000. So i’m planning to split equirectangular image to 2 canvas and set texture on sphere

The closest thing, where I used two textures on one geometry, is this example: Edit fiddle - JSFiddle - Code Playground

1 Like

good plan, but with that kind of resolution you will easily exhaust gpu memory. 20000 x 10000 x 4 Bytes (for uncompressed RGBA texture) is around 800 MB, you know.

2 Likes

I am always thrilled by your short and efficient solutions by means of
onBeforeCompile: shader => ...

One needs an overview, knowledge of many details and a lot of experience. :+1: :+1: :+1:

It’s fodder for the collection again. :slightly_smiling_face:

1 Like

Is three.js have any option that Start and End points when cover material in the sphere.