I have background on Canvas 2D context, but i want to perform a 3D animation like this one, is Three.js library the best choice to do such animation? Can you point me to some useful tutorial or documentation that may help. Thanx in advance.
That's one of the most common choices.
As WebGL enables OpenGL without the need for libraries, you might also do it with just Vanilla JS but that would be harder as WebGL doens't offer much more refinement over the raw and crude OpenGL.
Apart three.js, you could also try GLGE or PhiloGL but as Three.js is the most popular I would recommend to go for it if you have no specific requirement.
Looks like the demo you linked to is using a canvas library called Clay.js. Not one that I've personally heard about until now. For 3d in canvas the most popular one I know of it Three.js as you already mentioned. It has the benefit of supporting webGL as well (browser based openGL variant).
Three.js has limited documentation and some examples but outside of some books you may buy there isn't a lot of hand holding. You basically need to dive in and start coding. Here are some online resources that may help you get started (not necessarily all focused on THREE.js):
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://learningthreejs.com/
http://learningwebgl.com/blog/
To make it easier to work with THREE.js Jérôme Etienne created a project called tQuery which you can think of kinda like jQuery. A wrapper to make it easier to get your hands dirty. Here's a video where he shows how to create a webGL game in 10 minutes.
Related
So now I can pretty much do almost whatever I want in 2 dimensional games/apps, using HTML Javascript Canvas.
Problem is now I want to make some 3D applications, but have NO IDEA where to start.
3D is completely new to me and I think regardless it seems like it will be very difficult for me to learn, but I want to try - I just don't know what to do now.
I've looked into three.js a bit, but it's chinese for me.
Thanks!
start learning from three.js
three.js
you can create mini to almost-enterprise quality of application with it. But here is a little issue, if you think about creating large games, where you need to put a lot of collisions , you can try babylon.js
they are for your coding aspect. Besides, you need to learn blender/3d studio max. try to get the basic philosophy of three basic operations (i suppose you already have..) rotation,translation,scaling.
try to edit the examples of three.js and see what it comes, trust me, it is not that tough that you are thinking.
After that, you can try shader (GLSL). you can find many shader examples in GLSL playground and shadertoy
Also this website is legendary for learning three.js
and try some others libraries like playcanvas,unity3d(webGL)
happy learning
2d Gamedevelopment in Flash is very easy because of the included sprite classes and their individual mouse listeners.
i know there are thousands of gamelibarys out there ...
but whats the best Framework to get the same options in javascript with html5 canvas??
If you are familiar with Flash, you should look at EaselJS. It uses the same stage and sprite concepts. I've used it with a few games with great success. It's not a "game library" per se, so you won't get built in physics, etc. It's just a very helpful library for accessing the canvas. The same people make some other libraries for handling sound and resource preloading. If you want to see some samples, I have 2 on github here. RRZA actually has a stripped down branch for a talk I gave.
I started to learn webgl, but it's very hard, so I dont know a lot of things. How do I move the camera in the 3D space and how do I set, where to focus?
WebGL is quite low level and doesn't support cameras as such. If you want to see details please refer to this tutorial which is a part of a big tutorial series you might find helpful.
I would recommend you to have a look at three.js which is a lighweight 3D engine built on top of WebGL. See this HTML presentation for a nice introduction into this library.
I've started a new open source project aimed at providing a quality project management experience. To do this, I need access to a set of chart tools (Flash is off the table), and very specifically one that includes a Gantt chart. I've done my homework and shopped around the web and I've more or less come to the conclusion that what I want doesn't exist, at least not for free. So chances are I'm going to have to write this from scratch.
If I was going to create a Gantt chart with which people could interact with (which I'm assuming means having excellent DOM support), then what technology would I use? Should I go with SVG? Or HTML5 Canvas? Something else? Your suggestions are much appreciated.
Also, a requirement would be that whatever library I use needs to be actively supported in the community (i.e. no dead projects).
I would not think there would be many free options as this is a niche-need.
JS Option:
http://www.jsgantt.com/
http://code.google.com/p/flot/
Promising Perl modules:
http://cpansearch.perl.org/src/DARNOLD/DBD-Chart-0.82/dbdchart.html
http://search.cpan.org/~awestholm/Project-Gantt-1.03/Gantt.pm
Update:
There's been amazing advancements in terms of interactive/web charts in the past few years. Shortly before your question was asked, D3.js was created, which has become a generally accepted library, which uses SVG to implement visualizations. Here's a basic example and a more advanced implementation using D3. Note; Gantt charting is still in its infancy; D3 will most likely revisit it in the future.
The argument of Canvas vs SVG is one that has been considered many times. You should read this article by Microsoft; How to Choose Between Canvas and SVG for your Site. Basically, if you have many elements you have to display, Canvas will perform much better. If accessibility is a priority, SVG is better.
In terms of working with Canvas vs SVG, canvas feels more fluid and it is certainly more capable with WebGL, but SVG is more transportable. They both have their merits.
If you're going to make your own, I'd recommend the SVG library Raphaël, which allows you to draw things using SVG fairly easily. It's also simple to make mouse event handlers and other things, which you could use to make it interactive.
I haven't had much experience creating interactive graphics with canvas, but my instinct is that it would be hard to handle mouse events since you don't have "elements" to add event listeners to.
I want to make a demo using javascript and <canvas>, I was thinking of doing a little moving creature, seen from the top and swimming in a water environment.
Concept "art" :
Is there something I can use to start this project, or do I need to create everything from scratch ?
Here's one demo
http://code.almeros.com/code-examples/water-effect-canvas/
http://rumpetroll.com/ is open source and has the kind of movement you could probably modify to do as you wanted
I'm not sure what exactly do you intend to simulate (or whether I got the conceptual art :) ), but this might be a direction:
processing.js is not a physics engine, but rather a graphics library port to javascript (utilizing canvas) - http://processingjs.org/ .
However, you might find something in their demos that is similiar to what you are trying to create.
One of the original processing library examples has a nice fluid simulation using a particle system, and it runssuccessfully on processing.js - http://processing.org/learning/topics/fluid.html , however the framerate is very poor. You can try it yourself at http://processingjs.org/learning/ide - just copy&paste the code from the example (and prepare for your computer to crawl to a halt).
You can try to adjust the particle numbers (pnum), to improve speed, and play around with other variables.
Sorry I don't know of a library, but I did see a water physics in canvas demo recently:
http://hakim.se/experiments/html5/wave/03/
Maybe you can get some inspiration there...you might be able to accomplish it with a normal JS physics library like Box2DJS.
Just an idea, but you could search for a Java engine and then use GWT to compile it to Javascript.