Search the Community

Showing results for tags 'solved'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 1,635 results

  1. Hi all, i've been having some issues with cloning skeletons outside the importer. I'm not sure why it goes wrong.. the mesh itself is cloned fine, the actual skeleton aswell, but the animation don't play. From console logs, it seems the cloned skeleton is missing "_transformMatrices" compared to the original one, and "_isDirty" is true. any help is greatly appreciated. Edit: (See the first topic comment below for info). PG:
  2. I have imported a Blender scene which has a mesh with an animation (consisting of just a few keyframes) and I am looking to control the animation, however I have been unsuccessful. The only resources I have been able to find relate to using skeletons imported from Blender, not basic keyframe animations (unless I am missing something?). Example playground: The animation data is located on line 20 of the playground. I have tried calling scene.beginAnimation('rotation animation', 0, 30, true); in the scene.executeWhenReady function to no avail. Hopefully somebody can help? Thanks!
  3. Hi, I have a server, I have created a node.js server to create the webhook, I create the SSL and the HTTPS protocol works, but when it comes to putting the url on Facebook, it gives me these errors The URL could not be validated Callback verification failed with the following errors: curl_errno = 60; curl_error = ssl certificate problem: self signed certificate; http status code = 200; http message = connection established.
  4. Hi, I am developing a system with BJS in which I want to implement an action in which the user click to select an rectangled object and click a button to create another object on top of it. In sequence it could change the position of the second object, but just following the center line of the first one and respecting its border limits, that is, keeping then aligned each other. Like the "Slider Physics Joint" works, but without using physics. Somebody has an idea to do this in a simple way? Thanks
  5. Guys, I need help. How to turn the mesh towards the point given by the vector? What method of rotation is needed here? Rotations is my weakness..
  6. As of this PR, it's no longer possible to load a scene from a local file: const sceneFile = new File('foo.babylon') const scene = await SceneLoader.LoadAsync('file:', sceneFile, engine) The only workaround I have found, which doesn't involve the inefficient conversion into a "data:" string, is this: import XMLHttpRequest from 'xmlhttprequest' global.XMLHttpRequest = XMLHttpRequest.XMLHttpRequest // ... const scene = await SceneLoader.LoadAsync('', 'file:foo.babylon', engine) It works, but I dislike having an extra dependency - "xmlhttprequest" - for no good reason. I've combed through the code, and looks like there's no alternative path. There's a handy utility called "LoadFile", but the only way to reach it without copy-pasting a ton of code is really convoluted, involving the "FilesInput.FilesToLoad" global. What's the rationale behind that PR? And would you mind adding the in-memory file support back? Edit: On the other hand, it appears I don't need to shim "FileReader" anymore with this new approach. Hmm. Either way, documenting the correct way to go about this would be greatly appreciated. Having a shimless way to load a local scene would be even better E.g. by just passing a Buffer. But I can live without that.
  7. Hi guys, I am new to babylon .So i was trying to import an obj file ,but i am getting error(screenshot attached).Any idea guys?
  8. Hello, 1-In the example below, I load a small mesh, then I clone it and set the clone's parent to an AbstractMesh. then I position the parent to be outside of the camera frustum. My issue is why does camera.isInFrustum(parent) returns true even if the parent is outside the camera's viewport ? 2- Another issue I noticed, sometimes camera.isInFrustum(mesh) does not return true, after the mesh (which is in the camera frustum) has loaded.
  9. Dear Forum I found the babylonjs models on my computer don't look not as good as on the iphone, so i tested the resolution: Macbook 12" (2304 x 1440px): Pixel ratio: 1 render height: 714 canvas height: 714 window.devicePixelRatio: 2 iphone 8 4.7": PixelRatio: 1 RenderHeight: 1393 CanvasHeight: 1393 window.devicePixelRatio: 2 - so my iphone is haft the physical size and double the screen resolution, thats absurd no? Is it possible that the retina display of my macbook was not recogniced by the browser? i tried: var scene = new BABYLON.Scene(engine); engine.setHardwareScalingLevel(0.5); but nothing changes. Is there a way to detect all retina displays and boost the resolution? Thanks!
  10. Hello, If I add lights to the scene with something like: this.lights.enable().setAmbientColor(0x555555); .. then enable lighting the needed objects with: object.setPipeline('Light2D'); Then later I wish to disable all scene lights (with being able to enable later again). I try with: this.lights.disable(); But this makes all light enabled objects invisible. Probably this is because pipeline is set to every object. The question of course is - how to just turn off lights globally, like in real world, so all images stay visible (just with default normal colors)?
  11. Hello, I'm trying to make deferred shading works in my application. I use a custom shader that set data into GBuffer like this: .... //diffuse gl_FragData[0] = vec4(colorFromLUT.rgb, alpha); //normal gl_FragData[1] = vec4(colorFromLUT.rgb, alpha); //vec4(, 1.0); //position gl_FragData[2] = vPos; .... Then I create a custom PostProcess class: export default class DeferredShadingPostProcess extends PostProcess { /** * Creates a new instance DeferredShadingPostProcess * @param name The name of the effect. * @param scene The scene to apply the render pass to. * @param options The required width/height ratio to downsize to before computing the render pass. (Use 1.0 for full size) * @param camera The camera to apply the render pass to. * @param samplingMode The sampling mode to be used when computing the pass. (default: 0) * @param engine The engine which the post process will be applied. (default: current engine) * @param textureType Type of textures used when performing the post process. (default: 0) * @param blockCompilation If compilation of the shader should not be done in the constructor. The updateEffect method can be used to compile the shader at a later time. (default: false) */ constructor(name, scene, options, camera, samplingMode = 0, engine = null, textureType = Engine.TEXTURETYPE_UNSIGNED_INT, blockCompilation = false) { if(typeof BABYLON.Effect.ShadersStore["deferredShadingFragmentShader"] === 'undefined') { BABYLON.Effect.ShadersStore["deferredShadingFragmentShader"] = ` uniform sampler2D textureSampler; uniform sampler2D normalSampler; uniform sampler2D positionSampler; uniform vec3 cameraPosition; varying vec2 vUV; void main( void ) { vec4 image = texture2D( textureSampler, vUV ); vec4 position = texture2D( positionSampler, vUV ); vec4 normal = normalize(texture2D( normalSampler, vUV )); // vec3 light = vec3(50,100,50); // vec3 lightDir = normalize(light -; // vec3 eyeDir = normalize(cameraPosition -; // vec3 vHalfVector = normalize( + eyeDir); //gl_FragColor = image * max(dot(, lightDir), 0.0) + vec4(pow(max(dot(, vHalfVector),0.0), 100.0) * 1.5); gl_FragColor = normal; } `; } if(engine == null) engine = scene.getEngine(); super(name, "deferredShading", ["cameraPosition"], ["normalSampler", "positionSampler"], options, camera, samplingMode, engine, false, "#define GEOMETRY_SUPPORTED", textureType, undefined, null, blockCompilation); this._geometryBufferRenderer = scene.enableGeometryBufferRenderer(); if (!this._geometryBufferRenderer) { // Geometry buffer renderer is not supported. So, work as a passthrough. console.log("Multiple Render Target support needed to compute deferred shading"); this.updateEffect(); } else { // Geometry buffer renderer is supported. this._geometryBufferRenderer.enablePosition = true; this.onApply = (effect) => { effect.setVector2("screenSize", new Vector2(this.width, this.height)); effect.setVector3("cameraPosition", this.getCamera().position); if (this._geometryBufferRenderer) { effect.setTexture("normalSampler", this._geometryBufferRenderer.getGBuffer().textures[1]); effect.setTexture("positionSampler", this._geometryBufferRenderer.getGBuffer().textures[2]); } }; } } } When I test output the textureSampler, it shows OK. But when testing output the normalSampler, it just show black screen, even if I put same data in gl_FragData[0] and gl_FragData[1]. I guess that I'm misunderstanding the GeometryBufferRenderer, maybe it's only used for StandardMaterial, not custom ShaderMaterial. Could you tell me how to set & get normal buffer in GBuffer correctly?
  12. Hello everyone, I am trying to find a way to properly occlude the glow effect. Consider: from the other side: The glow effects are not occluded by the walls and other opaque objects. Related code: const lamps = scene.getMeshByName("hotel_lower_lamp"); const glow = new BABYLON.GlowLayer("glow", scene); glow.addIncludedOnlyMesh(lamps); Just to be sure, I have also set opaque materials: material.transparencyMode = 0; Hope someone can point me to the right direction. Thanks alot!
  13. Hi Devs, I am trying to rotate PlanePanel using TransformNode, but one strange thing that I observed is it's causing overlap between the meshes/buttons. Am I missing something here ? PG-
  14. Hello! I've been dabbling in Babylon for a month or so now, and things are going well, but I'm getting caught up on this one problem: I have several avatars in a row. They all have jetpacks, but there should only be one active any time. I've parented the emitter fountain objects to each of the avatar's hip bones and then offset it so that it's behind the avatar roughly in the location of the jetpack on the mesh. It works fine for the avatar at (0,0) but the fountain doesn't seem to move when i translate each of the avatars into their final positions Isn't that what parenting does? It does rotate gently as my avatar moves in it's idle animation, so I know it's attached. Even if I don't set the position of the fountain, it still doesn't move along the x axis when my avatar does. I've tried to approximate my scene using the playground here: The Rabbits are structurally a bit different from my meshes in terms of skeleton and my avatar's have no submeshes like the Rabbit does. You can see that although there are 6 different emitters, they're all at the same place. I've turned on the visiblity of the fountain so you can see it if you rotate the scene behind the avatars. A related problem I'm having (even when the avatar is at 0,0) is that when i rotate an avatar and animate it, the emitter follows the path of the avatar as if it wasn't rotate at all. Am I parenting incorrectly or missing a step? I know setting position changes the world position, but it seems like with the parenting, the x position should still change as the parent does. Thanks for any help you can provide!
  15. Yp @Deltakosh and @bghgary There seems to be a BUG in the GLTF importers... I have a hierarchy like this: - Remy-Master (Parent) --- Body (Child) --- Bottoms (Child) --- Eyes (Child) --- Hair (Child) --- Shoes (Child) --- Tops (Child) --- mixamorig:Hips (Child, Skeleton) But when i look at the scene all the SKINNED MESHES (Body, Bottoms, Eyes, Hair, Shoes, Tops) are DE-PARENTED and in the root of the scene instead of being under Remy-Master. That must be a BUG... Here is a screen shot of the scene: Note: My GLTF json DOES have the 7 other nodes defined as children (and it works right in other viewers­čś× "nodes": [ { "children": [ 1, 2, 3, 4, 5, 72, 73 ], "rotation": [ 0.0, 1.0, 0.0, 0.0 ], "name": "Remy-Master", } ]
  16. I came across a couple of strange behaviors with different properties of anaglyph cameras. The first one involves AnaglyphUniversalCamera: its rotationQuaternion can't be animated. To illustrate, check out the PG demo below. The default code uses the regular Universal camera, but you can switch to the anaglyph version via lines 7 and 8. In either case, animations of position and rotation are applied to the active camera. Note that the regular camera animates its position and orientation (as intended), but the anaglyph version only translates. The second issue involves how the interaxialDistance (iD) setting affects the rendering of the scene. The behavior of this property is different between AnaglyphUniversalCamera (AUC) and AnaglyphArcRotateCamera (AARC). Here's how I'd describe it: Positive iD with AARC: It's hard for my eyes to interpret the scene...I think closer objects are rendered *behind* farther objects (in a depth perception sense). Negative iD with AARC: Everything looks fine. Close objects project forward into the space between my eyes and the screen, while distant objects appear behind the scene. Positive iD with AUC: It looks okay, except objects only appear behind the screen and never in front of it no matter how close they are to the camera. Negative iD with AUC : It looks like the entire scene is compressed into the space in front of the screen...again it's hard to interpret visually. My preferred rendering is a negative iD with AARC since objects appear correctly both in front of and behind the screen. Regardless, the iD behavior between the cameras is inconsistent. You can try playing with the sign of iD and switch between the two types of anaglyph cameras in the following PG:
  17. hy, i am quite new to babylon.js and i am trying out stuff. I managed to get babylon.js running on my webspace and i can successfully reproduce for example the animation example from the playground. however i am actually after the animation blending feature with the model from mixamo. it works great on the playground - but when i copy the the code from there and change the links to the dummy3.babylon file in the playground/scenes/ folder it gives me the following error: it drives me crazy since i can not find a solution to this and i think i am overlooking something really obvious here. can anybody give me a hint? i attached my code below: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!--- Link to the last version of BabylonJS ---> <script src=""></script> <style> html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #renderCanvas { width : 100%; height : 100%; touch-action: none; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function(){ // get the canvas DOM element var canvas = document.getElementById('renderCanvas'); // load the 3D engine var engine = new BABYLON.Engine(canvas, true); var delayCreateScene = function () { // Model by Mixamo engine.enableOfflineSupport = false; // This is really important to tell Babylon.js to use decomposeLerp and matrix interpolation BABYLON.Animation.AllowMatricesInterpolation = true; var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 4, 3, new BABYLON.Vector3(0, 1, 0), scene); camera.attachControl(canvas, true); camera.lowerRadiusLimit = 2; camera.upperRadiusLimit = 10; camera.wheelDeltaPercentage = 0.01; var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); light.intensity = 0.6; light.specular = BABYLON.Color3.Black(); var light2 = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -0.5, -1.0), scene); light2.position = new BABYLON.Vector3(0, 5, 5); // Shadows var shadowGenerator = new BABYLON.ShadowGenerator(1024, light2); shadowGenerator.useBlurExponentialShadowMap = true; shadowGenerator.blurKernel = 32; engine.displayLoadingUI(); BABYLON.SceneLoader.ImportMesh("", "./scenes/", "dummy3.babylon", scene, function (newMeshes, particleSystems, skeletons) { var skeleton = skeletons[0]; shadowGenerator.addShadowCaster(scene.meshes[0], true); for (var index = 0; index < newMeshes.length; index++) { newMeshes[index].receiveShadows = false;; } var helper = scene.createDefaultEnvironment({ enableGroundShadow: true }); helper.setMainColor(BABYLON.Color3.Gray()); helper.ground.position.y += 0.01; // ROBOT skeleton.animationPropertiesOverride = new BABYLON.AnimationPropertiesOverride(); skeleton.animationPropertiesOverride.enableBlending = true; skeleton.animationPropertiesOverride.blendingSpeed = 0.05; skeleton.animationPropertiesOverride.loopMode = 1; var idleRange = skeleton.getAnimationRange("YBot_Idle"); var walkRange = skeleton.getAnimationRange("YBot_Walk"); var runRange = skeleton.getAnimationRange("YBot_Run"); var leftRange = skeleton.getAnimationRange("YBot_LeftStrafeWalk"); var rightRange = skeleton.getAnimationRange("YBot_RightStrafeWalk"); // IDLE if (idleRange) scene.beginAnimation(skeleton, idleRange.from,, true); // UI var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI"); var UiPanel = new BABYLON.GUI.StackPanel(); UiPanel.width = "220px"; UiPanel.fontSize = "14px"; UiPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT; UiPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER; advancedTexture.addControl(UiPanel); // .. var button = BABYLON.GUI.Button.CreateSimpleButton("but1", "Play Idle"); button.paddingTop = "10px"; button.width = "100px"; button.height = "50px"; button.color = "white"; button.background = "green"; button.onPointerDownObservable.add(()=> { if (idleRange) scene.beginAnimation(skeleton, idleRange.from,, true); }); UiPanel.addControl(button); // .. var button1 = BABYLON.GUI.Button.CreateSimpleButton("but2", "Play Walk"); button1.paddingTop = "10px"; button1.width = "100px"; button1.height = "50px"; button1.color = "white"; button1.background = "green"; button1.onPointerDownObservable.add(()=> { if (walkRange) scene.beginAnimation(skeleton, walkRange.from,, true); }); UiPanel.addControl(button1); // .. var button1 = BABYLON.GUI.Button.CreateSimpleButton("but3", "Play Run"); button1.paddingTop = "10px"; button1.width = "100px"; button1.height = "50px"; button1.color = "white"; button1.background = "green"; button1.onPointerDownObservable.add(()=> { if (runRange) scene.beginAnimation(skeleton, runRange.from,, true); }); UiPanel.addControl(button1); // .. var button1 = BABYLON.GUI.Button.CreateSimpleButton("but4", "Play Left"); button1.paddingTop = "10px"; button1.width = "100px"; button1.height = "50px"; button1.color = "white"; button1.background = "green"; button1.onPointerDownObservable.add(()=> { if (leftRange) scene.beginAnimation(skeleton, leftRange.from,, true); }); UiPanel.addControl(button1); // .. var button1 = BABYLON.GUI.Button.CreateSimpleButton("but5", "Play Right"); button1.paddingTop = "10px"; button1.width = "100px"; button1.height = "50px"; button1.color = "white"; button1.background = "green"; button1.onPointerDownObservable.add(()=> { if (rightRange) scene.beginAnimation(skeleton, rightRange.from,, true); }); UiPanel.addControl(button1); // .. var button1 = BABYLON.GUI.Button.CreateSimpleButton("but6", "Play Blend"); button1.paddingTop = "10px"; button1.width = "100px"; button1.height = "50px"; button1.color = "white"; button1.background = "green"; button1.onPointerDownObservable.add(()=> { if (walkRange && leftRange) { scene.stopAnimation(skeleton); var walkAnim = scene.beginWeightedAnimation(skeleton, walkRange.from,, 0.5, true); var leftAnim = scene.beginWeightedAnimation(skeleton, leftRange.from,, 0.5, true); // Note: Sync Speed Ratio With Master Walk Animation walkAnim.syncWith(null); leftAnim.syncWith(walkAnim); } }); UiPanel.addControl(button1); engine.hideLoadingUI(); }); return scene; }; // call the createScene function var scene = delayCreateScene(); // run the render loop engine.runRenderLoop(function(){ scene.render(); }); // the canvas/window resize event handler window.addEventListener('resize', function(){ engine.resize(); }); }); </script> </body> </html>
  18. Hi guys, I am making a simple 3D endless game with primitive shapes(5 cubes and 1 sphere).But the game is running on 30 FPS in mid-range phone.When i use scene optimizer with moderate degredation,after some time fps increases to 60.But how do i know what was the issue for game lag,So that i can fix it later.
  19. MarianG

    arcRotateCamera panning issue

    I found something strange related to arcRotateCamera panning. Unfortunatelly this is happening in stable version too so I don't know if it is expected or a real bug. If we set camera beta to Math.PI and after this panning,... nothing strange But if we rotate camera so it has beta = Math.PI (simple swipe up), now when panning the object is moving strange.
  20. Hello, I attached my player and the camera to the same TransformNode to move and rotate them around together. Because of that, the rotation of the camera is always zeros (or whatever I made it) in local coordinates. I was a bit surprise to find out that I could not get the rotation in world coordinates as I would with globalPosition. I thought I may have missed something but @Deltakosh confirmed that globalRotation or globalRotationQuaternion don't exit, he suggested me to use instead for the time being. I believe that this is not user friendly and should only be a temporary/hacky solution for my project. Hence my feature is to add a globalRotation and globalRotationQuaternion to meshes and compatible Nodes. Feature Request add globalRotation and globalRotationQuaternion properties to meshes and compatible Nodes.
  21. I think I asked for this before, but not in a specific topic. I need to know at the detailed level how Blender's Principled BSDF shader maps to BJS. The BJS relevant doc seems to be: Blender describes the shader here: There is no place in the Blender API docs which layout how to access / set this, but there is this:
  22. Hello HTML game devs. First time poster. Some textures aren't appearing in babylon.js in a tile set I exported from blender using the Blender To Babylon 5.6 exporter. Here is the tile set scene in blender, as well as a simple hand crafted scene built in blender using the tiles to give an idea of what the final product should look like. . Here is the default tile set scene imported into babylon.js as well as a scene generated by from my map-generation script. Despite my horrible lighting, it's clear the wall texture is not being rendered in all the models. Neither the exporter or babylon.js are generating any errors or warnings. Here is an archive containing the .babylon file and textures Here is the blender exporter log I am new to 3D rendering and only have a basic understanding of Materials, Lighting, UV Maps and Textures, so if somebody could have a crack at it I'd really appreciate it.
  23. Howdy friends, Got an issue I'm trying to sort out with how I want to customize the input controls for the ArcRotate Camera. I'd like to take the existing ArcRotate Camera and keep the Alpha inputs standard, but update the Beta inputs to move the lockedTarget of the camera. So imagine "scrolling" the canvas would move the camera and instead of move the Beta of the camera. Unclear where to begin on this. @Deltakosh I'd setup a playground but given it wouldn't be much more than the default ArcRotate template I've not done that here. Thanks for any help/suggestions! JPS
  24. Hi, I am new to babylon.js.I am trying to add a restart button,so that on clicking game/scene should restart.Can you guys share right way to do this?
  25. Hello, (working better in Chrome than Safari) <edit> I have changed the background to white and it seems that the issue is not just the seems but that the transparent portions seem to show when viewed on edge.</edit> I'm new to BabylonJS and have been working on different implementations of the Menger Sponge fractal to learn the framework. I'm on my third implementation now which allows me to quickly generate an L4 Menger sponge using only 984 vertices!!!! I accomplish this by using 81 planes in each dimension that have different parts of the Sierpinski carpet as materials. I'm having issues with artifacts/seams where perpendicular planes are intersecting and I'm not sure where to go with it. (artifact may be the wrong term) I've Googled but may not be using the best search terms. I've tried re-creating my textures in case the images were off by a few pixels but that doesn't seem to be the problem. Moving the camera show the artifacts/seams blinking in and out, specifically around the hollow center. It makes it look like it is assembled with small blocks but it isn't. That is where the planes intersect. At certain angles with certain lighting they seem to disappear which leads me to believe they are artifact related and not due to the texture images. My goal is to make this into a single multi-material object that I can instance to get really intricate sponges utilizing very little resources. Thanks for your time and any ideas/advice. -mc