Popular Content

Showing content with the highest reputation on 03/01/17 in all areas

  1. 9 points

    Why is BJS now mostly Typescript?

    I'm going to answer that as I'm the one who forced @Deltakosh to switch to TypeScript. First, TypeScript is "just" a superset of JavaScript, adding types and supporting future features of ECMAScript by transpiling down to ES5 or ES6. This means that we don't break anything with regular users that will just use the compiled JS version in ES5 or ES6 and will never see it comes from TypeScript. Thanks to the switch we've made 3 years ago, we've managed to find bugs that were just under our eyes and difficult to find in plain JavaScript and we've also managed to boost our productivity on the engine, which is good for us and our community/customers. @Deltakosh has done a great article on that: https://www.eternalcoding.com/?p=103 On my side, 3 years ago, I was also concerned on the fact we were spending a lot of time answering basic questions of our users, trying to understand if there was a bug in their code or in our code. All this time was our spare time and wasn't used to improve the engine. I've then started to discuss with @Deltakosh on ways to solve that and again TypeScript was a good candidate. Why? Again, thanks to the types exposed, I’ve discovered great possibilities such as the TypeScript playground: http://www.typescriptlang.org/play/index.html I’ve then told to @Deltakosh we could do something similar, having autocompletion in the browser, building some basic sample codes to help our users, learning by live discovering the API. Deltakosh ended up building a much better playground with great features such as saving your code to share it with your colleagues or on the forum for review, downloading the ZIP, etc. Something which would have been much more difficult without TypeScript. TypeScript also offers us to use future features of ES now to add clarity to our code: module, class, arrow functions, generators, async/await, etc. Those are not TypeScript specifics. You will have to learn them to be able to write ES2016/ES2017 code anyway. Regarding the fact it comes from Microsoft, this is really not what influenced us (everybody knows deltakosh and I are MSFTees). Deltakosh was even against at the beginning but quickly changed his mind when he discovered the potential behind without affecting our users. Even if it comes from Microsoft, the web community enjoys TypeScript and other big companies such as Google is using it for Angular 2. TypeScript also offers another great benefit for us: we managed to attract talented developers such as @Nockawa writing the awesome Canvas2D extension who was mainly a C# developer. C#, C++ and Java developers tends to have difficulties understanding some paradigms of JS at the beginning such as the prototype oriented programming, the classical issue with capturing this for closure, writing module/class like with self-executed anonymous functions, etc. TypeScript is hiding that by still generating perfectly written JavaScript under the hood. I tend to find TypeScript also better to work as a team. At last, as said before, we managed to attract some customers using Babylon.js because it is written in TypeScript and you can them fully develop with the .ts version of our engine instead of the .js to have a full typed experience during your development process. Another great benefit: I can compile an ES6 (ES2015) or ES7 (ES2016) version today without changing a single line of code of Babylon. If we would be in plain JavaScript, we would have been forced to rewrite everything to switch from ES3/ES5 to ES6 for instance. The only caveat is that it’s a bit more complex for contributors to the code to do PR to fix bugs or add features. But to be honest, as said, it’s just the JavaScript we will all use in 1 to 2 years. Except this small part, TS doesn’t affect our users because it’s transparent for them, we’re improving the quality of the code, we’re going faster, we’re attracting more diverse talented developers, we’re ready for the future. I really don’t see where the problem is then.
  2. 8 points


    Hi there, I thought I'd share what we've been working on. JigSpace is a platform for creating and sharing 3D, step by step instruction for anything. Kind of a 3D powerpoint! To create these instructions we have a very simple web editor based on Unity, and for viewing them we use Babylon. It works on computers and phones but also in VR and AR (we have dedicated apps for android/ios/oculus/hololens) Here's a link to our library: https://jig.space/explore.html We decided to use Babylon for speed and portability and it has been fantastic. It's a young engine so of course we ran into hurdles along the way but always received great help from the community. Let me know what you think!
  3. 4 points

    Dynamic or infinite terrain experiment

    Hi Folks, We have already spoken in this forum about infinite dynamically generated terrains. Nasimi completed a fantastic terrain generator with GeometryBuilder here : and Dal started a great project here (maybe uncompleted) : So, my turn to bring my two cents. Well, it's just an experiment for now. My idea is this one : Imagine you have either a huge set of geographic data (3D coordinates), something too big to display at once or even toobig to build a working mesh with because of the amount of data. Or imagine that you can get infinitely new data, either computed on demand, either downloaded by chunks to depict the new parts of the current terrain in what your camera is currently moving. In both cases, we have too many data to build and display a visible mesh. So my idea is to decouple the rendering from the logical data. The data could be a very big or dynamically renewed array, whatever... it contains always more info than what is displayable. The terrain is then just an updatable mesh, updated from the camera local position and the current related data. So there is a logical map containing the 3D data (computed, downloaded, or simply very big) and a terrain mesh "sliding" over the map data. The mesh could be built by taken in account the LOD necessity, it is to say by having many tiny facets close to the camera location and bigger ones far from the camera. In order to understand, I intentionally computed a random (simplex) map of data that can be displayed here : it's the red wireframed map, it's 1 million vertices. Normally, it could be far more bigger and wouldn't be displayed. The camera would be moving in the center of the green disc. Actually, the green disc is the displayable terrain and it should move with the camera movements instead of moving independently. The camera should also be submerged in it at a lower altitude. I put the camera far higher and didn't attached the green terrain to it for the sake of understanding : http://www.babylonjs-playground.com/#1SZASV#1
  4. 4 points

    Why is BJS now mostly Typescript?

    For me Typescript was also one of the main reasons to use BabylonJs instead of ThreeJs. I use BJS for commercial projects. That means i need to deliver robust and reliable code. I would not use plain JavaScript for big projects. Especially if different people working at the same code. The type checking, the language features and the IDE support you get with TypeScript (i use VsCode) makes development much easier and faster. One example would be refactoring. Lets say you rename a function or you change the data type of a variable. With plain JavaScript its very easy that you miss to adjust some code and later you get a problem in the released project. With typescript you will get a compile error right away.
  5. 3 points

    Why is BJS now mostly Typescript?

    Personally, BJS being Typescript is one of the core reasons that I was drawn to it, and I've been using JS for 20 years. After all that time I still dislike javascript's idiosyncrasies. TS is cleaner and lets me use the latest bleeding edge features of ES6 right now, with type checking to boot. I value the direction the BJS project is headed. I don't really see what the issue is. This is the direction JS is headed anyway. Like Babel, TS is just a great way to utilise the latest and greatest ES6 syntax now without sacrificing broad compatibility. Complaining about it just seems like you don't want JS to change at all, ever. But that's a different discussion.
  6. 2 points

    Why is BJS now mostly Typescript?

    One of the main reason for me is the type visibility. How many times I was asked by my team : "what kind of object do I have to give to this constructor/function?" Now I just answer 'check the definition file / check the doc'. It's much more easier from a dev point of view. If you want to contribute to Babylon.js, there are several articles available : - http://doc.babylonjs.com/generals/how_to_start - http://doc.babylonjs.com/generals/setup_visualstudio - http://pixelcodr.com/tutos/contribute/contribute.html As Typescript is a superset of Javascript, all the JS code you will write IS fully compatible. And we (project admins and the whole forum family as DK said) are at your entire disposal if you want advices and PR reviews about doing your updates the best possible way.
  7. 2 points


    Thanks, glad you like it That would be awesome yes! If you want me to send you a well-worded short description let me know. It's a lot better now The engine has improved a lot, and we're getting better at it too. Part of our problems came from us having to learn a completely new library and its conventions/documentation. The 2D labels were a massive challenge until @Nockawa released canvas2D. One area that we think could be improved and would make a big difference for us is the animation/tweening. In unity we use http://dotween.demigiant.com/, having a similar tweening class in babylon would be amazing. Three.js has https://github.com/tweenjs/tween.js Besides that it's been great!
  8. 2 points
    OK! I have it...there were a bug in the movement!!! Now it is fixed (your PG should work after a cache clear)
  9. 1 point
    Did I mention documentation lately?
  10. 1 point

    Suggestions for teaching with Babylon

    @JohnK If I'm able to use Babylon, I think I'd skip any mention of scene in the first chapter. I didn't mind using it with Three.js because it was a low-overhead concept for kids to grasp. But all things being equal, I'd be more than happy to leave it until a later chapter. The book uses a simplified code editor that comes with several starter templates. Those templates do a little setup -- scene, camera, lighting -- then place a big comment that says "START CODING ON THE NEXT LINE." The setup is lightly commented in case kids are curious, but the main focus of the early chapters are core concepts of shapes, animation, grouping/frame of reference, etc.. There's a later chapter that describes all the stuff above the "START CODING" line. Anything that helps me avoid concept overload -- like default scenes -- is awesome by me. The rest of what you describe is very similar to what I have in the Babylon branch of the book right now. It could certainly work And huge thanks for +1 to `set()` and to @Deltakosh for making that happen. That's exactly how I'd like to use it! -Chris
  11. 1 point

    WorldSpaceCanvas2D attach to mesh

    Hello, The doc entry point is here: http://doc.babylonjs.com/overviews/canvas2d_home you'll find plenty of playgrounds at the bottom. In the first time tutorial, there's a section about WorldSpaceCanvas and their relationship with 3D Scene Nodes http://doc.babylonjs.com/tutorials/using_the_canvas2d#world-space-canvas Finally I think this PG (also referenced in the doc entry point) will do what you're looking for: http://babylonjs-playground.com/#1KYG17#1
  12. 1 point

    Suggestions for teaching with Babylon

    I'm always looking for ways to simplify the usage of Babylon.js. @JohnK I'll be more than happy to do the TS part of your code. For instance, I've just added set to all basic types: https://www.babylonjs-playground.com/#IEGEV#5 Please keep sending ideas to reduce any friction with the API (Without breaking changes of course)
  13. 1 point
    Sorry for being so long to understand your issue
  14. 1 point

    Dynamic or infinite terrain experiment

    I couldn't check it this afternoon, too busy ... sorry
  15. 1 point
    @unintellisense well, yes, I had to rollback part of the code that were making this working (because unfortunately this code broke the scale propagation through primitive tree), as I said in other thread, that's the last thing I have to dev/check: alignment working correctly in all cases. I'm going to start that today, be a little more patient. I hate that because C2D has been unstable lately, trying to make all features people asked working at the same time was quite a challenge...But the worst is definitely behind...
  16. 1 point

    Suggestions for teaching with Babylon

    @eee-c Just to add some of my thoughts to the others. As a retired teacher I am still interested in how you get concepts over to people. In trying to help BabylonJS noobs I have expanded on some of the official documentation through a guide. When I go back and read some pages of the guide I still see the need for improvement. So I know how difficult it can be to write explanations. But enough of my credentials and back to my thoughts. When I first came to BabylonJS I misunderstood quite a bit as my brain was thinking my way and misinterpreted what was in the tutorials rather than reading them thoroughly. Over time and with lots of help from people on the forum my understanding developed. What I am trying to say is that when you first came across Three either it straight away fitted your thinking or in using it you have developed a way of thinking about how to code in 3D. When you re-write the book using BabylonJS then your 'how to code 3D' and 'applying the underlying concepts' will need to change, albeit slightly For example parts of the first chapter could become Creating Spheres Balls are always called spheres in geometry and in 3D programming. There are two ways to control the shape of a sphere in JavaScript. Size: Diameter is 10 The first way that we can control a sphere is to describe how big it is. We created a ball whose diameter was 10 when we said new BABYLON.MeshBuilder.CreateSphere("ball" {diameter:100). What happens when you change the diameter to 25? var ball = new BABYLON.MeshBuilder.CreateSphere("ball" {diameter:25}); var cover = new BABYLON.StandardMaterial(); ball.material = cover; What happens if you change the diameter from 25 to 1? As you probably guessed, it gets much smaller. So that’s one way we can control a sphere’s shape. What is the other way? More Chunky: Segments are 8 var ball = new BABYLON.MeshBuilder.CreateSphere("ball" {diameter:25, segments:8}); var cover = new BABYLON.StandardMaterial(); ball.material = cover; Play around with the numbers a bit more. You’re already learning quite a bit here, and playing with the numbers is a great way to keep learning! PG to show code above works. [By the way you will have noticed I am a great fan of MeshBuilder but you could do it just using Mesh] Some issues that arise The need for a scene Obviously a scene is necessary for meshes to belong to. In your first book using Three meshes are explicitly added to a scene using scene.add. In BabylonJS using the scene-less code at some point in the book the following paragraph would need to be replaced with something like Shapes or meshes do not just hang around nowhere, when they are created they are added to the scene. This line is where the scene was created var scene = new BABYLON.Scene() and every time you create a mesh it is added to the scene for you. The scene is where the magic happens in 3D programming. It is the world in which everything takes place. In this case, it ’s where our ball is hanging out, waiting for some friends. Let’s add some other shapes to the scene so that the ball isn’t lonely. OR you put scene back in the code var ball = new BABYLON.MeshBuilder.CreateSphere("ball" {diameter:25}, scene); var cover = new BABYLON.StandardMaterial("cover", scene); ball.material = cover; and say The scene is where the magic happens in 3D programming. It is the world in which everything takes place. Whatever things we create have to be added to this world by telling them which world to join. In this case, it ’s where our ball is hanging out, waiting for some friends. Let’s add some other shapes to the scene so that the ball isn’t lonely. Next issue The main point being I presume is to avoid explaining about vectors. You could get over this by using position.x = , position.y = , position.z = but I can see the advantages of .set() You will see that in this PG I have added a prototype function to Vector3 that allows you to use .set() on Vector3 objects, you would possibly need to do this for other objects such as Vector2 and Color3 depending on the scope of the book. As it seems you will be loading BabylonJS into gamingJS.com then you could add the prototypes into your version of BabylonJS. Of course then you would need a section to explain how if they were going to use BJS elsewhere how they would actually use position and rotation. Unless of course you could persuade Deltakosh that it was worth adding into BJS26. If I was able to understand typescript I would submit a PR and see if DK would accept it but I am more likely to do damage to the code than add something useful. Sorry to go on a bit just ignore if not useful or you have already though of all this.
  17. 1 point

    Random Sprite Image

    Thanks a lot @ivan.popelyshev , you are the man with the power. Thank you Mr.DynoMan
  18. 1 point

    The Weave of Heroes - A pocket sized RPG

    Looks fun - what did you make it in?
  19. 1 point
    Size of your canvas is very big compared to size of the circle. Try add that one before you make a circle, that way you'll understand: ctx.fillStyle = 'blue'; ctx.fillRect(0, 0, canvas.width, canvas.height);
  20. 1 point
    Where did you upload the example? Do you mean the gif? It's going to be hard to debug this problem just by looking at a gif or video. Show us some code. If I had to guess (and let's face it, I do have to guess; I haven't seen any code on which to base these suggestions) you may have some unusual DOM hierarchy and/or CSS that is conflicting with the auto-scaling code in melonJS. It works best if you are either using a static size without scaling, or suggesting a size and using one of the flex methods to take up all of the available screen real estate. This article goes into detail about all of the different scaling methods: http://blog.melonjs.org/2015/02/shine-get-resolution-independence.html Apart from that, I'm at a loss. You don't get the same crazy behavior with any of the examples, though, right? Especially the shapes example, which uses PointerEvents. If this example is broken, then the problem is related to your User Agent or environment. If it works, then it's just something in your code (but we won't know what it is, yadda yadda, share the code).
  21. 1 point
    Oh, haha. Embarassing. I was setting height on the canvas but not on the parent div. Thanks as usual @Deltakosh
  22. 1 point
    Just add a style to the div containing the canvas and set height:100%
  23. 1 point

    Github issues

    I'm gonna try and see how it works For all forum family members: please help me also on github if possible
  24. 1 point

    Remove border from text2d

    @jschwuch the text rendering issue is now solved, the preview file of Canvas2D are updated, the PG will be updated soon. I'll work on the bleeding edge later.
  25. 1 point

    Suggestions for teaching with Babylon

    My bad..should be good now
  26. 1 point

    Canvas2D Main Post

    Hello people, There's a new preview of Canvas2D and the PG is updated. What's new lately...well, bug fixing and improvements! 1. Text Rendering I've improved the way characters are generated and stored in the FontTexture. It should be more reliable now, I've also finally introduced the concept of Text Baseline, and that will be useful in the near future for Text2D, to make sure the text is always correctly aligned vertically I've improved the support of the BMFont files at the request of @TMTH I can know display font generated with the BMFont software, well, at least the ones I tried. I'm still experimenting improvements of Text2D rendering at the request of @jschwuch and also previous people, I hope to solve it soon. 2. Device Pixel Ratio Well, I had it on my todo list for a long time and now it's done, if you run a Canvas2D on a mobile device with a DPR > 1, the size will be identical to a DPR 1 equivalent. You can use Chome debugging "device toolbar" to play with it and you'll see it works. I've also fixed the bug of the SceneOptimizer that was changing the HardwareScalingLevel which caused the canvas to double in size... 3. Scale and DesignSize It has been a long fight and I hope it's over...I've changed the way DesignSize is managed, it's no longer stored in the Canvas2D Scale property but in an internal one, so it should be more stable/reliable for now. Scaling through hierarchy wasn't working so well lately, I made some regression trying to improve things. I can say now that I've stabilized things and the scaling work as it should be. I guess I have to check with @royibernthal if his project still require some work for me, but I'm confident I can make it work if there's still some little bugs What's Next!? I will follow the many remark/advises of this thread to make positioning working with scale/rotation, I think I know what to do, but I can't guaranty it will be the unique solution, I hope. I'm finishing text improvement then I switch to this final task before resume what I was supposed to work on Canvas2D is getting more and more reliable, the many input/bug reports from everybody and especially @TMTH lately pushed me in this direction, I know I still have some improvement to make on the caching system, but well...it will wait a bit! Give me some feedback, remember, if you have issue, post a new question mentioning me! Thanks!
  27. 1 point

    Changing a passed variable

    Okay, I think I actually just found one of my issues with the bracket notation. I missed a pair of single quotes in one of the brackets. I actually got your suggestions to work I think. Will test further but at least my trial run seemed to work once, so that's progress! EDIT: Alright, I've got it working now. It appears I've been properly passing the object's reference (via passing the value) for a little while now. I just wasn't seeing the results updated in my game because I was properly updating the global variables, but the text that gets displayed based on the variables' value wasn't properly updating. Once I added some lines in the update statement that continuously updates the text based on those changing values, it now displays things properly. I guess this is a lesson in just debugging using the console rather than trying to get "fancy" and displaying values on screen. Thanks so much for taking the time out to help me understand this matt!
  28. 1 point

    can't get physics to work right

    Hi, To get the physics working properly you will have to run the physics code after loading the meshes. Otherwise the bodies generated using the physics engine won't be correct. To get you started - http://www.babylonjs-playground.com/#2I8LFS#5 I am not sure which mesh is mesh, but if you want to simplify the scene and add a few comments, I will be able to help better.
  29. 1 point

    Suggestions for teaching with Babylon

    @dbawel Thanks for the feedback! I totally agree that WebGL, linear algebra, normals, etc. are right out for teaching kids. Kids should start with the simple stuff and work their way up. I do think that there are simple concepts that kids can learn in 3D programming -- and pick up a little JavaScript along the way. Again, I didn't have kids translate local to world coordinate systems, but they did learns the basics of what a mesh is, using shadows, animation, simple physics, even frame of reference. I kinda bet heavily that this approach worked in the first edition of the book (https://pragprog.com/book/csjava/3d-game-programming-for-kids). It's not going to suit everybody, but it seemed to appeal to a lot of kids. Hence the second edition If you're interested, an excerpt from the first chapter is available here: https://media.pragprog.com/titles/csjava/shapes.pdf. That should give you an idea of the overall approach that I took (and that I'd like to extend in the second edition). Bottom line: I think we're violently agreed . But if you have any thoughts as a former teacher, I'm very much interested in your perspective! -Chris
  30. 1 point

    The Weave of Heroes - A pocket sized RPG

    1. my browser: google chrome, latest version x64 macbook pro 2014 2. no probs. 3. no probs. 4. glad to hear! 5. that's ok, my only concern was that not ALL players would notice and it might affect their perception of the game. Maybe talk about it in one of your hints? Anyways, it doesn't really matter because it is a design choice. Also, do not misunderstand me! I loved the game! and the art!
  31. 1 point
    DigiHz Data

    Rotating a Mesh around a Pivot

    A solution might be ths PG. http://www.babylonjs-playground.com/#M0UJB
  32. 1 point
    Yes first init gets called, then create, then update, and function MyState() {} MyState.prototype = { // State init method gets the params here init: function(params) { }, create: function() { var params = ['L1', 'L2']; // you start a new state with parameter like this this.game.state.start('my-state', true, false, params); }, update: function() { } }; Here is a list of other methods you can define in your state: http://www.html5gamedevs.com/topic/1372-phaser-function-order-reserved-names-and-special-uses/ Note: I think init method should be mentioned there as well.