adam Posted September 9, 2016 Share Posted September 9, 2016 Is there a way to anti-alias these cached curved lines in Canvas2D? http://babylonjs-playground.com/#15C96V#11 @Nockawa Quote Link to comment Share on other sites More sharing options...
Wingnut Posted September 10, 2016 Share Posted September 10, 2016 I did some adjusting... so I could better-watch the differences between CACHESTRATEGY_NOCACHE and CACHESTRATEGY_CANVAS, and I broke my thing! http://babylonjs-playground.com/#15C96V#12 That's gotta hurt. heh. I boiled-up some Kielbasa yesterday, and I cooked it too long. Same thing happened. Too much fillThickness. Ahh, Wingy, writing worthless comments to serious issues. I serve a valuable purpose aboard this starship, don't I? Quote Link to comment Share on other sites More sharing options...
adam Posted September 10, 2016 Author Share Posted September 10, 2016 http://babylonjs-playground.com/#15C96V#13 jerome and Wingnut 2 Quote Link to comment Share on other sites More sharing options...
Nockawa Posted September 13, 2016 Share Posted September 13, 2016 On 9/9/2016 at 6:52 PM, adam said: Is there a way to anti-alias these cached curved lines in Canvas2D? http://babylonjs-playground.com/#15C96V#11 @Nockawa Sorry, I don't understand why I don't get a email notification when people mentioned me on this forum... So I got it very late (I'm currently very focused on coding the foundations of the GUI library, needs a lot of concentration). To answer this first question, well... I don't know! I admit I also noticed it and I'm not skilled enough to find out if there's a solution to this issue. I'd better be talking to this with the other core members and I guess @Sebavan will know for sure but he's overbooked until at least next week. So I'll keep you posted on this, there's a trello card for me to not forget about it. adam 1 Quote Link to comment Share on other sites More sharing options...
Nockawa Posted September 13, 2016 Share Posted September 13, 2016 On 9/10/2016 at 7:22 PM, adam said: http://babylonjs-playground.com/#15C96V#13 :'( well... having a bug on this routine is not something I enjoy, the code is f***ing hard/messy, debugging won't be easy... Another Trello card, I honestly don't know when I'll find the courage to take a look at it, is it important for you or you were just testing the prim? And please, create separated posts for separated issues, because when I solve one, I tend to forget about the second one and the discussion is also messy. Quote Link to comment Share on other sites More sharing options...
Kesshi Posted September 13, 2016 Share Posted September 13, 2016 @Nockawa are you rendering into a texture to cache the canvas? If this is the case then this is the reason for the missing AntiAliasing. WebGL does not support AntiAliasing for rending into a texture. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted September 13, 2016 Share Posted September 13, 2016 Just now, Kesshi said: @Nockawa are you rendering into a texture to cache the canvas? If this is the case then this is the reason for the missing AntiAliasing. WebGL does not support AntiAliasing for rending into a texture. Yes I am... So I guess we have the answer...I initially thought there might be an issue with the background color/blending also. but what you said explain it all... Then I draw the cached bitmap with a Sprite2d and I assume anti-aliasing doesn't play a part anymore, this just bitmap content rendered, so it can't be anti-aliased... I think we have to deal with it as a known limitation. I wish it wouldn't be the case, but well, relying on DONT_CACHE may be ok for simple Canvas, but when you're going to make a lot of composition (for a GUI for instance), I think you have no choice but cache some of the content if you want perf to be reasonable, specially when you consider the given content is static pretty much all the time... Quote Link to comment Share on other sites More sharing options...
adam Posted September 13, 2016 Author Share Posted September 13, 2016 Would this work? http://iquilezles.org/www/articles/filtering/filtering.htm Quote Link to comment Share on other sites More sharing options...
Nockawa Posted September 13, 2016 Share Posted September 13, 2016 24 minutes ago, adam said: Would this work? http://iquilezles.org/www/articles/filtering/filtering.htm I don't know, I've quickly took a look at the article and basically the main issue is the guy doesn't have mipmaps for the generated procedural textures. I don't create mipmap because there's no point the texel/pixel ratio is always 1 for Cached Bitmap (well, excepting in a specific case that you can enable, but I won't talk about it, it's off topic). So basically the technic the guy propose is to simulate filtering, but I don't know if it will solved the aliasing issues on the edges of the shape. There's one good way to know: to test the technic, but I honestly don't have the time for that right now. I've updated the Trello Card with the link to the article to keep a track, in the meantime we have to live with it. I intent to rely on caching a lot with the GUI library, so if I can improve rendering quality to make it on par with the don't cache mode, I will do it, but first I want an alpha of the GUI lib, because if I deal with small issues like this I will never have time to write the GUI lib... I hope you all understand. Quote Link to comment Share on other sites More sharing options...
adam Posted September 13, 2016 Author Share Posted September 13, 2016 No rush. I'm going to do some research too and will let you know if I find a fix. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted September 13, 2016 Share Posted September 13, 2016 @Nockawa, would you consider having a conversation about this "GUI Lib", and doing a rethink about its priority? Have you ever worked-with XUL (and/or maybe XAML)? Know about "springs" and "spacers" and flowing GUI widgets inside a container? They sometimes need to scale... stretch and compress, in order to be properly flowed into a container. You don't need to start making widgets... when the flow system is not yet done or experimented-with. Once you get the base-class "widget" complete... which is probably a heavily modified custom prim2d, then... "the world" can make your GUI widgets FOR you.... or at least help. But the springs'n'spacers flow system is still THE MOST IMPORTANT part. In no time, you'll learn to HATE the word "wrap". XUL (Firefox gui) uses/used XBL (bindings and behaviors) behind each widget... user-editable XBL (xtensible binding language), in order to establish/change widget behaviors. You might consider that, too. How to add behaviors to a prim2d-based gui widget. You can build the flow engine right away, and just use the prims you current have... as test widgets for the new flow engine. Ever thought of just plain borrowing Mozilla's XulToolKit, and letting folks "include" that if they wish? It might be PD. And I'm sure XAML has a similar system... but I'm not sure it's PD. Your task, then, would be to build a "flow container" that exactly mimics a XUL container, and then just use the XUL widget lib... instead of writing your own. Also, Java Swing GUI is a possibility, too. It seems to me... that making a GUI lib... is an overwhelming task... esp when other gui libs have already done it. Wouldn't it be nice... if your lib was already done... because you decided to use the XUL Toolkit instead? Yes, at the top layer of the XUL toolkit... is XML markup, and you don't use that (yet) as a way to flow-out your widgets in a flow container. But UNDER that XML... is graphics for lots of widgets. In fact... ALL the widgets needed to create the GUI for the Mozilla browser. We're talking a COMPLETE lib of widgets, and there's a good chance it's PD (public domain). Mind you, it has been a good 15 years since I wrote any XUL GUI, and things could have changed drastically since then. I have not followed its progress or demise. But you and others could get started on your springs'n'spacers flow container, using temporary custom prim2d's as your testing widgets... learning to scale them. You'll also need a toolbar-class, yet another kind of flow container. Scaling the widgets is important for resizing windows that use your GUI. When to wrap, when not to, etc. Flow is a real pain in the butt. If you think you have a lot of questions about Canvas2D system NOW, wait til you hit widget flow. But if you (un-) simply integrate the XULkit into Canvas2D, you might have an instant win. Just ideas, and just speculating, here. I would be glad to edit this post and move it to a thread of its own... if you wish to discuss these issues more. And, thanks for listening/consideration. You know me, I'm full of crap MOST of the time... just a starry-eyed dreamer. But every so often, I get lucky with a grain of wisdom mixed within my crap. (but don't count on it) heh. Quote Link to comment Share on other sites More sharing options...
adam Posted September 13, 2016 Author Share Posted September 13, 2016 XUL looks a little heavy. https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/XPCOM_Examples I prefer JSON. Quote Link to comment Share on other sites More sharing options...
adam Posted September 13, 2016 Author Share Posted September 13, 2016 It would be pretty cool though if you could build the gui using a tool like Visual Studio, though. https://msdn.microsoft.com/en-us/library/hh921077.aspx https://msdn.microsoft.com/en-us/library/jj171012.aspx Quote Link to comment Share on other sites More sharing options...
Nockawa Posted September 13, 2016 Share Posted September 13, 2016 I've been written GUI Libraries (of all kinds) since almost 20 years now, at least 5 times already, both for desktop or 3D engines. So I can say I already know a few things about what to do, otherwise I wouldn't dare to try. I'm currently working on the data binding architecture (in fact I just got the most used case working few minutes ago) to enable pattern like MVVM, MVC, MVP, etc. I plan to provide abstract classes for people to ease their use of the GUI with a MVVM kinda pattern. The GUI Controls won't be based on Prim2DBase, but on the new SmartPropertyBase class ( which is an extraction of SmartPropertyPrim features but more generic, which supports Data Binding on Smart Properties). You will have Templating to change the way a given control is rendered, a State Manager to change the look of your control depending of its state (active, disabled, pushed, etc.), Data Template to provide a Prim2D hierarchy for a given data (so when the binding retrieve this data, the control create an instance of the Prim2D Tree corresponding to display the content), Scrollable Content, Items Controls (for ListView, TreeView, etc), a Command like system and also the same feature as WPF with a ContentPresenter (e.g. a Button is designed to provide the Click command, but its content it whatever you want: text, custom data template, sprite, etc.). It won't be done in one week, but it will be done. I know the task is huge, I've been there, but I need it for my project. So now you know, it will be influenced from WPF because of all the GUI lib I've ever used (and it's a lot), WPF is the best I've ever tried. I will make sure (well, I'll try) that this lib will be easier than WPF with a nicer learning curve, and I don't have time to rewrite WPF for WebGL on my own anyway, so it'll be simpler. Last thing: if you want to further discuss about it, I don't mind, but please create a brand new topic mentioning me. As I said above, mixing topics in one post is not ideal for anyone. Wingnut, adam and jerome 3 Quote Link to comment Share on other sites More sharing options...
Nockawa Posted September 13, 2016 Share Posted September 13, 2016 2 minutes ago, adam said: It would be pretty cool though if you could build the gui using a tool like Visual Studio, though. https://msdn.microsoft.com/en-us/library/hh921077.aspx https://msdn.microsoft.com/en-us/library/jj171012.aspx This clearly won't be the case before a whiiiiiile. If I already get the lib working with the control we need, it will be a lot achieved. A GUI editor would be ideal, but I've also been there few time and I wouldn't dare this time to spend time on this one. The creation will be like the the Canvas2D's one, in a declarative way, using code and TS classes. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted September 13, 2016 Share Posted September 13, 2016 Thanks for the replies, Nox. It sounds like you have it under control... plus some. I'm glad. REAL glad. There's lots of aspects to GUI libs, and in making them somewhat easy to use. To be frank, I got a HUGE sigh-of-relief when I heard of your experience on the subject. I think we are in good hands... phew. Thanks for the info on your experiences. I am glad to hear every bit of it. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted September 13, 2016 Share Posted September 13, 2016 Just now, Wingnut said: Oh, it sounds like you have it under control... plus some. I'm glad. There's lots of aspects to GUI libs, and in making them somewhat easy to use. To be frank, I got a HUGE sigh-of-relief when I heard of your experience on the subject. I think we are in good hands... phew. Thanks for the info on your experiences. I am glad to hear every bit of it. I wouldn't have tried anyway... This is also one of my favorite thing to code! Wingnut 1 Quote Link to comment Share on other sites More sharing options...
adam Posted September 13, 2016 Author Share Posted September 13, 2016 One solution is to use a temporary canvas element to draw lines/curves. http://babylonjs-playground.com/#15C96V#16 Quote Link to comment Share on other sites More sharing options...
Nockawa Posted September 13, 2016 Share Posted September 13, 2016 2 minutes ago, adam said: One solution is to use a temporary canvas element to draw lines/curves. http://babylonjs-playground.com/#15C96V#15 Omg, you're doing thing I don't even thought possible! The result is awesome! But it comes at a price I guess, I actually manage cached bitmap in a set of big textures, using atlas to optimize perf. So I guess switching from this mode to yours would have a significant hit if many cached bitmap are used, but the result is great! I just realized that I could do the same technique as for WorldSpaceCanvas: oversampling, if I render into a texture twice the size than the real one the final result should be better due to trilinear filtering. I have to test that sometime, shouldn't be long. adam 1 Quote Link to comment Share on other sites More sharing options...
Nockawa Posted November 10, 2016 Share Posted November 10, 2016 On 10/09/2016 at 7:22 PM, adam said: http://babylonjs-playground.com/#15C96V#13 @adam the Lines2D generation bug got finally fixed, I needed time to get the courage to go back in this class, sorry... Here's the trello card: https://trello.com/c/tHP48Dmd Main repo is updated, but not the preview build and not the PG. adam 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted November 10, 2016 Share Posted November 10, 2016 PG updated Quote Link to comment Share on other sites More sharing options...
Nockawa Posted November 10, 2016 Share Posted November 10, 2016 1 hour ago, Deltakosh said: PG updated apparently not with a brand new C2D build... Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted November 10, 2016 Share Posted November 10, 2016 better? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.