I want to draw some 3D network diagrams in a web browser, and the data for these diagrams are in a Rails app (in the database).
I already use flotomatic as a Rails interface for pretty Javascript plots (e.g., independent variable, dependent variable). Certainly there are packages for drawing simple things in Javascript.
What I'm looking for is (a) a Javascript package for 3D drawings that are displayed in a web browser (without a plugin), and (b) a Ruby API for that package, if possible.
Any recommendations? Many thanks!
I haven't found a definitive answer, but something like this might be useful:
http://www.canvasdemos.com/2009/04/05/processingjs/
http://processingjs.org/
In short, processing has been ported to javascript and makes use of the HTML5 canvas element.
Processing.js does not yet support 3D (as canvas doesn't support it due to lack of acceleration), but it shouldn't be a big deal to create a wireframe.
Related
There is a filter in MeshLab that I normally use to decimate (or simplify) 3D models that were 'photogrammetised'; to a lower number of faces (so that they can be viewed faster on mobile client devices). The filter used is the Quadric Edge Collapse Decimation preserving textures.
I want to do this in bulk and programmatically from the web server side; so that those decimations (or simplifications) are done in batch and then stored in backend system like Omeka, a digital asset management system, or any other similar system really. I am using currently Sketchfab to view the Web3D models (each has an .obj, mtl and bunch of texture images). Any WebGL library like Three JS or Babylon JS can be used.
The important thing here is that I am looking for any implementation of the MeshLab Quadric Edge Collapse Decimation algorithm for the web, ideally either in JavaScript (node), PHP or Python? Any libraries that make the batch decimation or simplification easy?
Thank you for any help and suggestions.
2021 update
now there is pymeshlab, which allows automatization of meshlab processing through python!
You could try MLX, my Python frontend to meshlabserver. The Quadric Edge Collapse Decimation filter is implemented as mlx.remesh.simplify.
There are quite a few ways of solving this issue, if you are using Python.
You can use quad-mesh-simplify. A lightweight package specifically for simplifying meshes with node features. The algorithm from Surface Simplification Using Quadric Error Metrics was implemented using cython.
You can also at the popular Open3D (as of v0.9.0.0) function - simplify_quadric_decimation
Hope that helps!
I came across this proof of concept earlier today (on TechCrunch.com) and was blown away and intrigued as to how they had managed to accomplish the end result. They state that they don't use webGL or any plugins yet they are able to interact directly with the GPU and render 3D visuals at up to 60 fps using nothing but Javascript. Any ideas how this could be done, or how to access the GPU from Javascript in general without the use of plugins?
Site Address is: famo.us
ps: Try using your arrow keys to shift orientation its far out!!
They're using standard HTML5 Javascript APIs to achieve this.
I saw several references to requestAnimationFrame in their code. This method allows one that uses a compatible browser, to display more fluid and optimized animations, with far better frame rates than setInterval based animations will ever allow you to have. This is certainly achieved by using the GPU and the available hardware background.
GPU or every other hardware component cannot be accessed directly using any Javascript routines. Instead, the browser, based on the called JS directives and the execution context, will use the GPU if possible to optimize some specific treatments, calculus and renderings.
EDIT
For future references, I recently found out (7 years after the original answer) that a new initiative - the W3C GPU for the Web Community Group, has recently been created in 2020 to do just that. It describes itself as follow.
The mission of the GPU on the Web Community Group is to provide an interface between the Web Platform and modern 3D graphics
and computation capabilities present in native system platforms. The
goal is to design a new Web API that exposes these modern technologies
in a performant, powerful and safe manner. It should work with
existing platform APIs such as Direct3D 12 from Microsoft, Metal from
Apple, and Vulkan from the Khronos Group. This API will also expose
the generic computational facilities available in today's GPUs to the
Web, and investigate shader languages to produce a cross-platform
solution.
In the long-term, this initiative might allow developers to directly interact with the GPU from all web browsers. You can track the implementation status of the WebGPU API Spec on Github here.
Concerning famo.us: they did analysed the bottlenecks of the Webkit rendering pipe and then found a way to bypass them while building the pages. Basically: the DOM tree construction, the Render tree construction, the Layout of Render Tree are bypassed. Take a look on this article for a whole explanation.
They're using CSS 3D transforms. Web browsers are increasingly using hardware acceleration to do these kinds of CSS3 things.
i think the webGL glsl.js library might be good for this, though i havnt seen benchmarks...
https://github.com/gre/glsl.js/
also this approach seems viable;
basically to use the gpu in the way we like to, hardware optimised functions (have a little look into "blas") are used, you do not want to write these! strangely it seems that people still use the old fortran blas.... there is some stuff with compiling via llvm and then using emscripten to turn it into javascript.
Use Emscripten with Fortran: LAPACK binding
the emscripten way seems the most versatile, im just about to check it out, but it looks like a mountain, also this topic seems to be somewhat of a call to arms, emscripten only works with fortran if you hack it (see links from the second link). i think what we are looking for is blas support in javascript, this is not a closed issue by any means, and for a few of us out here it is very frustrating! hopefully someone has a link to these blas libraries we cant find...
please let me know if i dont quite have my head round this issue, js is new to me.
also, suggesting html5 is sufficiently "optimised" to use the hardware, how can we trust this!? we need gpu optimised blas (basic linear algebra subprograms) e.g. dot product.
i think maybe also that these old fortran blas arnt actually the right thing for a modern gpu? node-cuda seems very likely the best thing i have found...
We are developing a web application for CAD designers, existing similar projects are:
http://mydeco.com/3d-planner/
http://sunglass.io/
These projects are implemented using either SVG or Canvas. My question is:
Considering SVG and Canvas, which one is better for similar projects?
Since Canvas only provides a bundle of low-level APIs, is there any existing libraries that handle object rendering, layer management, conflict detection, etc.? For instance, with wxWidgets, Qt or MFC, developers do not have to care about window overlay and rendering in a window system.
Thanks a lot :-)
UPDATE 2
OK, I've read the posts and I'll try to avoid such kind of questions. Now I've found out this library:KineticJS, which also implements some of the functionalities of SVG. I'm trying to use it and will come up with a conclusion later.
UPDATE
Thank you Richard. Moreover, since we are deploying this application to iPad, we are trying to find out an efficient and easy-to-use technology to build it. In 2D environment, does Canvas perform faster than SVG? Is there any pitfalls of SVG on iOS devices? Thanks a lot.
Just to answer from personal experience, I have had more success with SVG in 2D projects and better results with canvas for 3D.
If you want a good library for creating 3D on the client side I would look at threeJs from the amazing Mr Doob.
http://mrdoob.github.com/three.js/
It can use canvas or WebGl for faster rendering.
Hope this helps.
I had created an HTML5 Canvas WebGL game in January for the Mozilla Game On 2010 competition (pretty late, I know - I never released it until yesterday). Now I want to port it to Flash ActionScript 3.0 for a college assignment.
I'm well versed with both static languages like C/C++ and Java; and dynamic languages like Python and JavaScript. However I don't know ActionScript, but since it's a subset of ECMAScript it should be pretty easy to understand.
I want to learn programming in ActionScript 3.0 so that I may be able to port my game in Flash. To be more specific, I want to know more about:
How is ActionScript different from Browser and Server-Side JavaScript, and basics.
OpenGL programming in ActionScript (including loading textures, shaders, etc).
How to create a HUD in Flash using a 2D HTML5 Canvas like API (in my game I have 2 canvases, one for the 3D game and another overlaying it for the heads-up display).
Support for vector and matrix calculations in ActionScript.
How to load assets like audio and sprites in Flash.
I would appreciate it if you would provide me a link to a page from where I can learn more about these topics. A more direct hands-on approach would be preferable.
It would be even more helpful if you would check my source code in JavaScript and suggest the best possible way for me to tackle this problem.
The code for the main game engine and the game itself may be found in my Github repository.
ActionScript and JavaScript are very similar at their core. In some ways you can think of ActionScript as more like a robust library layered on top of ECMAScript. There are a few differences (namely ActionScript likes to think of itself as a class-based oop, where as JavaScript is prototype-based), but if you are comfortable with one, then you should be pretty at ease with the other.
ActionScript has a class based inheritance system and supports interfaces (but you can still do some prototypical magic if you want, but its not recommended). It also supports strongly-typed objects.
var object:MovieClip = new MovieClip();
This will strongly type the object variable as a instance of the MovieClip class.
If your game is very 3D intensive, then you'll want to look into the new Flash 11 Stage3D and Context3D classes. These expose a low level GPU accelerated API that before Flash 11 wasn't possible. You can do interesting 3D stuff with Flash 10, but you are usually using drawTriangles(), which was not hardware accelerated. Flash 11 is currently in beta, but it should be out very soon. There are beta versions of the Flex SDK that should let you compile targeting the Flash 11 player.
There are also quite a few 3D libraries that are built on-top of these low-level api. If you goggle around for them, they are easy to find. But I would recommend getting a solid understanding of how ActionScript works before diving into the 3D libraries.
The HUD stuff in flash is simple whether you go with Flash 11 or Flash 10. For "classic" flash, you'll want to get familiar with the display tree concept they use in flash. Just make sure the display order is correct, and your HUD DisplayObject will always be "on-top" of your rendering DisplayObject
For Flash 11, StageVideo and Stage3D objects sit directly above the stage, but behind all normal flash DisplayObjects that are attached to the stage. So in that case, I would let the Stage3D api take care of all of your heavy rendering lifting, and use the traditional display stack for your HUD elements.
You'll probably also want to grab yourself Flash Builder over Flash CS5.5. If you are a programmer (which I am assuming you are since you are posting here), it wont make your eyes bleed trying to code. FB is based off eclipse, and its pretty decent but not perfect. But if you grab yourself the free Flex SDK, and don't mind using the command line, you can get started compiling swfs pretty quick and cheap (aka free).
Also, look into FlashDevelop. I haven't used it in a while, since switching to FB for its built in profiler, but it might be of use to you.
Importing images and audio is pretty straight-forward with the Flex SDK.
[Embed(source="logo.gif")]
public var LogoBitmapData:Class;
and then later instantiate the class:
var bitmapData:BitmapData = (new LogoBitmapData()) as BitmapData;
And then use it where ever you want to.
Just a note about the Flex. Flex is a set of UI libraries built on top of the normal Flash API, the Flex SDK includes the libraries and tools to compile MXML and ActionScript code files. So, despite it sounding like you should use the Flex SDK to compile Flex apps, you can use it to compile straight ActionScript code as well.
There are built in classes for Vector3D and Matrix3D.
As far as tutorials or references, I don't have any to offer really. I've found that most of the information on the internet about ActionScript programming is pretty hit or miss (when you can find something thats not written by a graphic designer). I'd dig around in here and see if you can find anything that makes sense to you.
There is obviously a lot more I could go into about this stuff, but hopefully this will give you a push in the right direction.
Welcome to AS3 :)
#32bitkit beat me to the IDE info, but I'd absolutely recommend Flash Builder. It's a real tool and worth the money if you're going to be doing any real AS3 work.
As far as actual tutorials, Senocular is known for writing some of the best content out there. He has a number of great tutorials here, but the following two are especially excellent introductory tutorials for AS3:
AS3 Introduction in Flash CS3 This tutorial is good because it explains the differences between AS2 (very JavaScript-like) and AS3. Ignore the fact that it's based on using the Flash "IDE."
AS3 Introduction Without Learning Flex This one is useful because it give more of an introduction to the language itself, without all of the trappings of the IDE or the Flex framework. It will help you understand the language itself.
As shown in that second tutorial, an AS3-based project will inherit from the flash.display.Sprite class. You can view the docs for that here. Perhaps it sounds silly, but you'll honestly learn quite a lot about AS3 by just browsing the AS3 Reference docs. Adobe has done a good job with those.
Another thing to be aware of in AS3 is how events are handled. This tutorial explains how the EventDispatcher class functions as the base of the event management. You can use the built-in events or dispatch your own.
HTH!
Is it possible/what is the easiest way to take 3D model from max and create a Flash or Javascript carousel that can work on the web? It should function like a real world CD carousel with say 100 or so models built in.
(http://www.thechiplab.com/stacks/Untitled-2.jpg)
Buttons on each side scroll through the chips. Thanks so much for looking at my question. This is my first one and I didn't see any similar questions asked. Sorry for not embedding the image...it wouldn't let me because this is my first post.
Chase
For working with 3D graphics in Flash you can use a library like Away3D or Papervision3D (the latter used to be the main one, but the former seems to have more momentum these days.)
Away3D will get hardware acceleration once that is available in the next version of Flash, but for now the complexity of your graphics will be limited by the software renderers. As a result, I don't know if a 100 disc carousel is really feasible.
Another option for doing web 3D is WebGL (already mentioned) but that's not supported in every browser yet (if ever, darn IE.)
Yet another option is using Unity. Their plugin will work in more browsers than WebGL, but is not installed as widely (or rather WebGL doesn't require any plugin.)
The specific file format you would use varies with each platform/engine, but the most common file format for web 3D is Collada. The best Collada exporter for 3ds Max is at http://www.opencollada.org
I'll just add this to #jhocking's (correct) answer:
I've used this asConverter max script to convert 3dsmax models into native Flash AS3 classes on a few different projects. Whats nice is that it exports to / extends native classes (extending the TriangleMesh3D Papervision class, for example). This way, you manage to bypass some of the issues you run into when exporting models out of 3dsmax. I've found it to produced quite reliable results - well formed geometry, and good uvw maps. It has support for PV3d, Away3d, and Sandy.
It looks like a defunct project now, but it was reworked by Mr. Doob at some point.
btw #jhocking: did you know Unity is going to support AS3 / export to SWF in the "near future" (when molehill releases, I assume)? Unity is an amazing application, and export to SWF would be... great.
You can certainly do this with Flash, but it is also doable with WebGL in some HTML5 supported browsers.
If you haven't worked with programming/JavaScript, you could have a look at something like copperlicht. If you are interested in coding, there are plenty of good WebGL frameworks around such as:
scenejs
three.js
glge
spidergl
canvas3d
As for the models, you'll need to export them into a format supported by webgl, for example into json objects.
Flash is of course another option, but I'll leave that option for somebody else to go into detail with.