Decals in the skybox

Hello guys! I want to make decals in the skybox,but Ifind that It can only be displayed on the outside (frontface), how can it be displayed inside(backface)?

Here is the demo:https://www.babylonjs-playground.com/#13MZUF#2

https://www.babylonjs-playground.com/#13MZUF#3

1 Like

Thank you! You use .backFaceCulling = false,it is useful.But the decals inside were mirrored. Can we adjust it by normal vector? Or adjust the UV coordinates to restore the original image?


You can see that the decals inside were mirrored.

Hiya X… and hi to MarianG too.

https://www.babylonjs-playground.com/#13MZUF#4 See lines 46 - 47.

I turned-on .showBoundingBox on the decal… to show us that decals are actually mesh-based, and can be rotated just like mesh. But rotating decal-mesh is somewhat trouble-bound, because decals are “built” to match contour of mesh beneath, and flipping a decal’s MESH… will flip its contouring, too. This could easily cause part of the decal texture… to be UNDER the surface of the underlying mesh. This is why re-positioning a decal AFTER its creation… is not wise, either. It was built to match the bumps/contours underneath it, and a re-position will make it no longer match contour of underlying mesh.

I should have found/used a method to flip the texture itself, and not flip the decal’s mesh via .rotation.y.

Because of the possible contour of decal mesh, billboardMode (make mesh always face camera) does NOT work well on decals, either. Decals are NOT designed to be billboarded, I suspect.

Notice… that when you place a decal in the corner of a cubeMap skybox… the decal can get a bit confused. Decals require fairly complex code, as they are often used to place texture “patches” upon bumpy terrain. Decals attempt to contour themselves to match the mesh they are placed-upon… and this causes the troubles in the corners of the skybox (90-degree contour change in skybox corners).

It might be wise to NOT use decals on insides of skyboxes… but instead, for each “decal”… simply place a plane in the “air” (near skybox wall) and possibly billboarded, and texture it with a transparent background (.hasAlpha = true) texture.

In another direction, I tried to use a “skydome” with a single equirectangular texture… instead of a classic skybox. https://www.babylonjs-playground.com/#13MZUF#5

As you can see, I haven’t got the decals working, yet. But, if/when we get decals to work with the dome, we might be able to test “the corners”… to see if decals act better, there. I may have created the skydome incorrectly… not double-sided or something.

In another forum thread, we needed to make a box mesh lay-flat against the inner-surface of a sphere… much like a decal. Change the box to a plane… with a hasAlpha texture, and maybe this will work for you, too. [pg demo]

Ahh, Wingnut babbling aimlessly. heh. More comments/tests likely coming soon. Stay tuned. :slight_smile:

Update: Decals on the skydome insides… https://www.babylonjs-playground.com/#13MZUF#7 - still not the best. Tweaking.

2 Likes

Thank you very much. In fact, in my project, I also used a single equirectangular texture, and maybe a 360 video. I want to realize that in the interior of the skybox, I can replace anything inside with decals, like a painting in a museum, and so on, so that I can reduce the number of equirectangular textures and change the scene.
In the past, my idea was that the user would select four points with the mouse and then create a mesh (plane) to map on it. We did, but I found that the scenarios for this approach were limited. Because there’s no guarantee that all four points are in one plane (except on the surface of the cube), and there’s no way to have more complex shapes. Even the decals used now can not be replaced by any shape, and there is also the trouble of texture UV. Do you have any good ideas?
(The description of the application scenario can be seen here:Texture of a polygon

nod… thx for info/details, and link.

Possibly related/useful, here is a playground with a customized BJS particle system, and some web-found functions… that supposedly do something called “spherical coordinates”. I know little about it, and I barely got this playground working at all. :slight_smile:

The two web-found funcs are getCart and plot1. GetCart() is called in line 13, and with help from plot1(), it makes all these non-flying particles… be start-positioned in a sphere-shape. Theta and Phi. :open_mouth: Magic!

I don’t know if anything there… could be useful, but I figured I should pass it on to you. :slight_smile: It is yet another toy for your SphereMaster’s toy box. If each particle were instead, a picture/shape, maybe your “gallery” doesn’t need walls at all. Just all floating media… positioned and aimed… to create what looks like being inside a sphere. But, there’s no sphere at all. * shrug * hmm.

https://www.babylonjs-playground.com/#13MZUF#6
sideOrientation = BACKSIDE in the box constructor

Thank you very much!!!