Famous libraries for implementing 3d in javascript? - 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.

Related

How to build: 3D Canvas objects and manipulation - tylko.com

Just wondering if anyone can guide me into how this site was built: https://tylko.com/shelf/bookshelves/
I've seen fabric.js in use, but not sure how to go from there. Is there any platforms or services that would assist in creating this or it's a heavy custom-build project?
Thanks
Paul
This was built using a technology called WebGL
Based on your question, I understand that you are new to the field of 3D graphics, so I would highly recommend a higher level called 'Three.js' https://threejs.org
I recommend this because using WebGL from scratch is a very daunting experience, while Three.js is simply to use by comparison.
Introduction :
https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html
If you prefer videos, I would highly recommend this guy,
https://www.youtube.com/watch?v=8jP4xpga6yY
Here is a tutorial of something similar to what you're looking for :
https://tympanus.net/codrops/2019/09/17/how-to-build-a-color-customizer-app-for-a-3d-model-with-three-js/
If you're looking for a prebuilt one :
https://www.capterra.co.uk/software/156373/3d-source-product-configurator

webGL or voxel.js?

I'm studying JavaScript because I want to make voxel games (like minecraft type style) eventually. I've been told to use WebGL, but I've seen a lot of examples of minecraft type games using voxel.js.
So which should I use? Which one is better for voxel based web games?
"Which X is better" is rarely a good question. It depends on what you're trying to do, what you already know, your personal tastes, and a lot of other things.
That said:
voxel.js itself uses WebGL.
If you don't use voxel.js, you're going to have to roll your own voxel framework. That's a significant undertaking that will distract you from focusing on gameplay.
I haven't coded anything significant with voxel.js, but I've experimented with it, and it seems to be really solid. Also, it's still under active development, so its capabilities will only grow. Unless you need a specific feature that someone hasn't already written a voxel.js module to handle - and you don't want to write that module yourself for some reason - using voxel.js is the sensible choice.
So I'd say, don't reinvent the wheel. There's already a free, high-quality solution to your problem.

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.

Simple cross browser draw javascript library

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).

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/

Categories

Resources