Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I have 3D CAD model that I want to show on a web page. I'd like to show it in a form like a <img> tag (e.g. inline with everything else rather than as a separate page) and I want the visitor to be able to rotate the model to view it from different perspectives.
What options do I have?
Things I'm thinking of/looking at
VRML
3DXML
flash
PDF has something that works but it doesn't embed like I want
3DMLW (Seems very slow)
Universal 3D (supported by Adobe Reader)
Edit:
The model is not very complex so perf is not a major concern.
Chrome Experiments has released several 3D Javascript applications. Here's an example:
Colors Cube
Papervison3D is a 3D flash library which might be worth a look. I haven't had the opportunity to play with it myself, but some of the demos look good.
Papervision and Unity3D are the best choices for the pipeline in and quick loading. Flash is installed on most machined but you need to export as COLLADA format and there is a limit of 2000 polys before it bogs down.
Unity 3D has a great pipeline and is free for the indie now. It supports very high poly counts and the plugin installs without a browser restart and is around 4MB (Flash and Sliverlight are both over 4MB now).
Another option might be Torque 3D but that is also very game based. I think your best option is Unity 3D. You can export as FBX and have it on the web in about 5 minutes.
In the future you could use O3D from Google or WebGL but it is not ready for primetime. The only capable simple pipeline to get 3d on the web currently with decent poly counts is Unity3D. It works on PC and Mac just like Flash and Silverlight.
I am not sure how good flash is at 3d support for things like CAD app file formats. IIRC, flash cannot do hardware accelerated 3D graphics. On the other hand, a Java applet can (with the right library).
A new tool called Sketch Fab came out a few month ago. It's designed entirely in HTML5 and seems very powerful.
You could also look at the <canvas> tag, which is being implemented by more browsers. There is probably already a JavaScript library for model viewing.
Consider QuickTime VR. It allows for much of what you ask and since you have the original, you can create a fairly accurate model.
Unity: http://unity3d.com
Have a look at http://labs.autodesk.com/technologies/freewheel/
Project FreeWheel can show 2D and 3D models made in Autocad, Invertor or Revit. I think it uses DWF or something.
At this point it's not possible to host FreeWheel on your own server, but you can upload a DWF to Autodesk and show your model in an IFrame.
VRML might be a good choice. There's a good client available from Parallel Graphics that I've used for quite a while now. I've got some VRML models on my website (though the content is quite trivial!). The models will load quite quickly, especially if they're not that large. There are several navigation modes available and you can lock it to "examine" which lets the user rotate the model (though in fact it's the camera that's moving around the object).
You will need to find a program that can write VRML files, though any decent modeller will have that option.
Seems like canvas tag based javascript drawing apis are picking up. See this recently released canvas 3d js library, even though it works only in FF 3.5: http://www.c3dl.org/
Autodesk is coming out with their new viewer api:
http://through-the-interface.typepad.com/through_the_interface/webtech/
Shockwave with some scripting code for the user being able to rotate the model.
Here's a JavaScript 3D rendering engine: pre3d.
If you haven't checked it out, Mr. Doob has a library for 3D graphics and modeling: homepage and git repo for three.js.
You could use A3dsViewer - provides export to HTML5(three.js) or you can do directly export to the Google Drive and get the generated <iframe> url for the yours page.
Exported HTML5 models contains by default included rotation functionality.
You can create html file of you 3D model using this plugins. It will generate single html file and you will able to use it any where in your website or you can send it to client as well
Related
so let's get to the thing. I have to estimate a project that's main goal is to migrate from FLASH interactive and complex animations into HTML5.
As far as I've read there are plenty of questions how to do it... so I've researched there is Swiffy / Wallaby / Adobe Flash Professional Toolkit for CreateJS and Online converters and here goes the BUT... but many persons said it won't handle more complex FLASH animations (only simple ones).
So the question is: Does someone have an experience with such a migration, is there a non-manual way to do it?
Thanks in advance!
Yes, there is a non-manual way to do it for most Flash animations that contain some ActionScript, as well as a limited set of more interactive applications. If ease is your first concern, try the latest release of Swiffy (5.0 when you wrote your question and as of this response). Swiffy supports a substantial feature set of ActionScript 3, more than enough for navigational controls.
Drawbacks:
The level of snappiness may be unsatisfactory; I have been happy with functionality of some simple game conversions but they are sluggish.
The end product is SVG, so you'll also have to contend with unsupported browsers.
Changes to artwork will probably need to be made to the natives first, then re-exported. Otherwise, there is a hefty JSON config you can edit (and watch it blow up).
You may need to get under the hood with sound (I use SoundManager2).
I am less familiar with the Wallaby/CreateJS workflow but ActionScript support during export from Flash is extremely limited. Essentially, it enables you to export your asset library for use with CreateJS on the JavaScript side.
I've got a good amount of experience with 2D rendering on <canvas>, however there is a project coming up where I need to have a 3D object rotating left along its centre (I believe z-axis). Luckily this is all I need to achieve. The page will run on iPads at an upcoming event.
I'm not experienced with any 3D software/libraries aside from minimal playing around with Papervision 3D in Flash.
I can pick things up pretty easily, so:
Are there any frameworks I can use to take care of the initial stuff?
Are there any open-source projects that include the code to do the above? If not, tutorials to do it are fine.
How do I create the 3D object? Is this the same as a BitmapMaterial in Papervision?
Threejs can be a good library to start with too.
Their "getting started" article is awesome.
There's a GLGE, for example.
GLGE is a javascript library intended to ease the use of WebGL; which is basically a native browser javascript API giving direct access to openGL ES2, allowing for the use of hardware accelerated 2D/3D applications without having to download any plugins.
The aim of GLGE is to mask the involved nature of WebGL from the web developer, who can then spend his/her time creating richer content for the web.
Three.js is pretty awesome, just wanted to point you to this github repo as well
http://lamberta.github.com/html5-animation/ check out the examples in part 4.
Billy Lamberta authored Foundation HTML5 Animation with JavaScript, which is a great book teaching you the math/etc. behind doing things like this if you are interesting in getting a little deeper understanding.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I have been tasked with rendering and manipulating 3d objects in the browser and really want a robust application. The research that I've done shows two major options here. I can use the new webgl tool in html5. Or I can use a browser plugin such as unity3d (i'm sure there are others and for the point of this question, are equivalent). (Are there any other options that I'm missing?) My needs for the application are fairly standard, however, these are the focal points:
(1) The most important part is the resolution of the scene. I want as many polygons/points as I can get. I want, hopefully, 1 million polygons/points, 10 million polygons/points, 50 million polygons/points? What is realistically possible?
(2) The scene will be largely static, I will load my scene and then I just want to navigate around it and explore that way. I don't need constant changes to my scene.
Weighing the pros and cons, I see the downside of webgl as not having IE support (yet). And using unity inconveniences the user by forcing them to install a plugin (which I view as a huge barrier). If you take those away, is there any performance difference between the two? Will one give me more polygons than the other? I would presume they are the same since they both have direct access to the same hardware on the machine.
Any experience or thoughts on this matter would be greatly appreciated ......
WebGL is perfectly capable of rendering lots and lots of geometry as long as you draw it intelligently. So is Unity. Polygon counts are going to be a pretty moot issue, especially if your scene is static.
What you really want to consider more than rendering speed is factors like tool chains and user accessibility. WebGL has a quickly growing community but not much in the way of mature tools. If you need commercial support maybe Unity would be better. WebGL also lacks IE support as you pointed out, but even on browsers that support it you may not be able to access it if your video card is blacklisted. That said, if for whatever reason you are determined to avoid plugins then your choice is already made, isn't it?
WebGL has an undeniable "geeky cool" factor to it, but that may be completely lost on your target audience. It's also worth considering that Unity is going to be fairly gaming centric, which may or may not be a good thing given your needs. WebGL is more general but lower level.
As far as other alternatives, Flash 11 has Stage3D, which I've heard is very capable, and Silverlight has Molehill, which I've heard next to nothing about (sorry!). Obviously both are plugin-centric, but if you're on the fence they're probably worth at least looking at.
Unity will give you more out of the box, even in terms of performance, than WebGL. This is because Unity already has optimizations for drawing large scenes (culling, batching). In WebGL you may need to write much of this by hand at this point (unless there are some solid WebGL libraries I haven't seen) just to get the same performance. Getting compatible models & textures into Unity is also easier compared to WebGL right now (it's about the maturity of the tools).
Regarding the drawback of needing the Plugin, Unity is releasing at some point in the near future a Flash 11 exporter which will remove the need for the Unity plugin (depending on your scene).
Did you see Burster Plugin? It is open source, it works like unity, but it opens files from Blender - the best 3d editor :) here is website: http://geta3d.com
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
HTML 5 game development tools
I am pretty new to game development and want to build a simple game for touch devices using html5 (canvas) and javascript. Then use phonegap to create a native app from HTML+js.
After some search, there are few HTML5 game frameworks like limejs. But I wanted to know:
Which framework is the most popular one for touch devices?
Are there any tutorials/how-tos using which I can start with game dev for mobile touch devices in HTML5?
After referring to this list on Game Engines I am thinking about two frameworks:
1. LimeJS
2. Hydra
Any suggestions?
This question is a duplicate I answered just two days ago: HTML 5 game development tools
Here's a copy/paste of what I wrote:
I have spent a lot of time evaluating different options. Crafty is my favorite and the one I'm using for my current project. LimeJS is pretty good but it relies on the Closure framework, which I'm not a fan of. I also liked both EaselJS and CasualJS a lot.
btw one of the most "professional" options is Impact, so you should take a look at that one too. However it doesn't provide many of the features that the various open-source libraries do, and the features Impact provides that the other libraries don't aren't really that valuable. For example, if you need a physics engine for your game (and a platform game probably does) then you can easily integrate Box2D on your own. another Box2D link
That said, doing things from scratch without using a 3rd-party library is not a bad option. The free ebook Dive Into HTML5 does a great job of explaining how the Canvas element works. The thing is, there are a lot of graphics features that a good graphics library will provide that aren't built-in: a display heirarchy allowing Z-order and attaching objects to each other, animation through both tweening objects and spritesheets, mouse events so that you can click on objects, etc..
LimeJS. It has a better user community imho. Lots of user support, and forums. You can download lots of source, and be exponentially further along.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
At first, I do apologize for my bad English.
Our development team is working on a project, written in GWT that provides users the collaborative environment. Users can work on different projects, including animation making, image editing, 3D structure modelling and so on. So we have to provide them proper editors. I just want to know, are there any free/paid open source editors, so that we can embed in our project?
It would be much better if the following specifications, are met:
· Better to be html5 compatible to benefit from latest technologies
· Can be webgl
· Should be open source
· Better to be java and gwt / or we should be able to wrap and use it
· Be reliable
· Support standard file formats
Well, this may not be quite what you're looking for, but maybe it's close: 3DTin
It's a simple CAD that looks like Minecraft. According to here, it's written in Javascript, mostly jQuery.
I don't expect you're going to get anything with the sophistication of Maya or Photoshop that's web-based. That said, the guys behind 3DTin seem to be into open source, so maybe you can extend it for what you need.
Goo Create is a free browser-based 3D editor (WebGL/HTML5) that enables you to:
Run Goo Create in your browser, drop existing 3D models and textures right in.
Create interactive 3D games and apps without coding (you can also code in JavaScript if you like).
Publish and share easily on the web, or use CocoonJS by Ludei to create a native iOS/Android app.
Best of all - it's free for public projects!
http://www.gootechnologies.com/products/create/
http://Clara.io is a free WebGL-based 3D modelling, animation and rendering tool that runs in your browser.
It can be used for:
Creating characters, items and levels for game engines (like Unity3D, Three.JS, Babylon).
Rendering photorealistic images.
Data conversions between OBJ, 3DS, FBX, Collada, ThreeJS, BabylonJS and many others.
Publish your scenes and animations for embeding in webpages similar to how you can embed YouTube videos.
It differs from 3Dtin in that it is feature fulled, it is similar to 3DS Max, Softimage, Maya in terms of features. It differs from Goo Create in that it focused on creating 3D content, rather than games.
https://github.com/akjava/BVH-Pose-Editor
The Above link is the perfect solution your requirements.
It is made in GWT. It is open Source :)