Search the Community

I keep thinking of new types of objects to add to my little "game", The Green. The latest two are coils that can be stretched and squeezed like springs, and throwable dice. The Green is not meant as the greatest of games. It is more a demonstration of the kinds of 3-dimensional things that can be done in the basic 2D canvas with plain old JavaScript, using no other frameworks or libraries. Do explore it though. It has a wide range of objects that respond in various ways when you interact with them (click or touch). Some even have philosophical implications. My aim is to spark some creative thoughts. The Green is structured in a very object-oriented (OO) way. Most of the objects are 3D shapes and so they inherit from an abstract type called Shape. There is no point in directly instantiating Shape because it has empty arrays of vertices and faces, for subtypes to populate. It does define many of the methods that all shapes need including view(), to display the shape in perspective, and transformations such as 3D rotation and translation. The benefit is that subtypes usually do not need to reinvent such methods (override them). To make dice the type is (singular) Die which is a subtype of Cuboid which is itself a subtype of Shape. Coil is a subtype of Wire which is also a Shape but one which only has vertices, no faces, so Wire does have to override Shape.view() because it is unusual in this respect. All of this is done using the original prototype syntax of JavaScript, which is why I talk about types rather than classes. In fact the program does not use any recent syntax because I want it to run on as many platforms as possible and I don't want to complicate my process by having to use Babel or something similar. I recently moved the program from my own web site to ITCH, so it can be found at https://grelf.itch.io/the-green The zip file I uploaded to ITCH contained readable source code, not minified or obfuscated, because I am happy for others to use, improve and extend it. Unfortunately (but understandably) ITCH does not make the source easily visible. So I am making the complete zip available at https://grelf.net/gr3d/TheGreen.zip (365 kilobytes, including the tree photos but make your own please). I am aware of things that need improving, particularly some interdependencies that should be removed. I am still working on it. Once the world has been constructed the game has the usual kind of loop using requestAnimationFrame(). For beginners I have previously written about the programming of the loop here: https://www.grelf.net/jscourse/gameloop.html Why am I doing this? Well, as a retired software developer I do it as a hobby to keep my mind active. It is quite satisfying to get these things working as neatly as possible (more satisfying than doing Killer Sudoku all the time). If I can encourage others to be creative in the wonderful medium of HTML5/JavaScript then that is good too.

I am trying to develop a simple Canvas game, but I'm currently stuck at making the enemies display itself. Heres the code I'm using : <script type="text/javascript"> // SETUP INICIAL var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var innerWidth = 360, innerHeight = 620; canvas.width = innerWidth; canvas.height = innerHeight; // VARIAVEIS var score = 0, lastTime = 0; // TECLAS DE MOVIMENTAÇÃO window.onkeydown = pressionaTecla; function pressionaTecla(tecla){ if(tecla.keyCode == 38) { player.y = player.y - 10; } if(tecla.keyCode == 40) { player.y = player.y + 10; } if(tecla.keyCode == 39) { player.x = player.x + 10; } if(tecla.keyCode == 37) { player.x = player.x - 10; } } // PERSONALIZAÇÃO DO PLAYER var player = { }, player_width = 100, player_height = 105, player_img = new Image(); player_img.src = 'images/spaceship.png'; // OBJETO DO PLAYER player = { width : player_width, height: player_height, x : innerWidth/2 - player_width/2, // centralizar y: innerHeight - (player_height+10), //deixar em baixo power : 10, draw: function(){ // FUNÇÃO QUE BLOQUEIA O OBJETO PLAYER SAIR DO CANVAS if(this.x <= 0 ){ this.x = 0; }else if (this.x >= (innerWidth - this.width)) { this.x = (innerWidth - this.width); } if(this.y <= 0 ){ this.y = 0; }else if (this.y >= (innerHeight - this.height)) { this.y = (innerHeight - this.height); } ctx.drawImage(player_img, this.x, this.y, this.width, this.height); } }; // FUNDO DE GALAXIA *codigo fonte do fundo retirado do site codepen.io https://codepen.io/LeonGr/pen/fdCsI var stars = [], // Array that contains the stars FPS = 60, // Frames per second x = canvas.width; // Number of stars for (var i = 0; i < x; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random(), vx: Math.floor(Math.random() * 10) - 5, vy: Math.floor(Math.random() * 10) - 5 }); } function updatefundo() { for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; s.x += s.vx / FPS; s.y += s.vy / FPS; if (s.x < 0 || s.x > canvas.width) s.x = -s.x; if (s.y < 0 || s.y > canvas.height) s.y = -s.y; } } function drawfundo() { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = "lighter"; for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI); ctx.fill(); } } // PERSONALIZAÇÃO DO INIMIGO var enemyArray = [], enemyIndex = 0, enemy_width = 35, enemy_height = 43, enemy_timer = 1000, enemy_img = new Image (); enemy_img.src = 'images/spaceship.png'; // OBJETO DO INIMIGO function enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation){ this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.img = enemy_img; this.width = enemy_width; this.height = enemy_height; this.rotation = rotation; enemyIndex++; enemyArray[enemyIndex] = this; this.id = enemyIndex; ctx.drawImage(this.img, this.x, this.y, this.width, this.height); this.update = function(){ this.y+= this.dy; this.x+= this.dx; this.draw(); } this.delete = function(){ delete enemyArray[this.id]; } this.draw = function(){ ctx.drawImage(this.img, this.x, this.y, this.width, this.height); } } // FUNÇÃO DE CRIAR INIMIGOS function create_enemy(){ var x = Math.random() * (innerWidth - enemy_width); var y = -enemy_height; var dx = 3; var dy = 3; var rotation = Math.random(); new enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation); } // LOOPING DA ANIMAÇAO (MAINFRAME DO GAME) function gameLoop(currentTime){ requestAnimationFrame(gameLoop); ctx.clearRect (0,0, canvas.width, canvas.height); drawfundo(); updatefundo(); // SCORE ctx.font = '17px arial'; ctx.fillStyle = '#fff'; ctx.fillText('PONTOS: '+score , 15, 30); // ENERGIA ctx.font = '17px arial'; ctx.fillStyle = '#fff'; ctx.fillText('ENERGIA '+player.power , innerWidth-110, 30); // JOGADOR player.draw(); if(currentTime >= lastTime + enemy_timer){ lastTime = currentTime; create_enemy(); } create_enemy(); } gameLoop(); </script> Everything is working fine except the enemies not showing. Already checked the images folder and it's all set up like I've puted in the code. Dev tools console does not show any errors. Enemie lines are " // PERSONALIZAÇÃO DO INIMIGO " and "// OBJETO DO INIMIGO" Please help!

I am trying to attach a click event to every individual circle in a 2d canvas matrix . I use a for-loop for creating the matrix , however i cannot assign click events to every single circle. The circles are acting as led lights and the click event either turns them off or on.If a pattern is generated , the canvas is saved as an image. See the image attached. I could really use some help with this. I can't seem to figure it out.

Hi , question about GC or how i can clean canvas2d object after use method generateCanvasTexture game use PIXI.WebGLRenderer - only PixiJs version 4.8.2 (this my pain, but i can`t up pixijs to v5) on class this.data:PIXI.Graphics this.view:PIXI.Sprite .... on sometimes i need redraw data on view this.texture =this.data.generateCanvasTexture(PIXI.SCALE_MODES.LINEAR,1); this.view.texture = this.texture; on next time try to clean this.texture, remove from PIXI.Texture.removeFromCache this.texture .destroy(true); delete this.texture ; but debug console in Safari (tab Canvas) show all Canvas wich created on method generateCanvasTexture, but they never destroyed on memory How i can do clean up memory on it?

Hello, I am struggling with a memory leak which migth be related to Canvas2D fillText function. There is already a bug report available: https://bugs.chromium.org/p/chromium/issues/detail?id=703297 However I wonder if anyone of you also experienced this bug and might have a workaround for this? Thanks in advance. Best, benny!

I can write texts on "billboard style" mashes in any combination of text and background colors. However, I cannot figure out how to do it when wrapping text. For text wrapping I've used a code I've seen on this forum and on Stackoverflow and it works fine. However, it uses direct functions of WebGL and that apparently collides with the usage of BABYLON.JS objects (not surprising as it goes underneath the Babylon layer). So, I can draw text In white, but not in black. I'm sure it can be done, but I'm fighting it the whole morning without succes, Please have a look into this playground example (I've isolated it from the rest of my application). To see the meshes, double click on the canvas. https://www.babylonjs-playground.com/index.html#MBENKS Thanks very much in advance.

Hi guys, I'm trying to make 2D-shapes / 2D-sprites in my Canvas2D (ScreenSpaceCanvas) follow some sprites which are placed in my 3d world. For this, I'm using the BABYLON.Vector3.Project function as followed: However, this is the result: I've checked each of the arguments and they all contain valid values at the time of being called. I've also stumbled across this topic, which uses another 4th argument in the call, but I've had no luck trying it with that one either. Any ideas? Thanks in advance!

Is there any ways to draw outline for them? I know I can have multiple Text2D beneath it and act like "border". I'm just wondering if there's any better way of doing that.

Hello, Trying out Canvas2D, getting: 'BABYLON.Text2D is not a constructor' Using alpha version ('babylon/babylon.3.0.0-alpha.max.js'). Did anything change, or is extension needed? Thanks!

I downloaded the new version from https://www.babylonjs.com/versionbuilder/, and I checked all of the components. However, when I tried to then use the BABYLON.WorldSpaceCanvas2D constructor, I received an error. In fact, the whole Canvas2D system has disappeared. Apparently, the Canvas2D feature was moved to the extensions. Please: 1) Provide a download link for the Canvas2D extension 2) Return the documentation for the extension to the docs. Thank you!

Hi, I have a Text2D in a Rectangle2D, I change the text every 200ms but it does not refresh on the screen. Although when looking at the text property it changes properly. The text refreshes only if I set its levelVisible property on and off at each tic. I do not have this problem in the playground so I am not sure what is going on. state.tic = function () { const text = newText() // this works state.tooltipPause.text.text = text // setting the parent rectangle2d levelVisible // is the only way i have found to refresh the view state.tooltipPause.box.levelVisible = true // delay is simply a promise that will resolve in 200ms delay(200).then(() => { state.tooltipPause.box.levelVisible = false state.tic() }) } Just sharing the little hack I found, in case someone else has the same problem

Hi guys, I'm creating an UI for my babylon game via the Canvas2D, precisely the ScreenSpaceCanvas2D. Now I want to know if it's possible to update the text dynamically without recreating/overwriting the text2d child every time the score variable (which is used for displaying) is updated. Playground link for simplified case: http://www.babylonjs-playground.com/#2AVSFH#271 Thanks in advance!

I want to draw a texture on the line that user draws on the screen. Like a mouse trail, so I follow this tutorial. . The only thing that doesn't answer me is sending the custom uv to the shaders. I vaguely remember that in C++, I can create struct or something and the shader will know how to handle it. It seems that is not the case here. I can't even figure out how does "index" property in vertex shader gets there. Even so, I can't use the "index" approach as the line won't be full rectangle as in the example. Right now, I copied & pasted the entire lines2d classes and try to customize to be able to draw texture on there, but I don't know how to send the custom uv that I've calculated to the shader. Anyone can explain that to me? Or am I looking at this a wrong way?

I am struggling with a similar problem like in this thread, but the solution provided here seems not so ideal... I have many modules in my game, and if I use Babylon.js in any of those, I import it using: import Babylon from 'babylonjs' So there isn't any good way to include Canvas2D similarly? I understand it is somehow baked to Babylon.js, but how do I use it? I'm downloading all the dependencies from the npm, including Babylon.js. Then I bundle everything using Webpack. Ideally, I would like to use Canvas2D (for example) like this: import Babylon from 'babylonjs' import Canvas2D from 'babylonjs' Please help, I've been scratching my head for hours now...

This post might interest @royibernthal @MasterK @TMTH and @adam I think. Most of you have reported issues with using scale/origin and the positioning engine, I've looked to these issues and then to my code and I finally ended up wondering if what I'm currently doing is the right way and also if there's a right way to do things. Ok, let's be a bit clearer, for now, here's how things work: You create a Prim, set its margin, marginAlignment, origin, scale, rotation During the pre rendering phase I compute the position/size of this prim based on the margin and marginAlignment properties Then, I compute the globalTransformation matrix using the position computed by the positioning engine, the rotation, the scale (both considering the origin). The thing is the rotation/scale/origin are processed after the positioning engine. So let's take some example to illustrate the consequences of that If you set a scale of 0.5 and align center the prim the result will be as expected if the prim's origin is 0.5,0.5, because the scale shrink the prim at its center so the align center is still good because there's the same amount of pixel shrunk to the left and right (let's just consider the X axis, the same apply to the Y). If the origin is 0,0, then the Prim shrink related to its bottom/left corner, so all the pixels that are shrunk will be on the right of the prim, hence resulting to a bad align center. If you set the scale to 0.5 and align left, then the result will be good if you set an origin of 0,0 and it will be bad for other values (0.5,0.5, 1,0, etc.), if you think about it a bit, you will understand why and realize it makes sense considering the current implementation of things. Now I could solve this issue by changing my code with the following: applying the scale to the prim before doing the positioning, the positioning engine would center the prim with its actualSize: after the scale was applied. I first thought it would be the right solution: apply scale and rotation (in respect of origin as always) before the positioning engine, but now consider this: You create a prim with origin 0,0, align it at left and then make it spin by increment its rotation each frame. The result is a prim that rotates around its left/bottom corner (imagine the motion, the prim doesn't rotate around its center, but rotation forming a large circle with its right/top corner). How will the align left behave in this situation? I mean I can code it, it's easy, but the result would be weird, don't you think? At least I do, I don't think it as a solution... So what is the solution? That's my question for you guys and I need your input/feedback/thoughts, anything. Would the solution be applying the scale before the positioning and the rotation after, would it make more sense? I already have two scales internally: one you know about and a "post" scale I had to introduce to fix a bug reported by @TMTH where a Sprite with a SpriteSize of 64 and a Size (display size) of 100 was not positioned correctly, because I was changing the scale to 1.5 (roughly) for the sprite to be 100 on screen and it was bad because scale was considering origin and I needed a scale that wasn't, so I've introduced a postScale, computed at the very end. Anyway, I could introduce a third scale, (a second for the user), which would be a preScale and that would be applied before everything, I think it would solve @royibernthal issues. But I don't know if it's clever to expose to the user more than one scale property. So basically, I need to know what you guys want when positioning is used with primitive rotation/scale, because now that's what is missing: a behavior, a model that fits any needs. So please take the time to think about it as much as needed and...talk, give me Use Cases, propose solution if you can, anything! Thanks

Simple question: How do I update a primitive property which is part of a canvas2d instance? (Specifically isVisible, haven't checked other properties yet). http://www.babylonjs-playground.com/#YQV9DH#1 Open up console, try setting child.isVisible to false, note it's always true. I dug around in the codebase, but couldn't figure out: 1. if this is a bug 2. if I'm doing something wrong that is causing the property to be frozen (pretty sure not the case anymore since I was able to reproduce what I was seeing in my project in playground above). 3. if there is a way to clear the cached property, what is the appropriate public method to do so with, and can I run a dirty check on the entire thing or do I need to flush each specific property I want changed? @Nockawa

Hi, So... my problem is a bit specific. I will try to reproduce it in the playgroud but I am not sure I will be able to. So I have a Rectangle2d that holds 4 rectangle2d children, the green background is the parent square and the children square are the 4 grey rectangles. I am using the centering and margin system: I used to dispose of those rectangle children and recreate them at certain points in time, storing the newly created children in the same array replacing the hold ones. The problem is that when I resize the window there is a call to Prim2DBase._updatePositioning that returns (NaN, NaN) as the _actualPosition (in the if (hasMargin) ... which they do). And it cause the parent and all its children to disappear from the screen. That's why i though it was linked to the bug @Wingnut mentionned yesterday. There are several variables that are NaN, one of them is Prim2d._size3... but i do not know why, nor do I see where it is define (I only see one definition that sets it to zero... I will look tonight into the typescript source to see if it is there...). This does not happen if I do not dispose of the children prim2d... I had problems with Prim2d.dispose() before, and looking at it, I do not see where the prim2d is actually set to null. Maybe that is the problem? Some kind of persistant reference that interferes with the computation of the rectangles. I will look more into it, but if it is something people have encountered I am interested to know their thoughts. @Nockawa <3 For now I am not disposing of the prims anymore

Hi, Just to report that on the example given in the documentation: http://www.babylonjs-playground.com/#OWCCR#8 Increasing the number of primitive slows down the fps, but when reducing that number fps stays low even after dispose(). I don't know it if was reported before, and I did not remember this behavior last time I checked this example... @Nockawa

Then it goes bad. Duplicate labels end up everywhere，Here is an image when I rotate the camera ！ var ui = new BABYLON.ScreenSpaceCanvas2D(scene); var radioUi=[] for(var i=0;i<meshes.length;i++){ radioUi[i] = new BABYLON.Group2D({ parent: ui, trackNode: meshes[i], children: [ new BABYLON.Rectangle2D({ id: "mainRect", x: -5, y: -5, width: 10, height: 10, fill: "#abe2ffFF", border: "#0090ffFF", borderThickness: 3, roundRadius: 5, }) ] }); }

Hello everyone, I'm trying to get a label system which could work like https://jig.space/view?jig=v4Ga2VKw I'm using the 3ds max exporter to export the meshes and I wanted to use the pivot point as a base to place the label. Maybe there is a better way to do it. When I create my Group2D (containing a line, rectangle and text) and set the trackNode property to use the mesh, I can see that the pivot point is not used. It looks like it might not event been exported (I attached the file) since the pivotMatrix is null. Maybe I'm missing something ? Infos.babylon

I'm trying to understand how to work with group caching. Here is PG http://babylonjs-playground.com/#1VRAA#1 And I can't figure out the following - why setting canvas cachingStrategy to CACHESTRATEGY_ALLGROUPS leads to rendering of its' direct children only? So, every cached group have to be the direct child of canvas, or I'm missing something?

Hello everyone and thank you all for babylonjs according to this console : there is a bug both library are the same version 2.5 Can it explain blank canvas from visual studio? The NuggetManager only provide 2.3... babylonjs but canvas2D at all Kind regards, But I may be wrong of course

Hello every one, I try to reproduce some feature from http://babylonjs-playground.com/#1KYG17#1 and here I am http://babylonjs-playground.com/#1MVIGI#4 I cannot get my canvas2D to have some kind of billboardmode As you can see, I ended copy pasting most of the first playground properties into the second one with no result so far It seems that trackNodeBillboard expect a boolean according to babylonjs github but I may be wrong parenting the canvas2d to sphereM (biggerbox) does not follow the move, I don't know what I'm doing wrong Thanks to all of you

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!

Here is PG. http://babylonjs-playground.com/#QTNKM#1 When using designSize on canvas alignment properties are unusable. There are two different use cases: 1. I manually position primitive on some point. I expect it's position to be uniformly scaled from design size to real rendering size. That one is working. 2. I do not position primitive, but I set primitive alignment. Let it be marginHAlignment = BABYLON.PrimitiveAlignment.AlignRight. In that case I expect this primitive to be stuck on the right side of the rendered canvas. That case is not working. So, building real UI I have a problem. I can build UI panels using absolute positioning, and it will be OK, but how can I position those panels? Suppose I want one panel to be on left side of the canvas, and one on the right side - not so complex high level layout. Left one will be positioned fine, but with positioning right one I will have a problem. Big one. @Nockawa, is there any work around for this?