Partially transparent cubetexture for skybox

Questions
1

In order to show a fallback sky behind a textured skybox, I would like to make portions of a skybox transparent by assigning a transparent texture to specific faces of a cubetexture:

https://playground.babylonjs.com/#UU7RQ#1967

The top face shows as opaque black both from the inside and outside. I hope to make it transparent. Is that possible ?

The inspector shows all face textures as RGBA, so mixing jpg and png should be ok ?

Perhaps it is necessary to stop using a cubetexture and instead construct a skybox from separate planes with individual (emissive?) textures ?

2

It is not possible to use a cube texture on the diffuse texture and this is where we pulled alpha info from.

I d say the six planes approach sounds the simplest or use NME to create a custom material for it :slight_smile:

3 Likes
3

Thanks. That may be the opportunity to learn NME, using https://playground.babylonjs.com/#UU7RQ#1971 .

1 Like
4

I was able to come up with a simple node material which uses the alpha from the reflection texture:

image
image1081Ă—688 97.7 KB

https://playground.babylonjs.com/#UU7RQ#1971

The hardest part was to understand that it is not possible to provide a cube texture with separate images for the 6 sides in the graphical editor but it is not a problem for the reflection texture block, in code.

Next, I would like to factor in an overall alpha for the complete skybox. I could use a user float input and expose it but I noticed that nodeMaterial has an .alpha property. Is it possible to use that as an Input in a node material ?

1 Like
5

Here you go: https://playground.babylonjs.com/#UU7RQ#1972

You can inspect the changes in the inspector, basically adding a float input and multiplying with the reflection alpha before being sent to the output alpha.

1 Like
6

Thanks. Setting with .getBlockByName().value is a great option.

1 Like
7

I think, in order to change the ReflectionTextureBlock’s texture, the .texture property needs to be modified:

rather than the .value property, see https://playground.babylonjs.com/#UU7RQ#1997

Not sure why .value also worked since the API does not list the property:

Perhaps an internal, generic API ? I only found out because serializing only worked with the .texture property.

1 Like