So... I have some sets of 6 pictures, like these http://www.humus.name/index.php?page=Textures , and I basically want to render them on an html5 canvas like this: http://www.allforthecode.co.uk/aftc/forum/user/modules/forum/article.php?index=5&subindex=4&aid=303
But I'd rather not use any 3d library such as webgl or three.js, since that's the only 3d-related feature I need and I want the whole thing to be as lightweight as possible.
I thought, "c'mon, it's just a rotating cube, can't be that hard!"
WRONG.
My original planwas to keep the camera position fixed, ant then to keep track of the x and y offset (in radians) of each vertex, and then to project them on my canvas and to deform the context accordingly to render each face of the cube.
That approach doesn't seem to work, tho, so... can someone give me a pseudocode algorithm?
I think a good way to tackle this problem is to use CSS3 3d transformations. There's quite a few turorials to be found on the web giving details on how to build a 3d cube with CSS. Instead of using <div>s to build the cube's sides, you could use <img> or even <canvas> elements. By playing around with perspective attributes you should be able to place the 'camera' inside the cube looking out.
Related
I'm trying to build myself a very simple framework to manage drawing content to the same webgl canvas via multiple views and react. I want to able to use the same resource in different areas of the window, so i'm trying to avoid using multiple canvases.
The end result should be something like this example from three.js.
I'm pretty confused with how to manage this from the html side and am struggling to figure out if any limitations of this approach should be considered.
<WebGLContext.Provider value={contextState}>
<canvas ref={canvasRef} style={canvasStyle} />
{children}
</WebGLContext.Provider>
This is my top level wrapper. With this, i can instantiate a <WebGLView/> wherever and get the rectangle to be used as the "viewport" into the canvas. Just like in the example i scissor out that rect and draw some content there. Because my entire react app renders on top of this, i can put any content over that view. But... i can also obscure it. This only works if divs above it are transparent, or there is hardly any overlap between these viewports.
The view is something like:
<div ref={viewRef}>
{children}
</div>
Another approach that i had in mind is to use react portals to manage another layer, above the canvas.
Something like this:
<WebGLContext.Provider value={contextState}>
{children}
<canvas ref={canvasRef} style={canvasStyle} />
<div ref={aboveCanvasPortal}/>
</WebGLContext.Provider>
Since i know the rectangle of the viewport for my webgl drawing, i can manage the html above it in a similar way, draw an absolutely positioned div in it, and put some UI content in there. This also doesn't feel like it would scale very well, but i could at least have a scrollable column with a background color, a webgl view in it, and some ui on top of it. Overlapping components would probably crash this.
The view is something like:
<div ref={viewRef}>
{ReactDOM.createPortal(children, aboveWebgl)
</div>
I've been thinking of using toDataURL() and then passing it as an image background to the views. This seems like it would solve the stacking/overlapping issue, and i could have a very simple html structure. But this is also a tremendous amount of overhead to add to webgl? If so, is there a way to do it cheaper, since the browser has to compose all of this somehow anyway?
Use case wise, my main use case is to use it with something like react-mosaic, where i just have a bunch of rectangles, very flat within one viewport, a div or the window. The second approach feels like it would work best. And then perhaps if i put a modal on top of that, creating another layer of below,canvas,above, html, would make sense, but like no more than that?
When taking a deeper look into the code of the three.js example you have provided, you will note, that there's just a simple <canvas id="c"></canvas> without any wrapping at all.
The key to your question is not to think primarily about viewports, but about Scissor Boxes -- as used in the aforementioned example in its function render(). If you prefer (like me) to use raw WebGL instead of three.js, take a look at the MDN Doc on WebGLRenderingContext.scissor() and on basic scissoring as a starting point.
That should reduce the complexity of your problem and return it back to the level of (a more performant) WebGL, instead of trying to patchwork on HTML level.
So we have this major project and we aim to create a simple wayfinding system through the use of inline SVG that includes zooming and panning feature and is targeted to be deployed on touchscreen units. We wanted to create something similar like google maps or something like this: http://bl.ocks.org/mbostock/3892919
We really wanted to use this plugin but everything are predefined in the script and we really don't know how to do it on inline SVGs (or maybe someone help us explain how the whole code works and maybe teach how to make it work on inline SVGs because we're pure amateurs.). I've looked for a lot of plugins but they all seem to not fit the need.
When in doubt, just scale/move everything.
Zooming essentially involves making the elements bigger/smaller
according to your zoom level and panning involves making the elements
move in relation to your viewport.
So:
On each zoom level, iterate over all your paths and scale them by the
appropriate coefficient.
For panning you can just translate(move) your SVG elements to the
opposite direction of which you are panning towards.
You can learn more about scaling/translating SVG elements by having a look at: SVG transformations
On the other hand some Googling(meaning the 1st result that pops), turns this neat library, which looks pretty straightforward for your purposes.
i tried the hello example on the adobe site.
http://www.adobe.com/devnet/flashplayer/articles/hello-triangle.html
it works, but the context3D seems work on the stage's background in the lowest level. if i draw anything it will cover the 3d context.
i want to bring it to front or set it to a certain level. how can i do that?
also i was told if use 2d api and 3d api together , it will lower the performance of 3d,is it truth?In my works ,i still need 2d api ,for example, drawing the textfield .
Everything goes like this (from bottom to top):
StageVideo (1 or more instances) > Stage3D (1 or more instances) > Your regular display list.
And yes, regular display objects may degrade performance of Stage3D, therefore it may be better to use Stage3D alternatives of those. Some Stage3D accelerated frameworks already has some of those built in (like TextField in Starling).
No, you can't bring it to front.
2d and 3d not relates to each other. But of course, if you write 2d stuff that eat 100% of cpu, you'll get overal slow performance.
the only way is to get from the bottom layer of stage3D instance the rendered bitmap and display it on top of you displayList.. but it should work on each frame, thing that will affect the performance a lot and of course no mouse interaction... this solution will work only to display rendered scene on top of stage3D.. just a simulation
I'm new to html5 and have been playing around with the canvas. I'm wondering when the canvas would really be necessary/useful? i.e. when is it meant to be used?
If i need to do simple animation, like move tags around, do i really need a canvas or is it better/easier to just use jquery/js?
With help of canvas you can create 2D graphic applications, animations, simple transformation of images (like rotating them), GUI etc. Some examples:
Asteroids game
jigsaw puzzle
About GUI, unfortunately I can't load a site, no idea why... it was called iWidgets.com, the only thing I've found is a screenshot. You can see blue pipeline there, they bound elements. It was done with help of canvas; while moving elements, pipelines also were redrawing; when you change active element all its connections changes color to yellow (so you see dependencies). Nice project, I hope it is not accessible just for a while...
Good article about how to use it is here
From "An insight into the HTML5 Canvas Element":
The canvas element is interesting and
worthy of focus because it enables,
for the first time, direct drawing of
graphics within a browser without the
use for an external plugin like Flash
or Java. The beauty of canvas is that
it’s controlled entirely via simple
JavaScript code, meaning it builds on
the powerful functionality JavaScript
already provides and doesn’t require a
crazy learning curve to use.
Choosing to experiment with canvas
over other new elements was simply
down to it’s functionality as a
graphics platform, which inherently
makes it a potentially interesting and
rich platform to play with. It was
decided that pushing the flexible
canvas element would produce the most
interesting results that we can use in
the application.
Another deciding factor for choosing
canvas was to test the animation
capabilities and the possibility of it
being a potential Flash replacement.
Now Flash obviously has features that
canvas could never emulate, however
it’s an exciting concept nonetheless
to see exactly what could be achieved
with canvas that would normally be
done by reaching for Flash.
read that article to get more useful information
PS. If your animation is about tags moving (like parts of your page), then canvas does not fit. Canvas is for graphic rendering. So in that case you will use jquery or other JS libraries.
Here's the best practices for deciding when to use CSS3 Transitions / Animations or Canvas. Keep in mind that if you're using jQuery, under the covers they will be using CSS3 transitions or animations when possible.
CSS3 Translations / Animations - use these if you're animating DOM element styles, such as position and size
Canvas animations - use canvas animations if you're animating something more complex, like if you're creating an online game or building a physics simulator. If you're animating 3-d models, you'll definitely want to use canvas so that you can leverage WebGL
Canvas gives you access to the pixel level of the graphics. If you wanted to do a checkerboard transition you could do that with a script in canvas but not in jquery.
For a few examples of what is possible (already been done) see http://www.netzgesta.de/transm/
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.