Search the Community

Showing results for tags 'babylon'.

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
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 278 results

  1. Hi all. I've been searching the web for the past 24+ hours & cannot seem to find a demo where when moving a 3d object and attaching a follow camera ( chase cam ) to the player, i can't seem to find a demo which allows the object to move in the same direction the chase camera is facing. How would you go about doing that? Thank You all! <3 Mythros
  2. Hi all. I'm not really new here, but technically I am since I haven't logged on in about 4 years. I need some help fixing this cannon JS playground I created. 1st thing's 1st. Why are all the spheres rendering slowly once they touch the ground of the terrain height map? I want this to run at a persistent 60 Frames Per Second. Second thing. I want to have the camera as a "player" in which he can walk all around the heightmap terrain and up NON-STEEP slopes where he slowly slides down STEEP slopes. Forgive me if I'm being a little too less descriptive. I will try my best to explain if that is the case. Anyways, thank you ALL VERY much for all the help! <3 Here is the link to the playground : Mythros
  3. Hi everyone! I have actually a problem which is quite stupid but I really need help to solve it: I have a sphere (position 0,0,0) on which I want to "put" a mesh. I have a ray coming from the center on the sphere to a point somewhere in space, and want to put the mesh on the sphere surface, oriented to the center of the sphere, as if the sphere was a planet. I don't find anything in order to rotate a mesh from a ray in Babylon, and all the tries I do with a trigonometric approach aren't satisfying… Here is the code doing that: Thanks for your help!
  4. Hello, BabylonJS is fantasic. Thank you mr @Deltakosh and @davrous. Research: Augmented Reality making rapid advancements this year. AR scenes placed on flat surfaces... and much more! Phenomenal things happening fast... Innovations available, but in AFreme or ARkite, ar~js, and Babylon is my home. So I must ask: Is AR porting a priority for upcoming versions of BJS. And if not, can it be? Perhaps I need to locate the wishlist or roadmap again... Found milestone/5 with no mention of AR: Here is link with history I'd follow: Seems to be lineage of successful AR examples: For AR, Babylon is most promising to me. How would one go about such a feature? Thanks,
  5. Hi, I've switched from BJS 3-beta to BJS-3 final and now get this error: Error status: 404 - Unable to load src/Shaders/ShadersInclude/shadowsVertexDeclaration.fx What's causing it?
  6. Hi, An interpretation of Picasso's Guernica; my tribute to you Frenchmen! Press "Start Animation".
  7. I have a babylon.js scene on which I have added some meshes. I want to make the preview image where all meshes would be in camera frustum and fitting exactly the user's screen. How can I do it? Please, fix my playground:
  8. Can we set lines as dashed in grids lines. I am using below code: var gridBox = BABYLON.MeshBuilder.CreateBox("box1", { width: objectProperties.width, height: 0.05, depth: objectProperties.height, updatable: true }, scene); var defaultGridMaterial = new BABYLON.GridMaterial("default", scene); defaultGridMaterial.majorUnitFrequency = 2; defaultGridMaterial.gridRatio = 2; gridBox.material = defaultGridMaterial; gridBox.material.diffuseColor = new BABYLON.Color3(1, 2, 0);
  9. Hi folks, I am a beginner for babylon.js and blender. So I imported a cube with one face textured from blender to babylon js using BABYLON.SceneLoader.Load. The scene has the default point light in blender and the HemisphericLight I created using babylon.js. Everything looks good (please see the 2.jpg in the attachment), but after I resize the cube to make the cube flat (using cube.scaling.y = 0.1), the lower part of the textured face will be always shadowed, no matter how i adjust the light or how to move the cube (please see the 1.jpg). I already made the scene as simple as possible to narrow down the cause of the issue, but I still cannot figure out why the lighting cannot be rendered properly. So any help will be much appreciated!
  10. Hi there! I'm new to the community, and also to Blender and Babylon.js. I made my first model in Blender v 2.78 (a basic creature, humanoid type), rigged it and animated a simple walk movement (or a half one, right foot forward, left foot back). I baked my IKs, then exported the whole animation and mesh with the babylon exporter (v. 4.6.1). When I import the animation in Babylon it gets distorted. When the arms and legs goes forward/backward, they move too much upwards. I attached the .blend file, and i have a working online demo also: It is password protected: thyalie:iso88591 First of all, I want to find out that the babylon settings cause this, or the blender exporter, or i did something wrong in blender (this last seems the most likely, but i dont know what i missed). Thanks for helping in advance! cube.blend cube_baked.blend
  11. Hi Everyone, I am working on 2D planner. I have this demo am facing following issue: 1) As you can see i have created custom mesh (window object named w1) on top left corner of design. The code is at line 369,370. This window object have y index greater than another slot element(green slots) on top of which it lies. So there is no collision. I am aware that mesh border rendering flickers when the borders of mesh collides with each other.but i am ensuring that it is not colliding with object below it. how can i fix flickering ? 2) The text(W1) is created on top of plane having default white color. this plane hides green slots which are behind them. I have tried setting alpha property to make the plane transparent. however it is also changing transparency for text on it. How can i fix this line 138
  12. Hi, can anybody teach us or help resolve Levrage? How should I resolve that horizontal green bar will rotate around his origin point (origin point is in center of green bar) and push tile on the other side? So that ball push green bar on his side and than bar should push Tile on the other side. Can anybody complete code in playground and teach us how to do this? I decide to prepare more playgrounds (simple models) like tutorials for learning. Here is plaground I'm not such good in physics but I really would like to learn new things. greetings Ian
  13. I maked simple hexagon in blender and i want change colour on click button "Click me". How I can refer to the specific id (In this case - Cube) from blender in my script? Can you check my html file? I'm not sure that all it's good. It's blender file {"producer":{"name":"Blender","version":"2.78 (sub 0)","exporter_version":"4.6.1","file":"szescian.babylon"}, "autoClear":true,"clearColor":[0.0509,0.0509,0.0509],"ambientColor":[0,0,0],"gravity":[0,-9.81,0], "materials":[{"name":"szescian.Material","id":"szescian.Material","ambient":[0.8,0.7048,0.0663],"diffuse":[0.64,0.5639,0.0531],"specular":[0.5,0.5,0.5],"emissive":[0,0,0],"specularPower":50,"alpha":1,"backFaceCulling":true,"checkReadyOnlyOnce":false}], "multiMaterials":[], "skeletons":[], "meshes":[{"name":"Plane","id":"Plane","billboardMode":0,"position":[0.2658,0.2489,1.9542],"rotation":[0,0,0],"scaling":[5,5,5],"isVisible":true,"freezeWorldMatrix":false,"isEnabled":true,"checkCollisions":false,"receiveShadows":false ,"positions":[1,0,-1,-1,0,1,-1,0,-1,1,0,1] ,"normals":[0,1,0,0,1,0,0,1,0,0,1,0] ,"indices":[0,1,2,0,3,1] ,"subMeshes":[{"materialIndex":0,"verticesStart":0,"verticesCount":4,"indexStart":0,"indexCount":6}] ,"instances":[]} ,{"name":"Cube","id":"Cube","materialId":"szescian.Material","billboardMode":0,"position":[0,1,0],"rotation":[0,0,0],"scaling":[1,1,1],"isVisible":true,"freezeWorldMatrix":false,"isEnabled":true,"checkCollisions":false,"receiveShadows":false ,"positions":[1,-1,-1,-1,-1,1,1,-1,1,-1,1,1,1,1,-1,1,1,1,-1,-1,-1,-1,1,-1] ,"normals":[0.5773,-0.5773,-0.5773,-0.5773,-0.5773,0.5773,0.5773,-0.5773,0.5773,-0.5773,0.5773,0.5773,0.5773,0.5773,-0.5773,0.5773,0.5773,0.5773,-0.5773,-0.5773,-0.5773,-0.5773,0.5773,-0.5773] ,"indices":[0,1,2,3,4,5,5,0,2,4,6,0,6,3,1,2,3,5,0,6,1,3,7,4,5,4,0,4,7,6,6,7,3,2,1,3] ,"subMeshes":[{"materialIndex":0,"verticesStart":0,"verticesCount":8,"indexStart":0,"indexCount":36}] ,"instances":[]} ], "cameras":[{"name":"Camera","id":"Camera","position":[7.4811,5.3437,-6.5076],"rotation":[0.4615,-0.8149,0],"fov":0.8576,"minZ":0.1,"maxZ":100,"speed":1,"inertia":0.9,"checkCollisions":false,"applyGravity":false,"ellipsoid":[0.2,0.9,0.2],"cameraRigMode":0,"interaxial_distance":0.0637,"type":"FreeCamera"}],"activeCamera":"Camera", "lights":[{"name":"Lamp","id":"Lamp","type":0,"position":[4.0762,5.9039,1.0055],"intensity":8.22,"diffuse":[0.1138,1,0.1492],"specular":[0.1138,1,0.1492]}], "shadowGenerators":[] } My html code <!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 babylon --> <script src="js/babylon.2.5.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="renderCanvas"></canvas> <button id="sweetButton">Click me</button> <script> window.addEventListener('DOMContentLoaded', function(){ var canvas = document.getElementById('renderCanvas'); var engine = new BABYLON.Engine(canvas, true); engine.enableOfflineSupport = false; var createScene = function(){ var scene = new BABYLON.Scene(engine); // create a FreeCamera, and set its position to (x:0, y:5, z:-10) var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene); // target the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // attach the camera to the canvas camera.attachControl(canvas, false); // create a basic light, aiming 0,1,0 - meaning, to the sky var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene); BABYLON.SceneLoader.ImportMesh("","","szescian.babylon",scene); return scene; } var scene = createScene(); engine.runRenderLoop(function(){ scene.render(); }); window.addEventListener('resize', function() { engine.resize(); }); }); </script> </body> </html>
  14. Hi, I'm trying to reproduce ocean shader like this one: I know we have waterMaterial in Babylon (which is gorgeous!) but not quite what I'm after: it only works with windForce/windDirection which looks like you're constantly moving or as if water is constantly flowing. I've tried to use shader which you can find at but it's just waaaay over my head! First of all, I can't figure out how to split it into vertex/fragment shaders to use in Babylon. Any shader/GLSL gurus out there, any help hugely appreciated!
  15. Hi Team, I have got a demo for 2D planner here DEMO 1 : The yellow box meshes are draggable horizontally and vertically(go give it a try....). Now, I wanted to prevent dragging over the places where yellow box already exist(prevent collision of yellow box). In order to do that, I have made some changes in demo 1 to implement moveWithCollisions : Demo 2(using moveWithCollisions) - Changes done: 1) Used checkCollisions and set ellipsoid(equal to width,height,depth of box) for yellow boxes: At Line : 39 - 40 box.checkCollisions = true; box.ellipsoid = new BABYLON.Vector3(sWidth, sHeight, sDepth); 2) set gravity to scene and gravity with ellipsoid to camera(not sure if this is needed as i want prevent collision among yellow boxes): At Line : 72-75 scene.gravity = new BABYLON.Vector3(0, -9.81, 0); camera1.applyGravity = true; camera1.ellipsoid = new BABYLON.Vector3(1, 1, 1); 3) enable collision for scene and camera At Line : 76-77 scene.collisionsEnabled = true; camera1.checkCollisions = true; 4) For horizontal dragging, moveWithCollisions for translating x instead of setting position.x (commented that code, line 194) : At Line : 195 currentMesh.moveWithCollisions(new BABYLON.Vector3(currentMesh.minxpos + Math.round((currentCursorXPosition - currentMesh.minxpos) / horizontalSlotWidth) * horizontalSlotWidth, currentMesh.position.Y, currentMesh.position.Z)); 4) For vertical dragging, Use moveWithCollisions for translating z instead of setting position.z (commented that code, line 201) : At Line : 202 currentMesh.moveWithCollisions(new BABYLON.Vector3(currentMesh.position.Z, currentMesh.position.Y, currentMesh.minzpos + Math.round((currentCursorZPosition - currentMesh.minzpos) / verticalSlotHeight) * verticalSlotHeight)); However, the dragging is completely gone now. what am i missing here
  16. Hi guys, I'm creating an UI for my babylon game via the Canvas2D, precisely the ScreenSpaceCanvas2D. Now I want to know if it's possible to update the text dynamically without recreating/overwriting the text2d child every time the score variable (which is used for displaying) is updated. Playground link for simplified case: Thanks in advance!
  17. Hi Team. I was checking the action manager page over here in order to attach the event on edge/border pick . I wanted to scale(set height,width,depth based on vertex picked) the mesh(box object) when user picks borders and drag it. something like Any idea how this should be handled.
  18. Hi Team, I am doing a good progress for migrating 2D planner to use babylon js. Here is the playground for same: I am having couple of issues here, There: 1) as you can see the boxes with yellow faces depicts certain walls that are draggable in respective rows and columns. However horizontal walls can not be dragged to the last slot in its current room row and vertical slot is not draggable on top most slot in its column. what am i missing here? The code for horizontal draggable to right is on line : 183 The code for vertical draggable to top is on line : 196 2) How can i avoid dragging element to position where there is already a wall with yellow faces. 3) There is some code which is causing the page to become unresponsive.This do not happen consistently but i can see the high memory uses in chrome task manager. Any help would be appreciated. Thank you for stopping by...
  19. Hi, I'm using the brilling water material and would like to change a couple of things: - Specular highlights are currently black near horizon, and I'd like to change them to white as it would look more natural. - Use either an alpha falloff or a different mesh (more like a curved disk) as a surface, as using a plane makes horizon square. Would appreciate any suggestions. P.S. The water materials works great on my veteran iPhone 5s. No slowdowns!
  20. Hi, I have a few issues with VirtualJoysticksCamera: 1. Z-index: It can't be reliably used in a user's UI as it draws a 2d canvas which will ether cover html elements or will get buried under. 2. When Babylon scene gets destroyed, the canvas created by VirtualJoystick class remains attached to html (camera.detachControl() has no effect). 3. I couldn't get the UI of VirtualJoystick (the circles) to show. I'd gladly use Universal Camera for all scenarios, but it doesn't provide adequate controls for touch devices (you can't look up and down). Has anyone got a chance to successfully implement FPS-like cameras (move-forward/back, move-sideways, look-up, look-down, rotate) on a touch device?
  21. I have used below code to disable rotation. camera1.inputs.attached['pointers'].detachControl(canvas); This removes all pointers events. 1) However i would like to only remove rotation feature only. and click + drag should be binded for panning feature(which is on cntrl+click+drag now) 2) how can extend the control keys for zoom and panning feature. i was hoping to implement something like this: A : Pan left D : Pan right W : pan front S : pan back And also over
  22. I have rendered a 2d scene using one of the json data. For this, I have used 2d rectangles to implement the walls of home planner. However the zoom in zoom out feature isn't working despite setting arcrotatecam and cameras setposition and target. What am i missing here? If it doesn't work, I was hoping to implement scaling(as suggested in one of the post by @Wingnut) and re positioning element when user is scrolling in and out. But not sure whats the best way to re position all the elements though. Any help and suggestion would be great.. Thanks.
  23. Hi Team, I am working on 2D house planners. I have following design. Created using boxes: However the edges/border of design looks broken when camera is positioned at 200+ distance with respect to y axis of design. The only time they are visible properly is when they are viewed closely when zoomed. How can i fix this?
  24. Hi Team, I have hosted one of the playground code. Here is the link to hosted URL(i have also left the debugger so that any one can play around): 2D-engine-worldspace However i am getting following errors there: Error 1: d._cacheNode.getInnerPosToRef is not a function at WorldSpaceCanvas2D.Group2D._bindCacheTarget (babylon.js:94301) at WorldSpaceCanvas2D.Group2D.applyCachedTexture (babylon.js:93634) at new WorldSpaceCanvas2D (babylon.js:100564) at createScene (2denginescrrenspace.html:58) at 2denginescrrenspace.html:73 for below code: canvas= new BABYLON.WorldSpaceCanvas2D(scene, new BABYLON.Size(200, 200), { id: "WorldSpaceCanvas", renderScaleFactor : 4 //worldPosition: new BABYLON.Vector3(0, 0, 200), //worldRotation: BABYLON.Quaternion.RotationYawPitchRoll(0, 0, 0), //enableInteraction: true }); Error 2: Uncaught Error: Parent renderCanvas of mainRect_58_54.1 doesn't have a valid owner! at Rectangle2D.Prim2DBase [as constructor] (babylon.js:89031) at Rectangle2D.RenderablePrim2D [as constructor] (babylon.js:92644) at Rectangle2D.Shape2D [as constructor] (babylon.js:93235) at new Rectangle2D (babylon.js:95191) at createBox (2denginescrrenspace.html:38) at flytrapdatascreenspace.js:464 for code: var box = new BABYLON.Rectangle2D({ id: "mainRect_"+posX+"_"+posY, parent: canvas, x: posX, y: posZ, width: sWidth, height: sDepth, fill: "#404080FF", border: "#FFFFFFFF", borderThickness: 0.2, children: [ ]}); return box; I have downloaded babylon js from version builder. What am i missing here?
  25. Hi Guys, I am working on 2D house planners. I have successfully rendered the design using json data structure i have. However i am struggling with following things: 1) positioning camera in such a way that design lies exactly in between the screen. currently its on top right corner of screen. 2) zoom in zoom out should work with respect to cursor position. I.e. if i am having cursor on left side of planner, then that part should be focused(start coming to center) when zoomed in. Any help would be appreciated.