I'm about to use WebGl in a academic project to preview some 2d and 3d models in a given format.
While I'm reading some documentation, I would like to know, from your experience, what would be the best API to speedup development and abstract some low-level calls and also the best IDE to work with it.
Cross browser compatibility is not a major problem.
I've decided about WebGl because I would like to create a web interface for my project to help sharing my progress.
Do you even recommend using WebGl for that?
At the end of the day, an IDE is only meant to help a little, you do the hard hauling, having said that, the best editor(s) I use for javascript are Sublime Text and Netbeans IDE
Then as it was already stated, Chrome DevTools is your best bet for debugging.
API
Three.js is really awesome to work with regarding developing WebGL apps. It makes creating what you want very easy (create a scene object, create some things you want to show, then add them to the scene and render. No need to mess around with GLSL and low level stuff right off the bat, although you could if you really wanted to).
IDE
Chrome's console and various tools are great for debugging in general. You can use whatever text editor / IDE for javascript that you want.
API (Framework)
If three.js is hard for you, or you are professional developer who just don't want to spend his time on simple things like setting up environment(scene, camera, renderer) you may try whitestorm.js.
WhitestormJS framework is a wrapper around three.js (you can use both at once, like jQuery wraps DOM). It has some extra features:
Built-in physics of Bullet Physics 3, even softbody physics (You can use light version without physics.
It has component structure (like ReactJS). You can share your plugins, components and use the ones from others.
*WhitestormJS is non-commercial open-source project by three.js fans.
Related
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
We are building a web app library which need draw some polyline/polygon/circle/rectange.
Also we want these vectors can be edited.
So I wonder if there is a cross browser draw library can be imported to our codes?
I know Raphael,however I think it is too strong,I mean there are too many features we do not need.
Also we found this,it render the vector using divs pixel by pixed. But we think the effect is not good.
Any suggestion?
I totally agree with Sirko's comment, stick to Raphael. There's nothing quite like it when it comes to cross-browser compatibility. Other than that, you could take a look at John Resig's port of the procressing library (which is a pretty mature visualization language).
Here's a link to their demo. Basically, it's an online tool that implements a lot of the visio functionality.
I'm building an app that would require similar type of user interaction, dropping, moving, editing, resizing objects, interacting with grids and guides, etc.
Since the project is for my own learning purposes, I was wondering what are some of the things I should focus on or learn to be able to develop such high quality interfaces
Cheers
There's draw.io, a very similar tool, but with the source on github.
To build such a rich user interface is a big task.
Which is why there are lots of frameworks and libraries which have already developed rich user interface stuff such as:
Sproutcore
Cappuccino
ExtJS
Dojo
jQuery UI
Sproutcore and Cappuccino are for developing desktop style applications for the web and include very good user interface components. As well as maintaing application states and data models. ExtJS has a lot of these features and a very nice UI toolkit, as does Dojo.
Lucidchart I notice uses the Canvas drawing API as well so thats something you would need to look into for shape manipulation and creating flexible connections. Mozilla Developer Center has some good stuff on the canvas API.
I would start off by taking a look at the Raphael library.
It allows you to write pretty simple Javascript code to draw graphic elements in the browser, including pretty straightforward animations and draggable/clickable interfaces.
In all honesty, it's not going to be quick and easy to write something as complex as the site you linked to, but Raphael is the quickest way to get started with the basics.
And best of all, Raphael is even compatible with older versions of IE, so you don't have to worry about only being able to support the latest browsers (though of course you may want to do other stuff that does need other new features).
Hope that helps.
Which are the famouse 3d javascript libraries? By famous I mean something that is as famous Jquery is to web developers. By famous I mean things are properly documented and many resources are available i.e tutorials/books etc for newbies. I am trying to learn three.js but having hard time figuring out how to use because there isn't much documentation available for this. On top of that it is javascript so not even intellisense benefit ;) What are the other options for this type of 3d stuff? I am mainly interested in WebGL and Canvas.
Due to the great work of Mr. Doob (i.e. rome), three.js is quite famous.
If by famous you just mean 'popular', why not let google decide for you? When searching for JavaScript 3D Library, google seems to think the following is most popular.
http://www.c3dl.org/
It seems to fit your criteria, WebGL and Canvas.
I am holding back on seriously pursuing ProcessingJS pieces mostly due to the bloat of the library. I have found that pieces like Ball Droppings do not use the library's Processing syntax parser, which is good, since I imagine it would slow down the page more, especially adding to the initial load and setup time. Still, I am wondering if it's worthwhile to use it basically as a big utility library like UnderscoreJS. For example, how good is its implementation with SVG compared with the other libraries out there today like RaphaelJS? Has anyone gone through the implementation of the Processing API extensively enough? When I skim through the I see a lot of boilerplate I don't really need, as well as a couple instances of questionable coding practices. But the library still seems to perform decently, at least on the ProcessingJS homepage, although the examples are set to run at 15fps, and not the (in my opinion) minimally acceptable 24fps.
I think it strongly depends on the project you are working on and the background knowledge you have with the processing library.
Processing.js is a great choice if you already have learned the original processing api (java) and want to leverage your existing knowledge in the web environment. It might be the only choice if you want to port an existing project to the web - actually this is probably the best time to use it.
If you are a JavaScript programmer and don't know much about processing you probably will dislike to write Java syntax in the browser and everything becomes even more problematic if you have to mix it with js. The API doesn't feel like JavaScript and there is a lot of code that could be written more elegantly.
Regarding performance it is not a bad choice, actually most projects run smoothly and I can definitely recommend using processing.js on circumstances like those explained above.
Here is great list of various javascript engines out there:
Javascript Graphic/Game Engines
It is hard to recommend a single library, as the requirements are specific to each project.
For simple graphics/diagrams: RaphaelJs is really nice and performs decently
how good is its implementation with SVG compared with the other libraries out there today like RaphaelJS
Processingjs doesn't use SVG as far as i know, it only uses canvas. Raphaeljs only SVG. There's an interesting read here and also at wikipedia about the difference. The main difference is SVG stores the vector data of objects so you can easily change position, colour, etc... of stuff but also provides mouseover events. Canvas - and processingjs - does no such thing, it draws to the canvas and forgets everything so you have to do more work. Don't know about performance difference between the two.
As far as the processingjs API is concerned, I don't have any clue as how it is implemented but since John Resig of jQuery is involved it can't be that bad to say the least.
I agree with user hlfcoding that writing java in browser feels weird. I am too looking for a cleaner solution for my future canvas experiments.
I fail to see how re-rendering for each frame in JavaScript can be seen as performant.
That's exactly how canvas works, you have to calculate and render every frame in js, it's not processingjs specific. I don't think that's such a performance hit, behind the scene a browser running SVG does the same anyway.