Check out my
new book!
HTML5 Games book
Canvas 3D - better textures The previous attempt at texturing was very crude and wasn't very useful as it rendered the whole texture onto every face of the model.
So now I've refined the texturing and I'm now using UV coordinates to determine which part of the texture belongs to which part of the model. This allows for nicer texturing as seen below.
It still uses affine mapping, which means that each pixel in a triangle is rendered as if it was at the same distance from the viewer as all the other pixels in that triangle.
It's still not correct, but a reasonable compromise, considering we still need something resembling a framerate.

The backside is that for now, this only works in Firefox, Opera beta and the latest WebKit nightlies, since we're now using the *ImageData methods.

Check the demo here



⇓ 24 comments Mikael Bergkvist

Friggin awesome.

April 3, 2008 at 12:36 PM
@sh

"Friggin awesome."

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

April 9, 2008 at 4:02 AM
Jacob Seidelin

Thanks!

April 9, 2008 at 4:23 AM
Anonymous

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

June 12, 2008 at 12:09 PM
Anonymous

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

November 11, 2008 at 9:18 PM
Jacob Seidelin

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

November 11, 2008 at 10:11 PM
Anonymous

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?

January 4, 2009 at 5:53 PM
Jacob Seidelin

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.

January 5, 2009 at 3:19 AM
Anonymous

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...

March 22, 2009 at 4:31 PM
Anonymous

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.

August 10, 2009 at 3:04 PM
yosh64

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.

August 22, 2009 at 7:06 PM
Anonymous

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!

October 12, 2009 at 8:48 AM
Jacob Seidelin

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).

October 12, 2009 at 10:28 AM
Anonymous

Thank you! It was helpfull!

October 13, 2009 at 2:44 AM
Anonymous

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

October 23, 2009 at 12:55 AM
Anonymous

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

January 5, 2010 at 8:20 AM
tkf This comment has been removed by the author. January 10, 2010 at 12:20 PM Michael Benin

Hey looks good in Chrome! the Javascript 3d

April 20, 2010 at 6:01 PM
Anonymous

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

September 2, 2010 at 11:55 AM
Anonymous

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

November 3, 2010 at 6:20 PM
Jules

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

Cheers,
Jules

November 24, 2010 at 8:07 AM
Theta Q

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!

September 1, 2011 at 11:01 AM
dragonseoman

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

March 16, 2012 at 3:17 AM
Unknown

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.

August 14, 2012 at 3:40 AM
Post a Comment