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.
Related
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).
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
How can I achieve 3D text transformations in perspective using Javascript/CSS.
Solutions using external libraries of Javascript/CSS are also possible
CSS transformations with perspective are only possible with Safari at this point. Alas Chrome, while based on Webkit, and seemingly supporting the proper CSS attributes, will not apply perspective transformations. They will be supported at some point on Firefox, no clue about IE.
Your only other option really is <canvas>. However, just like with CSS transforms, the canvas API only provides functions for "2D" affine transformations (scaling, rotation, skewing). With this the best you can get is an isometric perspective, as that can be achieved with just skewing.
However, since canvas gives you pixel level control over the image, you can fake perspective, though doing so is complex. The obvious way is to use the putImageData function and calculate each pixel using a 3D perspective transform matrix. Obviously you'd need to know some things about linear algebra and trigonometry. Regardless of your math skills, doing 3d transforms at such a low level is extremely costly performance wise, and highly variable between different browsers (Chrome is the fastest by far, Firefox will chug along at fairly low framerates, and Safari is somewhere in the middle).
A better solution performance wise, but similarly complex and math intensive, is to use drawImage to paint an image/text/whatever to canvas one line at a time, and in between each change the canvas's scaling transform values. This is exactly the method that was used to get perspective on the SNES with mode 7 that natively only supported 2D transformations.
Another method is detailed here.
As you can imagine none of this is trivial, and performance is spotty at best. So if you are not willing to delve into a mass of linear algebra, trigonometry and canvas API documentation, I would say you are pretty much out of luck. Any JS library that does as you ask is subject to all these limitations. I know of a handful of demos out there, but none that could really be called a library (though if someone knows of something I'd be happy to be corrected).
If anyone is interested in the nutty details of any of the approaches I mentioned, I'd be happy to try to lay them out more comprehensively. In the mean time, you can play around with my own demo that uses a combination of the first two techniques I specified.
http://bigmooworld.com/pwings/pilotwings/pilotwings.html
Some of you might recognize it...
Use WASD to pan, up/down to zoom, right/left to rotate, and Q/E to change perspective. Feel free to peruse the code, but be forewarned that it is not well organized or commented, and most of it is discarded junk code.
So anyway my answer is...Yes it is possible, easily in Safari, or with a great deal of effort and shoddy performance in other browsers (and there is probably a way in IE but I have no clue about how).
Is there a JavaScript library that models 3D polyhedra using the canvas tag or SVG? Say I wanted to produce renderings of the Platonic solids, how would I best achieve this? FWIW, I'm only concerned with WebKit-based web browsers such as Safari and Chrome.
I've seen this cool demo of how to render 3D triangles, but how might I extend it to polyhedra with an arbitrary number of sides?
Take a look at this library: SVG-VML-3D
It uses SVG and falls back to VML on MSIE.
They do have a demo with platonic solids. I don't have a Webkit-browser handy, but presume it should work there as well.
Not a direct answer to your question, but seeing as you mentioned WebKit-only I thought I'd point out the new 3D CSS Transform support which was added to webkit pretty recently. This allows you to do what you want without using any Javascript. I've not seen an example of 3D polyhedra, but there are examples of cubes etc out there - for example here.
There's a slightly more complex demo here which has a ring of rectangles. For a real taste of what you could do (although this does use Javascript for animation) - see the Snow Stack demo.
Most 3D libraries generalize triangles. If you want a polygon with more than 3 sides, you subdivide it into triangles and draw those triangles. If you're interested in just the platonic solids, then you're going to have a pretty easy time, because you can easily get a triangluation of each face by first averaging the vertices of each face, and then using that center and two adjacent vertices of the face to give you a triangularization.
I'm considering developing a website similar to stackoverflow, but the answers may also consist of drawings (schematics, in this case). I want to have an area in the answer form where they can make this schematic without requiring special plugins, etc.
Are we to the point where SVG has or should have critical mass soon (1-2 years) such that designing a website where script-run SVG as a primary feature is reasonable (ie, requiring Firefox or another SVG/AJAX compliant browser)?
What are some good resources for learning cross platform SVG scripting (likely in javascript)?
-Adam Davis
Raphael looks like an interesting take on the problem of cross-browser vector graphics.
Unfortunately, I don't have an answer, but I do have three pointers to projects that you could look at.
The first is the Lively Kernel by Dan Ingalls (yes, the Dan Ingalls) at Sun Labs. It is an implementation of a Smalltalk Virtual World in JavaScript on top of SVG. More precisely, it is an implementation of the Morphic GUI framework from Squeak Smalltalk in JavaScript using SVG and a port of (parts of) Squeak Smalltalk in JavaScript.
Or, if you're not a Smalltalker and the above doesn't make sense to you: it's an Operating System, written in JavaScript with the JavaScript interpreter as the CPU, SVG as the graphics card and the browser as the computer.
This is about as extreme as it gets, when it comes to JavaScript and SVG. And it only fully works in Safari 3 and partly in Firefox 3, although there is an experimental port to Internet Explorer as well.
The second project is John Resig's Processing.js port of the Processing visualization language to JavaScript. It uses the <canvas> element instead of SVG precisely because of the problems that you mentioned. This one however, only works in Firefox 3.
The third one is Real-Time 3D in JavaScript by Useless Pickles. It uses only JavaScript, DOM and CSS and no SVG or <canvas> or Flash or whatever. And it is portable to almost any browser, including Internet Explorer 7 and up. Doing 2D should be even easier than this.
Between those three projects you should be able to find some inspiration and also to find some people who tried to push the envelope with JavaScript and SVG or JavaScript and Graphics and can tell you what works and what doesn't.
Conclusion: doing cross-browser SVG or cross-browser <canvas> is nigh impossible, but with a little bit of craziness, cross-browser graphics without SVG or <canvas> is possible.
SVGWeb is a script that adds near-native SVG capabilities to IE using flash. All the other major browsers support SVG.
http://code.google.com/p/svgweb/
1/ probably never - if IE wanted to add it, then I would have though it would have done so by now; but there are workarounds using SilverLight and Gecko to provide rendering. On the other hand, there are cross-browser graphics APIs available. I've done largish front ends using XULRunner and SVG, but nothing on the web which had to cater for IE.
2/ The two I referred to most often were the SVG pages on mozilla.org and this SVG DOM reference . All of my SVG links are here on delicious
There's one existing editor at http://www.bpel4chor.org/editor/; also if all you want is schematics where all arcs are on a grid, you can do that quite well using divs and images without SVG. Or you could just go the lo-fi route
As #jwmittag mentioned <canvas> is an option.
It works in Saffari and Firefox 3, Opera 9, and people are developing support for IE.
You could easily capture mouse clicks associated with the current tool and properties.
Redrawing the canvas on every page display.
I just finished a project using <canvas> and it's a simple and very powerful API to work with, especially if you have ever done any OpenGL or Cairo work.
Good Luck, sounds like a cool project.