StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POImage manipulation and texture mapping using HTML5 Canvas?
text
Body
copied!<p>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.</p> <p>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.</p> <p>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.</p> <p>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?</p> <p><img src="https://i.stack.imgur.com/M5omO.png" alt="Cube"></p> <p>Does anyone have any tips on perspective texture mapping (or image manipulation at all) using JavaScript and HTML5 Canvas?</p> <p><strong>Edit:</strong> I got it working, thanks to 6502!</p> <p>It is, however, rather CPU intensive so I'd love to hear any optimization ideas.</p> <p><a href="https://i.stack.imgur.com/Uwb86.png" rel="noreferrer">Result using 6502's technique</a> - <a href="http://farm4.static.flickr.com/3593/3491018590_866b089479_z.jpg?zz=1" rel="noreferrer">Texture image used</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload