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

  1. I am struggling with a similar problem like in this thread, but the solution provided here seems not so ideal... I have many modules in my game, and if I use Babylon.js in any of those, I import it using: import Babylon from 'babylonjs' So there isn't any good way to include Canvas2D similarly? I understand it is somehow baked to Babylon.js, but how do I use it? I'm downloading all the dependencies from the npm, including Babylon.js. Then I bundle everything using Webpack. Ideally, I would like to use Canvas2D (for example) like this: import Babylon from 'babylonjs' import Canvas2D from 'babylonjs' Please help, I've been scratching my head for hours now...
  2. Hi Folks, I am downloading the snippet from using zip option. So that i can include it in my project and start working on it. However i am getting the error on load itself: 'Cannot read property 'isVerticesDataPresent' of undefined.' Nor do attached camera works. any help would be appreciated. Thanks..!
  3. The following functionality applies the current vertices' positions to the same vertices(No change to the mesh). var arr = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind); for (var i = 0; i <mesh.getTotalVertices(); i = i++){ var fx = arr[i * 3 + 0]; var fy = arr[i * 3 + 1]; var fz = arr[i * 3 + 2]; arr[i * 3 + 0] = fx; arr[i * 3 + 1] = fy; arr[i * 3 + 2] = fz; } mesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, arr); I'm unsure as to how to apply a random noise, that still takes into account the vertices that are on the same position? If I use something like fx/fy/fz + a random value, the faces split up, and creates holes in the mesh.
  4. 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 ( -> Babylon Voxel Critter ( ☐ Voxel builder ( -> Unneeded as it can be imported with the Babylon Voxel Critter ☐ 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
  5. Let's say I have a material with the following properties: var ref = new BABYLON.CubeTexture("skybox", scene); var mat = new BABYLON.PBRMaterial("PBR", scene); mat.albedoTexture = new BABYLON.Texture("a.png", scene); mat.reflectionTexture = ref; mat.microSurface = .4; //mat.diffuseTexture = new BABYLON.Texture("s.png", scene); //mat.reflectivityColor = new BABYLON.Color3.FromHexString("#eeeeee"); //mat.albedoTexture.hasAlpha = true; //materialGloss.albedoColor = new BABYLON.Color3.FromHexString("#f00001"); Is it possible to have a texture on top of the reflecting surface? Preferably with an alpha channel. What about multiple textures layered on top of each other, like a dirt map on top of a logo?
  6. Hi Team, I have a requirement to create a custom shaped rectangle. I am using Lines2D as the shape may not be standard rectangle. however the lines are not rendering for rectangle. My goal is to make this rectangle as container and other objects which are represented as lines can be dragged and dropped on it. Any help would be appreciated. Thanks..!!
  7. I am having trouble enabling zoom in zoom out feature in 2d scene. what am i doing wrong here:
  8. Hi Team, I am trying to create a custom design to give look and feel on modelling a house in 2D(we have implemented this in some other js currently). The requirement for same are: 1) Walls should be constructed using small rectangular segments. horizontal one having dimension 2*8 and vertical 2*6.In attachment they are represented using dashed lines. 2) these small rectangles should have ability to add components as children elements. In attachment, you can see some segments have darker shade or some object being added to it. Please let me know what is the correct approach i should use. Thanks.
  9. Hi Team, I am working on a project to create 2D editor for house modelling. So far, i have created a demo showing a tube as rectangle. My goal is to use the rectangle as object like walls where certain objects like doors,windows etc can be dragged and dropped. Everything in 2D. So i wanted to know: 1) how to change circular tube to square shaped ones. so that the edges gives look and fill of wall. 2) how to allow users to resize rectangle by stretching edges/sides of rectangle. 3) option to drag and drop certain objects on rectangles edges.
  10. 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.
  11. This is a (sort of) port of the Three.js vehicle demo using Cannon.js, in case someone is looking for vehicle physics or just want to play with it. I made some weird choices like sperating the renderLoop and the postStep, and some quesswork here and there. And some options are left out, but can easily be added by looking at the Cannon.js docs or logging the vehicle object itself. This includes ConnectionPoints, which wheels steer, back or front wheels etc. Just play with the options, and press the "Run with Options" in the bottom of the Dat.GUI. WASD to drive around. Space to brake.
  12. Hi Team. We have developed the platform for designing 2d models of buildings and work spaces. However, we were thinking to migrate from existing js to babylon for two reasons: to improve usability in designing and support to 3d model rendering. Our use cases are something like this.and i have already started working on it. so i will post the query for each topic. 1) a 2dplayground with just zoom in zoom out effect. I am using below code. which has both rotation and zoom effect. var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, true); I have seen a solution in one of the topic to detachControl for removing rotation effect. However that also removes zooming. I want to only keep zoom in zoom and no rotation pertaining to workspace. 2) Option to add elements to scene from panel. user can drag and drop elements like lines,circles on predefined shape/rectangular model available in space. What would the best case to allow users to only drag and drop on certain edges of the rectangle. 3) I have another example where i am trying to create basic solid line in rectangle. which throws some error: Thanks for Help in Advance, MasterDon
  13. i'm using babylon.js and oimo.js to build a simple scene which has boxes on top of another, there's 7 boxes, and after the scene was build the boxes starts moving and fall, i didn't apply any force and the gravity i'm sure is ok, anyone know what's the reason causing this? and how to stop the moving thanks very very much!
  14. So, I'm looking for ways to create a ragdoll effect using Cannon.js, and (preferably) a skinned, imported mesh. I tried the following 2 methods: #1: Use getRotation/position/absolute.. etc on the bones, to match with the Cannon bodies. This doesn't seem to work like it does the other way around (Match Cannon body to bone position and rotation). #2: Split my model into the different body parts, so each and every limp can be used seperately. This 'can' work, but requires a lot of work, and won't look as good as on a skinned model. Here is an example of a ragdoll, shamelessly stolen from the Cannon.js Three.js Ragdoll example: I'm looking for creative ways of achieving this very same ragdoll effect, but with a model. Edit: Forgot to mention, press A to start the ragdoll by enabling the stepping of the Cannon world.
  15. 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?
  16. 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.
  17. 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: [email protected]
  18. 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
  19. 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
  20. @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
  21. 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
  22. 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?
  23. 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.
  24. 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,
  25. 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 :/