Popular Content

Showing most liked content since 03/29/2016 in all areas

  1. 20 likes
    Hello good people of the babylon.js community! Update #14 from January 29th, 2017 Primitive Collision Manager (PCM, @ller request) The PCM is finally done! Well, first release, I've already spotted some not supported cases... Anyway, you can check a PG demonstrating the feature here: http://babylonjs-playground.com/#1PXWLR#2 (I've commented the PG for you to see how it works) Turned out that I didn't do what I wrote in the previous message, I didn't check for OOB and I've implemented a generic triangle set versus triangle set intersection algorithm right away. Basically all primitive types now create/update a Tri2DArray which contains a list of triangles describing the primitives surface. It needed to be that way because an Ellipse with a intersection of 8 is graphically not shaped like a perfect ellipse: there's not enough polygons, so I couldn't use a intersection algorithm involving a true/perfect ellipse, same goes for the Rectangle2D with round corners. So I decided to go for the most generic and accurate way. All primitive types are supported except the new WireFrame2D one. Through the PCM object you have a list of all primitives intersecting with the Canvas' border (if you activate the feature), it's useful. You also have a list of all the pair of two colliding primitives. From a given prim you have the intersectWithObservable and intersectWith properties to get notified of new/removed intersections and to access the full list of them. New Text Alignment (vertical and horizontal) and word wrapping features for Text2D (coded by @adam, I'm very thankful to him! It's good to feel less alone on this whole coding...) Basically now you can set a left/center/right text horizontal alignment and a top/center/bottom for the vertical one. If you specify a size for your Text2D primitive you can now have auto word-wrapping if the line exceed the horizontal limit. Maybe @adam could share a PG demonstrating the feature! New Primitive Type: WireFrame2D Well, I needed it to draw the debug World AABB and Cluster of the PCM, so I wrote it. The Primitive accept many WireFrameGroup2D, each one having a default color and contain a list of lines. Each stored vertex has its own color. Basically you create a WireFrameGroup2D instance then use its method to fill it with vertices. Note: it's Line List, not line strip: each line is defined by two own vertices. You can use an API to start, fill, end a LineStrip but internally it will double the vertices for everything between the first and last vertex. Right now this Primitive doesn't support any kind of intersection (point or prim-prim), I'll add an intersectionThreshold and implement the algo any time soon...It's not a priority right now... Misc things The BoundingInfo2D now support a WorldAABB with an efficient dirty/update, I obviously needed it for PCM Each Prim Instance has now a uid property which is a unique id (a GUID), I use it as a key to store the prim or prim related data into a StringDictionary, it's an efficient way to retrieve a given prim without going O(n). There's a Triangle versus Triangle intersection method in the Math2D.ts file, its implem is slow. If someone has the code for a Tri-Tri in 2D implemented using the Separating Axis Theorem (SAT) algo: I'm in ! Update #13 from January 24th, 2017 WorldSpaceCanvas TrackNode feature So I've developed the feature requested by @royibernthal to create WorldSpaceCanvas that track a 3D Scene Node with the optional feature for the WSC to always face the camera (billboard mode). You can find a demo in this playground. It was truly missing to the whole "WorlSpace Canvas interacting with 3D Scene" scenario. Other users requested more about this specific scenario and it perfectly makes sense: C2D was develop to provide 2D support for the 3D Scene, I've been focus on the "2D stuff" by itself a lot, because, well, it's already a big task, but yes there should be more things to come on this area, I'll try to dev feature requests on this matter with a higher priority. Update #12 from January 11th, 2017 Few announcements: We can now use BMFont to render text with Text2D PG here the documentation of the Text2D was update to explain the different techniques you can use to render text (normal, Super Sample, Signed Distance Field, BMFont) and which one you should use. (Thanks @MasterK for the idea and help) There's a new page about how the Rendering is working, it will help people to understand how to get transparent sprites, for instance. (this page is currently only accessible by the link I gave before, because I've messed up the link in the Canvas2D Homepage, yeah, that's my special ability, DK loves it) Some new Playgrounds are available at the bottom of the Home Page I was ill during the release of the 2.5, so I couldn't update the doc and the what's new, so I've updated the what's new of the documentation web site, go take a look if you want. As a separate module, Canvas2D has its own section in the What's New. Update #11 from January 5th, 2017 Long time that I didn't develop new features but here we go: AtlasPicture is now supported, see the documentation about it. Scale9Sprite is a new feature of Sprite2D class.The Sprite2D documentation was also updated. You can play with the following PG: Scale9Sprite AtlasPicture Of course you can use Scale9Sprite for a Sprite generated from an AtlasPicture. Update #10 from October 21th, 2016 allow3DEventsBelowCanvas Until now, pointerEvent occurring above a ScreenSpaceCanvas were also sent to the 3D Scene, many people (rightfully) complained about this so I decided to add the feature, which is called "allow3DEventsBelowCanvas" (which is false by default). The PR is here for more info https://github.com/BabylonJS/Babylon.js/pull/1448 (preview files updated and PG not updated so far). You have to realize that this is a change in behavior, now by default events won't be sent to the 3D Scene if they occurred above the Canvas, but I figured it made more sens this way. If you want them to be sent anyway, just set the setting to true! Update #9 from October 19th, 2016 Stabilization The latest weeks were spent on keeping stabilizing the Canvas2D feature, fixing bugs and adding feature only when necessary. Overall bug fixes were concerning Positioning Engine (alignment), StackPanel Layout Enigne, pointerEvent observable (leave/out now works better), some dispose issues solved, you're supposed to have no more opacity/transparency issues (well, let's say, "less"). One new feature One new feature was developed recently, during the creation of a ScreenSpaceCanvas you can now specify the renderingPhase setting, allowing you specify for which camera and which renderingGroup the Canvas is supposed to be rendered to. Simpler version: you can now interleaved 3D layers (which are renderingGroup) with 2D layers (which are ScreenSpaceCanvas). Many people requested it ( @MasterK, @HenryPeng, @stormwarestudios) to render 3D content above UI for FX (particles) or simply some 3D preview (like a 3D character preview in a UI). This playground is a very raw demonstration of the feature. Modularization Oh, by the way, I nearly forgot to tell something pretty important: we have recently extracted the Canvas2D feature (and the forthcoming GUI Lib first code lines) from the main babylon.js file. This is the first step of what is going to be a modularization of babylon.js, Canvas2D/GUI being obvious (and easy) candidates. What is changes for you? Well, not that much, if you use C2D/GUI you now have to use the "babylon.canvas2d.d.ts", "babylon.canvas2d.max.js", "babylon.canvas2d.js" that are sitting next to the "babylon.js/d.ts/max.js" files in the "dist" directory of your choice (right now only the "preview release" directory contains the Canvas2D related files, for obvious reason. The module's name is still "BABYLON", which will ensure you'll compile without changing anything. On a repository point of view, the source code was moved from /src/Canvas2D to /canvas2d/src/. Our lovely boss made the move and the Gulp config to compile everything the same way babylon.js does so you don't be lost. La surprise du chef! And the "chef" is not me, but another core member @Temechon spent some very valuable time (and I can't thank him enough for that!) to work on a feature I desperately need for so long but that I'm unable to code (well, in the time frame it will took me) which is called: c2dinspector.js. Basically the c2dInspector is a HTML Pane that is added on the right side of your HTML pane and that displays all the Canvas2D instances in your Scene (well, Engine to be more accurate) and their content as a tree of Primitives. You can select a given Primitive to see its details on the Detail Plane below, you can even change some values (still work in progress). In the tree, for each item there're two icons at the very left, an "eye" to show/hide the prim, and a "double frame" which is used to show/hide the debugDisplayArea (more on this below). This feature will help you (and me!) debug and understand better what's going on and why! It's not released yet, but a beta will be very soon (tonight or tomorrow), it's still Work in Progress, but hey, it's better than nothing and it won't harm you. The debugDisplayArea (the only thing I coded, bugs are to expect!): as you may know a primitive has four area: layout, margin, padding and content, this feature will display them with a given color code (layout being light red, margin is yellow, padding is magenta, content is cyan). This screenshot below is the same UI as above but with the debugDisplayArea on the "GUI Visual Placeholder of MainWindow", which has a margin of 50, 50, 50, 50 (the yellow area shows it) and padding of 100, 100, 100, 100 (the magenta area show it). The content in blue is the Windows' background, in light grey, which is here covered by the blue area. GUI Library I've started the GUI Library, it's going on very well, but I just can't work as much as I wanted on it the last couple of weeks, so there's delay: that's life. There's a separated thread about the GUI here so don't expect me to say more in this post, got watch the other thread if you care about it. That's all folk, enjoy, as usual: feedback are welcomed, you can do it in this thread of course! I just don't want this thread to be a "bug tracker" one, if you have issue, keep creating a new post and don't forget to mention me as I don't look at the forum everyday to see if someone needs help (but DK does, happy him...) Update #8 from August 31, 2016 I pushed a new commit today that address many things around using Scale on the Canvas object directly. I'm lazy so I copy/paste the PR description: You can now set a Scale (or ScaleX/Y) to a Canvas2D object, it will render as expected, for every caching strategies. At creation time of a ScreenSpaceCanvas you can set a designSize which will be used to compute the Canvas' scale automatically in order for you to specify absolute coordinate in the frame of the designSize (MasterK request) Any Cached Renderable Group can have a new GroupCache Behavior: GROUPCACHEBEHAVIOR_NORESIZEONSCALE. When set the cached bitmap for the Group won't be resized when the scale of the group will change, improving performances over rendering quality Ellipse, Rectangle are now drawn with a prescale computation to ensure the best result when using high/low scaling Prim2DBase has not the actualScale and actualScaleX/Y property that return the accumulated scale of the primitive. At their creation, primitives can specify if they should not inherit from the scale of their parent through the dontInheritParentScale setting. I don't know if many of you will get the GROUPCACHEBEHAVIOR_NORESIZEONSCALE and find a usage, but I thought it was the time or never to do it, so I did. And it works pretty well. I think for mobile gaming it may help to improve the perf by setting/keeping a fixed resolution of what's being rendered into a Cached Renderable Group2D. The designSize mode was made upon a request from @MasterK and it's really a good idea, I can see the use case from a game UI point of view and I hope it will work the way it should be, otherwise I'll do bug fixing! If there's no more urgent thing I'll go back on my working list and the next thing (that was already started but paused) is supporting the Device Pixel Ratio, which is another big thing for mobile gaming I think. I will be a breaking change for people who are right now "compensating the lack of this feature", but well, I'm sorry, there's nothing I can do about it except I wished I knew more about HTML few months ago! I know most of you are still trying to understand how things work with the Canvas2D and don't have time to try and use different Caching Strategies (and then rely on the DONTCACHE mode). Truth is the other modes were pretty bugged, they are less bugged now, but I'm not sure it's working the same. To solve this matter I'm revamping my whole "Unit Test" project, which was a local thing and not as powerful as it should be. There are so many different combination to test a given Use Case against: the different Caching Strategies, the support of the Instanced Array and with different Device Pixel Ratio values. I have to find time to put a good Unit Test framework and publish the whole stuff once it's done, because I think it will help all of you to discover the many things you can do and how. When this will be done then I think I'll start the true "why I did this": a GUI Library based on Canvas2D, with the UI Controls you all are waiting for. The foundation of Canvas2D is getting more and more stable so I think it will be soon the right time to start it and it will be the perfect chance to fix dozen of bugs, I'm sure of it! Update #7 from August 13th, 2016 @ Legoland, Billund, Denmark The latest fix is a long ongoing one noticed by @FlashyGoblin concerning transparency of Sprite2d. To make a long story short: I mixed up the implementation of AlphaTest and AlphaBlend (aka Transparency), the result were...well ugly...and you couldn't do things like the one FlashyGloblin ran against. So here are the new ground rules about this: I try to behave the same way the 3D Engine StandartMaterial does, so people familiar with it will catch things up pretty quickly. One noticeable difference is that useAlphaFromTexture is true by default. There are three render modes: Opaque, Alpha Test and Transparency (Alpha Blend). If you don't use Alpha in a Brush or a Texture and the Opacity is 1, the primitive is rendered in Opaque mode If you use Alpha in a Brush, if you set BaseTexture.hasAlpha to true in a Texture your primitive uses or if the Opacity is not 1, then it will be either Alpha Test if useAlphaFromTexture is false or Transparency if it's true. Beware: until now you didn't have to set hasAlpha for a Sprite2d to deal automatically with transparency, this is no longer the case! With the latest version your Sprite2d will be rendered as Opaque if BaseTexture.hasAlpha is set to false (which is the default value no matter what your bitmap stores). To sum up Text2d is set as a Transparent primitive to ensure a proper blending. Shape2d based primitives will be either opaque or transparent based on Opacity and Alpha in their Brushes. Sprite2d can use the three modes, the default behavior being Opaque if the texture has hasAlpha to false or Transparent if it's set to true and you can use useAlphaFromTexture to switch to Alpha Test. Update #6 from 15 June 2016: babylon.js 2.4 is out! I took the time to finish the overview/tutorial documentation. I also updated the playground and use the BABYLON. prefix everywhere it was needed (which mean I removed the alias like "var Scene = BABYLON.Scene") in order for you the user to copy/paste more easily. The documentation entry point is: http://doc.babylonjs.com/overviews/Canvas2D_Home (with all the playgrounds at the bottom of the page). The architecture/design doc is: http://doc.babylonjs.com/overviews/Canvas2D_Overview_Architecture Please, I've also created a PRO for the Canvas2D feature in Slant, for those who think it's a great addition to babylon.js, please follow this link and upvote, this work is on my spare time so fame is my only reward! thanks! http://www.slant.co/topics/3777/viewpoints/4/~open-source-javascript-3d-engines~babylon-js#15 Update #5 from 13 June 2016: new features added and also a lot of little bug fixes This version is supposed to be the "first official release", there were breaking changes with the previous ones, most notably: You don't use the public static CreateXXX method to create a primitive, you can now use the constructor, the parent is an optional parameter in the settings object (see sample below). At construction you can use a settings object that contains many many properties that you can set as you wish, some are somewhat overlapping (e.g. there's size, width and height, you set either the first or the two latest). This was designed to bring you some flexibility. You won't certainly notice, but the location of a primitive will always be relative to its bottom/left corner, regardless of the origin you set. This change was necessary to bring something coherent and understandable when alignment/layout comes into play. You have to use the actualPosition and actualSize properties to get the "real" values. position/size properties are the value before layout/positioning takes place. New features: This new creation mode allows you to cascade the creation of objects (see below). You'll see that Brushes can now be initialized with a string to make the code more simple. The same is true for margin/padding/alignment. You will find example in some playgrounds, doc will come asap. Lines2D now fully support intersection/picking, as well as roundedRectangle. The size of a primitive is now optional, if omitted it will be sized to its content bounding box. (the same behavior as Group2D) Margin, Padding, Alignment is introduced, you can play here. Margin/Padding support units in pixels or percentage, the value can be inherited from its parent or simply be automatic (0) A LayoutEngine feature now allows to position/size the primitive, by default it's the CanvasLayoutEngine that is assigned to all primitives, unchanging the behavior you already know. But I've made in few minutes a StackPanel Layout that you can test here (don't forget to CTRL-F5 your web browser to fetch the latest .js file) By the way, there's a new playground for Transparency testing. Update #4 from 03 June 2016: new features added and also a lot of little bug fixes intersection works better on Lines2D, I now support every Cap types, it's also accurate on rounded Rectangle (if you click on the empty zone create by the rounding corner it won't generated a hit). interaction mode can now be enable in WorldSpace Canvas, you can take a look at this PG for an example: http://babylonjs-playground.com/#1BKDEO#9 I've also added a alignToPixel property in Sprite2d to make sure the rendering of the sprite will be aligned to the render target device pixel, is ensure the best rendering quality, but in rare case of slow animation you would probably want to turn it off to ensure smooth animation. by default it's on. I won't detail it too much here because it need proper doc to be fully understood, but now you can give your own WorldSpaceNode to render a WorldSpace Canvas on something else that a simple Plane mesh. This mode is easy if you don't use Interaction, but if you do, you have to give a method that compute the world space intersection with your mesh and then compute the local position in the Canvas of the resulted intersection. This is not the simplest method to code but you have an example with the current implem for Plane World intersection to Canvas. Update #3 from 25 May 2016: new features added Breaking changes in the API: concerning the way to create Canvas and Primitives, now it's using the same signature than other object in babylons.js, with an options{} json object for optional parameters. There are default value each time it's possible. Including many bug fixes and little features improvements. We have two new primitives: Ellipse2D and Lines2D. I worked hard to dev a nice Lines2D primitive and I hope you will like it! A full Overview Documentation is now online, the main entry page is here: http://doc.babylonjs.com/overviews/Canvas2D_Home, from this page you'll be able to access to every others pages of the overview doc and also all the playgrounds I've made so far. The reference documentation is now online for the 2.4 you will find documentation for about 80% of the Classes/public methods. Update #2 from 19 May 2016: new features added Lots of little bug fixes, I hope everything will be ok with the origin property, nesting primitives, the text render is way much better now than before. Interaction is supported! There's an pointerEventObservable property in Prim2DBase for you to be notified about many things concerning interaction with a pointer (mouse, touch, pen). I've also added the support of the ActionManager, it's the same as Mesh and Sprite. I support all triggers exception Intersection and KeyUp/Down. Animation is supported too! You have the animations property in the base class of a Primitive for you to add animation the exact same way you would do for the scene objects. Update #1 from 16 May 2016: added link in the Documentation section to a new tutorial that explains how to write your own primitive types Original post I am very pleased to announce you a new feature I've been working on for weeks now! Well, to put things simply, Canvas2D is...a 100% WebGL 2D Engine! It may sound strange at first but I really thought it was missing to this lib, all started from the time I realized I couldn't efficiently display text in babylon.js. So I started to work on a new feature to do so and one thing led to another and I realized we could use of a real 2D Engine for many things! It's not related to the HTML Canvas Element at all, Canvas being a generic term (like Rectangle, for instance). I've called it Canvas2D because the main class controlling the feature is called Canvas2D and acts as its name suggest: you can draw 2D content inside. For performance reason the rendering is 100% WebGL your graphic card loves to do these kinds of things if you spend the right amount of time to create a good rendering engine. Developing such 2D Engine wasn't an easy task because I wanted to lay strong foundations to allow it grows decently through time. Future will tell if I did well or not! At last, for a better understanding this features serves the same purpose than Pixi.js, but the intent were slightly different: Pixi.js relies on two rendering engines (HTML Canvas or WebGL Canvas), but the Canvas2D relies only on WebGL, because it's made to be used along with a 3D Scene, which requires WebGL anyway. Primary focuses while designing the feature: fast, flexible and hopefully easy to contribute. Concerning the "fast" if your device support the WebGL Instanced Array extension, you should be really pleased with the result, the engine was designed to work with this extension (even though if it also works without). I think I overall did well although if there's still room for improvement. Basically, how does it work? You can create many Canvas2D instance on a given Scene, you have two kinds of Canvas: ScreenSpace: the canvas is displayed above the 3D Scene, in 2D space, like you would expect See this example. But there's another interesting mode: WorldSpace:the canvas is displayed in a 2D Rectangle as a part of the 3D Scene, you setup its position, rotation and scale, like a Mesh (well, it's in fact a Mesh of a Plane). See this example. When you want both Performance and Flexibility Things get a little technical! When you create a Canvas you have to choose a Caching Strategy. Why? Because depending on what you will do with it you may use different rendering strategies. CACHESTRATEGY_DONTCACHE: easy, nothing will be cached, all Group2D are called "logical" and the whole content is redrawn every render. If you have few things or if it always change, you may use this mode. It's also the most stable right now. CACHESTRATEGY_TOPLEVELGROUPS: my favorite! Only Group2D that are direct childs of the Canvas will be cached and considered as RenderableGroup, their children Group will be logical only. If you have some On Screen GUI to display at the different corners of your Viewport, this mode may be the best for you. CACHESTRATEGY_CANVAS: Well, the whole Canvas is put into a cache, you better avoid this if you create a Canvas with the size of the Viewport because a texture/depth buffer will be allocated with the size of the viewport. Note: this is actually the only mode that can be used with World Space Canvas. (the other at the exception of DONTCACHE will follow later). CACHESTRATEGY_ALLGROUPS: this is the most technical one, sound brute force at first, but its the opposite: the most complex one. Potentially every groups are Cached, but in reality for each Group you create you can set a CacheBehavior which states if: The Group follows the cache strategy (then be cached), It won't be cached (then rendered every time) or If it's cached in the nearest Cached group parent. This mode has been elaborate to allow the creation of GUI controls being part of a complex canvas with a lots of Depth and diversity. As for today, this is the least tested one, be indulgent. A canvas is made of Primitive: this is the base type, has many property like position, rotation (along the Z axis), scale (uniform), visibility, an origin, zBias (if you're not happy with the default behavior), and a list of children primitives. Group2D: to create a new reference of frame, but also if you wish to cache its content, to avoid redraw at every render. If you have primitives that are most of the time static (or changing sporadically, in response of an event for instance) it'll be well advised to cache them to speed up the canvas rendering. Renderable Primitive: as its name suggest, it's a base class for primitive that render to the canvas, so far: Text2D: to display text. Sprite2D: to display a sprite (a part of a texture if you will). Shape2D: another based class for a 2D Shape made of an optional Border and or Fill content. The Border and Fill Content are drawn using a specific type of Brush, for now SolidColorBrush2D and GradientBrush2D are supported. TileBrush2D (so based on a bitmap pattern) should make its way in the 2.5. So far only the Rectangle is implemented, but it does support roundRadius, which is nice. I think I can implement Ellipsis and Circle in no time, but well, I wanted to focus on the engine first. nPolygon, WireFrame should come later. Vectored based graphics (SVG support) should be a nice addition too. Documentation The tutorial can be found here. An overview of the feature architecture and capabilities can be found here. That's where you'll understand everything you can do and what you can expect in term of performance. A long tutorial to explain how to write your own primitive type can be found here. Few last things My mantra for this feature: by indulgent with the current state of the Canvas2D, but be fearless on the feedback side! I will try my best to fix things as much as possible, I've made already some testing, but nothing will replace the impartiality of the user! I also have some bugs already logged (like don't try to change the origin of a Text2D, the result will be rather funny...and unpleasant) and will fix them asap. Critical features are missing: Group2D and Text2d horiz/vert alignment, more shapes. As well as interaction support through an event system and a better support for animation. I will work on them right away. I don't make promise of what will be there for the 2.4 RTM but I expect everything except animation improvement, really hoping that interaction will make it (edit: also done). A big thanks to the core contributors of the lib for their help: @Deltakosh @RaananW @Temechon @jerome and @Sebavan! I'm waiting for your feedback!
  2. 20 likes
    We're done my friends!!! Thank to this wonderful community we managed to close and ship v2.5: https://github.com/BabylonJS/Babylon.js/releases/tag/v2.5.0 Here is the announcement tweet: Please RT
  3. 19 likes
    Hello everybody, As you surely noticed it, the old debug layer has been reworked in something bigger... called the "inspector". This tool has the goal to become the 'F12 tool' of our beloved engine, without replacing the official editor. It's dedicated to HELP the developer by providing some debug features. You will find almost every feature from the debug layer, and much more: display shaders code, display textures used on materials, check stats, enable lights... All properties are refreshed almost in real time (actually every 200ms for performances reasons). AND you can update any value (among strings, numbers and booleans) by clicking on it and pressing 'enter'. Sure, there is still work to do and bugs to fix. But in the current state, we decided that it is already more useful than the debug layer was. I'm still working hard on it, don't worry ! You can also help me a lot by reporting every kind of bugs in this thread and even contribute to its development. In the next days, I'll first fix all the annoying display and integration bugs. Then, I'll work on : - Restore clickables labels from the old debug layer (for Dad72 and DK ) - Update the documentation (of course) - How to contribute (add a new tab, add a new tool, change panel color theme...) - Add new features ! (Cameras, particles, textures, audio, animations...) - <insert your suggestion here> I'm having a lot of fun to work on this, and I really hope you will find it as useful as I do ! Cheers
  4. 17 likes
    Hello all, next version will certainly be 3.0 depending on my progress regarding WebGL2.0 support I'll use this thread to track progress. Done so far: WebGL 2.0 context initialization Shaders migration Texture LOD: used by PBR shader Depth Frag: Used by logarithmic depth buffer Vertex Array objects: Used to speed up vertex buffer submission Standard derivatives: Used by bump Multisample Rendertarget: Used to apply antialiasing to render targets (mirrors for instance) I also started a documentation page to better explain every feature: http://doc.babylonjs.com/overviews/webgl2
  5. 17 likes
    I can actually provide some insights on this point since prior to starting my indie game venture I was working as Technical Lead for an American brokerage firm in London (7 years) and prior to this, I worked for 3 years as C++ dev for a bank in Paris. As a dev in the financial sector you can expect to earn a lot more than in any other sector coupled with high bonuses and generous packages. Financial stability is definitely easier to achieve with these kind of careers. There are however some constraints that money cannot offset. Money cannot buy time lost (I started my life in an orphanage in Korea and there was things that I really ought to do regarding this personal matter). After 10 years of career abroad I realised that time was just flying by... being able to untie myself from constraints while making money was my main motivation to start with and this is something that I managed to do. When I told the company that I was leaving to create an indie game business they were understandably surprised. They offered me a higher package, I explained my personal circumstances, they suggested part time freelancing or that I take a short sabbatical leave to focus on my personal situation but I wanted to start anew and have no further constraints. On top of having a much better quality of life now, my indie game business allowed me to focus on these and this is my greatest pride so far. Now I am not saying you should leave your day to day job today. I had savings when starting Okijin Games and a career (with 10 years experience) to go back to "in case of failure" so the risk was mitigated. I also got lucky as my first game (Zombies Can't Jump) was a success on Windows Phone and on the licensing market so it started generating revenue immediately and I actually did not have to tap into my savings despite a one game only catalogue. But what I am saying is that it is perfectly viable to make it as an indie dev in the HTML5 game industry provided you pay attention to the right opportunities and partnerships. Some markets in the game industry are saturated by extremely high expectations, this is definitely not the case with HTML5 games where there is so much room for development. If you read the latest news you will even find that 2017 is likely to be full of development. To debunk even further, last month my work consisted on successfully negotiating 7 non-exclusives for my latest game Sailor Pop ($1100 average per license), adding to this a discounted sale across my older game catalogue ($1300) and passive revenue from rev. share and stores ($2350). I also went to sign a deal for distribution on several Asian Markets. Most of my revenue comes from these type of deals as I do almost no client / freelancing work (in 3 years I took only 2 contracts for clients and refused many more). Client work may feel safer but you are not building your assets, no scaling prospect nor repeat sales which is one of the most important component of a business along with its structure - I believe that if you ever want to grow your income and value over time then this is a dead end. I also don't necessarily make games on a treadmill, I took one month off development work to offset the burnout from my latest game and I am now 1 month into my next project (my first multiplayer HTML5 game) although I ought to finish all my projects within 3 months max. There are obviously other viable ways to make it as an indie (like discussed above), we can also look at the exceptionally successful stories, but in the shades there are many ways to make it decently while having fun with less constraints (that's what "independent" stands for after all). To conclude I also agree that in all this, there is also the prospect of one day making it big with one hit! But in between it does not mean that making a living is impossible.
  6. 16 likes
    Hello team! I'm glad to announce the availability of Version Builder: http://www.babylonjs.com/versionBuilder/ Now that we have a lot of satellite services, you can use this page to build a custom merged version of babylon.js!
  7. 14 likes
    Hello my beloved community! It has been a really cool year for our little babylon.js! We (as a community) did so many improvements to the engine, the doc, the website that I can't count them I wanted to wish a WONDERFUL CHRISTMAS to you and your families. I won't be too much available until early January as this is the first Christmas for my daughter (the first where she can understand what is happening). But I'm not worried as I know that we have a team of extraordinary people dedicating time to help each others. Please take some time to spend time with your friends and family. I'll try to swing by sometimes but not like right now (my current pace is once or twice a day :)).+ PS: If you really need my help, just wait for early January and ping me on your topic!
  8. 14 likes
    I had hoped to create a brand new Babylon Christmas Card - but real life gets in the way of virtual Reality So I decided to bring back my first Christmas effort with a few changes - I know @dbawel likes it. Basically some added geometry - a cottage, a sign and chimneys. The chimneys gave me the opportunity to experiment with particles - in addition to the particle effect I stole from @Wingnut; a long time ago. I had to create 5 textures, and I also tweaked the terrain. Anyway here it is: A Babylon Christmas Card You can also change the volume of the music Up or Down with the "u" and "d" keys, and if you, for what ever reason, would rather have no music, it can be toggled On/Off by hitting the "o" key. The camera speed can be made slower or faster with the "s" or "f" keys. Have fun. Ohh and the sign - do whatever you can do Nadolig Llawen, Merry Christmas, Joyeux Noel, Feliz Navidad, Frohe Weihnachten, to one and all. Next year, hopefully a new Village cheers, gryff
  9. 14 likes
    Hi, One of our intern in Microsoft France and now core member of the team, @Luaacro, has been working with us building an online editor for Babylon.js: http://editor.babylonjs.com. In order to showcase what you could do with it, he decided to build a complete impressive scene: http://www.babylonjs.com/demos/ruins Yes, it has been entirely built with our editor! It uses a lot of high end effects we have in the engine like a standard pipeline, dynamic shadow generators and particles. He has written a small article about it: https://medium.com/babylon-js/babylon-js-editor-demo-is-now-live-a8fc217a6324#.wp85aq2kx As the scene could be a bit hard to render on every machine (you need a GTX970+ to render it without issue), I’ve added some code to monitor performance based on the last 60 frames rendered. If the fps is too low, I’m: - First lowering the size of the render canvas to 66% and removing the standard pipeline (post processes cost a lot of perf) - Lowering the size of the render canvas to 50% if it’s not enough If fps goes up again, I’m doing the opposite but will never re-enable the standard pipeline. It means that if your machine is able to render the complete demo in full resolution from the first frame to the last one, it has a great GPU and/or a great browser. Enjoy! David
  10. 13 likes
    Take a look at where I'm going with this and let me what you think. It is basically a heavily modified Babylon Unity Exporter Demo Video Link U3D - BabylonJS Game Editor Toolkit Quick Intro Demo API Update Warning: I tried to make it shorter, i took a deep breath and spoke as fast I could but it still took about 1 hour and 20 minutes. But the technical folks who are up to it and want to see how to use and how i put together a Manage Scene Component API with a light weight 'Unity-Style' life cycle with native babylon scene hooks for 'start, update and destroy' stages... Then this is for you U3D - BabylonJS Scene Component API Intro Note: I found the problem at the end of the video with the getSceneMarkup function. I had to move the controller.ready() to AFTER the scene.manager has been set. But you should still where i was going with that
  11. 12 likes
    Most people here know that I have an 82 DSLR cammera scanning rig. I use this specifically for scanning in people at the shortest time possible (which is currently 1/300th of a second). However, such a complex rig is not required for scanning objects. You don't even need a DSLR camera or a handheld scanner. In this demo I used a simple iPhone 6+ and walked around a statue. We took 89 photos from different angles. My web designer had to stand on my shoulders for the top row of photos. The bust needed to have smooth shading but the base has sharp edges which I needed to preserve so I wanted flat shading for that. With babylon.js you can't pick and choose which edges to smooth. In order to pull this off I made the base and bust 2 separate meshes and turned off smooth shading on the base. It still doesn't look perfect, but it was much better than everything smoothed or everything flat. This is my first test scanning with an iPhone and I usually scan people so this is a rough demo. www.punkoffice.com/statue
  12. 12 likes
    'Twas the frame beforeRender, and all through the scene, Not a vertex was indexed, the canvas was clean. Observers were hung on event loops with care, In hopes that St. Deltakosh... soon would grow hair. The cameras were nestled on Y-offset peds, The lights well-positioned in greens blues and reds. A box and a sphere and a tube with a cap, A torus, a plane, and a fresh-baked light map. When out of the engine arose such a clatter, It woke-up young Davrous to check on the matter. Away to the Windows... he flew in a flash, To resize the viewport and refresh the cache. The specular shined on a heightMap of snow, The includedMeshes were starting to show. When what to his wondering eyes did appear, A Wingy-made bobsled and 12-pack of beer. The BJS framework so lively and quick, Was rendering elves each with onPointer pick. They all went to work wearing new Christmas formals, Connecting the verts and adjusting the normals. A beautiful pano on isBackground Layer, And cool twinkle lights... it just couldn't be gayer. This holiday playground was now well-awake, So Davrous relaxed with a nice Christmas cake. More rapid than beagles the elves made their fame, They yelled at observers, and called them by name: "OnPointer, onReady, onActivate true." "onAfterUnbind, onBeforeRender, too!" The scene came to life at a fine framerate speed, The particle snows had a great random seed. The post-process pipe added gorgeous effects, The boys at Three JS were all nervous wrecks. Ol' Davrous and DK and all of the puppies, Were dancing and singing like freshly-fed Guppies. And Davrous, he smiled and he started to sing... “Merry Christmas to all, and to all a good ping!” It's party day! Nov 1 - The Wingnut Chronicles reaches 50,000 views, Dec 9 - Wingnut reaches 3 yrs on-forum, Dec 13 - The Wingnut Chronicles - 3 years on-forum, Dec 15 - Wingnut - 59 years of continuous air-usage (piss-poor resources management, eh?)
  13. 12 likes
    Thanks to the awesome Babylon framework, I'm creating a city building and simulation game; I thought I'd share the progress so I can ask some questions in case I get stuck. Here's a sample town (read-only at the moment because the UI is far from complete): http://misc.blicky.net/c2/?id=1 (desktop only) Some screenshots.. Current issues: Shadows are way too 1990's, even though the targetTexture is 4096 in size. It would be nice if the shadowGenerator's matrix would adopt to only include faces that are in the camera frustum. That way shadows would look good from afar and close-up. Solved Road intersections are a pita. The current solution, using CSGs on the road segments (extruded shapes) and some math to create a plane is barely acceptable and rather slow/error-prone. Performance. While 'idle' FPS is not bad, when adding more structures, the browser will lag because it is using MergeMeshes() to merge the new structures to the existing meshes. I'm currently transitioning to SPS meshes, because they build a lot faster, however are also more restrictive. So my question is: why is MergeMeshes() slower than SPS.buildMesh() and can it be made to match the latters' speed?
  14. 12 likes
    Hi guys, This weekend I joined ludum dare again and I managed to build a game using babylonJS. The theme that was chosen was "one room". This is the game I created: http://jppresents.net/static/ld37/ You play with the mouse, holding down the mouse button fires the laser. Not much more to say.. obviously you don't want them to reach the bed. Pressing "s" toggles sound on and off. And here is a short timelapse of the creation within about 13 hours. (This includes creating everything from code to assets, except for the custom loading screen.) Thank you guys for the cool engine and the awesome playground examples. Special thanks to everyone from http://www.html5gamedevs.com/topic/21992-creating-a-scanning-laser-effect/
  15. 12 likes
    A small kind of Christmas themed flappy bird style game. Click or press space bar repeatedly to fly and gather as many stars as you can in one minute. Don't touch the ground, that resets the multiplier. http://www.yavsadventskalender.de/fly Features I played around with for this: - fixed aspect ratio - shadow generator for bird & stars - wrapping around an area - 2dCanvas for score & time display - custom loading screen - also more tinkering with blender animations
  16. 12 likes
    Blender exporter ver 5.0 has been completed. Below are highlights: New in 5.0 Now distributed as a .ZIP file. This format allows the addon to be multiple files / directories, as well as enables other types of files to be included (even .BLEND files). Meshes can now be directed to ignore that they have a skeleton for export purposes. Certain things will now prohibit the generation of an export file, in order to reduce reports of known problems / un-necessary support: Minumim Blender version checking. Current minimum is 2.76. Meshes with un-applied rotation or scale which also have skeletons. The `This Layer Only` checkbox on the Light data properites tab is now used. When checked, the `includedOnlyMeshesIds` property of the light is now exported with the values of those meshes that are also on the same layer as the light. Maximum Simultaneous Lights property has been added to the mesh data properties tab. This is applied to all materials of the mesh. Fixed in 5.0 Cycles exports now work for Blender 2.77. There was an API syntax change for 2.77. The exporter now detects the version of Blender and makes API calls appropriately. When there are multiple meshes with actions in a .BLEND, it is not possible to determine which meshes participate in which actions. When there is an action which is only done by one Mesh, place the mesh name then a '-' in the name of the action to isolate it. Now that the media is a ZIP file, you need to adjust installation. First there is an easy way to get a file of this type to your machine. Just try to view it. You do not un-zip it your self. Just select it from the 'Load File' button in preferences as before. It does not overwrite the older one. For more on how to delete the old one, see
  17. 12 likes
  18. 12 likes
    Hi guys, I just finished a new tutorial about cloth-simulation using the new physics architecture. Thought you might like to read: https://blog.raananweber.com/2016/04/03/cloth-physics-simulation-for-babylon-js/ If you have any questions or I missed something (or something is not clear), give me a shout! Cheers!
  19. 11 likes
    Hello my friends!! I'm happy to announce that the Playground can now let you pick the version you want to use (latest or 2.5 so far). We did it because of the upcoming breaking changes introduced by 3.0 (I'm removing all functions or features marked as deprecated in previous versions)
  20. 11 likes
    Hi guys, First of all, thanks to everyone who played my game! Congrats to pepa, BlueManCZ and Athelios! Why congrats? Well they killed the Megaslime together! This is so very cool! I love that you guys organized to play all three classes together, level up and then coodinated to kill the boss. They did that on March 7th and I didn't even notice until now. I am very happy about this - I was really hoping some group of players would do exactly that. Some stats: There were 75 characters created, 7 reached the maximum level of 5. 50 of the characters stayed at level 1, so they just had a quick look at the game/class. Thanks to @RaananW for coming up with the challenge and managing it. Thanks to @Nockawa for implementing Canvas2d. Thanks to all contributers to babylonJS. And a very special thank you to @Deltakosh for creating and maintaining babylonJS!
  21. 11 likes
    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.
  22. 11 likes
    Hello everyone! I thought I'd share something I've been working on for the past few weeks. A plugin for Phaser that provides collision handling for sloped tiles and half tiles, similar to Ninja Physics but somewhat more concisely. Check it out on GitHub, give it a whirl, let me know what you think! Github: https://github.com/hexus/phaser-arcade-slopes Demo: http://hexus.github.io/phaser-arcade-slopes/ It's still early days for this project, as I've only just released v0.1.0-alpha today, but I look forward to continuing fleshing it out. Why did I make this? I've been intending to make a 2D platformer with Phaser for ages, and I knew I wanted it to have sloped tiles to allow for a liberating way to traverse the Y axis, but I couldn't find anything that worked the way I want it to. I experimented with Ninja Physics, but it's deprecated and its limitations left me wanting. I tried P2, but it was too much in terms of physics for me, and I didn't want to tame a beast like that. I started searching these forums to see if anyone had managed to get sloped tiles working in Phaser, with some success, but not completely. The solutions wouldn't allow for completely free tile placement, and they just stuck physics bodies to the slopes and left it at that. So, with a somewhat limited understanding of the maths I'd need to learn to achieve what I wanted, I started reading tutorials about the Separating Axis Theorem (SAT), particularly the ones from Metanet and one I found magically through a Google search. After experimenting with SAT.js in Phaser, I decided that I could totally pull off my own plugin to solve this the way I wanted it to be. With lots of learning, but with a clear vision of how I wanted the plugin to work, this is what I've managed! I have lots more features planned, as you can see in the roadmap, but for now I'm just glad I've built something that can be plugged straight into any Arcade Physics project that just works. Screenshots
  23. 11 likes
    Hello, Here is a fun little project I came with this weekend. You can check it here: http://www.pixelcodr.com/games/procedural-city/index.html The code is on Github: https://github.com/Temechon/procedural-city
  24. 11 likes
    I thrilled to announce that www.remix3d.com is using...Babylon.js
  25. 11 likes
    Babylon.js 2.4 is out!!! Thank you all guys! It was once again an epic release https://www.eternalcoding.com/?p=2764
  26. 11 likes
    Wow, how time flies! I posted an article about how Phaser started, and where it is headed here: http://phaser.io/news/2016/04/phaser-is-3-years-old And also GitHub interviewed me today too: https://github.com/blog/2148-meet-richard-davey-creator-of-phaser Here's to another 3 years
  27. 10 likes
    Hello team! as part of 3.0 version, I'm proud to announce the availability of ESM shadows (Exponential Shadow Maps). I updated the great doc done by @Wingnut to take this in account: http://doc.babylonjs.com/tutorials/shadows VSM (variance shadow maps) were removed (to keep backward compatibility the properties are still here but they will trigger a warning in the console). ESM are great because they can be blurred. Here is an example of all kind of shadows we have now: http://www.babylonjs-playground.com/#20FROK#2 ESM are great because they allow you to deal with selfshadowing: http://www.babylonjs-playground.com/#1CXNXC#3 Hope you like it!
  28. 10 likes
    Hi beloved community, The implementation of WebVR 1.1 is in pretty good shape, @RaananW has done an impressive work. We're still in the process of polishing and finding ways to make it simple & powerful, the spirit behind Babylon.js since the beginning. You can read the documentation here: http://doc.babylonjs.com/overviews/webvr_camera and you'll discover that you can map your controllers (HTC Vive Wand or Oculus Rift Touch) to a mesh to the final sample shared at the end: http://www.babylonjs-playground.com/#5MV04 (you need a recent version of Chromium or Firefox with gamepad extension enabled you may find on http://webvr.info) I'm in the process of integrating the 3D models of both controllers. For instance: - HTC Vive Wand model: http://www.babylonjs-playground.com/#NCLFI - Left Touch: http://www.babylonjs-playground.com/#NCLFI#1 - Right Touch: http://www.babylonjs-playground.com/#NCLFI#2 I'd like to animate them by default when you'll press the trigger & the button to enhance immersion and provide you a default behavior that'll match most use cases. We still need to work on that with Raanan. I'm also experimenting turning Sponza in VR mode: http://aka.ms/sponzaVR . You can play with it if you've got a WebVR 1.1 device but beware, I'm still breaking it frequently. It also works on smartphone using Cardboard as we're falling back to VRDeviceOrientation camera in case of non WebVR support. VR for all!!! Regarding WebVR, it currently works in: - Edge Windows 10 Insider fast version that ships WebVR on by default. You can try it using the Mixed Reality Portal simulator: https://mixed.reality.news/news/try-windows-10s-mixed-reality-portal-your-pc-with-insider-build-15048-no-headset-required-0176419/ - Chromium with HTC Vive & Oculus Touch Stay tuned, we're continuing building great stuff you'd like. Cheers, David
  29. 10 likes
    Hello, I wanted to present you quickly in video, my new editor of MMORPG still in work. For the moment it is written in French, but it will also be available in English. HeroonEngine.mp4
  30. 10 likes
    Knightmare: A very simple DOOM-like game built in BabylonJS Hello guys! I've been working on this little project for around 2 weeks now, And I'm excited to release a VERY alpha build! It features 3 types of enemies, and only 1 level. I plan on adding FAR more complex maps (currently it's built with a tilemap editor), as well as more monsters, And a backstory. Try it out, give me your thoughts. Hope you enjoy the VERY basic level! (Note: currently there is no way to end a level, so just kill everything and you won!) Play: Knightmare v0.1 Storyline You play as a great Knight of Vasteran - protector of the realm. After a great journey, you return to your village, to find your wife in great peril. She has been cursed by dark magic, which has made her fall into a deep sleep. All is not lost, however - the courtmage has declared that you, if you dare, may enter her dreams and destroy her demons. Fearing nothing, and willing to sacrifice your life for your woman, you plunge straight into death itself, into your wife's darkest nightmares. Spooooky. Future Plans I do not plan on adding too many weapons in the game... in fact, I may end up having only 2 weapons, or possibly 3. I'm going to focus on having each weapon be very different from the next, and important in strategy. Strategy is very important in this game - not because the game ever blatantly tells you it's important, but because to survive those Goblin attacks, you need to dodge the blows - or have a skeleton or mage shoot a projectile at them, or set a trap, etc etc. It's an automatic process for us humans to be strategic, and most likely half of what players figure out was never designed in the first place. Storyline will not be major in the least. It will only be referenced in the beginning, and the end most likely. Although not originally in the design, I'm thinking I may have to add 3D models instead of sprites - this is due to my inability to draw, and my ability to model. Here are a couple models I threw together:
  31. 10 likes
    Hello! I am making a step-by-step strategy game (like Fallout tactics, JA2) i uploaded demo on the site. You can test it now. i am working alone and it is my first experience with babylon engine. i am going to make online PvP battles (in the future), but now you can play with bots only. I made some levels and the boss in the end. Now you can: -run on the map, bots will run to you; -change the player (by clicking on the bottom icons); -shot the bots, kill bots (bots have simple ai and can kill you); -use 3 types of weapons (sword, gun and melee); -open the inventory, move items in the inventory; -finish your turn and see enemie's turn; -refresh browser window (server saves the state). -your players can hide in "invisible mode" (invisible icon located near the inventory icon) Some models do not have textures, it is ok. GUI is quite simple. AI is stupid now. (game is using php server for bot's AI calculatiuons, so you can't play offline) Thank you.
  32. 10 likes
    Hello people, I start this topic in order to give you my intents, visibility and get early feedback from you. I initially developed Canvas2D to serve as the foundation of a new GUI Library that would be built on the top of it. That's why you actually can find many features in the Canvas2D that are related to GUI (Pointer Event, Alignment, Positioning, etc.). Many of you started to write little wrappers to create GUI components on the top of that. Depending of what you're trying to achieve it can be easy/feasible or pretty hard. I've spent the latest weeks to stabilize Canvas2D and I'm now starting the GUI library (while still fixing C2D bugs being reported, when they're important). This post will explain you what I've designed so far and what I want to do: I build the GUI Lib for myself but also for you, the community. So the earliest I have your feedback the better chances I can make it the way you want it to be! So please read, think and give feedback! The GUI library will have the following core features: Data Binding mechanism: in order to display/refresh data in the GUI without having you to write all the wiring manually. You will still be able to do so, but I hope the Data Binding feature will be convenient and easy enough for you to use it. It will also be able to use it to update a model object with data the user would enter via a Form like Window. Commands: GUI is about responding to user input, which triggers events. These events can be encapsulated in a more generic feature which would be the Command one. The simplest example is being the Button control which exposes a single Command: "Click". You as the user, don't care about how is triggered this command, in fact it can be triggered from a Pointer Event Up, but also from a keyboard shortcut. The purpose of Commands is to give you a semantic that you understand and a way to respond to it. Templating/Styling: Each control will have a default look/style, for instance a Button will by default looking like a Bootstrap Button. But in order for the lib to be successful, it's critical to separate logic (i.e. a button is a control design to trigger a single Command called "click") of the rendering. Because you may be fine with the default look of the button or you may not! So I have to give you the tools for you to give a custom look in order for your buttons to blend with you game/app the way you want. State Manager: A button has many states: enabled (default state), disabled (you can't click), hovered (ready to be clicked), pushed (clicked but not released), etc. Each state which is not the default one will give additional changes on the style for the user to be able to identify this state from the others. Transitions between states through animation will also be possible. Content Presenter: when you create a button, most of the time you want its content to be a text, for games you may also want a combination of text and/or picture. But the content of the button should be arbitrary: it could be anything. Remember, the intent of a button is to provide the user a visual info of the command he will trigger by activating the button. Content Presenter will give you the ability to put whatever content you want in controls that are using it. For simple content like Text or number, you won't have anything to do. But for Picture or custom content you will have to rely on what is called a Data Template. Data Template: the Data Template is a way to associate a Visual Rendering (through a Tree of Primitives) corresponding to a given custom data object. For Instance you may want to create a custom type with two fields: Label: string and Picture: string. Then you will associate this custom type to a Primitive tree made of a Group2D containing a Text2D Primitive and a Sprite2D one, you will rely on Data Binding to map the content of the Text2D with the Label field and the Picture of the Sprite2D with the Picture one. Controls ScrollableContent: this will be more a Control component than a real Control. You'll be able to use it when the logical content of a Control will be bigger than the allocated content. In such case ScrollBar will appear for the user to be able to scroll the content and view what he/she wants. Button: you can guess now what it's about SceneContent: by assigning a Scene and an Active Camera this control will display the content of the Scene through the camera ItemsControl: will be a base class that gives the ability to manage a list of items. You will have a specific Data Template that will be used to render one particular item. ListView: will be the first Control inheriting of ItemsControl, design to display a collection of objects. Then others controls like: Label, CheckBox, Slider, ComboBox, TreeView, Accordion, Menu, ContextMenu, TextBox, ProgressBar, ColorPicker, PasswordBox, TabControl will be designed/developed. Layout Control will also be built: Grid Layout, Responsive Grid Layout, Stack Panel are on the top of my mind. Some architecture facts The GUI Controls won't be Primitive based classes. It will be classes that instances make their own logical tree that describe a given UI. But it will be from this tree that the Visual Tree (made of Primitives) will be built/updated. DataBinding will be essential to develop Data Template and Styling, but you won't have to necessary rely on it to use the GUI, you can set the data directly if you want: either way will be fine, you choose the one that fits you best. You will be able to declare a Tree of Controls the same way you can declare today a Tree of Primitive, with a new Statement, then a series of attributes and the children attribute that can be used to declare the direct children. No designer will be built in the short term, short term will be about performances and feature range. Performances will be key, I finally will push the best Caching Strategies to make sure static content is drawn as less as possible. You will be able to use if for Screen Space or World Space. Schedule In four weeks I intend to deliver an alpha version with the bar minimal, for people to try it out Four weeks after I hope to release the first beta with a limited set of stable controls After we will see! By the way, one of the first contribution regarding babylon.js will be the total redesign of the Debug Layer using this lib! It will be a perfect test!
  33. 10 likes
    After ages of discussion, I'm thrilled to announce that the playground is now OPEN SOURCE Feel free to PR https://github.com/BabylonJS/Babylon.js/tree/master/Playground
  34. 10 likes
    This is a new Guide I am writing for BJS which I think (hope) is ready to be announced even though it is nowhere near finished. (Only just got going really). My original idea was to re-organise the pages of the BJS Docs into a way I preferred. Some of the pages in the Guide are a result of that first idea. Then I came across a questions in the forum that I though I could answer (on rotations) but it turned out my knowledge was not quite up to my own opinion of it. So I set out to try to really understand what it was all about. As I gained understanding (well I think I did) I started to put more explanation in the Guide based on that new understanding which I hope will help others. My aim now is to pick out parts of BJS that interest me, develop my knowledge and add explanations to the guide. Shaders are something I played with once so perhaps I will go for that next. My idea is that the Guide should be complementary to the Docs. Like the BJS Docs I generate my pages from MarkDown files which can be found at https://github.com/BabylonJSGuide/Generator Any feedback is welcome I'll just ignore the bits I don't like
  35. 10 likes
    vehicle demo http://babylonhx.com/demos/bulletvehicle/
  36. 9 likes
    Edit 10: New "blog"-post: New post 27.2.2017 Edit 9: New "blog"-post: New post 25.2.2017 Edit 8: New "blog"-post: New post 21.2.2017 Edit 7: Gameplay Video: Video Edit 6: New "blog"-post: New post 8.2.2017 Edit 5: New "blog"-post: New post 1.2.2017 Edit 4: New "blog"-post: New post 21.1.2017 Edit 3: New "blog"-post: New post 14.1.2017 Edit 2: New "blog"-post: New post 6.1.2017 Edit 1: New "blog"-post: New post -- Hi BabylonJS-Community, Last friday I joined the Babylon.js 2.5 challenge. I decided to post my progress here. Maybe this will motivate others to join the challenge and I hope it will keep me motivated to finish the project I came up with. Also there might be some tips or things I find out that might help others. Here is my vision: A cooperative multiplayer action roleplaying game that is real time and is designed for a play session of about 15 minutes. It should offer content to a single player as well as a challenge that is only beatable by three or more players. This way you can just open up the game and try it out, if you like it you can coordinate with friends or people from the html5gamedevs board to beat the multiplayer part. Since I am going to make everything from scratch things will be created as simple as possible. This means: flat shaded low poly blender models. Here is what I have so far: The blue girl is the heroine the players control. The yellow slime is the first enemy, controlled by the server. The slimes idle around, if a player comes too close they begin to follow and attack the player once they are in range. Upon loosing all health the player dies. The green & red highlight at the end is the mouse over effect that is going to be used to indicate targets and if they are friendly or not. Some info on the tech: node.js server (using "ws" for websockets) that controls all gameobjects babylon 2.5 client using the browser webSocket object for communication Communication is done via sending JSON objects over the websocket. Since I struggled a bit putting text on billboards, here is a small playground showing my solution: Nameplate Playground I also ran into a small hickup with the highlight layer, using the it together with cloned meshes: Cloning a mesh does not generate a new unique id. If you add one cloned mesh to the highlight array all clones will be highlighted. The solution I found: Set unique Ids (mesh.id = …) for all cloned meshes. That's it for now. Hopefully I will have more to show next week.
  37. 9 likes
    Hey guys, I think it has been almost a year since the last challenge. The Babylon challenge is back! For the new guys - I used to post a monthly challenge focused on a specific topic every time. The winner would get amazing prizes such as respect from the community, free access to the documentation website, or the secret cheat codes for the sponza demo. And also beer, if you are ever in Berlin! There is a single change to the rules - the challenge will span 2 months and a half instead of one. Other than that, the regular rules apply: Code must be original! Don't copy and paste someone else's code. You can use external resources. The game must be playable. No static animations when pressing a mouse key. As we are celebrating 2.5, Babylon.js 2.5 must be used. Extra points for open-sourcing your code! The 2.5 challenge: Very influenced from the (amazing!!) new demos that were created in the ISART School (http://cdn.babylonjs.com/wwwbabylonjs/Scenes/prosecution/index.html for example, @Temechon can explain everything much better than me), we will create games! Multiplayer games. Simple multiplayer games! The game's theme doesn't matter. It also doesn't matter if it is roles-based or real-time. Also, no one expects you to be master of websockets. You can work alone, or in teams. You can take an existing game and make it multi-player. Do whatever you want! If you need deployment tips, help with development, financial aid, french lessons, dev-env suggestions, please don't hesitate to contact me! (I don't speak french, but I know a few others that do ) You guys have time until the 28th of February! Which is a long time. Prizes: The winner(s) will get a Babylon.js t-shirt! And honor and glory. For the rest of the participants - I will need to see what's possible. Oh, and since this is self-financed, please be considerate to the amount of people in a team I hope to see a lot of activity! I will do my best to actually participate in this challenge (I have participated in all challenges until now), but it will be great if we will have at least 4 submissions! Party on! Examples of previous challenges:
  38. 9 likes
    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!
  39. 9 likes
    New Terrain Splatmap Material (Based Off BABYLON.TerrainMaterial)... Supports up to 4 splatmaps using up to 12 textures for terrain painting. The new splatmapMateral.ts will be added to the the babylon Materials Library soon but check out how i am using it for native terrain support using the U3D BabylonJS Toolkit. [UPDATE] Sorry, but you will NEED the toolkit to use the new BABYLON.SplatmapMaterial... I had to move the splatmatting into my Scene Manager API available on BabylonJS/Extensions. The way i use splatmaps now hook into the native shader pipeline and pick up (or make available) all the standard PBR features plus all the ShaderMaterial features, plus Scene Component Life-Cycle... I then automatically generates all the splatmaps from the actual terrain data... All the code will be available ... Just NOT as a materialLibrary (although i guess i could make a lightweight version for manual usage.) U3D - BabylonJS Toolkit: Terrain Splatmap Material Overview Hey @Deltakosh , @Sebavan , @davrous , @RaananW , @Dad72 , @MrVR ... Hey guys please check this out... I am pretty proud of this... Its my FIRST venture into the low level shader parts (using the terrainMaterial.ts as a guide)... But i think it turned out beautifully
  40. 9 likes
    Metallic workflow is now supported by the BJS PBRMaterial: http://www.babylonjs-playground.com/#12CWQQ#0 You can now precise your metallic texture and what channel to extract the roughness from with those properties on the pbr material: material.metallicTexture = new BABYLON.Texture("https://dl.dropboxusercontent.com/u/55657011/metallicmerge.jpg", scene); material.useRoughnessFromMetallicTextureAlpha = false; material.useRoughnessFromMetallicTextureGreen = true;
  41. 9 likes
    The server ran out of electricity powder, and the administrator forgot to fill it up. The Pico 735 extension was also acting funny, and overall the nginx server started getting really emotional. I made a threat to replace it with apache, and it actually worked. You know those servers, they sometimes need to be dealt with a firm attitude.
  42. 9 likes
    Hello, As it seems there were quite a few discussion around highlighting meshes you can find below the solution integrated in standard in bjs: var hl = new BABYLON.HighlightLayer("hg", scene); hl.pushMesh(box, BABYLON.Color3.Green()); Please be aware, the stencil needs to be able in your canvas: var engine = new BABYLON.Engine(canvas, true, { stencil: true }); You can take a look at the result here: http://www.babylonjs-playground.com/#E3D3Y#2 Best Regards,
  43. 9 likes
    Well this little demo started when I began investigating IK rigging in Blender and then exporting to a .babylon file. But I saw a video on Youtube (in French about BJS -I think) and it evolved from there. The rigged figure was made in MakeHuman and exported to Blender. I then added a a simple Ik rig and removed a number of bones from the MH rig. On export, the final number of bones - 26 The scene, once loaded, is then driven by the sound script. An audio file plays and when it is finished the camera switches and a new audio file plays ... and repeat. The video I mentioned above suggested humour, so, I tried ... A question gets asked - and I have no idea what the answer is. But one person on this forum does Tested on XP (Firefox), Win 7 (Firefox & Chrome) and Win10 (Edge, Firefox, Chrome). The Man from Babylon This is my 1000th post - I hope I do not cause any offence. cheers, gryff
  44. 9 likes
    Jerome already say it but I want to clarify it once again. Babylon.js is an Open Source project developed by enthusiasts ON THEIR BLOODY SPARE TIME. Which means we are doing that instead of playing World Of Warcraft (or having a life :)). I started it during a rainy week end and then I dedicated all my free time to it. I read all posts and with the help of a brilliant community we manage to provide responses to all questions in less than 2 days (worst case scenario. Thanks to Wingnut most of the time :)) Contributors like @Nockawa, @RaananW or @jerome spent ages working on advanced features. FOR FREE. Because they are passionate and because they love sharing and help others (what a weird idea). (Oh and by the way we support FBX: https://github.com/BabylonJS/Babylon.js/tree/master/Exporters/FBX)
  45. 9 likes
    I don't mean to criticize your handling of this but you'll find people might respond more positively if you just admitted fault and removed the games in question rather than use the same pseudo corporate PR response as last time. The games mentioned in the thread last year are still live and for sale on your site so why should anyone believe you this time? For clarity, here they are again: Original game Let Me Grow MarketJS copy Baby Whale Rescue Original game Pilot Heroes MarketJS copy Pilot Training Original Game: Mini Race Rush MarketJS copy Monster Truck Original Game Mini Putt MarketJS copy Tiny World Golf Would it be possible to remove these from your site immediately and not sold in the future? I've had to explain to clients why there are are odd looking copies of my games around and I've lost sales to publishers who already have your clones of my games in their catalogue Another thing - there's a couple of forum users have been very busy trying to push this thread off the front page by bumping old posts. I also noticed that the last time they posted was at exactly the same time as the previous MarketJS thread about copying games... Please could you ask them to give it a rest as it screws up the forum for other users!
  46. 9 likes
    Hi, An interpretation of Picasso's Guernica; my tribute to you Frenchmen! Press "Start Animation".
  47. 9 likes
    Hiya @trecool, welcome to the BabylonJS forum! I'm no expert, but I'll give my honest opinions. 1. Actually, ThreeJS does animations almost as well as BabylonJS. Here is a Professor Stemkoski animation demo. Just use your cursor keys. 2. You are correct, the scene is rendered over and over. BUT... the scene is not built/assembled over and over. Besides rendering a scene constantly, many programmers "wedge-into" the renderloop and use it as an engine to do work. Take a look at our playground demo for lights http://babylonjs-playground.azurewebsites.net/?6. Look at lines 56-67. scene.beforeRender is one way to say "run this code just before EACH rendering happens". Math sine and cosine values are applied to the X and Z axes of lights, causing them to do dynamic orbiting. It's as if we hooked a belt or driveshaft to the fast-running render loop, and use that drivebelt to power scene machinery. The main thing to remember... don't load-down the render loop with slow-running code. beforeRender code should run fast and get done quick, or else your overall scene render speed will suffer. Update is done here, too... but automatically. Mesh have a Boolean flag on them... update-able or not. I THINK... the more mesh that you can set updatable to FALSE, the faster the overall scene will run... but I might be full of crap. 3. It's not quite drag'n'drop with BabylonJS, but it's not terrible, either. For example, a door mesh needs to be positioned into the door frame... and that can be done within BJS, or within the modeling software (if you use a modeler). Sometimes, its pivot point needs a move. That, also, can be done with one line of code in BJS or in the modeler. Animations... a little more difficult, but still not bad. In fact, we have a createAndStartAnimation() that requires only one line of code. Generally, set a start frame, set a stop frame, tell it which property you want to animate (door.rotation.y), and tell it how fast to do it. Not bad at all. There's a few things that BJS has, that 3JS doesn't. One... a great working online "playground" with playground search. Two... much better backward-compatibility. Three... a very active and helpful forum, with a great "team" spirit. Many times, I have seen LARGE NUMBERS of forum helpers... go to work on a user's issue. Just read-around in the forum a bit... you'll see it, too. The people here... pride themselves in the speed of helping, and in being thorough. You don't see grumpy helpers here, even when a helper is answering the same question that has been asked a hundred times. That is one of MY volunteer tasks around this place. I watch-for repeatedly-asked questions and problems, and try to adjust our documentation to eliminate that. Others do that, too. Although I don't know much about the "give a crap"-factor for other webGL frameworks... the BJS forum give-a-crap factor is WAY WAY high. Forum helpers here... sometimes go far beyond the call of duty, and teach-about/help-with issues NOT about BabylonJS, too. And... we're example-crazy, here. We LOVE to see and hear-about what users are doing with BJS. This helps core programmers and documentation writers "contour" the system to accommodate everyone. Speaking of accommodation, the chief author, and other BJS-core programmers around here... REALLY listen to feature requests, and always try to accommodate the request, when viable. Not only that, but they add it FAST. I have made requests for changes... and gotten the change added in under 5 minutes. Really. It's rare that features can be added that quickly, but if they CAN be, it's done. In other words... great people with a high give-a-crap factor. You're never alone... when you drive BJS. You have friends, and some of them are geniuses and idea-folk. But the playground, and its searcher, and its ZIP feature.... those are the real "meat" of BJS. There are probably 25,000 playground demos in the playground database - test scenes and experiments covering every webGL subject known to man, + 3 more. This is a really nice learning environment with good friends in all directions, and a real fast framework. Even if you DO switch frameworks, later... much of what you learned here, will transfer. Yes, this is a SLIGHTLY smaller family than 3JS land... and we like it that way. Also, BJS doesn't necessarily provide a pile of rarely-used helper objects, but BJS makes it easy for you to build your own helper objects... contoured to YOUR project. The helpers are better when you build them yourself. They fit your needs, better. It just takes a little time, a little terminology learning, a little documentation site familiarization, and some great playground demo code... and in no time, you'll be fartin' thru BJS silk. err... I mean... you will feel REAL comfortable here in BJS land. Ask anyone here. They all know... after a very short learning curve... the sun comes out, the ride gets smooth, and the smiles are everywhere. So, just plant your butt into this nice BJS grass, and relax into our world. You'll never regret it.
  48. 9 likes
    Hey guys, I'm proud to announce that the Unity exporter now supports animated bones! https://github.com/BabylonJS/Babylon.js/commit/df0247f54edb4583e70978b811db7fd15ef3160c A big thank to @sebavan
  49. This post cannot be displayed because it is in a forum which requires at least 5 posts to view.
  50. 9 likes
    After struggling for the last couple of months , I was finally able to put together something which works I have created, what I like to call, a "live scene editor". Here you basically move around in a scene, as an avatar and make changes to it. You can check it out here http://ssatguru.appspot.com/BabylonJS-Vishva/intro.html Be warned that it might be very buggy. Still working on instructions on how to use it. Source code at https://github.com/ssatguru/Vishva Written, of course , using Java and JSweet