Friggin awesome.

"Friggin awesome."

I'd have to agree. Seeing this and Mario has just added to my inspiration to learn JavaScript better!

Thanks!

This is highly helpful to understand the real power of Javascript and Canvas. Well done!

Any idea why the textures don't seem to load in Chrome?

I don't think Chrome has the getImageData method, in which case the textures won't work.

AWESOME! This is by far the best Ive ever seen! Ive ben trying to make 3d games for internet using only javascript and canvas. Is there possibly a way to download this?

Not at the moment, no. But you're free to take a look at the source to get inspiration, of course, even if it is a bit messy in there.

Good work. I have just started experimenting with the canvas object - but coming from an OpenGL coding background it is simply extremely sad how sucky the canvas specs are. You really found some workarounds - which is amazing if I look at the canvas API.

There are so many high level features with little usage (shadow, radial gradients etc.) compared to the lack of a simple vertex-list / indexed primitive-list (triangles, tri-strips etc.) approach that would allow one to emulate all the idiotic highlevel features that are hardly ever needed but that are offered by the 2D context. The current implementation is clearly not suited for making anything more complex than pong. It's so sad that after years of lack for graphical output for browsers that this is all that the committee came up with. Hopefully, some browser is going to offer a .getContext("3d") object that offers proper methods. So frustrating...

I love canvas and javascript, but am totally naive when it comes to 3d programming. It would be awesome if you could use this to make a nicely documented library.

Ahh, just read comment #9 and I totally disagree. I think the canvas 2D context API is great, remember this is a 2D context and it pretty much has everything you could ever want (I was thinking of replicating it as a general graphics API in C++), the only thing more I really would have liked are blend operations, I don't think the composite operations are quite enough :).

Anyhows I have just come from implementing my own software 3D renderer using the canvas 2d context (and no it's not based on the one above, though I think seeing this was a reason I got into doing it :)). I started from scratch and pretty much worked everything out myself, though I did have a quick look at the source code from the above renderer before starting. I actually just came here again now to see how they done the texturing, I was just experimenting with the canvas setTransform() for texturing, but this alone is not enough and thanks to your source code I see I can use clip() to get the job done :), but I'm still not sure if I will implement texturing yet.

Also, my initial thoughts about the above 3d renderer is what if you want to render more than one model? because you render one complete mesh at a time you must sort all the objects before drawing... with mine you submit all ya objects to the renderer and it sorts and renders all the faces together. I also have a modelview matrix, and use 4x4 transformation matrices. Umm, that's pretty much it... I'm actually looking to build mine into a general 3d rendering library.

I will make a post about mine soon on my blog for yas to checkout at http://yosh64.blogspot.com, I also have another blog/website (which I just made a new theme for, gotta try transfer it over to my blogspot.com blog) at http://yosh64.redirectme.net.

Anyhows thanks for the inspiration and such, cyas.

Hello!
Perfect demo!

I have try to run it locally (with saved page), but my Firefox 3.5.3 say me:

Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "Mesh.js Line: 236"]

This line is:
var oSrcDataObj = oSrcCtx.getImageData(0, 0, iSrcWidth, iSrcHeight);

Could you help me please why this error happened and how eliminate it?

ps. I am sorry if my question is stupid, I have just start learning javascript after 8 years of C++)

Thank you!

Not a stupid question at all. The error is due to security issues when canvas accesses image data. It is not allowed to get data from local files or files on other domains. You'll need to run it from a web server to get it working (something running on localhost should be fine).

Thank you! It was helpfull!

Thank you, Jacob. It's saved a lot of my time.

Could also learn how to make this and where is it possible to take source?

Hey looks good in Chrome! the Javascript 3d

very good job , it also can be included a fluid simulation and heat in physics if you use this even though interesting document of the by using precalc tables or claiming for lower precision the source code for android is at MIT
http://augustine.mit.edu/methodology/papers/atp_compfluids_preprint.pdf
http://augustine.mit.edu/methodology/methodology_rbAPPmit_CS_Android_License.htm
thank you very much David

AMAZING. please, if you could make this a library or something. and hopefully, a simple library. ones for those who aren't super geniuses.

How did you create the JSON files? Did you use a converter or manually create them, or other?

Cheers,
Jules

I have thought of doing some 3D in the navigation of political information. I'd like you to check out my site and see what you think!
http://www.ultrafaction.com/phase1.html
Thanks!

That is one of the best 3d canvas textures i have seen in a few years. Great info, btw. kinh mat thoi trang

Please check this other project and combine your efforts, that would be the perfect world !!
(http://code.google.com/p/jsc3d/)

This other project is great (standard 3D input files .obj and .mtl, as well as Chrome and IE9 support) The only problem in that one is the lack of speed in Safari for windows and ipad.