I am web-developer. I would like to integrate 3D Content into my web-site. The level of integration should allow something like 3D Cube floating above HTML Content. Moreover, I want 3D Content to be interactive, i.e. one should be able to click on certain side of the cube and get some JavaScript code executed in same way as if somebody clicked a button.
I have seen some demos with CSS3 3D Transforms in HTML 5. It's even possible to render HTML Content on 3D Objects like images and buttons, but they don't seem to allow something as sophisticated as floating cube.
Is it possible today? Which technologies should I use?
After some research online found XML3D and X3DOM projects. They offer integration with DOM and JavaScript, XML-like scene description and even programmable shaders. Seems that it's exactly what I was looking for, however both projects are still in development :(.
The best options you have available today are CSS transformations, and/or the Canvas element. With CSS you can perform various transformations, even including the construction of an animated cube (easier with preserve-3d).
Related
I'm looking into several html5 frameworks for a project that would be in some ways similar to the iMakeMyCase editor.
The main features that have to be implemented:
choosing a predefined background
placement of multiple pre-defined elements with drag and drop
elements have to be resizable, rotatable
undo/redo
elements have to have ability to bring them forward/backwards (like layers)
zooming of the whole canvas (that one could be tricky ... any suggestions?)
ability to save the elements placement
get a .png preview of the finished product (can you somehow capture the canvas to a regular image)
The frameworks that I have been loooking so far:
cappuccino
Looks promising and the projects that have been made with it cover 90% of functionality that I need. I'm not sure about ObjectiveJ though ...
sproutcore
I didn't see lots of examples, but if apple made the whole iCloud with it, then it sure has to be powerful. But I have a feeling that a lot of implementation would be needed to get the required features covered. Correct me if I'm wrong.
easeljs
The examples look cool and if you combine them, you almost have everything covered. Probably my favourite at the moment.
What's your opinion on these frameworks and are they suitable for the project? Any others that I have missed? Any suggestions are really welcome to help me choose the right tool for the job.
Thx.
For your zooming Functionality i found same question here
and for a png preview of your image you can do something like that
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");
//here you got the png image show just create an element and show this preview there
document.write('<img src="'+img+'"/>');
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.
We are in the research phase of a new project which will be used in the advertising arena. Users create a bunch of items that will play in different regions on the screen and can then swap out animations (images/texts etc).
We are pushing for an HTML5 solution which will be responsible for the rendering but a new proposal is to just use SVG (and SMIL).
I know you can embed SVG content in HTML5 pages and there are numerous links comparing the canvas and SVG.
What I need to know is what are the pros and cons of going for a solution which is based on HTML5 compared with a solution that is based solely on SVG? Also for the long term plans of the project, I can see HTML5 as allowing so much more.
Also I am not sure what tooling support is available for users using SVG. Most of items must be templatable (changing text/images), is this at all possible?
TIA
JD
I've recently had an opportunity to try Raphaël, an SVG-based solution, and Flot, an canvas-based solution. Both provide emulation on browsers that don't support the primary format: Raphaël uses VML on IE, and Flot uses excanvas.
Both SVG and canvas have advantages and disadvantages. Both can draw shapes, paths, and embed images, but canvas can do pixel-level manipulation and can draw a lot more sprites quickly, which is why it's becoming popular for HTML5 games. SVG has more powerful paths, although you'll have to learn the syntax.
SVG has another really interesting advantage: elements on a chart are DOM nodes, so it can use browser mouse and click events as well as add, remove, or change an individual node without redrawing the whole chart. Doing the same thing on a canvas involves manually keeping track of the locations of every visual element and redrawing the whole canvas when stuff moves. (Canvas does let you do double buffering and caching stuff sop it is possible to redraw it quickly, but the logic of keeping track of where everything is is still on you.)
For that reason, I think SVG is a better choice for interactive graphs and charts, while canvas is more appropriate for advanced graphics. In either case, cross-platform compatibility is a concern and a abstraction layer is indicated.
SVG is potentially more search-engine friendly and accessible than HTML5 <canvas>, in that SVG elements and text can be (potentially -- not sure if they actually do!) indexed and read out to a screenreader, user whilst <canvas> is initially just a bitmap and would need additional content to be created if one of these ads was to be presented as part of a web page. OTOH, if it's a game-like tool that's not for content creation then perhaps that's not an issue ... perhaps give more details?
I'm building a business application which mostly involves tables and other typical form elements. Due to the nature of my application however, I need to place groups of these elements together in a dynamic tree structure which will take up all of the available screen real estate. If real estate is low, there will be some form of smart scrolling allowing users to focus on certain areas of the tree. It could be called an advanced data visualization web form.
Historically, I would have accomplished this by simply using divs and javascript. The canvas element however seems like a more logical way to build my structure. Most uses of the canvas element that I can find are however geared towards graphics and animations (mostly games). Is canvas overkill for this? Will I benefit from using it? Are there alternatives?
Yes, canvas is overkill. It is very much a drawing board and not much more. It is certainly not something that I would expect to create user controls in. Games etc. are more suited as they aren't really standard user controls and wouldn't be expected to behave as such.
A tree structure could easily be implemented with a series of nested uls. Using some JavaScript to expand collapse them by adding and removing classes.
Here is a nice jQuery plugin for you to use or get some ideas of how you could use it.
Edit:
I would stay away from canvas just because of the overhead of the drawing. If you can extend a standard JavaScript treeview to add more functionality this would seem like the best option ot me. Creating controls from scratch in canvas is no small feat.
Edit2 (Post mockup):
This just looks like a multi-part form to me, with hidden forms/areas which are displayed as apropriately. This is far too common to require creating this with canvas.
Canvas is not fully supported in all browsers yet. I recommend using either Jquery or another framework.
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.