3D renderer ENTIRELY in CSS3

[Mihail Ivanchev]

Hello List,

I had an interesting idea I wanted to try out yesterday, to make a 3D renderer entirely in CSS3, just to see if it's possible, since I supposed using masking, skewing and 3D transformations, one can achieve anything possible. no external things required. After spending the night fixing linear algebra issues, I finally managed to get it going with the help of Haxe :) If you're interested you can check it out here:

https://dl.dropbox.com/u/13798573/CSS3Render/bin/index.html

and source:

https://dl.dropbox.com/u/13798573/CSS3Render.zip

I am sorry I embedded the model directly in the source code and for the hacky nature of everything, this was a quick prototype. No texture mapping yet, but that would surely be also possible!

Regards,

Mihail

[Mihail Ivanchev]

For those of you not seeing the 3D model, testing requires a WebKit browser, such as Chrome.

[Ashiq A.]

Looks very interesting! What's the FPS on this thing? It looks like 1-2 on my computer (quad-core, decent GPU).

I'm not sure how suitable 3D rendering is to CSS, because of the high-performance nature (lots of verticies and polygons). Still, this is an awesome idea, and it only takes one person to take it to the next level :)

--Ashiq

On Sat, Nov 3, 2012 at 8:04 AM, Mihail Ivanchev <miha...@gmail.com> wrote:

For those of you not seeing the 3D model, testing requires a WebKit browser, such as Chrome.

--
To post to this group haxe...@googlegroups.com
http://groups.google.com/group/haxelang?hl=en
 
 
 

[Luca]

Specifically a very up to date version of firefox/chrome, or else it still doesn't work.

[j...@justinfront.net]

Mihail

Nice but I use firefox more :)

You need to really change the JQuery lines.  I am not sure that you need a selector your only changing one node? should be able to just access the style?

The changes needed are line 78

new JQuery(Std.format("#polygon-$index .face")).css("-moz-transform", faceTransform);

new JQuery(Std.format("#polygon-$index")).css("-moz-transform", triangleTransform);

and for Opera try... 

new JQuery(Std.format("#polygon-$index .face")).css("-o-transform", faceTransform);

new JQuery(Std.format("#polygon-$index")).css("-o-transform", triangleTransform);

not sure about IE10 it maybe -o as well?

but my approach would be to maybe add a few methods to Divtastic see line 954 for general structure I would need to work out the detail but if you can avoid JQuery and selectors I think potentially you might be able to gain a small speed increase or maybe it would be much slower I am not too sure depends?

Best 

Justin

PS on firefox I am seeing some distortion.

[Laurent Auneau]

Are you handling Z depth?

Looks like a flat model, so not really 3D. You'd have to go for a BSP and back to front rendering, which would mean a lot of overdraw.

But maybe you came up with something clever?

-L

--

[Jan_Flanders]

On Saturday, November 3, 2012 8:07:44 PM UTC+1, Laurent Auneau wrote:

Looks like a flat model, so not really 3D.

 

Some people actually see a non flat model: http://simn.de/haxe/nonflatkey.png
But I (and some others) see the same as you: http://www.haxer.be/screenshots/flatkey.png

Jan

[Ashiq A.]

Odd.

I see a non-flat model as well.

--

[Joshua Granick]

If you are going to use CSS transforms, make sure you also include the unprefixed "transform" property, since the current versions of Opera and other browsers are dropping the vendor prefix

--

Using Opera's mail client: http://www.opera.com/mail/

[Joshua Granick]

Although many browsers support CSS transforms, they don't all support 3D. Most support 2D transforms only