Thursday, November 2nd, 2006

3D Rendering in JavaScript

Category: Games

>We need more spinning 3D objects in our applications. Well, of course we do not, but this proof of concept is interesting to see.

The demo renders arbitrary triangles using pure JS/DOM/CSS (no use of canvas and co. here).

3D Triangles

Brendan Eich showed off some very nice canvas demos at the show last week, including DOOM running at a good clip via Canvas, with promises of major speed improvements to come.

Related Content:

  • JavaScript setting values
    In the situation of a combination box populated by JavaScript, when a dropdown list is selected, retrieving the value can be problematical. Here's a...
  • Ajax Learning Guide
    Chances are, you've been doing JavaScript and XML developer work in Lotus Domino for quite some time. This old/new approach is causing quite a stir in...
  • Integrating the Google Web Toolkit with JSF using G4jsf
    The Google Web Toolkit (GWT) has attracted a lot of attention lately as a way to make it easier for developers to add Ajax Web 2.0 features to their...
  • Get ready for HTML5 and canvas elements
    The HTML5 canvas element is a new way to display active graphics and manipulate images with JavaScript. Find out what the new element will mean for...
  • Ajax Learning Guide
    Are you a Web developer? The time has come to rethink your entire approach to developing Web applications. Find out about the Ajax approach...

Posted by Dion Almaer at 9:08 am
20 Comments

++++-
4.1 rating from 49 votes

20 Comments »

Comments feed TrackBack URI

Hedger Wang also got a variant working with transparency in IE.

http://www.hedgerwow.com/360/dhtml/css-ie-transparent-border-3d/demo.html

Comment by Scott Schiller — November 2, 2006

That’s a neat hack! But can that technique scale to 25,000 triangles like this one:
http://flexarena.blogspot.com/2006/10/3d-wireframe-renderer-for-flex.html

It would be fun to see how far this technique can be pushed.

Comment by James Ward — November 2, 2006

that one you posted there james is flah based and not JavScript based like the one in this blog post.

Its quite cool and im sure someone will have a use for it somewhere.

Comment by Matt Oakes — November 2, 2006

Now I can port Elite or Starfox to the web !

Comment by Strass — November 2, 2006

a ray tracer in js:
http://www.slimeland.com/raytrace/

Comment by Kae Verens — November 2, 2006

Strass, I think you’ll have some legal hassle there – there was a Linux port of Elite, but it was removed (at least, I can’t find it anymore) because the original author of Elite gave a hissy fit

Comment by Kae Verens — November 2, 2006

I can take my shoe off and bang it against my head, does that make it a good idea?

Comment by Snootz — November 2, 2006

I think it is great. nice one!

Comment by Richard Kimber — November 2, 2006

[...] Enlace: Real-Time 3D in JavaScript (visto en Ajaxian) [...]

Pingback by despuesdegoogle » Archivo del weblog » Renderizando en 3D con JavaScript — November 2, 2006

What about: http://www.zed0.getdata.be/J_Plotter.php

Comment by Peter — November 2, 2006

Snootz is awesome.
While this has no use, closely resembles the year 1986, and is based on a hack I wouldn’t tell my dog I was responsible for, at least it works. Why you would want it to work seems to be the point I have missed. I wonder how many hours have gone into this. If you add to that the number of days spent on Web OS, AjaxOS, and the 1,000,000,000 fading drag-and-drop scripts written by all the people that have to be special – if you take all that time and convert it at the rate of $5/hour (which we all know is clearly overpayment) you could probably buy Australia – the continent and the country. And build a rocket ship to Uranus. But it still works well – nice job.

Comment by Dan — November 2, 2006

Dan, your post made me laugh for half an hour…My stomach hurts…

Comment by Jeff — November 3, 2006

Snootz is indeed awesome, so much so in fact that I am, right now, bludgening my head with the shoe that was on my right foot.

We are headed toward the browser acting like a dumb-terminal. In 6 years Unigraphics, Catia, etc. will be running remote, either in RDP sessions or like this. 15 years after that the rich-clients will make their way back onto the scene. Rinse. Repeat.

Somewhere in there we will finally kill of the mainframe……….

Comment by Karl Moz — November 3, 2006

Amen dan and karl, amen.

Comment by Snootz — November 3, 2006

[...] via Ajaxian [...]

Pingback by 3d rendering in Javascript « Il blog di TixXio — November 5, 2006

It’s time for a JS 3D game ,) This is crazy.

Comment by Andi — November 7, 2006

Absolutely insane!

Comment by ratt — November 7, 2006

[...] A quarta parte de hoje são alguns links sobre desenvolvimento: Controle de sessão e PHP, Modelo de orientação a objetos em PHP 5, Minikit: visual effect bag, Sugar Arrays: Porting over JavaScript 1.6 Array methods, Remote Scripting Transport Patent, Amberjack: JavaScript Site Tour Creator, 3D Rendering in JavaScript e 10 things you (probably) didn’t know about PHP. [...]

Pingback by Links comentados via del.icio.us - 7 » Japs — November 19, 2006

Hey there! I was inspired by your idea and came up with “rudyment” … which you can find on my homepage link! Thanks again for your great work!

Comment by thomas — December 5, 2006

Take an example here web physics demonstrator
the main problem for real time 3d in javascript is that rendering is so slow.
calculations is not a problem, but rendering lines, triangles, etc
maybe this is still too vigorous for current browsers to do real time 3d.
But may be in the future browsers are going to provide a sets of fast drawing API, which then real 3d can come true.

Comment by tyt52 — November 10, 2010

Leave a comment

You must be logged in to post a comment.