Search the Community

Hi, I am struggling to properly align a lens flare with the sun from the skybox texture so I was wondering if anyone would have any tips on doing it properly as in the lens flare demo? -> https://playground.babylonjs.com/#QP32DP#1

My idea is to "project" a cubic texture from a given point as Google Streetview or Matterport do? The idea is that this kind of shader should look like projected texture not like reflection as CUBIC_MODE does. I've made several test like using refraction with IOR (it looks promising!) but the projection is always done from camera position. Any tip on this? Thank you in advance!

I use the waterMaterial. Is it possible to have a skybox used in water reflection, but which is not visible to camera ? (I want a color plain background). Erf, by writing this post I found a solution I still submit topic in case someone want find answer one day : You just have to create another smaller skybox, and don't push it to reflection renderList... http://www.babylonjs-playground.com/#1SLLOJ#275 Maybe more optimised solution ?

Hello Everyone, I've just started to use Babylon.js for the the purpose of posting 3d content to Facebook. I am trying to post a scene that consists of a 3d model and an environment from a 360 degree image. How do I export my environment ? all my attempts ( Creating default skybox, a sphere with flipped normal, ...) have been met with failure: - In case of exporting the environment map no success. - In case of flipped sphere, it always views the scene from outside rather from inside. Any solutions? I am trying to refer to the documentation but no clear answer so far. Thanks

The skybox textures are not correctly displayed if I view it on my android phone. For reference: my phone is a One Plus 5T with Android 8 and Chrome 65.0.3325.109. I noticed it while trying to view my current little project on mobile (noxwings.github.io) I can confirm this happens with "3.2.0-beta.1" and "3.2.0-alpha7" and whatever the "default" version is autoselected on the playground. You can use the "tutorial" skybox playground to check it. I'm uploading an example image of what I mean. The side images are all switched. http://www.babylonjs-playground.com/#UU7RQ#1

Hey, I just upgraded to OSX Sierra and this bit of code does not work anymore on chrome : /* --- Skybox --- */ var skyboxObject = BABYLON.Mesh.CreateBox("skyBox", 10000.0, scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox" + sceneKey, scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(taskObject.ASSETS_FOLDER + "/textures/fantasy/Sky", scene, ["_px.png", "_py.png", "_pz.png", "_nx.png", "_ny.png", "_nz.png"]); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skyboxObject.material = skyboxMaterial; skyboxObject.rotation.x = Math.PI; I get this : Only one side of the cube. No error in the console. I will try to get more information on this, I have been swamped these past few days... sorry. This bug is not present in safari.

Hi guys I've just set up a regular ol'skybox for my scene exported from blender. The scene has a scale of 10 along the X and Y and 5 along the Z in blender. The skybox code is as follows; var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.disableLighting = true; skybox.material = skyboxMaterial; skybox.renderingGroupId = 0; So far, so ordinary. The problem is when babylon renders the scene. With a particular zoom of the camera (camera is also exported from blender btw) it appears like the attached. Normally there's no issue using the skybox code shown above, this is the first time i'm seeing something weird. i thought maybe the 100.0 value in the createBox constructor was too small and so the camera was clipping part of the cube, but increasing it above 100 just makes the black area larger until it envelopes all. Reducing that number makes the cube smaller to the point where it's visible as a cube in the scene, which obviously isn't ideal. Am I missing something obvious here? Cheers!

Hi Everybody ! I am not sure this is a bug or a wanted behavior, that is why I did not post on the bug section. When you set the property infiniteDistance to true on a skybox created from the meshBuilder, then behavior is as expected : http://www.babylonjs-playground.com/#UU7RQ#66 But when you set the same property of a skybox create from an EnvironmentHelper, then it changes nothing : https://www.babylonjs-playground.com/#10D6YT#74 I saw in the source code of the TransformNode (line 735) that the parent attribute of the skybox is tested. Of course with the EnvironmentHelper it is not null. It is on purpose ? "Solution" found while writing this post : Obviously I can get the skybox from the environmentHelper and set its parent to null, but it doesn't looks clean coding to me. Except this, EnvironmentHelper is awesome to set up clean scene really fast ! I love it.

Hello, I've been using skybox for years now, and now I can't get one to load. I even pulled a scene off the playground, and nothing. My scene: http://qedsoft.com/DEMOS2017/bjs_loader/index_7.html Thanks, DB Here is the playground scene: https://www.babylonjs-playground.com/#ECI1NR#1

Hi, I tried to follow the tutorial to manually create a skybox using 6 single texture files: https://doc.babylonjs.com/babylon101/environment#skybox There it says I can use png files for that, but when I look in the browser console, there are just error messages saying that it can't find the skybox_px.jpg etc. Is there a way to use png files, because jpg files can look really ugly in a skybox :). Following the link to eternal coding for the standard materials, it only mentions "jpg" files for CubeTexture. Also there seems to be a little error in the tutorial, where it says "In that /skybox directory, we must find 6 sky textures, one for each face of our box. Each image must be named per the corresponding face: “skybox_nx.png”, “skybox_ny.png”, “skybox_nz.png”, “skybox_px.png”, “skybox_py.png”, “skybox_pz.png”." but before it was declared as skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); When using "textures/skybox", Babylon looks for skybox_xx.jpg files directly in the textures folder, so it's a bit misleading. Maybe just change that to "textures/skybox/skybox", than the description will be ok. Thanks EDIT: Sorry, posted a bit prematurely, I should have used the search on the forum a bit more, found the answer here:

Hello, I'm a newbee at babylonjs and I'm currently learning the BJS engine as well as the blender for 3d modelling. I have a problem when I import a .babylon file that I have created in blender. What I want to do is after loading the model, to set an ArcRotate camera to the model. I'm using this propery in order to set the target: var assetsManager = new BABYLON.AssetsManager(scene); var boatMeshTask = assetsManager.addMeshTask("BoatTask", "Boat", "assets/Boat/", "tugboat.babylon"); boatMeshTask.onSuccess = function (task) { model = task.loadedMeshes[0]; model.position.z = -80; model.position.y = 3; camera.target = model; camera.lockedTarget = model; }; assetsManager.load(); ... The problem is that when I try to apply a rotation to the model at Z axis, my skybox rotates as well. I'm using BABYLON.Space.LOCAL. For translation I'm using the following code: model.rotate(BABYLON.Axis.Z, rotationAngle, BABYLON.Space.LOCAL); This is the model I try to load: https://cbml.ddns.net/index.php/s/gaRUgfazEjad4b7 Any suggestion;

Hoping for help, I'm trying to change the skybox dynamically with following code: changeSkybox = function(imageurls) { var ctex=BABYLON.CubeTexture.CreateFromImages(imageurls,scene, true); if(scene.getMeshByName("hdrSkyBox")) { scene.getMeshByName("hdrSkyBox").dispose(); } scene.createDefaultSkybox(ctex, true, 100, 0.15); } The skybox is changing only once, independently if the imageurls are from file or from datasource. If I use BABYLON.CubeTexture.CreateFromPrefilteredData ( which I cannot use in my scenario) it works as expected. so, where is the bug? Debugging shows everything fine, no errors, caching problem?

Is there any way to load custom skyboxes in the playground? I am trying to get a nebula skybox to play around with, but when linking to external files I keep getting CORS errors. Hope you guys can help

Hello, I'd like to get some suggestions for how to make a 3D-background from images. Let me explain a bit more: given two sets of images for a cubemap/skybox (one set for each eye), how to render each cubemap separately? In a normal VR-scene the camera renders twice (one render for each eye) for the same object. For stereo backgrounds IMHO the VR-camera also has to render twice but for different objects on the same place. How could I solve this? Hopefully the question is not too complicated and makes sense, thanks for input

I need to preload some skybox maps in order to create a CubeTexture, since there are six maps loaded, how do I then regroup these separate images back as a single reference? Cheers If anyone has the same issue - just call addCubeTextureTask on Assetsmanger

Hello. I'm having an issue creating a skybox with compressed ktx textures. I've followed the instructions here, and have used the 2 bat scripts in conjunction with the PVRTexTool and ASTC tools. Note that I've used "D" for developer level quality. cd my-directory-with-images make-ktx-batch D ktx-batch That seems to have correctly generated the compressed files. I then create the default skybox. var available = ['-astc.ktx', '-dxt.ktx', '-pvrtc.ktx', '-etc2.ktx', '-etc1.ktx']; var formatUsed = engine.setTextureFormatToUse(available); console.log(formatUsed + ' textures'); ... var skyboxTexture = new BABYLON.CubeTexture("textures/skybox/gradient-sky/SkyGradient", scene); scene.createDefaultSkybox(skyboxTexture); Based on the console output, it seems to be attempting to load the texture format used "-dxt.ktx" at my root URL. I'm testing in Chrome on a MacBook, but am getting the same error in Firefox and Safari "Error: Error status: 404 - Unable to load -dxt.ktx". Any ideas? Thanks for taking the time to read.

Hi, Need some help with scene, skybox and camera adjustments. Scene not covering skybox. My working area 10000,10000,10000. Just rotate scene and you will see what I mean. http://www.babylonjs-playground.com/#ECI1NR Any help will be appreciated.

Hi all, strange situation. On one computer, all skyboxes look fine, on another every skybox only shows one face, even the samples on the babylonjs playground. all projects using cubetexture only show one face but only on that computer, any ideas?

I do not understand why the ground in the scene is not affected by the solar light of the sky box. demo:http://www.babylonjs-playground.com/#E6OZX#6. I will describe it in more detail： When I removed the light（The HemisphericLight） in the scene.The ground turned black .I think there is a sun in the sky box, why the sun's light does not affect the ground. please help me！！

I'm looking for an artist freelancer to create a plain cartoonish skybox for a game made with BabylonJS (3d js framework) at 1280x720 resolution. Please send links to relevant works. [email protected]

Is possible to create skybox which will be like video instead of images ??? Is there any example? Is it possile to do anythink like that? For example skybox with planets which move around skybox area..??

Hi everybody, I am very new to both Blender and Babylon. Basically I am trying to load a scene exported from Blender and create a skybox afterward, the scene is nothing more than a default blender scene(the one consists of a box, camera and light, I load this scene just to make sure I hadn't added or modified anything in the scene that may leads to other issues once I export the scene into babylon file). I try to create a skybox after loading the scene, using code below: =============================================== var canvas; var engine; var scene; function initScene() { canvas = document.getElementById("renderCanvas"); engine = new BABYLON.Engine(canvas, true); scene = new BABYLON.Scene(engine); BABYLON.SceneLoader.Load("babylon/","testScene.babylon",engine,function(newScene){ newScene.executeWhenReady(function(){ newScene.activeCamera.attachControl(canvas,false); var ground = BABYLON.Mesh.CreateGround("ground", 10, 10, 2, newScene); var skybox = BABYLON.Mesh.CreateBox("skyBox",1000.0,newScene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox",newScene); skyboxMaterial.backFaceCulling = false; skybox.infiniteDistance = true; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/skybox/cloudSkyBox/DaySkybox", newScene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.disableLighting = true; skybox.material = skyboxMaterial; engine.runRenderLoop(function(){ newScene.render(); }); }); },function(progress){}); } function initBB(){ if (BABYLON.Engine.isSupported()){ initScene(); }else{ console.log("not support BB"); } } document.addEventListener("DOMContentLoaded",initBB,false); document.addEventListener("resize",function(){ engine.resize(); }); =============================================== The blender scene "newScene" is loaded(I can see the box, a directional light of the blender default scene, I can use the free camera preset in blender scene), the ground mesh added into the newScene can be seen as well, but the skybox is not shown! There is no error message shown on the browser console, I had tried to google for similar problem but couldn't find the solution... I am not sure if I set up the blender scene wrongly before I export or there is other factor that cause this issue. Any help would be greatly appreciated! TestProject.zip

Hi there again Is there chance to upgrade skybox to not show edge where is connection of textures http://hw3web.co.uk/web/babylon/cube_water/skybox.png maybe just put all planes inside but keep size that mean overlap them outside about 1px shouldn't change view but maybe this edge will be not visible more and less like here from outside so inside have great bond: http://hw3web.co.uk/web/babylon/cube_water/over.png please let me know what do you think ?! Thank you.

Hi Gang! I am looking for free cubeTextures (skyboxes/reflectionTextures) of reasonably-real-life-accurate starfields. In other words... I am looking for skyboxes that accurately portray real life night skies. I prefer to have high-detail and low-detail versions. (heavy cluster and light cluster) If anyone has such, or knows where I can get them... (possibly for use in our playground)... then please reply. Thanks! I am also interested in folks who know about generating random starfields... via shaders (if possible). Can stars be generated on the background of our BJS scenes... without using skyboxes? Shaders? If someone DOES succeed in building a shader-based starfield generator, then random star-twinkles, shooting stars, moon stuff, and ISS/airplane fly-overs... gets you extra credit. Thoughts welcome, from anyone. Thanks! Party on!

Hi, I have an application that uses BabylonJS: http://rapidmockup.topempresas.net/ As you see, i have a skybox with 3D backgrounds and a ArcRotateCamera in my scene. This works well, but i need a second behavior in my scene. When the user select an option, i need to rotate only the object and the plane in my scene, but not the background. It is because i need a option to user add your own backgorund image, but users will upload only one texture, and the background skybox must be fixed to see only one face. Is it possible? How to make it? Thanks by the support!