I want to create a small desktop application and have some problems to decide which way to go.
There will be up to 5000 2D elements in the view with blending and so on.
Also zooming will be needed.
To make this app cross platform and cause I like Javascript, CSS and Html I would like to use Electron and then use Canvas or WebGl.
But I don't have any experience in terms of the performance.
Alternative would be C++ and the Qt-Library. But I would prefer the Electron way.
Does anyone have some experience concerning the performance of WebGl and Canvas?
Related
I'm thinking about learning WebGL and the first thing that comes to mind is that JavaScript is client-side; what approach (if any) is used to have server-side JavaScript specifically related to WebGL?
I am new to WebGL as well, but I still feel that this is a very advanced question you are asking. I believe it is an advanced question because of the scope of answers that exist to do what you are asking and the current problems related to proprietary WebGL.
If you have done any research into WebGL you will immediately see the need for Server Side code due to the fact that the WEbGL API code is executed within the browser and thus freely available to any knowing individual. This is not a typical circumstance for game developers who are used to shipping their code compiled.
By making use of server side controls a developer can hide a large amount of WebGL translations, shaders, and matrices, and still maintain a level of information hiding on the client side code. However, the game will never work without an active internet connection.
Since WebGL is still relatively new, and IE does not support it, expect things to change. M$ may decide that they want to build their own web API like WebGL that ends up being an ASP.NET library. All of the required complexity that currently goes into building a solution to the problem you are facing gets condensed into a 3 button Wizard.
With that being said I think the answer to your question lies in the fate of some future technologies. For bigger goals there will more than likely be a large amount of back and forth communication; protocols like HTTP may not cut it. WebSockets or other similar technologies may be worth looking into. If you are attempting to use Canvas for something smaller just an understanding of building dynamic JavaScript may be enough.
The problem with these answers is that OpenGL is an API itself and has a specific order of operations that is not meant to be changed. This means that this approach to building a WebGL applications is very limited. Since changing GL objects may require a whole Canvas restart, a page refresh, or a new page request. This could result in effects not desirable. For now I would say aim low, but ones thing for sure WebGL is going to change the www as we web developers know it.
I'm not sure what you are looking for, probably not this... :)
but...
If you want a server side fallback for browsers not supporting WebGL, lets say for generating fixed frames as png images of some 3D scene, then you could write your 3D veiwer in C or C++, build it for OpenGL ES when targeting your server side fallback, and use Emscripten to target browsers supporting WebGL.
We are developing a web application for CAD designers, existing similar projects are:
http://mydeco.com/3d-planner/
http://sunglass.io/
These projects are implemented using either SVG or Canvas. My question is:
Considering SVG and Canvas, which one is better for similar projects?
Since Canvas only provides a bundle of low-level APIs, is there any existing libraries that handle object rendering, layer management, conflict detection, etc.? For instance, with wxWidgets, Qt or MFC, developers do not have to care about window overlay and rendering in a window system.
Thanks a lot :-)
UPDATE 2
OK, I've read the posts and I'll try to avoid such kind of questions. Now I've found out this library:KineticJS, which also implements some of the functionalities of SVG. I'm trying to use it and will come up with a conclusion later.
UPDATE
Thank you Richard. Moreover, since we are deploying this application to iPad, we are trying to find out an efficient and easy-to-use technology to build it. In 2D environment, does Canvas perform faster than SVG? Is there any pitfalls of SVG on iOS devices? Thanks a lot.
Just to answer from personal experience, I have had more success with SVG in 2D projects and better results with canvas for 3D.
If you want a good library for creating 3D on the client side I would look at threeJs from the amazing Mr Doob.
http://mrdoob.github.com/three.js/
It can use canvas or WebGl for faster rendering.
Hope this helps.
I had created an HTML5 Canvas WebGL game in January for the Mozilla Game On 2010 competition (pretty late, I know - I never released it until yesterday). Now I want to port it to Flash ActionScript 3.0 for a college assignment.
I'm well versed with both static languages like C/C++ and Java; and dynamic languages like Python and JavaScript. However I don't know ActionScript, but since it's a subset of ECMAScript it should be pretty easy to understand.
I want to learn programming in ActionScript 3.0 so that I may be able to port my game in Flash. To be more specific, I want to know more about:
How is ActionScript different from Browser and Server-Side JavaScript, and basics.
OpenGL programming in ActionScript (including loading textures, shaders, etc).
How to create a HUD in Flash using a 2D HTML5 Canvas like API (in my game I have 2 canvases, one for the 3D game and another overlaying it for the heads-up display).
Support for vector and matrix calculations in ActionScript.
How to load assets like audio and sprites in Flash.
I would appreciate it if you would provide me a link to a page from where I can learn more about these topics. A more direct hands-on approach would be preferable.
It would be even more helpful if you would check my source code in JavaScript and suggest the best possible way for me to tackle this problem.
The code for the main game engine and the game itself may be found in my Github repository.
ActionScript and JavaScript are very similar at their core. In some ways you can think of ActionScript as more like a robust library layered on top of ECMAScript. There are a few differences (namely ActionScript likes to think of itself as a class-based oop, where as JavaScript is prototype-based), but if you are comfortable with one, then you should be pretty at ease with the other.
ActionScript has a class based inheritance system and supports interfaces (but you can still do some prototypical magic if you want, but its not recommended). It also supports strongly-typed objects.
var object:MovieClip = new MovieClip();
This will strongly type the object variable as a instance of the MovieClip class.
If your game is very 3D intensive, then you'll want to look into the new Flash 11 Stage3D and Context3D classes. These expose a low level GPU accelerated API that before Flash 11 wasn't possible. You can do interesting 3D stuff with Flash 10, but you are usually using drawTriangles(), which was not hardware accelerated. Flash 11 is currently in beta, but it should be out very soon. There are beta versions of the Flex SDK that should let you compile targeting the Flash 11 player.
There are also quite a few 3D libraries that are built on-top of these low-level api. If you goggle around for them, they are easy to find. But I would recommend getting a solid understanding of how ActionScript works before diving into the 3D libraries.
The HUD stuff in flash is simple whether you go with Flash 11 or Flash 10. For "classic" flash, you'll want to get familiar with the display tree concept they use in flash. Just make sure the display order is correct, and your HUD DisplayObject will always be "on-top" of your rendering DisplayObject
For Flash 11, StageVideo and Stage3D objects sit directly above the stage, but behind all normal flash DisplayObjects that are attached to the stage. So in that case, I would let the Stage3D api take care of all of your heavy rendering lifting, and use the traditional display stack for your HUD elements.
You'll probably also want to grab yourself Flash Builder over Flash CS5.5. If you are a programmer (which I am assuming you are since you are posting here), it wont make your eyes bleed trying to code. FB is based off eclipse, and its pretty decent but not perfect. But if you grab yourself the free Flex SDK, and don't mind using the command line, you can get started compiling swfs pretty quick and cheap (aka free).
Also, look into FlashDevelop. I haven't used it in a while, since switching to FB for its built in profiler, but it might be of use to you.
Importing images and audio is pretty straight-forward with the Flex SDK.
[Embed(source="logo.gif")]
public var LogoBitmapData:Class;
and then later instantiate the class:
var bitmapData:BitmapData = (new LogoBitmapData()) as BitmapData;
And then use it where ever you want to.
Just a note about the Flex. Flex is a set of UI libraries built on top of the normal Flash API, the Flex SDK includes the libraries and tools to compile MXML and ActionScript code files. So, despite it sounding like you should use the Flex SDK to compile Flex apps, you can use it to compile straight ActionScript code as well.
There are built in classes for Vector3D and Matrix3D.
As far as tutorials or references, I don't have any to offer really. I've found that most of the information on the internet about ActionScript programming is pretty hit or miss (when you can find something thats not written by a graphic designer). I'd dig around in here and see if you can find anything that makes sense to you.
There is obviously a lot more I could go into about this stuff, but hopefully this will give you a push in the right direction.
Welcome to AS3 :)
#32bitkit beat me to the IDE info, but I'd absolutely recommend Flash Builder. It's a real tool and worth the money if you're going to be doing any real AS3 work.
As far as actual tutorials, Senocular is known for writing some of the best content out there. He has a number of great tutorials here, but the following two are especially excellent introductory tutorials for AS3:
AS3 Introduction in Flash CS3 This tutorial is good because it explains the differences between AS2 (very JavaScript-like) and AS3. Ignore the fact that it's based on using the Flash "IDE."
AS3 Introduction Without Learning Flex This one is useful because it give more of an introduction to the language itself, without all of the trappings of the IDE or the Flex framework. It will help you understand the language itself.
As shown in that second tutorial, an AS3-based project will inherit from the flash.display.Sprite class. You can view the docs for that here. Perhaps it sounds silly, but you'll honestly learn quite a lot about AS3 by just browsing the AS3 Reference docs. Adobe has done a good job with those.
Another thing to be aware of in AS3 is how events are handled. This tutorial explains how the EventDispatcher class functions as the base of the event management. You can use the built-in events or dispatch your own.
HTH!
I want to draw some 3D network diagrams in a web browser, and the data for these diagrams are in a Rails app (in the database).
I already use flotomatic as a Rails interface for pretty Javascript plots (e.g., independent variable, dependent variable). Certainly there are packages for drawing simple things in Javascript.
What I'm looking for is (a) a Javascript package for 3D drawings that are displayed in a web browser (without a plugin), and (b) a Ruby API for that package, if possible.
Any recommendations? Many thanks!
I haven't found a definitive answer, but something like this might be useful:
http://www.canvasdemos.com/2009/04/05/processingjs/
http://processingjs.org/
In short, processing has been ported to javascript and makes use of the HTML5 canvas element.
Processing.js does not yet support 3D (as canvas doesn't support it due to lack of acceleration), but it shouldn't be a big deal to create a wireframe.
I'm doing some research for a JavaScript project where the performance of drawing simple primitives (i.e. lines) is by far the top priority.
The answers to this question provide a great list of JS graphics libraries. While I realize that the choice of browser has a greater impact than the library, I'd like to know whether there are any differences between them, before choosing one.
Has anyone done a performance comparison between any of these?
Updated answer (2019):
The core advice is still the same: for maximal performance use thin wrappers or use raw browser API's, and also avoid the DOM or any DOM-like structure. In 2019 this means avoiding SVG (and any library built on top of it) because it may cause performance issues when trying to rapidly change the DOM.
Canvas is the go-to solution for high performance web graphics, both for the 2d and 3d (webgl) contexts. Flash is dead so no longer an option, but even if it weren't its performance was eventually matched by the native browser API's.
Original answer (2009):
If you're not doing 3d, just use raw canvas with excanvas as an explorer fall-back. Your bottleneck will be javascript execution speed, not line rendering speed. Except for IE, which will bog down when the scene gets too complex because VML actually builds a dom.
If you're really worried about performance though, definitely go with flash and write the whole thing in actionscript. You'll get an order of magnitude better performance, and with the flex sdk you don't even need to buy anything. There are several decent libraries for 3d in flash/flex available.
Raphael JavaScript Library
http://raphaeljs.com
None of them have good performance. It is 2009 and the state of programmable graphics rendering in web browsers is truly depressing. I could do faster interactivity on a vt125 terminal 25 years ago. If you are doing anything interactive, think about using Flash... Else I'd go for some server-side heavy solution depending on your needs
Up to now - is used processing.js (javascript canvas implementation of "Processing" language) and/or raphael.js (tiny and handy VML/SVG javascript library).
The performance recomendations depends on task:
highly dynamic, complex primitives (or huge amount of it) - canvas (pixels, low-level API)
lower amount of primitives, highly scalable, integrated in DOM - SVG/VML (vector, high-level API)
I know you said browser had more influence, so why not stick with using optimized SVG calls? Then, it "could" work in all browsers but...
Chrome is robust enough to do render 3D modeling efficiently:
http://www.chromeexperiments.com/detail/monster/
How about http://www.jsgl.org? It uses SVG/VML.
For basic drawing (such as lines, circles, and polygons), I would recommend Walter Zorn's Graphics Library. It was built with performance in mind and works in a ton of browsers.