Edit Question - KnowledgeHub

Title Body

In a 3D engine I'm working on I've succesfully managed to draw a cube in 3D. The only method to fill the sides is using either a solid color or gradient as far as I'm concerned. To make things more exciting, I'd really love to implement texture mapping using a simple bitmap. The point is that I can hardly find any articles or code samples on the subject of image manipulation in JavaScript. Moreover, image support in HTML5 canvas seems to be restricted to cropping. How could I go about stretching a bitmap so that a rectangular bitmap can fill up a unregular cube face? In 2D, a projected square cube face is, due to perspective, not of a square shape, so I'll have to stretch it to make it fit in any quadrilateral. Hopefully this image clarifies my point. The left face is now filled up with a white/black gradient. How could I fill it with a bitmap, after it has been texture-mapped? Does anyone have any tips on perspective texture mapping (or image manipulation at all) using JavaScript and HTML5 Canvas? Edit: I got it working, thanks to 6502! It is, however, rather CPU intensive so I'd love to hear any optimization ideas. Result using 6502's technique - Texture image used

Tags (comma-separated) Cancel