Hi All,
PG: https://playground.babylonjs.com/#HJ4VK2#1
I’ve spent today trying to build a custom skybox for a project I’m working on, and it took me a lot longer than I think it should have to work through the Skybox documentation and linked example to work out how to structure and layout a base grid/guide in Photoshop (or whatever software would be used).
As such, I put the above PG together, which contains a SkyBox as follows:
it links to a folder in a generic 3d-assets github repo
Not sure if it’s documentation-worthy, but feel like it could be a neat addition/example to link to from the Skybox documentation.
5 Likes
@jdp1g09 this is great!
Anything we can do to make it easier for others to learn we embrace warmly!
How would you feel about adding some of what you’ve learned to the skybox documentation?
Perhaps a Doc PR?
1 Like
For sure - if you let me know where to pull the doc source from and any guides I should follow. Happy to contribute.
Awesome! The process is fairly straight forward.
Basically just fork the doc repo:
Then edit the markdown file for the skybox:
---
title: Skyboxes
image: /img/getstarted/skybox_px.jpg
description: Learn how to add a skybox to your Babylon.js scene.
keywords: diving deeper, environment, skybox
further-reading:
- title: Reflections and Refractions
url: /divingDeeper/materials/using/reflectionTexture
video-overview:
video-content:
---
## About Skyboxes
A simulated sky can be added to a scene using a "skybox" ([wikipedia](https://en.wikipedia.org/wiki/Skybox_(video_games))). A skybox is a large standard cube surrounding the scene, with a sky image painted on each face. (Images are a lot easier and faster to render than 3D objects, and just as good for far-distant scenery.)
In Babylon.js, skyboxes typically use [CubeTexture](/typedoc/classes/babylon.cubetexture) as a [pseudo-reflection texture](#making-the-skybox) on a large cube.
## Creating a CubeTexture
The [CubeTexture constructor](/typedoc/classes/babylon.cubetexture#constructor) takes a base URL and (by default) appends "\_px.jpg", "\_nx.jpg", "\_py.jpg", "\_ny.jpg", "\_pz.jpg" and "\_nz.jpg" to load the +x, -x, +y, -y, +z, and -z facing sides of the cube. (These suffixes may be customized if needed.)
show original
Then submit a PR, add me as a reviewer and that’s it!
Thanks for helping us to make it easier for others to learn!
Vinc3r
August 25, 2021, 4:57pm
5
Tiny tips: in Photoshop, using slices and Save For Web, you can export all your cubemap images in once.
(your cubemap remind me one i’ve done some time ago )
2 Likes
