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


Forums

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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 260 results

  1. Hello, I thought to place this on the demos and projects thread, however I decided to post this here as it is more a topic for which framework to use and why. I was hired by an elite software development group at Sony Electronics to help them navigate through WebGL to build a pipeline to deliver content for the South By Southwest convention and to create a foundation to quickly develop games and online media for future projects. In short, I was tasked to escape the limitations of 2D media and help Sony move forward into 3D content taking advantage of the WebGL rendering standards. This was no esay task, as I was hired Dec. 11th, and was given a hard deadline of March 5 to deliver 2 multiplayer games which were to be the focus of Sony's booth at SXSW in Austin Texas. But first I had to run a quick evaluation and convince a very proficient team of Engineers which framework was the best fit for Sony to invest considerable resources into for SXSW and which was the right coice to take them into future projects. Yhis wa a huge consideration as the WebGL framework which was to be chosen was to play a much greater role at Sony Electronics considering the group I was assigned to works well ahead of the rest of the industry... developing what most likely will be native intelligent applications on Sony devices (especially smartphones) in the near future. These are applications which benefit the consumer in making their day to day interactions simple and informative. Thus the WebGL framework to be chosen needed to be an element in displaying information as well as entertainment for a greater core technology which is developing daily in a unique tool set used by the software engineers to build applications which allows Sony to remain the leader not only in hardware technology, but in the applications which consumers want to use on Sony devices. But as I was working for Sony, I also had a greater task as there were existing expectations in developing a game on Sony devices which needed to be on par with what consumers already were experiencing with their Playstation consoles. As unrealistic as this might initially appear, that had to be the target as we couldn't take a step back from the quality and playability the consumer was already accustomed to. So back to the first task... selecting the WebGL framework for Sony Electronics to use moving forward. Rather than telling a story, I'll simply outline why there was little discussion as to which framework to choose. Initially Sony requested someone with Three.js experience as is more than often the case. So when they approached me for the position, I told them I would only consider the position if they were open to other frameworks as well. They were very forthcoming to open their minds to any framework as their goal was not political in any way - as they only cared about which framework was going to provide them with the best set of tools and features to meet their needs. And one might certainly assume that since Sony Playstation is in direct competition with Microsoft Xbox, and Microsoft is now providing the resources in house to develop babylon.js, that Sony Electronics might see a PR conflict in selecting babylon.js as their WebGL development framework. However, I'm proud to say that there was never a question from anyone at Sony. I was very impressed that their only goal was to select the very best tools for the development work, and to look beyond the perceived politics and to develop the very best applications for the consumer and to fulfill their obligations to their shareholders in building tools that consumers want on their smartphones and other electronic devices. So once again... Three.js vs. Babylon.js. This was a very short evaluation. What it came down to was that three.js had far more libraries and extensions - however, this was not the strength of three.js since there is no cohesive development cycles with three.js and although many libraries, tools, and extensions exist, more than often they are not maintained. So it was easy to demonstrate that practically any tool or extension we would require for the SXSW production would require myself or the team updating the extension or tool to be compatible with the other tools we might use on the project. This was due to the failings of the framework since each developer who writes an extension for three.js is writing for a specific compatibility for their own project needs... and not for the overall framework... as this is not within the scope of any developer or group of developers. Thus I find that it requires weeks if not months of of maintenance in three.js prior to building content, just to ensure compatibility between all of the tools and extensions needed to use for most projects. As for babylon.js, the wheel is not generally re-invented as it is with three.js, as most extensions are quickly absorbed into a cohesive framework quickly - provided they have universal appeal - and this integration ensures compatibility as there are fewer and fewer extensions to use, but instead an integrated set of tools which are thoroughly tested and used in production revealing any incompatibilities quickly. The bottom line is that there are no alpha, beta, and development cycles in three.js, thus no stable releases. Whereas the opposite exists with babylon.js. There is a cohesive development of the tools, and Sony is smart enough to see beyond the politics and to realize that having Microsoft support the development of babylon.js is a huge bonus for an open source framework. And if anyone had to choose a company to support the development of a WebGL or any framework, who better than Microsoft? With practically every other useful WebGL framework in existence spawned by MIT, most all are barely useful at best. And why would anyone pay to use a limited WebGL framework such as PlayCanvas when Babylon.js is far more functional, stable, and free? This baffles me and most anyone who chooses one project using babylon.js. The only argument against babylon.js is that the development of the framework is now supported in house by Microsoft. But for myself and others, this is a positive, not a negative. I've been assured by the creators and lead developers of babylon.js that they have secured an agreement with Microsoft ensuring the framework remain open source and free. This ensures that anyone is able to contribute and review all code in the framework, and that it remains in the public domain. Sony gets this and we quickly moved forward adopting babylon.js as the WebGL framework within at least one division of Sony Electronics. At the end of this post I'll provide a link on youtube to a news report of not only the games we built for SXSW, but the exciting new technology on built on Sony phones which uses the phones camera to capture a hight resolution (yet optimized) 3D scan of a person's head. This is only a prototype today, but will be a native app on Sony phones in the future. So our task was not only to develop multiplayer games of 15+ players simultaneous in real-time, but to have a continuous game which adds a new player as people come through the booth and using a Sony phone, has their head scanned. This was an additional challenge, and I must say that I was very fortunate to work with a group of extremely talented software engineers. The team at Sony is the best of the best, I must say. All in all, it was an easy choice in choosing babylon.js for the WebGL framework at Sony Electronics in San Diego. Below is a news report from SXSW which shows the new scanning technoogy in use, as well as a brief example of one of the games on the large booth screen. And using Electron (a stand-alone version of Chromium), I was able to render 15 high resolution scanned heads, vehicles for each head, animation on each vehicle, particles on each vehicle, and many more animations, collisions, and effects without any limitations on the game - all running at approx. 40 fps. The highlight of the show was when the officers from Sony Japan came through the booth... which are the real people we work for... gave their thumbs up, as they were very happy with hat we achieved in such a short time. And these were the people who wanted to see graphics and playability comparable to what the Playstation delivered. And they approved. Link: Thanks to babylon.js. DB
  2. Alenvei

    GUI issue with raycast

    Hello all Sorry for my bad english in advance . I have a littel issue with GUI and I want to understand why it works like taht . What is the issue ? I made this function : function vecToLocal (vector, mesh){ var m = mesh.getWorldMatrix(); var v = BABYLON.Vector3.TransformCoordinates(vector, m); return v; } class Raycast { constructor() { } doorOpener(letHit, myGUI, scene){ this.scene = scene; var origin = player.position; var forward = new BABYLON.Vector3( 0, 0, 1,); forward = vecToLocal(forward, player); var direction = forward.subtract(origin); direction = BABYLON.Vector3.Normalize(direction); var length = 1.5; var ray = new BABYLON.Ray(origin, direction, length); var hit = this.scene.pickWithRay(ray); if (hit.pickedMesh == letHit){ if (control.keys.ePress == 1){ scene.beginAnimation(letHit, 0, 40, false); } return myGUI.isVisible = 1 }else { return myGUI.label.isVisible = 0; } } } This function is responsible to opening doors. When player reach a door then GUI shows up which key(E) on keyboard must be pressed for open the door but the GUI only works whith one door . Here is how I call Raycast function : const view = require('./ray.js'); const panelG= require('./gui.js'); class Leves { constructor(scene,camera,followCam,canvas) { this.scene = scene; GuiP = new panelG.GuiP (scene); doo = new view.Ray (); BABYLON.SceneLoader.ImportMesh("", "textury/mapy/", "lvl01.babylon", this.scene,function (newMeshes) { var level_001 = newMeshes[0]; level_001.checkCollisions = true; var door = newMeshes[1]; door.checkCollisions = true; var door2 = newMeshes[2] door2.checkCollisions = true; var openDoor = new BABYLON.Animation("t", "position.z", 25, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var keys = []; keys.push({ frame: 0, value: 0.45 }); keys.push({ frame:5, value: -1.5 }); keys.push({ frame: 10, value: -3 }); keys.push({ frame: 30, value: -3 }); keys.push({ frame: 35, value: -1.5 }); keys.push({ frame: 40, value: 0.45 }); openDoor.setKeys(keys); door.animations.push(openDoor); door2.animations.push(openDoor); scene.registerBeforeRender(function () { doo.doorOpener (door, GuiP.panel, scene ); /*only animation works*/ doo.doorOpener( door2, GuiP.panel, scene); /* GUI and animation works very good */ }) }) } } I am newbie in babylonjs and javascript too and I want to understand every aspect of babylon js and javascript.
  3. Hey everyone I'm back! I have a mesh that rotates around the Y axis whenever I click and drag along the screen: var currRotationY = 0, currPositionX = 0, clicked = false, originalRotation; canvas.addEventListener("pointerdown", function(evt) { currPositionX = evt.clientX; currRotationY = player.mesh.rotation.y; originalRotation = player.axis.rads; clicked = true; }); canvas.addEventListener("pointermove", function(evt) { if (!clicked) return; //player.mesh is my mesh player.mesh.rotation.y = currRotationY + (evt.clientX - currPositionX) / 500.0; }); canvas.addEventListener("pointerup", function(evt) { clicked = false; }); Whenever my mesh completes a 360deg turn, its rotation.y value continues to grow beyond Math.PI*2. I'd like it to be reset to 0 whenever that happens.
  4. Hey guys, i'm really new in all this stuff with WebGL and 3d stuff on web. I'm trying to create an Angular 5 component where i can load and run dynamically 3d models. But i'm little bit blocked. This is my component: export class 3DComponent implements OnInit { private canvas: any; private engine: BABYLON.Engine; private camera: BABYLON.FreeCamera; private scene: BABYLON.Scene; private light: BABYLON.Light; constructor() { } ngOnInit() { this.canvas = document.getElementById('3dComponent'); this.engine = new BABYLON.Engine(this.canvas, true); this.canvas.width = window.innerWidth * .9; this.canvas.height = window.innerHeight / 2; this.createScene(); this.animate(); } public createScene(): void { this.scene = new BABYLON.Scene(this.engine); this.light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), this.scene); this.camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), this.scene); this.camera.setTarget(BABYLON.Vector3.Zero()); this.canvas.style.backgroundColor = "white"; this.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0); this.camera.attachControl(this.canvas, false); BABYLON.SceneLoader.Append("assets/scenes/", "microphone.gltf", this.scene, (result) => { // do something }) if (this.scene.isReady) { this.scene.updateTransformMatrix(true); } } public animate(): void { this.engine.runRenderLoop(() => { this.scene.render(); }); window.addEventListener('resize', () => { this.engine.resize(); }); } } But it doesn't work. It says: "Unable to load from assets/scenes/microphone.gltf: Failed to load scene." The path looks like to be correct. So, is the problem in my component? How should i implement functionality for that to use best practices? Thanks a lot!
  5. Hi, BabylonJS Example in Playground - a few TypeScript files with AMD and RequireJS Cheers, Ivan
  6. giorgi_AB

    Character creation

    hi, is this possible to create 3d character in real time based on input height and weight like in some games?
  7. I'm developing a game that will have grid based maps - levels and the player will be moving through it one block per keystroke. I'll be using the keyboard as input just for the start, I'll add others later on. Every level is generated from a double array filled with 1 & 0. So I want to do here is for example: if I press W the player will move one block forward. if I press Q the player will rotate anticlockwise by 45 degrees.
  8. Hi everyone! What I'm trying to do is to display a cube on the screen and I can use mouse to change the size of the cube. The idea is 1. Display a cube on the center of the screen. 2. Hold the left key of the mouse then point the cursor to any part of the cube and flip along a certain direction. The cube's size will grow along the fliiping direction.(You can image this like your finger flipping on the iPhone sceen) 3. I can rotate the cube using mouse. I'm very new to babylon.js. Hope you can give a little clue. Thank you sooooo much!
  9. Hey everyone, I've just started working with Babylon.js and I have a question. I've got a double array filled with 1 & 0 and I want it tranformed to 3d. 1 being blocks and 0 spaces. I did it this way: var sizeFactor = 0.2; for (var i = 0; i < array.length; i++) { for (var j = 0; j < array[0].length; j++) { if (array[i][j] === 1) { var box = BABYLON.MeshBuilder.CreateBox('box', {height: sizeFactor, width: sizeFactor, depth: sizeFactor}, scene); box.position.x = i * sizeFactor; box.position.y = 0; box.position.z = j * sizeFactor; } } } but its very taxing I believe to the system because of the many boxes. Is there any other less taxing way to achieve this?
  10. Just a quick little demo of something I thought would be fun to create. No smoothing groups or textures and dirty animations. PoC PoC PoC. All separate weapon parts are weighted to bones, so they can be positioned, scaled and rotated individually, to create endless weapons(Only 4 in this example), all from a single mesh. I've chosen to do it in 3Ds Max, although it can be done in code as well. http://playground.babylonjs.com/#ZIH5Y7
  11. This has been bugging me for some time now. I'm trying to recreate an imported mesh(box) using the MeshBuilder and the boundingInfo of the imported model. The issue happens when I start scaling the model(In 3Ds Max). Look at the following example: https://www.babylonjs-playground.com/#070GWA The meshes line up perfectly using the extendSize and centerWorld. But as soon as I start scaling the models, the following happens: https://www.babylonjs-playground.com/#070GWA#1 I tried a few things without any success: https://www.babylonjs-playground.com/#070GWA#2 Can this be done without any matrix magic?
  12. Hi Team, I am using arc rotate camera in the scene. There is delay/animation in panning when pressed control+drag. I want the panning to happen on the go without delay. I am trying to modify the native library code for arc rotate camera, but the snippet itself is loaded with delay. Is there a way to disable delay/animation in panning effect? if (this.inertialPanningX !== 0 || this.inertialPanningY !== 0) { console.log('Start Drag---------------') console.log(new Date()) if (!this._localDirection) { this._localDirection = BABYLON.Vector3.Zero(); this._transformedDirection = BABYLON.Vector3.Zero(); } this.inertialPanningX *= this.inertia; this.inertialPanningY *= this.inertia; if (Math.abs(this.inertialPanningX) < BABYLON.Epsilon) this.inertialPanningX = 0; if (Math.abs(this.inertialPanningY) < BABYLON.Epsilon) this.inertialPanningY = 0; this._localDirection.copyFromFloats(this.inertialPanningX, this.inertialPanningY, this.inertialPanningY); this._localDirection.multiplyInPlace(this.panningAxis); this._viewMatrix.invertToRef(this._cameraTransformMatrix); BABYLON.Vector3.TransformNormalToRef(this._localDirection, this._cameraTransformMatrix, this._transformedDirection); //Eliminate y if map panning is enabled (panningAxis == 1,0,1) if (!this.panningAxis.y) { this._transformedDirection.y = 0; } if (!this.target.getAbsolutePosition) { this.target.addInPlace(this._transformedDirection); } console.log(new Date()) console.log('End Drag---------------') } also tried setting various values to speed, panningSensibility, cameraAcceleration.
  13. For now, I'm basically just trying to understand some of the code behind the "drag and drop" sample in the Babylon.js playground. I would eventually like to create a 3d arcade style game, starting here by being able to move the meshes around WITHOUT the camera moving. But first things first tho, I need to understand the code thats here. I've read as much of the documentation and tutorials as I could, and I didn't see any previous post really related to what I'm looking for. There's are some things I dont get with the event listeners: getGroundPosition(), onPointerDown, onPointerMove. I altered the scene and added it to my hosting. I removed everything but the sphere. http://portfolio.blenderandgame.com/draganddrop.html Posting the code here, I commented the parts of the code I dont get: With getGroundPosition(), I dont get the predicate. Not sure i entirely grasp the concept of "predicate". I know that its a callback that returns a boolean value: returns true if ground was clicked. I just dont know what purpose that boolean serves. What other piece of code is that impacting? Not sure how it ties in. I notice that if you comment that part out, so that x and y are the only parameters, then the meshes will "sink" in into the ground instead of staying on the surface. I want to understand it on a code level tho. var getGroundPosition = function () { var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh == ground; }); //?? dont understand purpose of predicate if (pickinfo.hit) { return pickinfo.pickedPoint; } return null; }I have the same question about the scene.pick predicate in onPointerDown (this one returns true if the ground was NOT what was clicked on. ) One OTHER question about this: startingPoint is assigned a value of getGroundPosition(evt). I know its passing the event. But getGroundPosition was defined WITHOUT parameters. So why is a parameter being passed to it? And what difference does that make? I've never seen an example like that with addEventListener. var onPointerDown = function (evt) { if (evt.button !== 0) { return; } var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh !== ground; }); //dont understand purpose of predicate again if (pickInfo.hit) { currentMesh = pickInfo.pickedMesh; startingPoint = getGroundPosition(evt); //dont understand why argument is passed if fucntion was defined with no parameters.. if (startingPoint) { setTimeout(function () { camera.detachControl(canvas); }, 0); } } } Because of those two questions. There is a LOT I dont get about onPointerMove. But hopefully once I understand the above, it will help me figure out the rest. Dont want to bombard with my questions here on my first post Muchas Gracias to anyone that can help. Can't get any further with this and I dont want to give up and move on. Everything else I see with regard to movement is actually just moving the camera, not translating a mesh with a static camera view. This is the only sample I've come across that actually disengages the camera (at least only when the mesh is being moved).
  14. Hello It is possible turn off parent rotation ? var box = BABYLON.MeshBuilder.CreateBox("box1", 1, scene); var sphere = BABYLON.MeshBuilder.CreateSphere("sphere1", 1, scene); box.parent = sphere;
  15. Hello, I'm a new here, but I'm very exited with Babylon.js. I started my project with it, and already dealt with several problems (mostly connected with blender export). Thanks of the community and this wonderful forum But I reached a point that I can't proceed, have dug for a while, but didn't found a solution. When I clone a mesh, it is fine on laptop, but on iPad the result is not cloned object, but instance of it. I read on the forum that I should use computeBonesUsingShaders = false, ( http://www.babylonjs-playground.com/#GTHTR#1 ). I did it that way, and it is fine. But another problem arise - the cloned object doesn't show colors of the materials. Probably the best way to explain is an example. Here is it: http://www.babylonjs-playground.com/#GTHTR#20 My question is how to add colors to the cloned mesh? There are materials for t-shirt, socks, hair, etc. But all are missing. Thanks in advance.
  16. Helo i have a list of element populated form user database and i want to make their 3d representation in webgl or babylon.js I want to changing the object color depending to the user data from list I mean to set color green for object were there id or name are present in this list and set red for those absent How can i make this please ?
  17. Hello! I try to implement jumping without included physics plugin. I've read so many topics, but without the result I want. Here is a demo - http://www.babylonjs-playground.com/#YBAGYL Please press RUN, left click to enable moving with arrows and mouse - try to jump with Shift on the red box - you will fall down through it, but I want to stay ON it. I think I've enabled all checkCollicions, gravity etc, but still no luck. What am I missing? Maybe my jumping implementation is bad. At this moment I don't want to use a physics plugin because I think it's an overhead for me - I need moving and jumping only from a character at the moment.
  18. Hello every body I have question about using variables and "this". I am autodidact and I really like code and last 2 week I am trying make "simple" game but I am stuck. Here is my question : If I create js file and make there function: function Box(scene){ this.scene = scene; this.box = BABYLON.Mesh.CreateBox("box", 0.32, this.scene); this.boxMat = new BABYLON.StandardMaterial("mat",this.scene); this.boxMat.diffuseColor = new BABYLON.Color3(10,1,1); this.box.material = this.boxMat; }; And I have other js file whit other function which contains mesh like a sphere for example and now I want to use "this.box.position.x " in function where is the sphere. Is it possible ? I tried like function call() but it didn´t worked. I treid search in google some exampels and without success. Sorry for my bad English. Have a nice evening .
  19. Hi Team, I am working on a floor planner. I have implemented freewall drawing feature using ribbons. I am also setting the borders to freewall using enable edge rendering. This works fine for individual ribbons. however, there can be a situation where multiple freewalls are connected to each other. in this case, i want borders to come for complete path and not individually. i tried merging the meshes using `BABYLON.Mesh.MergeMeshes` . however, the borders are coming still individual Something similiar to freewalls fro, homestyler (https://www.homestyler.com/floorplan/?&lang=en_US). what is the best way to implement something close to this.
  20. Hello, A new upcoming startup is looking for a freelancer developer (for a really cool job). Skills: 3D graphics (Three.js / Babylon.js or any other alternative) Extras: React Node.js TypeScript ES6/ES7 Redux or any other alternative jobs@designwithfriends.com or PM for details
  21. Hi. I am babylon.js beginner. I am developing obj.file viewer using babylon.js By the way, when loading obj.file, DefaultLodingscreen separeted form canvas. this is static screen: this is loadingscreen. I will wait good resolution. best regards.
  22. hi all, i can achieve the scene saving and loading, but what i expecting is i want to save the single mesh and its child instead of saving all the scene.then i want to load the saved mesh. how i can achieve this.kindly suggest me some eg and method to achieve thanks vahi
  23. Let's use this PG as an example: http://www.babylonjs-playground.com/#1PX171%2323 (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: https://www.babylonjs.com/demos/distraction/distraction.html 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?
  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 (velocity.top), the controlled mesh should increment both z, and x, which results in the following equations : if (player.velocity.top !== 0 && player.velocity.left !== 0) var d = 0.7071; // Cos(45°) else var d = 1; player.position.z += Math.sign(player.velocity.top - player.velocity.left) * d * t; player.position.x += Math.sign(player.velocity.top + 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 velocity.top 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 (player.velocity.top !== 0 && player.velocity.left !== 0) var d = 0.35; // Cos(45°)³ else var d = 1; camera.orthoTop -= Math.sign(player.velocity.top) * d * t * .7; camera.orthoBottom -= Math.sign(player.velocity.top) * 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. 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. https://www.babylonjs-playground.com/#FZZV7K#23 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. https://www.babylonjs-playground.com/#FZZV7K#24