There are few JavaScript libraries allowing for rendering 2D graphics using WebGL. I have found out, that the most popular are three.js and pixi.js. Both of them allow you to use WebGL or canvas renderer (for devices dont supporting WebGL).
I want to ask you which of these libraries is better under the following termns:
I want it to use only with 2D graphics, so 3D support is completely optional.
The performance is very important - a lot of elements, text, ability to smoothly scale, translate them etc. is crutial.
The canvas renderer (when device does not support WebGl is important) and I would love to see the same (or very simmilar) result using both renderers.
If there is another library, that I should concider in this particullar situation, feel free to tell about it :)
I have the exact same use case and just tried both. Loading a lot of static sprites (from the same image) is faster in three.js for 5000 sprites and above, but animating only a few of those sprites give better framerates in pixi (again, for 5000 sprites). (This was tested on Chrome and IE9 on desktop)
The biggest difference was with the Canvas renderer, where pixi's autodetect gives the same results as the WebGL (if slower) for the same code, but three.js's Canvas renderer doesn't support the Sprite type meaning to achieve portable code you have to use Particles. If you don't use sprites all that much and mostly have quads or triangles, that wouldn't be an issue.
If availability of tutorials and such is at all an issue, three.js is more established, so there's more material.
Otherwise, for up to about 2-3k elements rendered at the same time, I'd go with pixi.
Worked a lot with pixi.js, and currently working with three.js.
pixi.js is based on AS3 API, that has been used for flash games. That mean that the API (structure) has been tested and tried since way for longer than three.js. (only used both for 2D)
three.js being more popular, it might be more up to date on some edge cases. For example it has more flexibility than pixi.js on adding a shader. pixi.js does not yet have the possibility to add a "raw" shader, without anything appended at the top of the shader code. That is important for specifying shader version "#version 300 es" (pixi.js use an older version by default).
Related
Here is what i am trying to do :
http://mbostock.github.com/d3/talk/20111116/iris-splom.html
But i want to do that in webgl 2d (because SVG performance is very slow, randering 10k SVG only already drops to 12 fps)
On a quick search i found several webgl-2d libs : cocos2d-html5 , pixijs,Three.js and webgl-2d(abandoned?)
They seems to be pretty easy but what i want to do is data visualization.cocos and pixijs are 2d game libraries. I am new to webgl and those libraries so experts at SO can you guys recommend ?
summary of things i need:
Interaction :
Rectangular selection inside plots. Click to select on Some elements.
Zoom and Pan Support (Semitic Zooming if possible)
Renderer :
WebGL2d (according to benchmarks webgl is fastest)
Based on your requirements and summary, I would recommend the latest release of Cocos2D-html5 which includes WebGL rendering support. This is as simple as changing the rendering setting from Canvas to WebGL in the cocos2d.js settings file. For Example, in HelloHTML5World/cocos2d.js change renderMode to 2 for WebGL based rendering.
renderMode:0, //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
Cocos2d-html5 is more precisely a graphics library and & maybe construed as a complete game library only in combination with the (default) chipmunk or box2d game physics libraries.
Does it support rectangular selection, or zoom and pan? Yes, you can extend the existing libraries to implement these behaviours.
Other advantage of Cocos2d-html5 platform is added support for visual graphics editing with Cocosbuilder and cross-platform native support (iOS, Android etc) for same codebase with Javascript bindings.
If you have specific platform questions, these can be answered in better detail with code.
You may want to look at the JS reference and the cocos2d-html5 forum for getting started.
Update1: Looked at your data visualization code for iris dataset, The plots are housed in a svg element, with tiny circles plotting each datapoint according to x,y coordinates. These can be accomplished in Cocos2d too via x,y coordinates, grids, boxes with varying opacity and the tiny circles for the data points. Import your iris dataset in json/xmll/csv format via javascript code and plot via above cocos2d methods. Rectangle selection via javascript event callbacks & mousehandler methods and corresponding update of canvas scene.
Update2: On second thoughts, if you find the learning curve for cocos2d steep, you may better restrict yourself to a charting only library which is WebGL based. This project VivaGraphJS seems suitable with high performance being WebGL based.
Also, please ask questions preferably in this format, what you tried in code, what was the expected output, what you got instead. SO is not meant for comparison of libraries. WebGL is a rendering method. The switch, for example in three.js is as simple as
renderer = new THREE.WebGLRenderer();
instead of the canvas one:
renderer = new THREE.CanvasRenderer();
resulting in higher performance.
I´m thinking on coding a couple of examples for my Computational Geometry class (2D), I want to use html5 and javascript.
Can anyone recommend a javascript library or does html5 has everything I need to start?
I will be mostly working with points and lines, but it would be nice to have something that draws a Cartesian plane as a reference and maybe some data structures ready to use.
JSXGraph
Specifically focuses on dynamic geometry and functions visualization. Comes from the academia. Authors – a German university.
Uses SVG (with fallback to Canvas and VML for IE). Works on iOS and Android.
The API is a very abstracted SVG API. It operates on figures and groups of figures, tangents, hyperbolae &c.
Has nice documentation.
SVG is not considered part of HTML5, but it's worth looking at. It's flexible, ubiquitous and, I think, vector graphics is a better option for geometry than bitmaps (Canvas).
I think either raphael should be useful:
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
http://raphaeljs.com/
or processing.js
Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins.
http://processingjs.org/
Your best bet is to use <canvas> and explore the API. It should have the basic primitives you need.
I can recommend EaselJS because I used it many times to quickly create dynamic drawings, such as triangles, circles, arcs etc. I was even writing a simple draw-with-text tool for students, called Geodrafter.
However, if you want to add e. g. sliders and have a dynamic environment (easily dragging points, for instance), then JSXGraph is a better choice since they provide a variety of components for this. The gallery in their wiki give some good ideas.
And as said above: JSXGraph is based on vector graphics, which will always produce exact graphics. EaselJS is based on canvas and can lead to blurry lines.
I like to generate a simplified version of the following static image in pure JavaScript. It should work with 2010 vintage browsers, so I can't wait for Firefox 4 and WebGL.
I do not need any fancy textures - the task is just to visualise how to stack some boxes.
BTW: the current image is generated with POV-Ray which is overkill for the job - and does not run in the browser ;-)
As you say you don't need fancy textures I'd recommend for vintage support that you stack images like mentioned earlier. I made an example for you: http://jsfiddle.net/andersand/5RsEx/
The simple function is just to illustrate, and does the drawing of a segmented box. Of course you may need to figure out box placement, orientation, and so on if that is your business goal.
That approach could help you with boxes of various height (z axis). If your boxes also vary in width (x and/or y) you'd need to create more images to suit your needs.
If you can do without IE support, or require a plug-in for IE users, or provide server-side rasterization for IE users, you could use computed svg files.
You could do a very basic projection of the vertices of the boxes, maybe start with a simple isometric projection and then go to a perspective projection. Use simple 4x4 matrix math as used in OpenGL for this and represent the 3D coordinates as [x, y, z, w] vectors. Since the images are small and simple enough you can get away with simply using a smart rendering order, i.e. bottom to top, back to front, which will make sure you don't have to worry about mucking about with a depth buffer or other such things. Should be fairly simple to implement, you don't need third party libs and it will be natively supported in most of the contemporary browsers.
Okay, I thought this to be an interesting experiment, so I made a working version of what I described above. It works in all major browsers with the notable exception of IE. SVG support should come to IE with the introduction of IE9. I've tested in Opera, Firefox and Safari under OS X and Opera and Firefox under Linux. It might be possible to add IE support by making VML output possible, though I must say that I do not know whether IE permits inlining of VML in XHTML using namespaces like I used here.
Computed SVG rendering of 3D stacked boxes
Right now it only does isometric projection. I might just spend a bit more time on this to add a perspective projection option as well. That would seem fun and should not be much more than adding another matrix multiplication.
Searching for Collada (XML based 3d file) support may be your best bet. Now that canvas has landed, lots of 3d routines are being ported from Flash Actionscript to Javascript.
You can export Collada files from all of the major 3D applications, as well as blender ;)
Try the following as an example;
http://www.rozengain.com/blog/2007/11/21/parsing-collada-3d-assets-with-javascript-in-the-html-5-canvas-element/
If you want to rotate a 3D scene using javascript, you may have a few months wait until the engines get released. They will most likely be HTML5 dependent.
There are a few WebGL implementations doing the rounds but they are for the bleeding edge browsers and are very unstable.
I'm looking for a framework or library to use the browser as a 2D "drawing" tool.
Acctually drawing is not the right word. It should be a adding, removing and moving around of 2D objects and images on a canvas. The objects should be graphically connectable. So - kind a visio in a browser
I guess it's a bit to much for a javascript library like dojo or prototype but what about a flash framework like flex or openlaszolo?
Thanks!
Most modern browsers now support the <canvas> tag in HTML5, which does pretty much what you're asking for. You can draw directly onto it using Javascript. Also in most modern browsers is support for the SVG graphic format, which again can be manipulated via Javascript to do some very funky effects. The difference between canvas and SVG is that canvas is for bitmap graphics and SVG is vectors. But both are good for 2D drawing.
If you need a library or framework on top of that, you could try something like Raphael, which is a good JS library for drawing vector graphics. It even supports older versions of Explorer, which is a bonus. (if SVG isn't available it falls back to VML).
iLog Exlixir offers some graphing components which would probably help.
OpenLaszlo can definitely do this. Here is a link to an OpenLaszlo application that is an online alternative to Visio:
http://www.gliffy.com/
I also have personally developed and maintained an OpenLaszlo video editing application over the past 6 years that allows you to drag images and videos to different positions and layers similar to what you describe, you can try it here if you want:
http://www.sarolta.tv/web/sarolta-tools/template-editor.html
Javascript CANVAS is amazing: it allows us to draw something like lines, polygons on the browser screen.
I wonder how does Javascript CANVAS works. For example to draw a line, does it use a series aligned tiny images to simulate the line or some other approach?
Thanks in advance.
Any reasonable implementer would just use a bitmap (stored internally in the browser), and draw to that using OS native drawing commands.
Why does it matter? It's not at all related to HTML+CSS, if that's what you're wondering.
More detail, for detail's sake:
When the browser's HTML parser sees a canvas element (of a given width & height) it needs to allocate an onscreen pixmap to cover that area. It either does this manually (i.e. malloc()) or it calls into some OS native drawing API to create a surface to draw on. The OS native API could be Windows, Gtk, Kde, Qt, or any other drawing library that the implementer of the browser chose. Also, it's highly dependent on the operating system. Internet Explorer probably calls into some Windows native library (i.e. DirectX or WinFooBarMethod()).
Once the drawing surface is created, it's made accessible to the internal guts of the JavaScript interpreter, likely via a pointer or handle to the constructed drawing surface. Then, when the JS interpreter sees an invocation of one of the canvas methods, it turns this into a call to the appropriate OS native command.
So, using the Windows 3.1 style metaphor:
"new canvas(width, height)" = "WinCreatePixmap(width, height)"
"canvas.setPixel(x,y,color)" = "WinSetPixel(x,y,color)"
And using a manually managed pixmap:
"new canvas(width, height)" = "malloc(width * height * sizeof(Pixel))"
"canvas.setPixel(x,y,color)" = "canvas[x][y] = color;"
Again, it shouldn't matter to the JavaScript developer how these methods are implemented. The only people who need to care are the ones who are writing HTML5 compliant web browsers with canvas support.
If you know C++, you can go to the source.
For example, in Firefox, the "graphics context" object is implemented by the class nsCanvasRenderingContext2D. But that class doesn't actually modify the pixels directly. Instead, it asks a separate object, called Thebes, to do that. Thebes in turn delegates this work to a graphics library called Cairo, which typically asks a library provided by your operating system to do the actual pixel work. I imagine it's a similar story everywhere.
At the very bottom, the canvas has a two-dimensional array of pixels. Each pixel is a 32-bit integer. A pixel is set by assigning a value to an element of the array. Somewhere there's a bit of code that determines which pixels to paint and assigns the appropriate values to the appropriate array elements.
In theory, the pixels might be drawn by your video card, but I have heard that graphics cards generally can't be trusted to do 2D graphics, because the hardware is aggressively tuned for 3D gaming and trades away too much accuracy for speed.
If you're interested in how line drawing works, check out Bresenham's Line Drawing Algorithm.
Surely that's implementation-specific to the JavaScript engine browser in question?
You're thinking too much, it's simple:
A canvas is like an image that can be drawn on to the browser.
I think implementation is important. Why does it matter? Look at flash. When you use the drawing API to create complex fractal artwork it is actually creating vector artwork and making every line and curve a child of the object being drawn on, thus it rerenders the vector artwork every frame.. CRASH! or chug... chug........ chug..............
So for complex fractals or art that records equations, I have to use a Bitmap or the render engine CACKS. It DOES make a difference, since now I am trying to transfer some of my flash multimedia to Javascript and encountering differences among browsers.