Moving between skyboxes


I have a question to ask people here. I have a mesh and two skyboxes inside of the mesh. I am trying to move camera from skybox 1 to skybox 2. When the camera moves from skybox 1 to skybox 2, I can see the textures of skybox 1 and outside mesh and finally the textures of skybox 2. With matterport and geocv examples, how do they move between skyboxes without looking at the outside mesh. Since I am a beginner of three.js, I need advices with details. Thanks in advance…

Can you please provide more details about your question? Right now, it’s a bit hard to image what you are looking for?

Can you share a video that demonstrates this transition? And maybe a demo or at least video of your current work of progress?

I think what the OP is looking for is very similar to streetview. Worth noting that matterport raised about 114 million dollars, on account of this technology. It may not be as trivial as THREE.TransitionSkyboxes(boxA, boxB)

I was under impression that matterport is mking $$ selling their $4000 3D camera, and javascript used to put the result on site is their least valuable asset :smiley: D

1 Like

Michael…thanks again for replying and everyone in my post.
I am including video to explain better…
I have a condominium model mesh with two skyboxes and once the camera gets into first skybox and moves to another skybox, between skyboxes I see a condominium model mesh with black background. I assume matterport and geocv use skyboxes like me but when the camera moves between skyboxes, I don’t see the mesh like mine. I want to avoid showing a condominium model when the camera moves to another skybox.

1 Like

@kwonyu what they do, I think, is projecting skyboxes onto the mesh. then, as you move around, they simply cross-fade two skyboxes

projecting the skybox onto the mesh is not that hard, either, consider these shaders:

// vertex
varying vec3 worldPosition;
void main () {
	vec4 p = vec4 (position, 1.0);
	worldPosition = (modelMatrix * p).xyz;
	gl_Position = projectionMatrix * modelViewMatrix * p;

// fragment
uniform vec3 placement;
void main () {
	// I think this can be directly used for cube texture lookup:
	vec3 direction = worldPosition - placement;

You can buy the $4000 camera, capture your data, but then it has to be converted to some format, and actually be served to people who want to buy the property, or inspect it. This is super convenient to do from a browser, so i think the web viewer is pretty important to a business like that. With the camera alone, what you capture is pretty useless i think.

How big are your skyboxes and how far apart they are? If you place them one after another, with no gaps, and move between them you wont see your condominium.

Thank for your reply… Dusan
I know if I place two skyboxes right next to it, I know it will not see the mesh outside. However, when I look at matterport and geocv examples, they are apart. I want to know how they did it.

Sorry…I don’t know your name…anyway makc3d…thanks for your reply…
any three.js examples…I am not familiar with your code…is it c++?
If you can, I need three.js code, actually javascript and principles underneath.
Can you? thanks…again…

Like i said, it’s not trivial. I’ve been doing this for a little bit but i have to admit i’d either have to dig into the code, or inspect the rendering somehow since off the top of my head i don’t know how its done.

What @makc3d suggested seems reasonable. I don’t understand how your 3d model relates to the cubemaps, but for starters i’d try to put them in places where they were generated from. Although these look like photos not 3d renderings.

I think placement in his shader would be the position of a cubemap. I’d try with two at the same time. You read one projected from point A, and another one from point B. You fade from one to the other as you move from A to B, and coordinate that with fading out the skybox. You can’t move much in a skybox until i stops making sense, i’d do that from like 0 - 0.2 then move in 3d to 0.8 then fade in the other to 1.

Matterport of course has the advantage of the (rough) 3d model corresponding to these cube maps.

Without the camera, you are looking to pay up to $4000 to people to do it by hand every time, so even if price is a bit big, it saves :dollar:.

@kwonyu it is GLSL and you have to learn to speak it if you seriously want to beat matterport app :slight_smile:


hence projecting it - the skybox then sticks to the mesh at the correct places, think of it as automatic UV map :slight_smile:

Yep, I’ve been surfin’ matterport code way deep for a time, so I can confirm @makc3d is right on this: it is envmaps projected onto the mesh. This solution seems to be mixed with another on areas of envmap that exhibit discontinuity from user view. As for the transition, as suggested by @pailhead the interpolation is not linear, and it is not getting calculated naivly on cpu but with a dedicated shader, so it is hardware accelerated.

As @makc3d is telling you, glsl is the way to go if you want to get close to this.


Hi, kwonyu. Can you share your full source code? I am doing the similar project like you.

1 Like