Search the Community

Showing results for tags 'babylon.js'.

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 206 results

  1. Hello! As my profile states I am new here and rather new with Babylon.js as well. I found its ease of use and performance (over Three.js) good reasons to work on it. Currently, I have been working on a voxel game (i.e. minecraft-ish) and I have been using Three.js, as there are so many libraries already out there for voxels. On the other hand, pretty much nothing for Babylon. For this reason, I would like to fill the void and, perhaps, find someone who is interested in helping out on the quest. I started with creating a small library for creating snow (called `voxel-snow`) and called it `babylon-voxel-snow` ( The idea is to make the transition from Three.js to Babylon.js as easy and as painless as possible for people (like me) who have been using it for their voxel projects. Adding the prefix `babylon-`, would make it extremely easy to find the counter part for Babylon. Here are some other voxel libraries which are currently only in Three.js: ☑ Voxel Snow ( --> Babylon Voxel Snow ( ☐ Minecraft skin ( ☑ Voxel walk ( --> Babylon Voxel Player ( ☐ Voxel creature ( ☐ Voxel critter ( ☐ Voxel builder ( ☐ Voxel use ( ☐ Voxel mine ( ☐ Voxel carry ( ☐ Voxel chest ( ☐ Voxel inventory creative ( ☐ Voxel items ( ☑ Voxel clouds ( --> Babylon Voxel Clouds ( ☑ Voxel skybox --> Babylon Voxel Skybox ( As I go, I will try to slowly implement them for Babylon, so hit me up if anyone would like to help out
  2. I was wondering if it's possible, and if yes, then how, to get more responsive movement when using getPositionToRef to attach a mesh to a bone assigned to some skeleton from an imported model. I think it's the same when using attachToBone. The position and rotation of bone #6 (right hand) is used to position the sphere. Imagine it was a sword or a gun. Try moving the camera around, and notice the movement of the sphere. It seems to be a little behind, and not as crisp as one would have hoped for. Am I missing something here?
  3. Silly title, I know. I'm not sure how to achieve this, and I'm sure a PG is not necessary, if this functionality actually exists. Imagine the simple and common version of a FPS-setup. You have a camera, and a mesh or more in front of this camera, usually a couple of hands and a gun of some sorts. Now, when I hit a wall face-first, part of the hands/gun model will clip through the wall, and we sure don't want that to happen. Is there some way to always render the hands/gun models in front of everything else, igoring depth? I looked at z-index, renderingGroups and masks without luck.
  4. Hi there, I'm a freelance Cg artist and I'm looking for someone with some time and knowledge capable of creating a fairly simple 3d model viewer with babylon.js The work can be be done completely remotely. The goal is presenting 3d products and being able to change textures. It would be very close to these examples: Also I would like to have the possibility to modify the code afterwards to be able to upload my own chosen 3d models and textures. The shader used on the models should be able to show: color, reflection or specular, roughness, bump and or normal map or displacement. As for the lighting a custom made hdri light would do it. Background should be black or white or with a custom image, hdri should not be visible, only used as main light source. The viewer should also be mobile friendly and work flawlessly on iphone, ipad, etc. Resize and adust window frame. I would greatly appreciate some feedback on both time delay and budget required for this kind of development. It would be a one time creation, providing me with the possibility to modify my 3d content freely. thank you for your interest, please feel free to contact me:
  5. Hi Having some difficulty getting CastorGUI to work when my Babylon.js app is embedded in a Drupal (it works when all in a single html file). It fails with a 404 as cannot find the file mysite:8083/node/themesGUI/default.css. Clearly that is because that location doesn't exist. The /node/ notation is the Drupal URL for the current content, not the location of the CSS file. The file is actually at mysite:8083/themes/mytheme/themesGUI/default.css. I did some tracing in Chrome Dev Tools and found the following: - I kick things off with gui = createGUI(); - createGUI function looks like this: var createGUI = function() { var css = "button{cursor:pointer;}"; var guiSystem = new CASTORGUI.GUIManager(canvas, css, { themeRoot: "themes/uconstruct/", themeGUI: "default", pixel: true }); var form = new CASTORGUI.GUIWindow("form", { x: 0, y: 0, w: 300, h: 80, textTitle:"Scene Menu ", closeButton: false, heightTitle:"10px", overflow: "hidden", backgroundColor: "rgba(60, 60, 60, 0.6)", colorTitle: "rgba(90,90,90,0.3)", borderWindow: "0px" }, guiSystem); ... }; When I trace with Chrome I can see the guiSystem object created and the line in CASTORGUI.GUIManager.prototype.addStyle() where it reads the themeRoot and theme variables that were passed and uses it to populate the href for the CSS file: CASTORGUI.GUIManager.prototype.addStyle = function(css, theme) { ... this.GUItheme = document.createElement('link'); this.GUItheme.type = 'text/css'; this.GUItheme.rel = 'stylesheet'; = 'screen'; = "themeGUI"; this.GUItheme.href = this.themeRoot+"themesGUI/"+theme+".css"; this.head.appendChild(this.GUItheme); }; This results in the correct file path being constructed ... themes/mytheme/themesGUI/default.css ... all good so far. Then the next statement in my createGUI() function is to create the form object (ie form = new CASTORGUI.GUIWindow) as you can see above, I pass the guiSystem object (which contains the correct themeRoot and theme values) as the third argument. I can follow the trace and see that this is picked up as guimanager in the CASTORGUI.GUIWindow() function: CASTORGUI.GUIWindow = function (id, options, guimanager) {, guimanager.canvas, guimanager.canvasCss); = id; this.html = document.body || document.getElementsByTagName('body')[0]; ... }; This is where it seemed to go a bit odd (to my eyes anyway). The first statement in this function is to call the GUIManager function. It passes 3 arguments. However the first argument (this) is undefined at this stage and the second 2 arguments are a reference to sub-elements of guimanager but they do not include the themeRoot or theme variables. So then when GUIManager calls .addStyle() again, this time it doesn't have any value for themeRoot or theme (although it defaults theme variable to 'default' if it is empty). As I trace through from that point onward, all references to themeRoot are "". There is probably a good explanation for all of this, but this is the only thing I could find. However I am not sure this explains the issue as even if this did work it doesn't fully explain what is happening. It seems that somewhere (although I cannot find it) the current page base URL (mysite:8083/node/) then has the constructed theme path appended to it. With the issue above (ie the empty themeRoot value), this results in a 404 looking for: mysite:8083/node/themesGUI/default.css However even if the correct themeRoot value was being pulled through, this would presumably appear as: mysite:8083/node/themes/mytheme/themesGUI/default.css (ie with the erroneous 'node') This would not work as the correct path (I think) is without the "node": mysite:8083/themes/mytheme/themesGUI/default.css So a long-winded way of getting to 2 questions really : why does the themeRoot value not get passed through from GUIWindow > GUIManager > GUIManager.addStyle? Is this supposed to work this way? How is mysite:8083/node being prepended to the themeRoot value when it should be mysite:8083/ (ie without the 'node/')? Thanks Rich
  6. For example if we have complex mash. If we add multi material on this mesh. And if one material is for example "Material_01". How can we make that just this part( mesh faces with material -> Material_01) of mesh is like mirror or reflection part of mesh? Is there any example playground? Is possible to do this in blender and export and when we import model (.babylon) this is already apply on model? Greetings Ian
  7. @Deltakosh @davrous In the past year I've and others have seen a huge shift to Typescript. Why? In my opinion it is only creating a gap between native JS and those who might wish to use a wrap-around language - which has far less advantages than native WebGL. And for the future, will create serious limitations and divisions between users. Please explain the advantage to .TS files in the Github src directory of recent versions of BJS - if you can come up with ANY good reasons. Sorry if this sounds a bit harsh, but I'm having issues working with BJS for the first time in more than 2 years due to reading and working with Typescript. DB
  8. This is an issue I've had with multiple models. See how some vertex or maybe a bone has points attached to the camera? The issue seems to be with the skeleton, as removing this and the skin modifier seems to remove the issue: I'm using 3Ds Max 2015 and the Babylon.js Exporter. When uploading the file to, the mesh and skeleton are both intact, but exporting to .babylon somehow removes the skeleton aswell. As far as I know, uses the Blender exporter, but that's no success either. I was just wondering if anyone else has had this issue, and if yes, then maybe know a fix or a way around. Attached is the .max file for reference. simple.max
  9. First of all here is my project, controls are WASD and mouse. I was wondering what is causing some kind of friction between the ground and a tank, try to press A or D for 5 seconds, it will not turn smoothly, I noticed that the glitch occurs when the tank is on X or Z axis (probably also on Y axis too but I didn't try). You can see that wheels are rotating propertly, there are no forces pushing the hull, just wheels are jointed to it. Any ideas?
  10. Hey so I wanted to know how to decide a resolution to render to and then downscale the render; specifically get the user's screen width, *3 and then scale it down to /3 to get a subpixel effect, using 3 times more available pixels (also if probably causing artifacts). I don't even know if this method works so i would really know how to do this/a working method.
  11. Hi, I am developing a game with babylon.js, and I use an isometric view (so z coordinate, is actually pointing top left of the screen, and x bottom left) : var zoom = 2; var cameraPosition = new BABYLON.Vector3(5*zoom, 4.1*zoom, 5*zoom); var scene = new BABYLON.Scene(engine); var camera = new BABYLON.TargetCamera("camera1", cameraPosition, scene); camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA; camera.orthoTop = 2.5 * zoom; camera.orthoBottom = -2.5 * zoom; camera.orthoLeft = -5 * zoom; camera.orthoRight = 5 * zoom; Therefore, when the player wants to go up (, the controlled mesh should increment both z, and x, which results in the following equations : if ( !== 0 && player.velocity.left !== 0) var d = 0.7071; // Cos(45°) else var d = 1; player.position.z += Math.sign( - player.velocity.left) * d * t; player.position.x += Math.sign( + player.velocity.left) * d * t; All this seems to be working fine. Now, I would like the orthographic camera to follow the player when he is moving. I can't make the camera target the player, as it breaks the isometric view : the camera doesn't move to follow the player, it rotates, and as the angle of the camera changes, the isometric view breaks. Instead, I think I need to move the bounding box of the orthographic camera to be centered on the player position. But because the camera is orthographic, the bounding box doesn't seem to be related to the same coordinates as the player : the same way position.z is an arbitrary combination of and veloctiy.left, orthoTop should be the inverse combination of position.z and position.x. So instead, my idea was to increment the bounding box by the same amount the player moves (as the velocity is in the same direction than the bounding box). By tweaking the values, I came up with this approximate solution, which I have a hard time to understand. if ( !== 0 && player.velocity.left !== 0) var d = 0.35; // Cos(45°)³ else var d = 1; camera.orthoTop -= Math.sign( * d * t * .7; camera.orthoBottom -= Math.sign( * d * t * .7; camera.orthoLeft -= Math.sign(player.velocity.left) * d * t * 1.4; camera.orthoRight -= Math.sign(player.velocity.left) * d * t * 1.4; It is approximate, because it only minimizes the error of movement between the camera and the mesh. But if the player goes one direction long enough, it will eventually go out of the screen. I am pretty sure there is an explanation for all this, but can't find it. What is the correct way to make an orthographic camera follow a target in an Isometric view ? Thanks,
  12. Hey, I am making a program; I made a simple BabylonJS 3D thing to test, in chrome it opens fine, but adding "web browser" in visual studio gives like 10 script errors then loops back, and pressing no a bunch of times just loads the default blue background. Help me please :/
  13. I'm looking for work building interactive graphical HTML sites. My strength is in the 3D framework babylon.js. I also have an 82 DSLR multi-cam scanner which I use to scan in avatars. You can see my work here: I have a YouTube page here: I'm based in Melbourne, Australia but happy to work for other locations remotely.
  14. Here's the deal, I'm importing a model with skeleton, bones, animations etc. I assign the model (Index 0) and the skeleton (index 0) global variables. Then, outside of Babylon's native import function, I clone the model and the skeleton, and run animation (from frames) just fine. The problem is, when I try to manually manipulate bones using their getters and setters, somehow, rotating 1 bone from 1 clone of the original, also rotates the bones of all other clones, as well as the original. Changing the names and ID's of bones doesn't seem to help, either. Soo. Is there any way of cloning bones? no clone function exists, and I'm unsure of how to approach this. I'll see if I can create a simple PG, as the project is pretty complex by now. As I mentioned, I can run different animations on the different skeletons without any issues. But as soon as I manually rotate bones, all clones + original are all affected.
  15. Hi I have some problem with collider of child box. If we set parent box and add child box. If Child have its box collider, and if we rotate parent box, child is changing (potition and rotation), but child's box collider is not changing (position and rotation). How should we achive that box-collider will follow child when we (rotate or maybe change position of parent). Here is example of what I am talking about. (here is grid-box seen as box-collider of child-box. and grid-box is not changing position and rotation). (or mybe - here we can se grid-boxes as colliders and blue box is rotation and changing position but it's box-collider is not) How can/should we repair code so that box-collider is folowing its child's box-mesh? Greetings
  16. Hi, I am a beginner to Babylon.js, but I decided to create a game about helicopter and... I don't know what to add next. Here you can see the latest update: The CONTROLS are: -Arrows to tilt the helicopter -W/A to fly up/down -S/D to turn left/right -Spacebar (press) to change perspective You can pick up the minecraft block by landing on it. Crash into buildings (yes, these big blocks). If you have any ideas how to develope this project let me know in comments. I am pretty sure I will need help with placing textures on the ribbon, it seems to be hard to do because it has the width and height equal to 0, I see just one pixel, but I want to fix it later.
  17. This is my current setup: .Player presses the Mouse button .A Ray is fired using Babylon and the players camera The intersection point (vector3) is sent to the server The server uses Cannon to do it's own intersection testing (Using the player's head hitbox(Same location as the camera client-side) as the origin point, and the vector3 from the client as the target point. Now, if I wanted the server to be a bit more authoritative when it comes to hit detection, I shouldn't send the point from Babylon, but rather a 'fire' command, and, somehow, calculate a point that Cannon can use for it's own testing. The server is aware of the position of the origin vector, and has the rotation of the player's physics body. Now, my math is worse than bad, so: Would it be possible to calculate a point, a fixed distance away, using only the origin vector and the direction in which the point should be placed? I've seen various posts and discussions about it, but I really don't quite get it. Oh. And I know aimbotting isn't impossible to prevent, but I feel like the above method, that I already use, makes a bit too easy to achieve.
  18. Hi everyone, I've had issues with some things that I'd like you to review maybe. Here is a simple PG scene, combining two excellent demos : water and fire materials. A candle is over a calm beach, #Question 1 : if you move the camera just to look up, right from starting position, you'll notice the reflective texture on water becomes glitchy at the bottom of the canvas. How to avoid that ? Next, I'd like to apply blur post-process, but only on the flame. #Question 2 : Is there a simple way to add/remove mesh from being rendered by the rendering pipeline ? Something like BABYLON.StandardRenderingPipeline.excludedMeshes[ ] ? Here is the result when applying the pipeline : #Question 3 : In this example the fireMaterial has trouble rendering its opacityTexture through the StandardRenderingPipeline. Is it a bug ? How to avoid that kind of glitch ? So from my researches, in order to exclude certain elements from being rendered by the pipeline, I have to create multiple cameras with different layerMasks. So only the flame is rendered in the secondCamera : #Question 4 : In this example, the waterMaterial becomes invisible, after adding another camera. Also, there seems to be a 'delay' when looking around, between layerMasks, the flame is no more 'attached' to the candle... Anyway let's continue, then adding again the rendering pipeline, but only to the secondCamera : #Question 5 : The scene refuses to render if only one camera is applied on the StandardRenderingPipeline.cameras, is it a bug ? Or is it impossible ? Thx for looking into that if you have time
  19. Hi, is it possible to make a sprite visible through the walls/meshes/other Sprites? Is it possible to make it visible always? PlayGround: Its important because if the player is behind something he have to be visible. Also aims/marks in a labyrinth should be visible always. Thank
  20. I'm preliminary study on Babylon,and there's a question: suppose that there is a color cube in the coordinate system,i wanna define a point object,this point can be set (x,y,z) and Corresponds to a point on the cube.and i can obtain the cube's color by this point..... so there any method that can make it?
  21. Hey. What do you think is the best option ? I know there won't be probably a "best" option but what would you guys choose? Babylon seems more complex than playcanvas but that might bring some more advantages to the table as well idk...
  22. Hi everyone! Here is Prosecution, a 2-button Arcade Game that @Théo Sabattié and I (Chadi HUSSER) made with the help of a sound designer, Aristide HERSANT-PREVERT. Take control of an airplane and try to dodge as many missiles as you can! You can find it on Direct link: Thanks to Babylonjs team for this engine and publication on demo tab. Thanks to @Temechon for his course at Isart Digital. Aristide HERSANT-PREVERT LinkedIn, SoundCloud, Vimeo Theo SABATTIÉ LinkedIn, Twitter, Github Chadi HUSSER LinkedIn
  23. Guys help please. A friend of mine made a model with sketchup so i exported it to dae and used blender to get the babylon file. heres a zip of the file with textures: File removed because it's apparently nothing to do with the problem
  24. Is it possible to show the skeleton/bones of an imported mesh? I don't mean lines and debugging layers, but actually rendering the bones themselves, so they won't stay hidden. Is this a possibility, or simply not a feature? PG example, because why not:
  25. Is panning in Babylon js possible now? I had seen a question on this topic that was posted in Jan. Since then I could not find anything that suggests that panning is supported. I had used threejs before where we could do panning by doing right click. Also I wanted to check if I can trap click event on a line. I tried "registerAction" with "BABYLON.ActionManager.OnPickTrigger" but that did not work for line.