Search the Community

Showing results for tags 'skybox'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 36 results

  1. 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!
  2. 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 : But when you set the same property of a skybox create from an EnvironmentHelper, then it changes nothing : 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.
  3. 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: Thanks, DB Here is the playground scene:
  4. Hi, I tried to follow the tutorial to manually create a skybox using 6 single texture files: 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:
  5. 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; = 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: Any suggestion;
  6. 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
  7. 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
  8. 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.
  9. 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. Any help will be appreciated.
  10. 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?
  11. 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
  12. 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... Maybe more optimised solution ?
  13. 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?
  14. 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.
  15. I do not understand why the ground in the scene is not affected by the solar light of the sky box. demo: 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!!
  16. 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..??
  17. 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!
  18. MacOS Sierra and Skybox / Cube texture bug

    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.
  19. Hi, I have an application that uses BabylonJS: 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!
  20. Sometimes error with skybox on iOS

    I sometimes get a javascript error on my site while the skybox is loading at the first page. It only happens on my iPhone, but like 1 out of 7 times. When the error happens the skybox fails to load and the sky is just black. I'm loading my scene. When it loads I'll add a light, camera, ground then skybox, one after the other. Everything else comes out fine. At this stage there's no asynchronous calls going on so this shouldn't be caused by a race condition in my code. The error I get is: TypeError: undefined is not an object (evaluating 't[c].width') (anonymous function) babylon.2.4.js:3:29698 a babylon.2.4.js:2:26402 onload babylon.2.4.js:2:6865 My skybox code is: private static setupSkyBox() { var skybox = BABYLON.Mesh.CreateBox("skyBox", 700.0, this.scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", this.scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/skybox/plainsky", this.scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skybox.material = skyboxMaterial; Tools.debug(1,"Skybox"); }
  21. Hello guys i'm trying to create some kinda space representation, but when i create the skybox it have some trouble with the cameras or something because when i'm way too far from the start point something like the image happens. This is a school project so it will be great to have a quick answer, The full code looks like this
  22. Hello I am struggling to create a nice, convincing environment for a scene. I am using the skybox method and loading JPG images for the sky as described in David's blog post. Even though tiling the sky works as a way to create the environment my game feels enclosed and not really like its open range and if you look at the sky you start to notice the artifacts. So far the skies don't even come close to that of commercial games, and I am not talking about recent games. I am talking games like the first Halo or Red Dead Redemption. Are there alternative ways to the skybox for simulating realistic skies? I am doing it wrong? perhaps I don't have the best images? if so, is there a place to obtain them? To give you an idea of what I am looking for take a look at these images.
  23. Hi, I'm new to Babylon.js and to this forum, so perhaps I am missing something obvious. The documentation on PBR has an image of beautiful materials with different glossiness and reflectivity values. But when I run the demo Playground Demo Scene - PBR Materials in my browser (Safari or Chrome, on a Macbook Pro), the materials look much less impressive. For low glossiness and reflectivity values, the spheres don't look "rough" with a lot of light scattering. Instead I can clearly see the edges of the skybox. See attached screenshot, the spheres in the top right corner. Why is this happening? Is it my hardware? Did something change in the source code since the picture was taken? Thanks! [Edit] complete specs: Chrome Version 48.0.2564.116 (64-bit) and 49.0.2623.87 (64-bit) Safari Version 9.0.3 (10601.4.4) MacBook Pro (Retina, 13-inch, Early 2015) Intel Iris Graphics 6100 1536 MB 2,7 GHz Intel Core i5 8 GB 1867 MHz DDR3
  24. I want to make a scene creator where a user will add his own images for a skybox or items. But I want the skybox to be not only with 6 sides but to have the choice to use one single 360 image. Is there a way to achive this in Babylon.js?
  25. Hi guys I realise my request is somewhat unusual, but I have a requirement to load base64encoded images to a skybox as the reflectionTexture. I can use base64 image strings quite easily for standard diffuse textures, but I could not find a way to do this for a skybox (which pre-loades 6 images by appending _nx.jpg etc) So the question is: Is there a way I can do this already? If not could it be added to babylon? I would like to have code like skyboxMaterial.reflectionTexture = new BABYLON.CubeTextureFromBase64(textureName, image64px, image64py, image64pz, image64nx, image64ny, image64nz, scene); I managed to work around the problem for now by editing babylon.js and changing the LoadImage function to detect specific pattern in the imagename and load the base64 string diirect as the src when I need it, but this is far from ideal going forward. (I'd happily prototype a function here too, but it's too complicated for me!!) Thanks in advance and keep up the amazing work. Constantly amazed at how cool babylonjs is. Rusty P.S. The reason I need to do this is because we have an offline version of our app the uses the WPF WebBrowser control. This works fine for normal images but created crossite exceptions in angular from babylon. Maybe there is another way to solve my problem, but base64 seemed easy and has solved the standard texture issue.