Develop Reference

3D interactive map using Three.js

I want learn three.js but i don't know where to start. I don't have knowledge about it but i really want to study and learn. I'm planning to develop an interactive 3D map using three.js. Please help me and give some advices.

Three.js is a JavaScript library which means it will be best to start learning JavaScript first. A great start will be W3schools.com which is made by a Norwegian software development and consulting company to educate people interesting in programming with the standard of programming. On W3schools.com they have a JavaScript course which teaches the fundamental of JavaScript like how to use the DOM, make interactive website, and other fundamental concepts. After learning the fundamental of JavaScript I would go on Three JS website and learn their documentation which is https://threejs.org/ and click on documentation.

Recommended API and IDE to work with WebGL

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.

What do I need to learn to build interfaces similar to LucidChart

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.

Famous libraries for implementing 3d in javascript?

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.

How can I detect faces using Ruby?

Can anyone tell me how to detect faces in a static picture using Ruby or Javascript?

If you are going to try and write something from scratch, there is a great explanation of the process on the Carnegie Mellon Website - neat graphics too.
However, your best bet is probably trying to hook into the Opensource Computer Vision project. Here is a good tutorial on using OpenCV for facial recognition.

Since the other answers to that interesting question are mostly outdated now, here the 2012 solution:
Using jQuery with jquery.objectdetect:
$("#faces").objectdetect("all", {classifier: objectdetect.frontalface}, function(coords) {
// Do something with the face coordinates
});
Using jQuery with jquery.facedetection:
var coords = $("#faces").faceDetection();
// Do something with the face coordinates
Not using jQuery: Both plugins are based on stand-alone libraries that do not depend on jQuery at all.
In reply to #joeforker who said
"If you really don't understand that the notion JQuery can detect
faces is a joke, you need to learn a lot before you will be ready to
detect faces."
Or you just have to wait a year or two ;)

It looks like you are new to programming. Perhaps you have an advanced mathematics degree? If you really don't understand that the notion JQuery can detect faces is a joke, you need to learn a lot before you will be ready to detect faces. If you're lucky you can find an easy out-of-the-box solution. Unfortunately, face recognition is in the class of problems that tend to lack easy out of the box solutions. JavaScript is right out.
http://rubyforge.org/projects/opencv/ is a Ruby binding to OpenCV. The pitiful documentation (autogenerated API docs only) at http://doc.blueruby.mydns.jp/opencv/ mentions a face_detect.rb that might be helpful. As with most bindings, you should also consult the documentation for the original library e.g. http://opencv.willowgarage.com/wiki/FaceDetection
You should also understand that face detection (where are the faces in this photo?) is a different and easier problem than face recognition (whose face is it).

I do not know if this question was properly answered or how you resolved it, but I recently encountered this problem myself. I'm currently investigating external API's to implement my solution. The two Ruby API's that I am currently comparing are rdetection and Face.com's API
I'm primarily using it for face-aware image-crop using ImageMagick, so your needs and results may differ.

Detecting faces reliably is one of the hard problems in Computer Science. Realistically, there's no practical way for you to do it using Ruby, JavaScript or any other application language using current technology. If you tell us why you need to detect faces then we might be able to suggest a practical alternative approach.

Collect a lot of cash and contact these guys for a good solution!
Wikipedia has a good article about this which also explains why you're trying to do something that is still extremely complex to do.
FRGC is also interesting... If you do find a solution, you can take part in this challenge.

This is a face recognition tutorial using Javascript and face recognition APIs using Mashape - http://blog.mashape.com/post/45712257463/face-recognition-using-javascript-and-mashape
It also lets you detect if the person is smiling or not :)

After some research and help from this thread I've decided to make a rubygem which can be found here:
EDIT:
Unfortunately rekognize decided to discontinue their services making this Gem obsolete.
This uses the face recognition API from rekognition.com.

Javascript Neural Nets have been used for OCR so should be possible if much harder for faces.

Face detection is done using intensive memory based algorithms, which actually go through the image data to detect face like patterns. They may be many facial recognition / Pattern recoginition algorithms and APIS available for free (or for a fee) which you can use/implement with Ruby or Javascript.

I know this is an old question, but if anyone happens on it like I did check these out: blog post, test page, and Github.

This should get you started. It's about using OpenCV with Ruby via FFI: http://rubysource.com/detecting-faces-with-ruby-ffi-in-a-nutshell/