# \[noob\] Why do skyboxes use reflection textures? (And: Super weird behavior) **URL:** \ **Category:** Questions\ **Tags:** tutorial, material\ **Created:** [April 9, 2021, 3:52am UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847 "2021-04-09T03:52:04Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![egnor](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/egnor/32/15406_2.png) [@egnor](https://forum.babylonjs.com/u/egnor)\ **Post date:** [April 9, 2021, 3:52am UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/1 "2021-04-09T03:52:04Z")
If I start with the skybox example from the lovely tutorial ([https://playground.babylonjs.com/#KBS9I5#88](https://playground.babylonjs.com/#KBS9I5#88)), and change “skyboxMaterial.reflectionTexture” to “skyboxMaterial.emissiveTexture” (on lines 14 and 15), then things get weird! Instead of the pretty cloudy sky images, now I get… a copy of the “village green” ground texture that was used elsewhere. Q1: Why is it reusing a different texture image without complaint?? Seems like an issue (maybe weird behavior because I’m doing something wrong?). Maybe a CubeTexture can only be used as a reflectionTexture?? Q2: Why do skybox examples use reflectionTexture in the first place? There’s no reflection going on. Naively, I’d just expect a giant cube with an emissive texture wrapped around the faces, to sit out there at ~infinity glowing like the fake sky it is. Q3: What does the SKYBOX\_MODE coordinate mode do? Any help welcome, I am confuzzle. – egnor ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [April 9, 2021, 9:53am UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/2 "2021-04-09T09:53:28Z")
Welcome aboard! Q1: shader code is expecting a texture 2D for emissiveTexture, not a cube texture, that’s why it does not work. Babylon is not checking its inputs for performance sake, it’s up to the user to pass only valid inputs. As to why it’s the ground texture that is used instead in this case I don’t know… Q2: I think it’s because reflection textures can work with a cube texture and a cube texture is what is needed for sky boxes. Q3: SKYBOX\_MODE is one of the coordinates mode you can use with a cube texture and indicate how to lookup into the cube. The available values are described [here](https://doc.babylonjs.com/typedoc/classes/babylon.cubetexture#coordinatesmode). If you want more detail, you will need to dig into the source code: [Babylon.js/reflectionFunction.fx at master · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/ShadersInclude/reflectionFunction.fx) ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [April 9, 2021, 11:10am UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/3 "2021-04-09T11:10:16Z")
> [@egnor](#): > > Why do skybox examples use reflectionTexture in the first place? There’s no reflection going on. Hello and welcome to BJS, I believe the first question would be, what do you need a ‘reflection texture’ for? The skybox includes a reflection texture because the skybox can be used to project a reflection on objects or meshes in the scene. It is cubic because the skybox is, in essence, cubic. Though is has a ‘SKYBOX\_MODE’ basically instructing that you will want to use your ‘skybox’ for reflection/refraction. Now, this does not mean, you have to use your skybox for reflection. You can use it for environment and use another texture for reflection. An emissive texture/color is mostly inappropriate to use in a skybox (except for some special effects) To catch a level of your environment or skybox on a given mesh, it’s the mesh material you will want to ‘tune and tweak’ , may be also using your emissive. Note that very few materials really have a strong emissive color so you want to set this level very low. You will next work the reflection and refraction levels which you can also tune and attenuate using a normal texture (again on your mesh, not on the skybox). ---
**Author:** ![egnor](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/egnor/32/15406_2.png) [@egnor](https://forum.babylonjs.com/u/egnor)\ **Post date:** [April 10, 2021, 1:47am UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/4 "2021-04-10T01:47:06Z")
Thanks both for the quick and thoughtful answers! If you don’t mind, please correct errors in my understanding? (I’m sure I got some things wrong!) ===== _(general graphics background)_ In a scene, there are (at least) two major uses for “environment maps” (panoramic images capturing the view in all directions). - A “skybox” to capture very-far-away scenery – clouds, distant mountains, etc – to paint onto a flat box around the world. (Kind of like fake-sky-domes in the Truman Show or the Hunger Games, or scenery “flats” in a stage play.) It’s imperfect because there’s no parallax, but if the skybox objects are very far away that’s okay, and flat images are way faster than actually rendering all those clouds and mountains and stuff. - A “reflection map” that captures the view (of both near and far objects) from the vantage of a particular object, and gets warped and pasted onto the object (based on the camera’s vantage and the object’s shape) to simulate reflective surfaces (a mirror, shiny spoon, etc). This is again imperfect because there’s no parallax, but for reflective objects which are smaller than their surrounding this is okay, and it’s a lot faster than a complete re-render for the reflection (e.g. via raytracing). _(Babylon.js / GL specifics)_ In Babylon.js, both use cases for environment mapping use some common mechanisms: - The “CubeTexture” class, which represent an image-based environment map. (The base CubeTexture uses six square images, subclasses take other inputs.) Note, though it’s a “texture”, it can’t be used in every place “ordinary” textures can be used. - The “reflectionTexture” property on Material, which holds an environment map (e.g. a CubeTexture) to be painted on surfaces, as if they were situated in and reflecting that environment. For a reflective object – a shiny spoon, say – one might make a CubeTexture picturing the scene around the spoon, and assign it to the spoon’s material’s reflectionTexture. Very logical! For a skybox, one might use a CubeTexture as a handy way to load six images (or some other panoramic-image format) into a box. (Or one might use ordinary UV mapping to paint a regular texture onto the skybox cube.) One would NOT _expect_ to use reflectionTexture for a skybox, since a skybox isn’t “reflecting” anything, it’s just a big fake sky… BUT, Babylon does not support using a CubeTexture as an “ordinary” texture (diffuse, emissive, specular) on an object, only as a reflectionTexture. THUS, if you want the convenience of using a CubeTexture to load a panoramic image for a skybox, you have to use it as a reflectionTexture. BUT BUT, we don’t want to “reflect” the environment on the skybox – we want to show it directly, not act as if the skybox were a giant mirror. So we set coordinatesMode=SKYBOX\_MODE on the CubeTexture, which says to “reflect” as if the environment is pasted directly on the object (not actually a reflection at all). In general, coordinatesMode controls how reflections are computed (does it have any effect on non reflection textures?). (Again, for a skybox, one could apply the cube images to the sides of a cube as a classic emissiveTexture with appropriate UV mapping and sidestep the whole issue, but CubeTexture is very convenient, so setting reflectionTexture to a CubeTexture with coordinatesMode = SKYBOX\_MODE is the standard way to make a skybox in Babylon.js.) (Arguably it might be more sensible for CubeTexture and MirrorTexture and such to not be considered “textures” at all, but called something like “environment images”, and to have a material property like environmentMap to use them, and replace coordinatesMode with environmentMapMode, since as far as I can tell there’s no real commonality between “ordinary” textures and “environment” textures. But that’s not how Babylon is structured, partially because that’s not how GL is structured??) ===== Is some of that even close to right?? (Thanks again for your help!) ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [April 10, 2021, 7:34am UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/5 "2021-04-10T07:34:23Z")
> [@egnor](#): > > a shiny spoon, say – one might make a CubeTexture picturing the scene around the spoon, and assign it to the spoon’s material’s reflectionTexture. Very logical! Oh, apologies… I can now see you do have a (good) level of skills and background. Thanks also for writing this text. Very nicely done and comprehensive (in my opinion). Also some good thinking and questioning/challenging and, I must say, that your suggestion of having ‘environment images’ as a method/class is interesting, though (knowing a little of BJS) I’d rather think that there must be something behind it. Now I’m still not sure what your problem really is (or if there is one). I would have applied the solution you stated above. Why wouldn’t it work in your case? ---
**Author:** ![egnor](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/egnor/32/15406_2.png) [@egnor](https://forum.babylonjs.com/u/egnor)\ **Post date:** [April 10, 2021, 7:50am UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/6 "2021-04-10T07:50:15Z")
Oh, sorry, I don’t have a problem in the sense of not being able to do something! My problem was just that I didn’t understand why things are done a certain way (and why attempting to do them a different way had surprising results). So if my current understanding is good, you can consider the case closed! Perhaps I’ll submit a PR to the docs with some breadcrumbs for other folks. ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [April 10, 2021, 8:06am UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/7 "2021-04-10T08:06:45Z")
Yes, I have started with BJS in december 2019 (after 25 years of digital service) and posted comments alike (after working with Flash to Unity, the Cry or Dunia Engine or Unreal). In 3D, I have been mostly served by my clients with 3ds and maya but found myself more inclined to use C4D or Blender. There are indeed some cumbersome/disturbing parts to BJS when you hit them in the first place, but in the end, I must say I have mostly been unable to offer a better solution to the existing. May be we just need to get acquainted to these parts, knowing that, in my opinion, you can get huge advantages on other parts (and you’ll always find a solution for your case… if you are open to some compromise… but, this is also true with any other framework/engine and in general, isn’t it? Also, on behalf of the BJS Community (if I can allow myself:) I’d like to thank you for your implication and assure you that if you spend some of your valuable time to place a PR (or even a challenge), it will be considered here. Meanwhile, have an awesome WE, ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [April 10, 2021, 9:41am UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/8 "2021-04-10T09:41:03Z")
> [@egnor](#): > > In general, coordinatesMode controls how reflections are computed (does it have any effect on non reflection textures?). `coordinatesMode` is not a property of a reflection texture, it is a property of a cube texture (a reflection texture can be a cube texture but also a 2D texture). Depending on how you want the computation to be done, you must choose the right value. > [@egnor](#): > > Arguably it might be more sensible for CubeTexture and MirrorTexture and such to not be considered “textures” at all MirrorTexture is not a texture in the same way `Texture` and `CubeTexture` are, it’s a render target texture (RTT): all objects are drawn in this RTT from a mirrored camera (relatively to the mirror plane) and then this RTT is used as a regular texture in a diffuse / emissive / … texture property of a material. Note that the refraction texture can also be a cube texture, not only the reflection texture. > [@egnor](#): > > but called something like “environment images”, and to have a material property like environmentMap to use them It may be an historical choice to have named it `reflectionTexture` in the material. Note that the property at the scene level is named `scene.environmentTexture`! But as there is a `refractionTexture` property too, `reflectionTexture` is a sensible name to me. > [@egnor](#): > > partially because that’s not how GL is structured Yes, I think that for the cube texture the name was chosen because it is really how this kind of texture is named in GL (but also everywhere else). > [@egnor](#): > > Is some of that even close to right?? (Thanks again for your help!) I think you got it perfectly 🙂 ---
**Author:** ![egnor](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/egnor/32/15406_2.png) [@egnor](https://forum.babylonjs.com/u/egnor)\ **Post date:** [April 27, 2021, 7:58pm UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/9 "2021-04-27T19:58:29Z")
To close this loop: Here’s the PR with my proposed documentation update. It kind of grew over time, for which I’m sorry! (Also, I bet I got at least something wrong in there…!) > > > This turned into a bit of a yak shave, my apologies! I am happy to break this up… if that works better for you. Also of course I am super open to feedback on any of this -- I am new here so please make sure I got things right, both in terms of technical accuracy and style. > > Content: > > Revise the "Skyboxes" and "Reflections and Refractions" pages (and a few references elsewhere) to cover a number of things that were confusing to me, having had them explained. Explain the principles of environment mapping, the differences between static and dynamic environments, the differences between cubemaps and flat textures, and give lots of hopefully simple and clear examples of the various concepts. Explain the different coordinate modes and what they're for, and add a discussion of the reflection transform. Add links to other resources (API docs and explainers). > > Infrastructure/Style: > > I was fighting to get images to render right (kept having weird spacing, captions didn't work, funny business on resize, etc), and took a deep dive into the image handling logic. I ended up changing it to use ordinary \`\\` (instead of the fancy nextjs \`\\` component) when width= and height= are not specified -- \`\\` doesn't do much good in this case, and the runtime Javascript to resize things on the fly was causing a number of problems (validation errors, layout issues, captions were broken, etc). Things seem to work MUCH better now, images are more "normal", and the responsive layout is more functional. I also added comments with my understanding of the logic. > > Miscellaneous other changes: > > \- Added vim swapfiles and emacs backup files to .gitignore > \- Added "next-remote-watch" as a dev dependency, and "yarn watch" as a command to run it; it's a very convenient auto-reloader when editing nextjs files > \- Improved the handling of document image thumbnails (used in see-also boxes); the "image:" yaml field was broken, and the regexp was insufficiently selective in some cases ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [April 28, 2021, 12:07pm UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/10 "2021-04-28T12:07:53Z")
OMG. That’s an amazing contribution. Let me dig into all this a little, but I can tell you already I love the title. ---
**Author:** ![egnor](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/egnor/32/15406_2.png) [@egnor](https://forum.babylonjs.com/u/egnor)\ **Post date:** [April 28, 2021, 2:39pm UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/11 "2021-04-28T14:39:53Z")
I’ve been asked to break it up (which is fair) so expect that particular PR to disappear and be replaced by other smaller ones… ---
**Author:** ![jelster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jelster/32/25881_2.png) [@jelster](https://forum.babylonjs.com/u/jelster)\ **Post date:** [April 28, 2021, 3:20pm UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/12 "2021-04-28T15:20:31Z")
This is awesome, thank you! I’m eager to see the PRs for this get merged. Can you use GHFMD for the tables instead of HTML? ---
**Author:** ![egnor](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/egnor/32/15406_2.png) [@egnor](https://forum.babylonjs.com/u/egnor)\ **Post date:** [May 6, 2021, 6:46am UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/13 "2021-05-06T06:46:45Z")
I broke the original PR up – the new PR for the reflections doc is here: [Revise the "diving deeper" (howto) page on reflections & refractions by egnor · Pull Request #230 · BabylonJS/Documentation · GitHub](https://github.com/BabylonJS/Documentation/pull/230) Comments & corrections most welcome. Markdown’s table support has issues (you have to have a header row and at least one data row, it’s not pretty when there are several columns with nontrivial content, etc) but I’ve tried to make it work and minimize raw HTML as much as possible. ---
**Author:** ![jelster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jelster/32/25881_2.png) [@jelster](https://forum.babylonjs.com/u/jelster)\ **Post date:** [May 6, 2021, 2:07pm UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/14 "2021-05-06T14:07:52Z")
> [@egnor](#): > > Markdown’s table support has issues Hey I hear ya on that one! VSCode has a MD extension(s) that offer some table formatting commands, and [Markdown Monster](https://markdownmonster.west-wind.com/) is an awesome stand alone (free+) MD editor HTH ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [May 9, 2021, 7:35pm UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/15 "2021-05-09T19:35:02Z")
While you are on it, check out this one. May be you could explain the meaning of this (seen in a featured PG for this section). I mean, my english is mostly broken but this description is simply beyond my understanding 😉 ![Capture d’écran 2021-04-30 à 09.07.31](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/8/1890133e66a6b8d2fb63964bd78d07fca65776b3.jpeg) Edit: Don’t explain it to me. I know what it does. Just wanted to show this content. ---
**Author:** ![egnor](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/egnor/32/15406_2.png) [@egnor](https://forum.babylonjs.com/u/egnor)\ **Post date:** [May 12, 2021, 2:17pm UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/16 "2021-05-12T14:17:02Z")
Wow. What _does_ it mean? I gather that some parameter of refraction is being modulated by the material’s opacity (maybe even according to a texture??) but which parameter? – egnor ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [May 13, 2021, 4:36pm UTC](https://forum.babylonjs.com/t/noob-why-do-skyboxes-use-reflection-textures-and-super-weird-behavior/19847/17 "2021-05-13T16:36:40Z")
Oh LoL, you don’t know it. Apologies. Well, you wouldn’t learn from this description, would you? Basically (but then as I said my english is broken) what it does is that applies the level of alpha (transparency) of the material to its refraction texture level (as a multiplier or divider), meaning that changing your alpha also affects the level of your refraction texture.