Topic: Absolutely stunning 3d on 2d canvas Pages that link to <a href="https://ozoneasylum.com/backlink?for=30853" title="Pages that link to Topic: Absolutely stunning 3d on 2d canvas" rel="nofollow" >Topic: Absolutely stunning 3d on 2d canvas\

 
Author Thread
Arve
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2008

IP logged posted posted 02-18-2009 02:18 Edit Quote

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.

iron_wallaby
Nervous Wreck (II) Inmate

From:
Insane since: Dec 2007

IP logged posted posted 02-18-2009 05:36 Edit Quote

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...

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-18-2009 11:21 Edit Quote

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().

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 02-18-2009 13:52 Edit Quote
quote:

Arve said:

Sorry, inmates.



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

Nice stuff for sure.

Later,

C:\

benjoffe
Obsessive-Compulsive (I) Inmate

From: Australia
Insane since: Feb 2009

IP logged posted posted 02-18-2009 14:48 Edit Quote

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

Arve
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2008

IP logged posted posted 02-18-2009 15:27 Edit Quote

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

Arve
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jul 2008

IP logged posted posted 02-18-2009 15:35 Edit Quote

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)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-18-2009 16:42 Edit Quote

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)

iron_wallaby
Nervous Wreck (II) Inmate

From:
Insane since: Dec 2007

IP logged posted posted 02-18-2009 17:32 Edit Quote

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?

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-18-2009 18:38 Edit Quote

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

iron_wallaby
Nervous Wreck (II) Inmate

From:
Insane since: Dec 2007

IP logged posted posted 02-19-2009 18:49 Edit Quote

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.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-19-2009 20:35 Edit Quote

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.

Kyle the Feared
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jan 2009

IP logged posted posted 02-19-2009 22:12 Edit Quote

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.

iron_wallaby
Nervous Wreck (II) Inmate

From:
Insane since: Dec 2007

IP logged posted posted 02-20-2009 02:31 Edit Quote

@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).

racerX
Nervous Wreck (II) Inmate

From: Portland Oregon
Insane since: Jun 2006

IP logged posted posted 02-23-2009 05:13 Edit Quote

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?

racerX
Nervous Wreck (II) Inmate

From: Portland Oregon
Insane since: Jun 2006

IP logged posted posted 02-23-2009 05:21 Edit Quote

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

racerX
Nervous Wreck (II) Inmate

From: Portland Oregon
Insane since: Jun 2006

IP logged posted posted 02-23-2009 07:22 Edit Quote

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.

racerX
Nervous Wreck (II) Inmate

From: Portland Oregon
Insane since: Jun 2006

IP logged posted posted 02-23-2009 20:43 Edit Quote

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.

racerX
Nervous Wreck (II) Inmate

From: Portland Oregon
Insane since: Jun 2006

IP logged posted posted 02-24-2009 08:03 Edit Quote

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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 02-24-2009 09:29 Edit Quote

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

racerX
Nervous Wreck (II) Inmate

From: Portland Oregon
Insane since: Jun 2006

IP logged posted posted 02-24-2009 16:29 Edit Quote
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

coach
Nervous Wreck (II) Inmate

From:
Insane since: May 2011

IP logged posted posted 05-31-2011 11:10 Edit Quote
Edit TP: spam removed


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu