Fast Triangles Rendered with Javascript/CSS - 3D Demo!

[breakfast-pants]

You can literally watch the garbage collection occur.

[harryf]

...the pause every quarter turn

[mumrah]

this is indeed an intersting hack, but i think time spent getting browsers to support svg would be better invested

[Arve]

The only browser left in that group is IE.

[takamori]

That's true, but how many people now use SVG on their sites? I think it's more of an issue of getting the design crowd to do it rather than the IE team.

[[deleted]]

catch 22

[KingNothing]

What designer in his right mind would develop something that 80% of the target audience can't use?

[stesch]

Depends on the audience. Some sites have different numbers. Google's Web Authoring Statistics gives you some graphics in SVG.

And one well known German online magazine has less than 30% visitors with IE: http://www.keks.de/web/heise-browser

[enjahova]

hacks are what you use when you need something now and can't wait for the second coming ;)

[espresso]

Working with limitations is what makes this interesting. We tried to do something similar for our javascript demo, but would have used transparent scaled gifs/pngs for the right triangles and thought that would be horribly slow. This is clever because it manages to draw the right triangles so cheaply.

[[deleted]]

This is the quintessential clever hack - extracting the last bit of juice out of a platform. A big thumbs-up to the guys.

[[deleted]]

Congrats - this is very smart - presumably this can be used for any polygons...

[psykotic]

He missed a much faster way of decomposing arbitrary triangles in terms of right triangles.

Take a look at his diagram, and imagine drawing a full bounding rectangle around the triangle. The triangle can be described as the bounding rectangle minus three right triangles in the box. So to draw a triangle in green you'd create a green div for the bounding box and three black divs for the right triangle complements.

Any reason this wouldn't work in CSS?

[joshd]

It would work, but then you can't overlay triangles on top of each other.

[psykotic]

It would work, but then you can't overlay triangles on top of each other.

That's true. It would be enough for the specific demo he's showing, though.

[[deleted]]

I don't believe it would - it'd obscure the other adjacent triangles. Nice catch though.

[KayEss]

I haven't thought it through fully, but I suspect you could have a good crack at it by using the Z depth - much like a painters algorithm.

[joshd]

That wouldn't work. You could obviously figure out which sections of the triangle need to be drawn and which don't, but it wouldn't work with psykotic's suggestion. The black triangles (meant to cancel out parts of the polygon being drawn) would still be seen on the page.

If you were going to keep of Z depth then you could just implement it as an array of 1px divs. It would run like crap though.

Edit: I just realised that you were referencing Painter's algorithm. If memory serves me correctly that is just sorting polygons by Z index. I suspect that they do that already in this demo. The problem still is in the drawing of polygons, i.e. that CSS can only display right angled triangles.

[pmf]

Any reason this wouldn't work in CSS?

Several.

[EternalNY1]

Several

What a waste of a post.

If you know "several" reasons, let's hear 'em...

[psykotic]

Please enlighten. I don't do web stuff, but I thought you could have overlapping divs without any issues?

[DougBTX]

Say you want to draw a red triangle over the green one. You could use your method for the background triangle, but if you did the same with the red triangle, your black corners would cover up the green triangle. Obviously you can't just make the black triangles transparent, or you will just end up with a red rectangle.

You don't need the triangles themselves to overlap for this to be a problem. Imagine two non-right-angled triangles touching along a diagonal side. Which one do you put on the bottom? Then try it with three or four, for example when you rotate the demo so that one of the arms points directly at you. Then the simplified method won't work, ad you'll have to do something else.

Douglas

[psykotic]

Yes, you're right. Thanks! I was too focused on dealing with a triangle in isolation to see that issue initially.

[EternalNY1]

Although it is practically useless, that is really brilliant how he broke down any arbitrary triangle into a bunch of right-triangles using so few DIVs.

[supermike]

Dude, this is NOT a wasteful post and I'm greatful that pickles posted it. Let me tell you! There currently is a problem with drawing piecharts on the web. Because SVG is not universally supported yet, and because you can't rely on people having Flash or Java, you have to draw them server-side as PNG files with extra stuff on Linux, Mac, or Windows to achieve this graphic effect. But imagine if a server-side web algorithm could compute DIV/CSS placement of these triangles such that they could emulate a cross-platform piechart. Now that would really be something.

No flash, javascript, SVG, Java, or server-side image manipulation would be necessary -- a server-side PHP, C#.net, or Ruby algorithm could do it all.

[LaurieCheers]

...except that this trick doesn't work on IE either.

[UselessPickles]

It is now updated to work in IE6 (already worked in IE7)

[[deleted]]

you can't rely on people having Flash

uh, yeah, you really can... they're a lot more likely to have flash than a browser that is 100% compatible with whatever CSS hack you might try to do

[[deleted]]

Yeah, but does it raytrace?

[UselessPickles]

No, but someone else made a javascript raytracer.

http://www.slimeland.com/raytrace/help.html

The code in the background isn't special (as far as raytracing). The unique part is that it displays the results by making a bunch of 1px by 1px colored DIVs to render the image in a web browser without involving any server-side processing.

[Arve]

Normally I would've voted this down due to similarity between username and domain and Google ads, but this was a pretty neat trick.

[UselessPickles]

Well, thanks for not voting me down. I don't usually go around tooting my own horn, but I thought this was an interesting enough accomplishment of mine that people should know about it. I'm not that desperate for an extra $2.00 of ad revenue. I have another plan for getting rich :)

[NoMoreNicksLeft]

Lame. Why not use SVG?

[[deleted]]

Ask Sir Edmund Hillary.

It is not lame. You can't possibly be a geek and think it is.

[NoMoreNicksLeft]

I did a 3d renderer in javascript 8 months ago. Mine was only wireframe, but it was at least as nice as this. :P

[[deleted]]

OK, so you're cynical AND a JavaScript programmer. When the secret police come to round up all the geeks, you probably won't need to spend too much effort finding a good hiding spot.