Using HTML5 Canvas to develop complex application - javascript

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.

Related

Javascript Stack and Canvas / WebGl or Qt and C++

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?

Animated pipe (Canvas, JavaScript or CSS3)

I'm looking for a framework that allows you to make a Subway map or that renders pipes. But I would like to animate it in the sense that you can see 'traffic' on the lines.
My idea is to create a visual monitoring system for message queues.
I found this "London Underground" jQuery plugin, but it's not animated: http://kalyani.com/2010/10/subway-map-visualization-jquery-plugin/
Does anyone know of such a framework that already exists? If not, what is the best solution to make this? Canvas, JS, CSS3 or some kind of hybrid?
Try D3.js..
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
http://d3js.org/
Some good examples are here: (Node based)
https://github.com/mbostock/d3/wiki/Gallery

Accessing GPU via web browser

I came across this proof of concept earlier today (on TechCrunch.com) and was blown away and intrigued as to how they had managed to accomplish the end result. They state that they don't use webGL or any plugins yet they are able to interact directly with the GPU and render 3D visuals at up to 60 fps using nothing but Javascript. Any ideas how this could be done, or how to access the GPU from Javascript in general without the use of plugins?
Site Address is: famo.us
ps: Try using your arrow keys to shift orientation its far out!!
They're using standard HTML5 Javascript APIs to achieve this.
I saw several references to requestAnimationFrame in their code. This method allows one that uses a compatible browser, to display more fluid and optimized animations, with far better frame rates than setInterval based animations will ever allow you to have. This is certainly achieved by using the GPU and the available hardware background.
GPU or every other hardware component cannot be accessed directly using any Javascript routines. Instead, the browser, based on the called JS directives and the execution context, will use the GPU if possible to optimize some specific treatments, calculus and renderings.
EDIT
For future references, I recently found out (7 years after the original answer) that a new initiative - the W3C GPU for the Web Community Group, has recently been created in 2020 to do just that. It describes itself as follow.
The mission of the GPU on the Web Community Group is to provide an interface between the Web Platform and modern 3D graphics
and computation capabilities present in native system platforms. The
goal is to design a new Web API that exposes these modern technologies
in a performant, powerful and safe manner. It should work with
existing platform APIs such as Direct3D 12 from Microsoft, Metal from
Apple, and Vulkan from the Khronos Group. This API will also expose
the generic computational facilities available in today's GPUs to the
Web, and investigate shader languages to produce a cross-platform
solution.
In the long-term, this initiative might allow developers to directly interact with the GPU from all web browsers. You can track the implementation status of the WebGPU API Spec on Github here.
Concerning famo.us: they did analysed the bottlenecks of the Webkit rendering pipe and then found a way to bypass them while building the pages. Basically: the DOM tree construction, the Render tree construction, the Layout of Render Tree are bypassed. Take a look on this article for a whole explanation.
They're using CSS 3D transforms. Web browsers are increasingly using hardware acceleration to do these kinds of CSS3 things.
i think the webGL glsl.js library might be good for this, though i havnt seen benchmarks...
https://github.com/gre/glsl.js/
also this approach seems viable;
basically to use the gpu in the way we like to, hardware optimised functions (have a little look into "blas") are used, you do not want to write these! strangely it seems that people still use the old fortran blas.... there is some stuff with compiling via llvm and then using emscripten to turn it into javascript.
Use Emscripten with Fortran: LAPACK binding
the emscripten way seems the most versatile, im just about to check it out, but it looks like a mountain, also this topic seems to be somewhat of a call to arms, emscripten only works with fortran if you hack it (see links from the second link). i think what we are looking for is blas support in javascript, this is not a closed issue by any means, and for a few of us out here it is very frustrating! hopefully someone has a link to these blas libraries we cant find...
please let me know if i dont quite have my head round this issue, js is new to me.
also, suggesting html5 is sufficiently "optimised" to use the hardware, how can we trust this!? we need gpu optimised blas (basic linear algebra subprograms) e.g. dot product.
i think maybe also that these old fortran blas arnt actually the right thing for a modern gpu? node-cuda seems very likely the best thing i have found...

What are good JS libraries for game dev? (HTML5)

If i decide to write a simple game both text and graphical (2d) what libs may i use? Assuming we are using a HTML5 compatible browser.
The main things i can think of
Rendering text on screen
Animating sprites (using images/css)
Input (capturing the arrow keys and getting relative mouse positions)
Perhaps some preloading resource or dynamically loading resources and choosing order
Sound (but i am unsure how important this will be to me at first). Perhaps with mixing and chaining sounds or looping forever until stop.
Networking (low priority) to connect a user to another or to continuously GET data without multiple request (i know this exist but i dont know how easy it is to setup or use. But this isnt important to me. Its for the question).
Well.... there's Rocket Engine. I haven't used it, but it appears (on the surface) to do much of what you want.
I'd also recommend HTML5 Gamer, a blog on the issues for building games in HTML5/JS
GameJs does this:
Sprites, SpriteGroups
Text rendering
input handling (key/mouse)
collision detection
sound
resource preloading
http://gamejs.org, Disclaimer: I'm dev of GameJs.
The stuff above works good and I did games with it. The API is similar to http://PyGame.org which some people like a lot.
Networking is planned.
If you're familiar with jQuery then gamequery is a good one to try. Here's a great demo of what you can do with it: brainsnackers.
Here are some of the features:
multi layer-sprite animations sprite
hierarchies (grouping) collision
detection swappable sound support
periodic callbacks keyboard state
polling free and open source license
Check out cake js. It's been around a long time and it's really nice to use - especially if you've used actionscript before.
The http://js1k.com contest just ended and the 2D platform game Legend Of The Bouncing Beholder (by marijnjh) was the winning entry. You might want to look over the source since it would provide a very easy to grasp overview of sidescrollers without needing to read lots of code.
Another good one is the two-player crazy pong which is a lot of fun.
Plus, 1kb games are just awesome.
i would use RenderEngine i think it has all you need and solves one of the most important problems that would be collision detection, and it also has sprite support...
Tutorial <- this is a great tutorial i found
i hope this helps
I can recommend Cometd for using ajax push networking (ie. comet)
What about createJS (createjs.com) or melonJS (melonjs.github.io/tutorial)?
CreateJS has great support for those items you mentioned, not so sure about networking though.
MelonJS has native support for reading Tiled tilemap .tmx files.

Can you recommend an in-browser Ruby/Rails 3D renderer?

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.

Categories