Javascript Triangles (and real-time 3d)
Update: Now works in IE6 thanks to a hack. Just look for the <!–[if lt IE 7]> conditional comment in the source code for details
For some reason, I decided that I want to draw triangles in a browser… without Flash, the canvas tag, or Java applets. I also wanted it to be as fast as possible, so that rules out the obvious method of creating a thin DIV for every horizontal scanline of the triangle (too many DIVs). After 2 evenings of work, I present this proof of concept.
If you like it, please digg it!
October 31st, 2006 at 9:48 pm
I registered just to leave a congratulatory message, so…
Awesome job, keep it up.
November 2nd, 2006 at 1:17 pm
Excellent. I’m not so interested in the 3D part but the much-cheaper rendering of arbitrary triangles will be very useful.
How about another routine to draw circles/ellipses by approximating the edges with triangles and filling in the interior with rectangles?
November 2nd, 2006 at 1:26 pm
Thanks.
Yeah, the 3D is pretty useless because it can’t randle much more than that simple object without dropping to unbearable framerates, but it was a good way to demonstrate how fast the triangle rendering is.
Next time I have some free time, maybe I’ll work on a generalized ploygon routine then try ellipses.
November 2nd, 2006 at 2:01 pm
True 3D rendering in JavaScript…
…
November 2nd, 2006 at 2:17 pm
Any fancy way to do lines like this
?
November 2nd, 2006 at 2:45 pm
I can’t think of any way to use this border trick for drawing lines. You’d have to make tons of DIVs to make a line, like this library does:
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
November 4th, 2006 at 3:08 am
Hi, this is pretty amazing, not plugin required for 3D!
I can’t follow ur code too well (don’t know javascript), but have questions
I’ll just ask one tho: how to the points like:
{ points: [0, 12, 1], color: new Vector(255, 64, 0) },
{ points: [1, 12, 2], color: new Vector(255, 64, 0) },
{ points: [2, 12, 3], color: new Vector(255, 64, 0) },
get converted to triangles. I.e. to the first three make one triangle, the next three another etc?
Or are there implicit shared vertices? I notice the example does not have a multiple of 3…
November 4th, 2006 at 3:23 am
The three lines of code you are quoting define 3 triangles. Vertices are shared (notice how all three of those triangles use point number 12). The points property of each triangle is an array of indicies into the points array for the object.
November 4th, 2006 at 6:29 am
oh ok, I’ll see if I can understand teh code better - I was wondering if it could be used for, say a general triangle strip.
November 4th, 2006 at 6:50 am
Ah that’s cool, it fits with what I do for terrain models.
November 5th, 2006 at 11:54 am
3d rendering in Javascript…
Si tratta solamente di un proof of concept che oltre a sembrare scarsamente utile in un’applicazione reale non offre grandi possibilitГ di personalizzazione. Rimane comunque un lavoro originale interessante da guardare e che lascia pensare……
November 10th, 2006 at 12:50 am
I noticed that the code seems to use innerHTML. In my experience, using DOM is actually faster - although YMMV.
November 10th, 2006 at 10:51 am
“In my experience, using DOM is actually faster”
That’s been the opposite of my experience when adding a large number of items to the DOM tree (especially in IE). Here’s some speed comparisons between innerHTML and DOM methods:
http://www.quirksmode.org/dom/innerhtml.html
According to the findings of that experiment, I am using the fastest method. My initial implementation did use DOM methods, and I noticed quite a difference when I switched to using innerHTML (I didn’t record any measurments, but the speed-up was noticable).
November 11th, 2006 at 2:08 am
Thanks for the innerHTML link.
I may have run into some other bottleneck when I was using innerHTML in my application. IE in particular seemed to be re-rendering images whenever I inserted into a particular DIV using innerHTML. Switching to DOM made that go away and so everything seemed faster. Perhaps it was just a side effect due to the circumstances of how the page was being rendered and the structures being inserted and surrounding it and such.
I love your app. It’s inspiring!
November 19th, 2006 at 4:25 pm
[…] Gestern habe ich mir noch überlegt, ob es eigentlich in einer angemessenen Geschwindigkeit möglich wäre eine 3D Engine mit JavaScript zu realisieren. Heute sehe ich auf uselesspickles.com, dass Jemand die gleiche Idee hatte wie ich und sich an die Umsetzung gemacht hat! […]
February 18th, 2007 at 5:29 pm
Great idea!!! Sadly it’s only usable for a very limited set of shapes, but hey, we can’t have all. When is the shading and texture mapping coming
?
February 20th, 2007 at 10:26 am
Technically, it’s usable for any shape made of triangles… it’s just slower with more triangles. Flat shading is already there (look again if you didn’t notice it), but any other type of shading or texture mapping would be impossible with this technique. Those require per-pixel rendering, which would be extremely slow with javascript/DOM/CSS.
July 18th, 2007 at 12:01 am
[…] References: Javascript Triangles (and real-time 3d) - Link Rotating 3D Polyhedron Demo - Link Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. […]
July 18th, 2007 at 7:30 am
Render 3D Objects in JavaScript…
Check out this demo of a 3D rendering engine concept that the Useless Pickles blog hacked up in JavaScript. It works by manipulating the borders of page elements so that they appear as triangles — which means it could conceivably be used to rend…
July 25th, 2007 at 9:40 am
its genious
just the way i like the things done
i don’t really need this concept. i just admire it
bravo
August 22nd, 2007 at 6:54 am
[…] Via BlenderNation, a script for exporting blender 3d models to javascript.В This reminds me of Samuel Johnson’s quip: “Sir, a woman’s preaching is like a dog’s walking on his hind legs. It is not done well; but you are surprised to find it done at all.”В The conversion is approximate and the animation slow for non-trivial models, but it is impressive to see plain javascript doing this. Kudos to useless pickles for the core triangle-drawing trickery. […]
October 30th, 2007 at 4:22 am
Great work. Your concept is explained by MS developer Erik Meijer in a video on Channel 9 (video 1, about 0:11:00). He forgot your name, but remembers the url!
December 23rd, 2007 at 10:02 am
Your cool project was mentioned by Erik Meijer (of Microsoft Research) in a video about Volta, his new project.
The video is available on channel 9:
http://channel9.msdn.com/ShowPost.aspx?PostID=324106
Erick Meijer’s home page is at:
http://research.microsoft.com/~emeijer/
Renaud