I am doing a 2d game using HTML5 Canvas and I want to add 3d characters to the 2D canvas.
Would it be a good (or even possible) solution to use THREE.js on separate "hidden" canvases, 1 for each 3d character. But then, draw those '3d' canvases on to the main 2d canvas?
Can I draw webGL canvases on a '2d' canvas?
Any potential problems with this solution?
Any "best practices" would be violated?
My intuition is that this is a good way to go.
Webgl uses webgl contexts, not 2d. Why do you need different canvas layers ? Anyway you could do it by setting a transparent background yes, but that would be heavy for your browser. What you can do inside a single webgl context (maybe on top of an other 2d context you would need) is to render different scenes with your different characters, the result would be identical
Related
This visualization is created using Away3D (Flash):
www.guardian.co.uk/world/interactive/2011/mar/22/middle-east-protest-interactive-timeline
Would it be possible to create something of the same quality (re. interaction, animation, performance, pixel-perfection etc.) using WebGL?
Bonus: How would one set up the basic scene? (without interaction and animation)
Yes, it would be. The scene is not complex at all, so it would have good performance. Interaction, yes, depends how you implement it, but if you are doing project with, for example, Three.js it wouldn't be a problem. Pixel perfection, obviously, yes.
In the scene, you could have curved plane, with texture that is changing UVs of vertices when you use 'navigate'. Pins could be done with particle, or better, simple quads with transparent textures. To have pixel-precise pin picking, you could depth-test pins on ray trace, or use pin-shaped geometry with shader, which probably the best solution.
So, basic scene - curved plane with per-vertex-changing-UV, pin-shaped and texture pins.
Alternatively, you could do exactly the same thing with 2D canvas. All elements are just drawn and scaled, text would be much simpler, and picking would be with 2d calculations.
Hope this helps.
I know it is not possible to add eventhandlers to specific circles or rectangles in canvas. But there are some nice frameworks like EaselJS, KineticJS, Paper.js, Fabric.js that support the eventhandling on specific elements.
Can someone explain me how do they work?
I think there are only two solutions.
1. You create for each element a new canvas region and put them on each other. In this way you can give each region an event handler.
2. You have only one canvas region and one event handler. In this way you have to do complex mathematical calculations to find out if a specific element was clicked. If you have only circles or rectangles, this solution might be easy. But if you have path with lots of curves, this solution is quite difficult.
I don't want to use the libraries. So it would be nice, if someone can help me.
Here's a BRIEF summary of how canvas drawing libraries work
An unaltered canvas is just a big bitmap. Once you draw shapes on the canvas, they are unaccessible, forgotten pixels.
Canvas drawing libraries store all your shapes into “retained” objects. Each shape object has sufficient information about itself to allow the drawing library to redraw it whenever necessary.
The canvas drawing libraries are the "controllers" for objects. The libraries have the algorithms necessary to track, manipulate and redraw all shape objects as necessary.
The following information is retained about every shape object:
Basic identification
ID,
Shape name
Parent or Container
Inherent properties of the shape:
Rectangular shapes( rect, image, text) know width and height.
Circular shapes (circles, elipses, regular polygons, stars) know radius and sidecount.
Lines know length.
Curved shapes (arcs, beziers, paths) know anchor points and control points.
Text also knows…well, the text!
Images also know their pixel data (usually stored in javascript Image objects)
Transformational information:
Starting X/Y coordinate
Translations—accumulated movements off the starting coordinate.
Rotations—accumulated rotations of this shape (usually in radians).
Scalings—accumulated resizings
Other transforms (less common) are skews and warps
Layering information—the current z-index
Styling information:
StrokeColor,
StrokeWidth,
FillColor,
Opacity,
isVisible,
lineCaps,
cornerRadius
Tracking abilities:
Bounding box—the smallest rectangle that completely contains this shape
This is used for “hit testing” to see if the mouse is inside this object (for selecting and dragging)
If you don't want to use a library, you may find my answer in this thread helpful. As markE says once the canvas is written to there is no way of tracking that data (unless you care to loop through each individual pixel and test its colour; though that is only really useful for pixel level collision detection).
I'm curious if that's possible? I'm interested in building a vector drawing app within HTML5 that has the ability to save as vector, and not just JPG/PNG/BMP.
Thanks.
No, it's not possible. After the drawing operations are complete all you're left with on the canvas are a bunch of pixels. You'd have to retain all the drawing options and then use them to create a separate vector drawing. If you want to save as a vector, why not create as a vector?
Try fabric.js.
It draws stuff on Canvas, and has SVG import/export.
It handles 'objects', common SVG shapes and paths. The full SVG standard (fonts, for example) isn't supported, but maybe you only need to use a subset of it.
I'm using Three.js to create some 3D graphics using webgl in a canvas element. Is there a nice library to draw 2D elements over the top of the 3D graphics. Something like the HUD of a 3D game. I want to draw some images or text on the screen over the 3D stuff. Any ideas? Can it be done with Three.js?
You'll notice in his examples that when he overlays 2D objects he just uses other HTML elements: http://mrdoob.github.com/three.js/examples/webgl_multiple_canvases_grid.html
It may be worth doing the same for yourself, where an entirely separate 2D canvas on top of the 3D one controls the HUD. There are some mouse-event related problems with that approach though, so it depends more precisely on what you need.
I am a junior developer I can't understand how canvas tag is beneficial for us?
I read lot of articles on that but I can't get the root benefit getting from the canvas tag.
Think of the difference between canvas and svg as the difference betwee Photoshop and Illustrator (or Gimp and Inkscape for you OSS folks). One deals with bitmaps and the other vector art.
With canvas, since you are drawing in bitmap, you can smudge, blur, burn, dodge your images easily. But since it's bitmap you can't easily draw a line and then decide to reposition the line. You need to delete the old line and then draw a new line.
With svg, since you are drawing vectors, you can easily move, scale, rotate, reposition, flip your drawings. But since it's vectors you can't easily blur the edges according to line thickness or seamlessly meld a red circle into a blue square. You need to simulate blurring by drawing intermediate polygons between objects.
Sometimes their use case overlaps. Like a lot of people use canvas to do simple line drawings and keep track of the objects as data structures in javascript. But really, they both serve different purposes. If you try to implement general purpose vector drawing in pure javascript on top of canvas I doubt you'd be faster than using svg which is most likely implemented in C.
Basically, thanks to canvas, we can now draw/render 2D shapes using HTML5 and the canvas API.
As an example of what's possible now with canvas, see this
Some possible uses for Canvas:
Image drawing program
Photo editing/manipulation
2D Games
Advanced image viewing such as Microsoft's Deep Zoom
If you can't understand how it's beneficial, then maybe it isn't from your point of view at least. Don't think that because it's there I have to use it somehow, pick and choose what technologies work for you based on what you're trying to build, an Accounting web app probably wouldn't need a canvas for instance.
The canvas will enable you to draw pixel perfect graphics.
The cool projects that came to mind for me are:
Visualize gps data. GPS data is just an XML list of coordinates. You could easily build something in canvas to "connect the dots".
An mobile app where the user can actual sign a document with her finger - canvas allows you to export out the rendered canvas drawing to PNG where it can be saved on the server.
In a game where you have avatars, you can allow the user to actual draw on the avatar. Moustaches anyone?
Other stuff:
In iOS / Android using lots of CSS3
effects like box-shadow can lead to
poor performance, especially when
animating. You can do a lot of these
graphics in a single canvas tag,
here's an example:
http://everytimezone.com/. This thing is flawless on an ipad.
Cool background effects. For example try going to Paul Irish's
site and move your cursor around the
background: http://paulirish.com/
In this HTML5 book sponsored by Google a lot of the effects are using
canvas:
http://www.20thingsilearned.com/ -
particularly the "page flip"
animations.
my personal take on canvas (and when I actually found a use case for canvas) is the ability to color pick and color change per pixel in a canvas element - actually moving the image from something we don't have any information about what is happening inside it to an element like all other DOM elements (and yes, I know about the current problems with canvas and DOM - sure this would be taken care of in the future)
sure - canvas made some sort of animation easier and pluginless, but that we could do before (mostly with flash) - I think the real importance is the ability to know what is happening on the page.