Topic: Absolutely stunning 3d on 2d canvas

Sorry, inmates. I've just seen someone one-up I came across this and wanted to share. For maximum enjoyment, dig up Opera 10 (which is a lot faster than Firefox 3.0, and a bit faster than whatever webkit my Epiphany is using.

While you're discussing, I'll just go pick up my jaw from the floor.

NICE find. Still seems a little too slow to be practical, but wow, that's pretty. I'm going to spend a little while digging into that code...

Damn, I wanted to do that for year, but never got around to sit down and finish my arbitray affine image transformation ( aka affine texture mapping thing ). Same here iron_wallaby.

Arve: It's bloody fast in Safari 4 and Chrome, but also ugly as f*ck due to the lack of bilinear interpolation in WebKit's implementation of drawImage().

quote:

---

Arve said:

Sorry, inmates.

---

Don't say your sorry. Shows a sign of weakness

Nice stuff for sure.

Later,

C:\

Wow, he appears to be using ctx.transform(). When did this get implemented? I must have been tuned out...

benjoffe: I believe Opera has «always» supported it, and I suspect Firefox as well

Note, the guy also has some sort of blog here, detailing what he's done, with benchmarks. Most bottlenecks in his code are bound to the actual rendering, and not so much JS itself.

(Edited by Arve on 02-18-2009 15:38)

benjoffe: ctx.transform() and ctx.setTransform() are Opera since 9.5 ( so yes, more or less forever ), in Firefox 3 and the previews of Safari 4.

arve:

quote:

---

Most bottlenecks in his code are bound to the actual rendering, and not so much JS itself.

---

As anyone who's done graphic stuffs using open web technologies have always said



(Edited by poi on 02-18-2009 16:58)

Yeah, transform() was the part I was missing and which kept me from even attempting this myself. (The thought of drawing all of those pixels individually still gives me chills.)

Still, it's pretty impressive, and I bet you could do something very interesting and attractive at low polycounts in realtime... a StarFox toy comes to my (video game fevered) mind. Not everything needs to be texture-mapped, just the important stuff.

Also, that pesky antialiasing really makes things look worse. Is there any way to disable it, either currently implemented, or proposed?

Nei. No way to disable the AA in Canvas. It's been requested a couple of times though :\

Not surprised, and honestly, I don't blame people for not putting it in the standard.

I would imagine that the disjointedness between polygons can be reduced/eliminated by simply rounding the x,y position of the vertices to the nearest pixel, but it's quite the hack.

Beside, rounding the coordinate of the vertices will make the polygon "jump" abruptly from one integer coordinate to the other. Not nice for small polygons or smooth movements.

Very cool, but I wish pixel drawing with canvas could be faster. The slipping and sliding affine textures and z-sorting problems with that approach bug me.

@poi: yup. It's gonna look broken one way or the other.

@KTF: Well, people never seemed to mind affine texture mapping on the Playstation and Saturn... kids these days with their Xboxes and Radeons!

I do agree though, especially on the z-sorting; I imagine, though, for the limited resolutions that are almost a requirement for this sort of thing currently, that neither is that big a deal. By the time it's fast enough to run on a large resolution, we'll have a proper 3D context (or, at least, enough competing 3D contexts that their differences can be abstracted out).

Great, another set of scripts I have to understand. heheh, obsession hardly describes it.

OK, so I started messing with images and transform and decided I wanted to make a page flip script. I made the curl easy enough and gradients are easily laid over images inside a clip so I already have the book center shading done. Here's my attempt at the image positions for a flipping animation. I don't fully understand transform, I think. I'm not sure if my understanding is correct or if I'm just getting lucky with math. I simply used a golden ratio progression between 0 and 1 for the stages. Please don't ask me to explain it. LOL it has to do with shifting the change by .618 each time from golden ratio point
http://h1.ripway.com/tinyscript/glossycanvas/ImageTransformPageFlipSequence.html

So here's a question for you experts. Before I get to coding...
I would like to know if you think it would be better to draw the images for each stage of the animation as they are flipping or draw all the images in every position right away when the script loads and keep them hidden and switch to visible when needed?

oh, yeah, I almost for to add...
Is there a way to have an object be an image already transformed? I want to show the next page in the flip animation but I don't want to have to save an extra image mirrored to make it look right. I want to transform the image but draw it not mirrored.

Maybe I'll have to make a reflection script to draw the mirrored image unmirrored? I wonder if it can be done.
I have a very small reflection script already.
http://h1.ripway.com/tinyscript/ReflectionPerspective.html

well, the method works, but my reflection needs tuning to be a mirror directly on itself
http://h1.ripway.com/tinyscript/transformReflection.html
should be a simple fix.

thanks everyone! LOL

I didn't mean to thread jack here, but I figured you guys were talking about transform and blah blah blah.
It takes forever to compute and draw the reflection so I'm going to have to make duplicate mirrored images of odd pages. Oh well.

There's always hope that you guys know some trick like globalcompositeoperation or something.

OK, more threadjacking!

I fixed the flipping sequence script to draw the image backwards(meaning the right way for viewing) after it's been transformed and would normally have drawn the image mirrored.
http://h1.ripway.com/tinyscript/glossycanvas/ImageTransformPageFlipSequence.html
same link as above.

I made this as I furthered my understanding (or is it a misunderstanding? LOL) of the settransform operation





http://h1.ripway.com/tinyscript/curledpages.html
settransform then draw image, the right image, which would be mirrored, is drawn backwards so it shows up fowards, and the gradient has to be positioned in an opposite manner too. Fun stuff
i stumbled onto the curling method by mistake but it was exactly what I was looking for to make an open book

RacerX: I fail to see why you need setTranform on the last screenshot. And yes, it would be nice if you opened a thread for your page curl experiments instead of hijacking a thread

quote:

---

poi said:

RacerX: I fail to see why you need setTranform on the last screenshot. And yes, it would be nice if you opened a thread for your page curl experiments instead of hijacking a thread

---

the setTransform second variable controls the tilting. I'll post a thread later. I made the curl without the transform so I could answer your question because I had no idea, really.

I started from the test above, which was when I added perspective to the images and used the transform to set the angles.
http://h1.ripway.com/tinyscript/ImageTransformPageFlipSequenceTestTilting.html
then I made a box look.
http://h1.ripway.com/tinyscript/CanvasSetTransformImageWithPerspective.html