Textures
In the previous tutorial we learned how to show textures on the walls. In this tutorial we will use file textures images to put the image data in the wall. This is not hard, we will use almost all of implemented things we did previously. Here, more functions will be created to get the image data and load it to memory.
Hint: The image data is an array with the pixel values of some image. In HTML5 canvas image data, the pixels are positioned for each index of the array. For example, if we have a 1x1 image, the data of it would has a size of 4. The array would be [R, G, B, Alpha].
The first thing to do is import the image in the HTML DOM. This will guarantee that the image will be loaded when the page gets opened. The image we will use is the image 16x16 below:
Image: texture.png
The implementation is:
File: raycasting.html
<!-- ... -->
<body>
<img id="texture" src="texture.png" style="display: none">
</body>
<!-- ... -->