Javascript/Canvas 3D Renderer - now with textures!
UPDATE: An updated version with better texturing has been posted here
Dabbling a bit further into the 3D Canvas experiments, I tried to get some basic texturing going on. To do any real, correct texturing, you'd have to read and render the texture image data on a pixel-by-pixel basis, since each pixel would have different distance from the viewer. While I suppose that would be possible (using the *ImageData methods), I don't want to think about how slow it would probably be.
What we're doing here instead is just rendering each face as if all the pixels were at the same distance. That means we can just draw a triangular image (rotated, skewed and scaled) to fit the triangular faces. This approach may cause visible distortion (or lack of distortion) in some cases, but with the models used here, I think the result is acceptable.
Performance is of course lower when using textures, but the models with low polygon-count can easily still be rotated in something resembling real time. Safari is still the fastest for me, followed by Opera and Firefox. No textures for IE for now, I'm afraid.
Check it out here: http://www.nihilogic.dk/labs/canvas3dtexture/
UPDATE: An updated version with better texturing has been posted here
Dabbling a bit further into the 3D Canvas experiments, I tried to get some basic texturing going on. To do any real, correct texturing, you'd have to read and render the texture image data on a pixel-by-pixel basis, since each pixel would have different distance from the viewer. While I suppose that would be possible (using the *ImageData methods), I don't want to think about how slow it would probably be.
What we're doing here instead is just rendering each face as if all the pixels were at the same distance. That means we can just draw a triangular image (rotated, skewed and scaled) to fit the triangular faces. This approach may cause visible distortion (or lack of distortion) in some cases, but with the models used here, I think the result is acceptable.
Performance is of course lower when using textures, but the models with low polygon-count can easily still be rotated in something resembling real time. Safari is still the fastest for me, followed by Opera and Firefox. No textures for IE for now, I'm afraid.
Check it out here: http://www.nihilogic.dk/labs/canvas3dtexture/
Great! Really, really great!!!
November 6, 2008 at 9:45 AM x3akGreat!
December 2, 2008 at 1:41 PM CosminAmazing work, great!
June 13, 2013 at 11:48 AM