Subscribe
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
16 comments:
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.
Post a Comment