I'm looking for a way to load a virtual human (ie; a model rigged with a skeleton, preferably with moving eyebrows/etc) onto a web page. The functionality should be similar to the dated library Haptek Player (http://www.youtube.com/watch?v=c2iIuiT3IW8), but allow for a transparent background. Ideally it would be in WebGL/O3D since it can be directly integrated with my existing code. However, if there's an implementation out there already in Flash3D or a different plugin, I can quickly switch my codebase to actionscript.
I've investigated trying to send the Haptek Player vertices to a Float32Array (used by WebGL) using an npapi plugin. I can place the vertex data into a javascript array and draw the virtual human. The vertex data cannot be changed, however, since the array must be copied to a typed array (Float32Array) to be used by WebGL.
Thanks for any input!
try http://expression.sourceforge.net/
C++ and OpenGL
you can experiment with converting the code to javascript using emscripten
Related
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.
I have an algorithm in c++ which create an 2D table with float values, basing on that values I want to create svg graphics in html(or javascrpit). And my question is - can i anyhow make it in one code (creating that 2D array in c++, keep it in memory and basing on that, creating graphics by html), or better(/only possible?) would be for example saving 2D array to .txt then creating separately .html code in which I open the .txt file, read values and then creating svg graphics (if it is possible, i'm totally green in html/javascript).
I hope You can give me some advice guys. :)
JavaScript doesn't have access to ANY memory management in the browsers. You could probably only connect with http requests.
However there are parsers like Rhino, which allow for Java classes to be made into javascript objects and reverse, I have yet to hear of a C++ one though.
NodeJS allows access to the filesystem, thus any files you save will be accessible and there might be an api for C++.
You could use Emscripten to compyle C++ into JS, but it is hard.
You can write the table as json file that can be easy interpretted by javascript.
Or, my recomandation, use a svg library in C++ and skip html. see: Render a vector graphic (.svg) in C++
or search google.
If you are more specific about the usecase you would get batter answers:
How will the application run: part of a web site or local
Why do you need HTML
Who will use this: you want to convert some data to SVG for a small project or some other users will use your program for a longer time.
I'm currently building a texture classifier in the c++ api of opencv. I was looking to use this to recognise textures and ideally help a parot ar drone 2.0 to navigate to a specific texture. I have found the documentation on node copter and it's opencv bindings. I wasn't sure about whether this would require me to re write my program in javascript?
If there is some sort of interface then is it feasible to run my program in the background, pull images from the parrot analyse them and send back control commands to the parrot?
I have been working with opencv for about 3 months and have some basic understanding of node.
Thanks in advance!
There are lots of ways to interface with a Parot AR drone. NodeCopter is one option, but there are others. ROS has good AR drone bindings I've used which would give you tons of flexibility at the expense of some complexity.
You might also consider building your C++ program into a stand-alone option and calling it from Node.js. You could also interface with the AR Drone API directly.
It's not too hard to write a program to control an AR.Drone with some sort of OpenCV-based tracking. Javascript would probably be my suggestion as the easiest way to do that, but as #abarry alluded, you could do it with any language that has bindings for the AR.Drone communications protocol and OpenCV.
The easiest thing would be to have a single program that controls the drone, and processes images with OpenCV. You don't need to run anything in the background.
copterface is a Node.js application that uses node-ar-drone and node-opencv to recognize faces and steer the drone toward them. It might be a good starting point for your application.
Just to give an example in another language, turboshrimp-tracker is a Clojure application that shows you live video from the drone, lets you select a region of the video containing an object, and then tracks that object using OpenCV. It doesn't actually steer the drone toward the tracked object, but that would be pretty easy to add.
Does webGL contain push/popMatrix? and if not, how would I go about recreating them?
No, WebGL is based off of OpenGL ES 2.0, so there is no built in matrix management or fixed function pipeline. The model view and projection matrices need to be completely managed in your own code and passed to shaders at draw time. You really don't need push and pop matrix if you are using a scene graph or some kind of other similar scene management system. All you really need is a good matrix and vector math library.
If you are still set on using push and pop matrix, you could simply use an array of matrices, and write functions like push and pop that simply save your current matrix into the array and push or pop the index down.
I would get the OpenGL ES 2.0 programming guide if you need more help with transitioning to WebGL. The book's website here: http://opengles-book.com/ contains a download link to some source code with demos for a variety of platforms and languages including WebGL. It also contains a decent math library if you need it.
From what I see here and there, there is no native support but you can easily build such a stack with an Array.
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.