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

  1. I'm looking for ways to optimize a scene I created in the Playground. This scene is based on previous work from another thread, I just added some objects and logic to mimic a small game. It uses native CannonJS for the PFS-camera and movement of the monster models. I used the code and model from the instances demo. From line 16, you can turn on and off physics for the monsters, skeletal animations, the skybox, trees, shadows, procedural textures(grass), and whether or not the monsters should lookAt and follow the player. As well as specify the amount of trees + the range and amount of monsters. I'm only hitting around ~30 FPS with this example. Is a scene such as this too heavy for WebGL and browsers? The trees are instances, so unless I clone and merge them, I don't see what could be changed there. Maybe a smaller, compressed texture. The monster models all have skeletons and animations, so no instances or merging can be used here. Disabling physics seems to give some FPS boost, so maybe using a worker would do some good in this example. I'll give this a try, and see what effect it has on overall performance. Here's a minimized version, with most things stripped, and 50 monsters without animations.
  2. Hi Team, I am creating arrows using ribbon Using material, I am trying to set the color to the arrows. however i am failing here. what am i missing?
  3. Castor GUI

    Question really for the awesome Dad72, what are the future plans for Castor GUI, if there are any at all?
  4. Fixed FreeCamera position

    Hey guys, is there a posibility to fix the FreeCamera's position. So the camera won't move on key-press. I just want to rotate the camera on key-press. Thanks in advanced Benji
  5. On the mobile side, such as iPhone6, how do I move the camera (should not be "wasd"), and the mouse can not control the camera rotation thanks
  6. How to read the model from the cache, let it show, rather than in the case of caching to reload the model, so very costly performance
  7. 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.
  8. 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
  9. Is is there any way to debug impostor of mesh. If we have BABYLON.PhysicsImpostor.BoxImpostor on some mesh, Can we debug bouning box of BoxImpostor or any other impostors, that we can see how Impostors looks like around mesh? greetings ian
  10. @RaananW Hi all, I have some simple playground. I would like to try set up purple Bridge and red Hinge, like physics hinge joint. I create this little scene with blender and export it with exporter 5.0.5. Here is a playground (in comment there is also .blender and .babylon file) Can anybody explain me how to set things right. Origion/Position of Hinge (cilinder) is in center of object HInge. Origin/Position of Bridge is in center of the bottom face of Bridge. I would like that Bridge should be vertical above Hinge. And when ball hit Bridge, the Bridge should fall down like real Bridge. I would like that pivot of Bridge should be at point of Bridge's origin/position. (or maybe origion/position of Hinge/red cilinder). Axis is x-axis. I really don't understand things? I spend all day on this example. If I understand right, I should Use HingeJoint. (Or should I use Hinge2Joint) ? mainPivot: ( I think this should be center/position/origin of Hinge connectedPivot: ? I don't understend why and what to set mainAxis: (I think should be x-axis (red Hinge object) connectedAxis: ? I don't understend why and what to set Can anybody explain connectedPivot and connectedAxis ??? greetings ian
  11. Issue in mesh dragging

    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...
  12. 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...
  13. 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
  14. Let's use this PG as an example: (WASD keys). Driving forward makes the camera follow the vehcile properly from a distance behind it. Now, when you go backward, the camera shifts direction and follows the vehicle from the rear end. I do not want this particular functionality in my example. I've looked through PG's, and they don't seem to have this issue. Another example is the Distraction Demo: I don't see any changes to the FollowCamera code base between these two versions of Babylon, and even if I use the same (default) settings, the weirdness remain. Is there any way to keep the camera fixed, without having to recreate a followcamera myself?
  15. 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.
  16. 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?
  17. error in hosted project

    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?
  18. Hello, I cannot find an answer by google. Maybe do you know how to solve this problem or what does it mean this message in the console: Live Demo /// <reference path="../babylon.d.ts" /> namespace MATERIALS { export class Basics { /* * Public members */ /* * Private members */ private _canvas: HTMLCanvasElement; private _engine: BABYLON.Engine; private _scene: BABYLON.Scene; private _camera: BABYLON.ArcRotateCamera; private _light: BABYLON.PointLight; constructor(canvas: HTMLCanvasElement) { // Engine this._engine = new BABYLON.Engine(canvas); // Scene this._scene = new BABYLON.Scene(this._engine); this._scene.fogEnabled = true; // Fog is enabled in the scene this._scene.fogMode = BABYLON.Scene.FOGMODE_EXP; // Linear fog this._scene.fogColor = new BABYLON.Color3(1, 1, 1); // White this._scene.fogDensity = 0.005; // Camera this._camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 150, BABYLON.Vector3.Zero(), this._scene); this._camera.attachControl(canvas); // Light this._light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), this._scene); this._light.intensity = 1; } /** * Runs the engine render loop */ public runRenderLoop(): void { this._engine.runRenderLoop(() => { this._scene.render(); }); } /** * Creates a scene with a plane and 6 spheres */ public createScene(): void { /** * Meshes */ // Plane var plane = this._createPlane(); // Spheres var spheres = this._createSpheres(); // Skybox var skybox = this._createSkybox(); /** * Mirror texture */ // Mirror texture var mirrorTexture = new BABYLON.MirrorTexture("mirrorTexture", 1024, this._scene); mirrorTexture.mirrorPlane = BABYLON.Plane.FromPositionAndNormal(new BABYLON.Vector3(0, -5, 0), new BABYLON.Vector3(0, -1, 0)); // Set meshes and remove plane + skybox for (var i = 0; i < spheres.length; i++) { mirrorTexture.renderList.push(spheres[i]); } // Apply mirror texture (<BABYLON.StandardMaterial>plane.material).reflectionTexture = mirrorTexture; } /** * Creates a plane with a normal map texture */ private _createPlane(): BABYLON.Mesh { var material = new BABYLON.StandardMaterial("planeMaterial", this._scene); material.diffuseTexture = this._configureTexture(new BABYLON.Texture("floor_diffuse.PNG", this._scene)); material.bumpTexture = this._configureTexture(new BABYLON.Texture("floor_bump.PNG", this._scene)); material.fogEnabled = false; var plane = BABYLON.Mesh.CreatePlane("plane", 150, this._scene); plane.material = material; plane.position.y -= 5; plane.rotation.x = Math.PI / 2; return plane; } /** * Creates 7 spheres with different materials */ private _createSpheres(): BABYLON.Mesh[] { var spheres: BABYLON.Mesh[] = []; var initialX = 70; for (var i = 0; i < 7; i++) { var sphere = BABYLON.Mesh.CreateSphere("sphere" + i, 10, 9, this._scene); sphere.position.x = (initialX -= 15); sphere.material = new BABYLON.StandardMaterial("sphereMaterial" + i, this._scene); (<BABYLON.StandardMaterial>sphere.material).fogEnabled = true; spheres.push(sphere); } // Material 1 (diffuse color) var material1 = <BABYLON.StandardMaterial>spheres[0].material; material1.diffuseColor = new BABYLON.Color3(1, 0, 0); // Material 2 (Texture with alpha) var material2 = <BABYLON.StandardMaterial>spheres[1].material; material2.diffuseTexture = new BABYLON.Texture("cloud.png", this._scene); material2.diffuseTexture.hasAlpha = true; // Material 3 (Alpha) var material3 = <BABYLON.StandardMaterial>spheres[2].material; material3.specularColor = new BABYLON.Color3(0, 1, 0); material3.specularPower = 10; material3.useSpecularOverAlpha = true; material3.alpha = 0.5; // Mateiral 4 (back face culling) var material4 = <BABYLON.StandardMaterial>spheres[3].material; material4.diffuseTexture = material2.diffuseTexture; material4.backFaceCulling = false; // Material 5 (textures repeat) var material5 = <BABYLON.StandardMaterial>spheres[4].material; material5.diffuseTexture = this._configureTexture(new BABYLON.Texture("cloud.png", this._scene)); material5.diffuseTexture.hasAlpha = true; // Material 6 (texture) var material6 = <BABYLON.StandardMaterial>spheres[5].material; material6.diffuseTexture = new BABYLON.Texture("floor_ao.PNG", this._scene); // Material 7 (share the same material as the plane) spheres[6].material = this._scene.getMeshByName("plane").material; return spheres; } private _createSkybox(): BABYLON.Mesh { var material = new BABYLON.StandardMaterial("skyboxMaterial", this._scene); material.reflectionTexture = new BABYLON.CubeTexture("skybox/TropicalSunnyDay", this._scene); material.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; material.backFaceCulling = false; material.fogEnabled = false; var skybox = BABYLON.Mesh.CreateBox("skybox", 300, this._scene); skybox.material = material; return skybox; } /* * Configures a given texture * Changes the uv scaling */ private _configureTexture(texture: BABYLON.Texture): BABYLON.Texture { texture.vScale = texture.uScale = 5; return texture; } } window.onload = () => { let canvas = <HTMLCanvasElement>document.getElementById("renderCanvas"); let materials = new Basics(canvas); materials.createScene(); materials.runRenderLoop(); } }
  19. Hello, How do you think why the attachControl doesn't work in this code? /// <reference path="../babylon.d.ts" /> namespace LOADING { export class LoadScene { /* * Public members */ public camera: BABYLON.ArcRotateCamera; public light: BABYLON.PointLight; /* * Private members */ private _canvas: HTMLCanvasElement; private _engine: BABYLON.Engine; private _scene: BABYLON.Scene; constructor(canvas: HTMLCanvasElement) { // Engine this._engine = new BABYLON.Engine(canvas); // Scene this._scene = new BABYLON.Scene(this._engine); // Camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 30, BABYLON.Vector3.Zero(), this._scene);, true); // Light this.light = new BABYLON.PointLight("light", new BABYLON.Vector3(20, 20, 20), this._scene); this.light.diffuse = new BABYLON.Color3(0, 1, 0); this.light.specular = new BABYLON.Color3(1, 0, 1); this.light.intensity = 1.0; /** * Load an exported scene * This static method contains 6 parameters * 1: the directory of the scene file * 2: the scene file name * 3: the Babylon.js engine * 4: a success callback, providing the new scene created by the loader * 5: progress callback, empty as default (can be null) * 6: error callback, providing the new scene created by the loader */ BABYLON.SceneLoader.Load("./", "awesome_scene.babylon", this._engine, (scene: BABYLON.Scene) => { // Success callblack this._scene = scene; // We can now access the scene.meshes array etc. // Decal the meshes to 10 units on X for (var i = 0; i < this._scene.meshes.length; i++) { console.log(this._scene.meshes[i].name); this._scene.meshes[i].position.addInPlace(new BABYLON.Vector3(10, 0, 0)); } // Just append the same scene this._appendScene(); }, () => { // Progress callback // Do something with your web page :) }, (scene: BABYLON.Scene) => { // Error callback }); } /* * Use graphs.The new parent of the light is the camera. * Then, the light's position will be the same as the camera */ public setCameraParentOfLight(): void { this.light.position = BABYLON.Vector3.Zero(); this.light.parent =; } /** * Runs the engine render loop */ public runRenderLoop(): void { this._engine.runRenderLoop(() => { this._scene.render(); }); } /** * This method appends new scene with the already existing scene * Here, we are appending the same scene at its original position */ private _appendScene(): void { BABYLON.SceneLoader.Append("./", "awesome_scene.babylon", this._scene, (scene: BABYLON.Scene) => { // Do something you want }, () => { // Progress }, (scene: BABYLON.Scene) => { // Error }); } /** * Import the skull mesh (available in the Babylon.js examples) * This methods imports meshes and only meshes. */ private _importMesh(): void { BABYLON.SceneLoader.ImportMesh("", "./", "skull.babylon", this._scene, (meshes, particles, skeletons) => { // Success callback // Here, meshes contains only one mesh: the skull (meshes[0]) // Particles array is empty // skeletons array is empty }, () => { // Progress callback }, (scene: BABYLON.Scene, e: any) => { // Do something console.log(e.message); }); } } window.onload = () => { let canvas = <HTMLCanvasElement>document.getElementById("renderCanvas"); let scene = new LoadScene(canvas); scene.runRenderLoop(); scene.setCameraParentOfLight(); } }
  20. 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.
  21. 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?
  22. 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.
  23. Set dashed edges on mesh

    Hi Team, I am having following code to create box(and also similar code to create planes in some cases): var box = BABYLON.MeshBuilder.CreateBox("box1", {width: sWidth, height: sHeight, depth: sDepth,updatable:true}, scene); box.enableEdgesRendering(); box.edgesWidth = 2.0; box.edgesColor = new BABYLON.Color4(0, 0, 1, 1); This creates solid edges on box/mesh. Is there any way to make dashed lines instead of solid ones.
  24. 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..!