I was taking a look at this example, http://gardengnomesoftware.com/samples/pano2vr_3/mozart/ and I was really interested in how it was done.
Do you think it would be complicated to develop such a function using one of the webgl engines out there? Is the panorama image just a texture on a cylindrical model? How is the panorama "cut?"
Perhaps it is just a cube with the images as a texture? You can kind of see the faces when it is loading slowly.
Yes, in this case it is simply a cube that the "camera" is centered in. It's basically the same concept as a skybox in many video games.
How to create a cube-map from photos the way they've done isn't something I have experience with, but the wikipedia article links to some tools that may help, including Hugin
Related
one customization part of my existing e-commerce website is created in adobe flex, where we are displaying effect of 360 degree rotation of mug (one can consider as cylinder) with all the customization (Add photo, text, layouts etc.) user has made in flex canvas , this was done very easily using paper vision 3D, now we are planning to replace flex with other technology but it seems impossible to achieve the same using HTML5, also we can't go with threejs or webGL due to its IE compatibility issues. While doing research I found Unity 3d which seems good for my purpose, any suggestion on this? I am very new to Unity and designing things, experienced person's opinion will save lots of time of mine :)
I can say "very easily". I suppose your concern is about "putting that texture on the rotating mug, expecting that the texture rotates along with the mug".
If that's the case, you can have multiple choices, from creating a new texture (or merge more images into a texture), or just paste the texture on the mug, and let the "parent-child" system take care of the rotation.
(whatever the parent does, child objects will remain relatively in the same position).
In any way, for unity this should be a quite easy task :)
I'm searching for Depth map algorithm for action scrip 3 (or some other language).
My goal is to generate depth map for static image on run time.
I have fount this example http://kode80.com/2009/06/29/papervision-zbuffer-and-dof/, i didn't have the time to investigate it's code but i have the filling its working only with 3d models.
Worst viable option is server side technology that does the work.
Extended description:
I have a task to develop flash application where 3d rotation of a head is simulated by a 2d image uploaded by the user.
There are some japan guys that have managed to do that (http://hairtry.jp/), but the technology that they are using is server side. It generates swf fail with precisely coped eyes and image for the depth map of the uploaded picture. I can't find out what is the sever side technology that they are using so I'm searching for any posible workarounds.
Thanks in advance.
Cheers,
Chavdar Slavov
your easiest solution would be to use a 3d engine, Paper vision seems to be getting out dated, theres a lot of documents on how to use, and tutorials but again not much has been happening with them lately. i suggest Away3d "www.away3d.com" they seem up to date.
for what your asking it is possible to do this 100% in flash but to create a 3d head at runtime and fill the face with hieght maps this is possible, you would need to look at bitmap manipulation.i dont think this is an easy task, what you should learn first is how to add an image to a spheric surface dynamically than look into height mapping by converting certain coulours from the image into different levels of depth i must say im sure this is advanced stuff, i manged to animate a globe that was this same method it looks dodgy but it gives you some source code in the FLA
http://www.ffiles.com/flash/animations/globe_animation_3496.html
The above link will allow you to download my source files, the animation it self is a scrolling image but i used Actionscript to give the globe depth and a sheric look
I'm doing a football game which is now seen from above, I would like to know the easiest way to transform it into a perspective view.
There are a few isometric engines out there.
http://www.emanueleferonato.com/2010/02/23/11-flash-isomet...
http://code.google.com/p/as3isolib/
http://www.kirupa.com/developer/actionscript/isometric_tra...
(tutorial)
http://gotoandlearn.com/play.php?id=136 (Can recommend this site)
What is isometric? Well google images shows alot: http://images.google.nl/search?tbm=isch&q=isometric
It is a kind of a eagle eye perspective that I think you are looking for. And you dont need a full 3d engine for it.
If you just want to rotate the stage and don't care about a fully isometric 3D environment, you can try playing around with the stage.rotateX stage.rotateY and stage.rotateZ properties. For a richer 3D game, you'll want to look at some of the isometric links (posted by SynerCoder) or a full 3D engine like Papervision3D (http://blog.papervision3d.org/)
Is there a way to embed Sketchup models on a website? Preferably a free one, if it's a commercial solution I'd like a confirmation that it's actually worth the money... I know about the 3D warehouse thingy where you can rotate it (javascript and some images), but I can't upload anything to the 3D warehouse 'cause it always "resets the connection".
You can try the upcoming WebGL Functions in modern Browsers. There are some Javascript Libraries that can read model files and show them within your (HTML 5?) website. I have not used them yet, but try these links if this sounds interesting:
https://github.com/mrdoob/three.js/
https://github.com/timjb/sketchup-threejs/
I made a patch of an example game in three.js. Added ColladaLoader and Sketchup model + Third Person Shooter controls:
https://github.com/irony/Nemesis
Try it out (Works best in Chrome)
http://peaceful-woodland-4410.herokuapp.com/index.html
You can use http://sketchfab.com, they even have a SketchUp exporter.
Yes, you can do it without cost. See here: https://help.sketchup.com/en/article/3000258
EDIT:
There were some free rendering sites apart from Google, but they don't seem to be in operation anymore. Posting to the Google 3D warehouse is going to be your best bet. Regarding your problem posting there, try it with Chrome.
EDIT #2:
If you don't want to upload to Google 3D Warehouse, you can achieve a similar effect with a little work. 3D Warehouse doesn't actually give the visitor the power to manipulate something in 3D, but rather it lets them "rotate" the image horizontally by simply showing a series of preset images of the 3D from various angles. You can take shots of your 3D object, import to Photoshop and create your own gif of the spinning object. A little more work than relying on Google, so you'll have to decide if it's worth it.
EDIT #3: If all else fails you can simply post the 3D model on your site as a downloadable file and advise visitors to get Sketchup to view it.
I'm trying to make some web-based board games, and I want the interface to be pannable and zoomable. Much like how in Google Maps, you can pan and zoom the map, I want the game board to be moved and zoomed. Unlike Google Maps of course, I do not want to work with image tiles.
Can anyone give me recommendations as to what technology to use? Would this be a good fit for plain HTML? HTML 5 Canvas? or SVG? Any particular JS libraries to recommend or something else entirely?
I'd like to avoid flash and Java. And browser compatibility is plus, but not the most important factor. For example, I think it would probably be OK to require Chrome Frame for older IEs.
Any ideas/advice would be appreciated.
A few thoughts:
Use the OpenLayers UI with a "fixed" strategy to load vector graphics for your board all at once. (This is overly heavy-weight, probably, but comes with pan-zoom and IE compatibility.)
Use Raphael to build your board in SVG, using RaphaelZPD for pan-zoom. RaphaelZPD isn't cross-browser (even though Raphael is), so you'd need Chrome Frame for IE compatibility. This would be pretty lightweight, I think.
Use pure SVG for your board, use SVGpan for pan-zoom. Chrome Frame required here too, though you could use SVGweb if you wanted. You could draw your boards right in Inkscape, clean up the SVG's and add whatever ID's you need in the XML (SVG is XML under the hood), and interact with the board with jQuerySVG if you like, or script interaction by hand. Did I mention that CSS works with SVG? I think this is your best bet.
I can't think of an advantage to using Canvas here, unless you had lots of animation or bitmaps. SVG is far more transparent in how it works - it's XML under the hood, and when rendered in a page, becomes DOM nodes you can easily manipulate in modern browsers.
Plain HTML would probably be hard to handle scaling with. I've seen plenty of image scalers, but haven't seen complex HTML structures, and complexity would be compounded by needing to pan at a zoomed level.
If you want total control of your development environment you could create your own web rendering plataform. I think you can use HTML canvas 5 as your interface with the browser.
You can easily implement drag, pan and zoom using HTML canvas. This approach is very similar with game development in many plataforms. Here an example of using HTML canvas 5 for an interface that supports pan, drag, and zoom.
Having the control of your environment you will have a wide range of possibilities.
If you don't mind tiles, I'd suggest checking out Polymaps "A JavaScript library for image- and vector-tiled maps using SVG". It's probably possible to borrow some parts from there for panning and zooming.