We have to display huge SVG documents (about 20mb) inside a web application. Users should be able to zoom in and move the image.
Rendering the SVG directly as a DOM object is too slow and the performance is inconsistent. The same applies for painting it on a canvas.
Generally, handling SVG on the client side seems weak. So I thought of implementing a server-side solution for providing the data in small chunks, in a non-vector format. If the user is not interacting with the document, the buffer starts lazy loading higher detailed pieces. My concern with this solution is, that the network traffic could be critical.
We will be rendering 2D DWG / DXF files, which will be converted to SVG.
The AutoCAD API seems really slow. The DWG sample does not work on any of our devices. Also, the application has to run without an internet connection, so we can't use the AutoCAD REST API.
How would you solve this? Are browsers even built for handling huge vector graphics?
When it comes to SVG it depends on the number of nodes, gradients, opacity and blur effects; however, why not use the end-user's graphics accelerator to handle this?
Most modern web browsers are made to support graphics acceleration through WebGL -with which you can build very complex (and "huge") rich graphics in 2D (or 3D) that is handled as fast as your graphics accelerator can handle it; exactly like modern games.
Using a WebGL library is recommended where a lot of work has been done for you already:
PlayCanvas : https://playcanvas.com/ -- you can import other formats, build & script your scenes with a friendly interface. PlayCanvas is well documented.
Three.js : http://threejs.org/ -- an advanced WebGL library, aimed at coders. ThreeJS can also handle many different types of 3D formats and this library is also well documented.
With Three.js you can also render your graphics as SVG, however, using WebGL is recommended for the obvious advantages in speed and quality.
Both of these libraries are very powerful, have an active community and is well supported in modern web browsers; however there are many others you can try.
For more information on the libraries mentioned above, it's best to visit the sites where extensive information and examples are available.
Instead implementing yourself, I would suggest you use the Autodesk Viewer, also available for developers with full REST + JavaScript APIs.
Basically this library will convert your DWG file (2D or 3D) into a JSON stream and adjust the amount of data according to the browser/device capabilities. It uses Three.js, but you don't need to handle the geometry directly (but you can).
Check the Forge Github for samples. I like the Galley better.
You may also run it locally using NodeJS to server it to the browser. The Extract sample does the whole process.
Related
I have a client that needs a browser based user-interface with complex moving, constantly changing graphics.
Example of the kind of graphics we need to support, it must flow smoothly, at least 10 frames per second (the gif-conversion is making the annoying choppiness of the image):
We traditionally implement this using the LibGDX library to generate 2D graphics on the fly.
However the client sternly demands we follow some directives that make the traditional method forbidden and since we are not web developers we are stymied on what methods remain to be used, if any.
Allowed:
pure javascript
html/css
Not allowed:
canvas
frameworks (ajax, jquery etc)
transparency effects
> 8-bit images
Solutions we thought about but did not test yet so we don't know how viable they are:
Generate the full screen graphics in the backend and transfer to browser 10 times/second
Generate the changed parts of the screen in the backend and transfer to browser up to 10 times/second (less bandwidth/image decoding than #1)
We looked at CSS Animations but not sure they help since they have limited functionality.
Are there other solutions/capabilities of the browser (chromium 69-compatible) that we can use to enable this kind of graphics?
So, I have thought about designing a WebGL Graphics Engine, which will facilitate designing 3D Interactive Graphics for web. Now, my question is :
WebGL is Javascript API, so in order to design an engine for WebGL graphics, do I need to have a JavaScript compiler or anything ? What I want is a system which will let users see what they are creating (for example, like blender workspace, if you draw up a scene you can see and make changes simultaneously)
You would have to create some kind of engine, or framework that you'll build your system onto.
Creating only framework/engine would take at least 2-3 months, and if you plan creating something really big and advanced, that supports various effects rather than simple rendering primitives, than that might come down to 5-6 months. After that you could start creating your web application. So 6-7 months time for that? That shouldn't be a problem.
I don't know how advanced you are, how many people are you working with, but that seems very plausible and doable. But is worth of it? In a year, many different things will change, maybe new openGL ES version for webGL, changing api, supported browsers (IE recently joined the game),... it's really questionable.
You wouldn't need any kind of JS compiler or anything like it, just knowledge of advanced JS and many different techniques used in 3d, and since you plan building system that is far beyond just-graphic-stuff, then it adds even more to overall complexity and time consumption.
So, to answer your question: yes, it's very doable in a year, but will it pay off?
Similar things already exist in some form:
http://errolschwartz.com/projects/threescene/
http://badassjs.com/post/12885773103/threenodes-js-a-visual-webgl-scene-editor
CopperLicht engine has its own real-time editor
there are more lab-playground-like editors
I'm looking for a good plugin for:
a) rapid rendering of
b) lines, shapes, and imagery on top of a
c) rectangular canvas area who's size can be declared at load time.
It needs to run at 20-30fps without putting a heavy load in the browser. It also needs to be able to interface with JavaScript and the DOM.
Creating my own Flash plugin is the first choice, but I'd like to aim for a free, open-source and/or non-proprietary solution first. HTML5 canvas is out of the question - it renders way too slowly.
Anyone happen to know of anything that does these features? (I'd even be okay with a pre-made Flash plugin that meets the requirements mentioned above)
Your request is still vague. What do the lines and shapes need to do? Sit there looking pretty?
If your lines, shapes, and imagery are going to be fewer than say 5,000 objects total, I'd recommend using SVG and perhaps the Raphael library to go with it. Every SVG object is a DOM object from the get-go, which will save you some associated headaches with trying to use Flash or Canvas.
If you really need a lot more performance or plan on having 50,000 objects on screen, Canvas may be for you.
"Creating my own Flash plugin is the
first choice"
I'm unclear what you mean by "plugin" here - I assume you just mean "flash file" (an SWF?).
I think #WTP is making a good point. You say "rapid rendering" but of what? how complex is it? Flash has very good speeds when it comes to vector graphics, and much faster rendering of optimized bitmap data (the technique of choice is blitting here). It all comes down to optimizations / complexity of graphics. No matter the plugin / tech solution, you will always be able to cripple a machine with inefficient design.
To answer your question, Flash will definitely meet your needs.
I would also venture that Canvas/JS would as well, but apparently you've tried that already? I've seen quite complex scenes running quite rapidly, so that surprises me.
I'll note, also, the upcoming Molehill APIs for Flash. This provides low-level access to the GPU - and will create the potential for breathtaking 2d/3d performance in the browser. But its still in alpha, so... don't hold your breath ;)
I know of only four major players in the "Vector graphics capable" department -- HTML Canvas, Flash, Silverlight, and Java applets. Aside from canvas, all them are proprietary in some way or another. The good news is that all of them have the ability to compile for free in some way or another and they are generally faster than canvas by my understanding. Now, I happen to know Flash so that might color my opinion, but I am fairly certain that it is your best option. It has decent performance and a solid install base. It also runs on Linux and does not raise major security issues.
Look up the Flash Builder (Flex) sdk. There is command line compilation for it.
I am developing a web application that should display data points below the Earth's surface. It should also include user navigation, zoom, and rotational capabilities. It reads in the data from a XML file and should display 500-1000 spheres. Ideally, I would like to use HTML5, but it doesn't run in IE8.
This is a Flash application that is somewhat similar to what I want (minus the globe around the spheres):
http://demo.tufat.com/applets/molecule/index.html
There is also a good jQuery application that allows for 3d rotation out there.
So, the question is JavaScript/jQuery or AS3? I know Flash handles large amounts of data better but is Flash dying out? The application must run efficiently on most browsers.
Flash is not dying. I am not sure which Blogging Social Media Expert told you that.
Choose a language and just stick with it. Unless you know how to handle your memory and work with Paper Vision or Unity you should go with JavaScript for most likely you will end up with leaks if you do not do garbage collection, 500-1000 spheres is alot.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm looking for javascript libraries that helps with HTML5 development.
Please only post one library per answer, and don't forget to describe it.
Modernizr is the best way to detect which HTML5 features a browser supports.
"Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games."
Raphaël — Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
I'll post about Easel.js and it's sibils hoho. They're from the same developer GSkinner I post all related libraries because of this. I've just used Easel a little, but the others seem promising. I post the URL and their description:
Easel.js
The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.
It supports TweenJS
TweenJS provides an extremely simple API for creating complex sequenced animations in Javascript. It includes basic (experimental) support for working with style sheets.
Also supports SoundJS
Audio in HTML is promising, but can be quite difficult to work with. Each browser has a similar but different approach, which requires a lot of guess and test, and edge cases, which can add up to a lot of time spent. The SoundJS JavaScript library provides a simple API, and some powerful features to make working with audio a breeze.
And Zoë
Zoë (from Zoetrope) is an open source application for OSX or Windows which provides an easy way to export Flash animations as sprite sheets for use with EaselJS and HTML5.
Simply drag a SWF file onto the application. It will scan the main timeline to find frame labels and dimensions. You can tweak the frame bounds, edit settings, then export a sprite sheet image and EaselJS code defining a SpriteSheet instance with frame data based on the timeline labels.
SWFs should have all animation on the main timeline, with frame labels to indicate the start of animations. Nested graphics are fine.
I haven't used them all but seem quite interesting =)
html5sql is a light JavaScript module that makes working with the HTML5 Web Database a whole lot easier. Its primary function is to provides a structure for the sequential processing of SQL statements within a single transaction.
The only one I have found is html5widgets.
I would have assumed that there where several competing libraries for this.
But it does implement most of the new html 5 form goodness, which is what I care about...
Check out RGraph.
Available at http://www.rgraph.net/
Complete set of graphs for html5.
Free for non-commercial use, else it is 49 Pounds (English)
I use Perkins HTML5+CSS3 framework "He" describes himself as following:
I am a Framework thought to make the life of designers and developers a bit easier. I use the latest Web standards, also known as HTML5 and CSS3. To take more advantage and allow you not to repeat yourself, I am based in LESS.js, which means that you can forget some of the proprietary browser prefixes. Also, I carry a number of preloaded basic styles, mixins, helpers, transparent textures and a #font-face driven icon set. If HTML is your passion, I can help you to make wireframes quickly using the dynamic grid, based in Tyler Tate's 1kb CSS Grid which is already included and can be configured in the perkins.config.less file, as well as many other options.
CreateJS is a good collection of HTML5 library.
http://www.createjs.com
While more than a javascript library HTML5 Boilerplate looks really usefull.
"HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site."
ExplorerCanvas — Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.
RoCanvas.js
Creates interactive drawing board that lets users draw on your site (can be useful for avatars, or much better for colaborative projects, learning etc