Render textures

script.js

@@ -1,18 +1,39 @@
 'use strict';
 
-// Fetch and instantiate our wasm module
-fetch("rust.wasm").then(response =>
-    response.arrayBuffer()
-).then(bytes =>
-    WebAssembly.instantiate(bytes, {
-        env: {
-            cos: Math.cos,
-            sin: Math.sin,
-            Math_tan: Math.tan,
-        }
-    })
-).then(results => {
-    const mod = results.instance.exports;
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+        img.src = src;
+    });
+}
+
+const wasm =
+    fetch("rust.wasm").then(response =>
+        response.arrayBuffer()
+    ).then(bytes =>
+        WebAssembly.instantiate(bytes, {
+            env: {
+                cos: Math.cos,
+                sin: Math.sin,
+                Math_tan: Math.tan,
+            }
+        })
+    );
+
+const textures = loadImage("textures.png")
+    .then(img => {
+        const canvas = document.createElement("canvas");
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0);
+        return ctx.getImageData(0, 0, img.width, img.height);
+    });
+
+Promise.all([wasm, textures]).then(([wasm, textures]) => {
+    const mod = wasm.instance.exports;
     const canvas = document.getElementById('screen');
 
     const width  = canvas.width;
@@ -42,16 +63,22 @@ fetch("rust.wasm").then(response =>
     const mapByteSize = mapWidth * mapHeight;
     const mapPtr = mod.alloc(mapByteSize);
 
+    const texturesByteSize = textures.width * textures.height * 4;
+    const texturesPtr = mod.alloc(texturesByteSize);
+
     // Data shared between JS and WASM:
     const mapBuf = new Uint8ClampedArray(mod.memory.buffer, mapPtr, mapByteSize);
     for (let i = 0; i < mapByteSize; ++i) mapBuf[i] = map.charCodeAt(i);
 
     const screenBuf = new Uint8ClampedArray(mod.memory.buffer, screenPtr, screenByteSize);
+    const img = new ImageData(screenBuf, width, height);
+
+    const texturesBuf = new Uint8ClampedArray(mod.memory.buffer, texturesPtr, texturesByteSize);
+    texturesBuf.set(textures.data);
 
     // --
 
     const ctx = canvas.getContext('2d');
-    const img = new ImageData(screenBuf, width, height);
 
     const focusPoint = {
         x: gridSize * 2.5,
@@ -70,6 +97,7 @@ fetch("rust.wasm").then(response =>
         mod.fill(
             mapPtr, mapWidth, mapHeight,
             screenPtr, width, height,
+            texturesPtr, textures.width, textures.height,
             focusPoint.x, focusPoint.y,
             direction.x, direction.y
         );

src/core.rs

@@ -10,7 +10,7 @@ const WALL_HEIGHT: f64 = 64.;
 const CEIL: Pixel = Pixel { r: 255, g: 0, b: 0, a: 255 };
 const FLOOR: Pixel = Pixel { r: 0, g: 0, b: 255, a: 255 };
 
-pub fn render<F>(map: ArrayView2<u8>, screen: &mut ArrayViewMut2<Pixel>, pos: Vector2<f64>, dir: Vector2<f64>, cast_ray: F)
+pub fn render<F>(map: ArrayView2<u8>, screen: &mut ArrayViewMut2<Pixel>, wall: ArrayView2<Pixel>, pos: Vector2<f64>, dir: Vector2<f64>, cast_ray: F)
 where
     F: Fn(ArrayView2<u8>, Vector2<f64>, Vector2<f64>) -> Option<(Vector2<f64>, f64)>
 {
@@ -54,22 +54,7 @@ where
         let dv = 64. / projected_height as f64;
         let mut v = ((mid - projected_height/2.).floor() - ceil as f64) * -dv;
         for y in ceil..floor {
-            let i = (u / 8. + v / 8.) as i32 & 1;
-            *screen.px(x, y) = if i == 0 {
-                Pixel {
-                    r: (255. * u / 64.) as u8,
-                    g: 255,
-                    b: 255 - (255. * v / 64.) as u8,
-                    a: 255,
-                }
-            } else {
-                Pixel {
-                    r: 64,
-                    g: 64,
-                    b: 64,
-                    a: 255,
-                }
-            };
+            *screen.px(x, y) = wall[[v as usize, u as usize]];
             v += dv;
         }
 
@@ -100,12 +85,13 @@ mod test {
             x   x\
             xxxxx"
         ).unwrap();
+        let texture = Array2::default((64, 64));
 
         let pos = Vector2::new(map.dim().1 as f64 / 2. * SQUARE_SZ, map.dim().0 as f64 / 2. * SQUARE_SZ);
         for ang in 0..10 {
             let rad = ang as f64 * TAU / 10.;
             let dir = Vector2::new(rad.cos(), rad.sin());
-            render(map, &mut screen.view_mut(), pos, dir, continuous::cast_ray);
+            render(map, &mut screen.view_mut(), texture.view(), pos, dir, continuous::cast_ray);
         }
     }
 
@@ -121,12 +107,13 @@ mod test {
             x   x\
             xx xx"
         ).unwrap();
+        let texture = Array2::default((64, 64));
 
         let pos = Vector2::new(map.dim().1 as f64 / 2. * SQUARE_SZ, map.dim().0 as f64 / 2. * SQUARE_SZ);
         for ang in 0..10 {
             let rad = ang as f64 * TAU / 10.;
             let dir = Vector2::new(rad.cos(), rad.sin());
-            render(map, &mut screen.view_mut(), pos, dir, continuous::cast_ray);
+            render(map, &mut screen.view_mut(), texture.view(), pos, dir, continuous::cast_ray);
         }
     }
 }

src/main.rs

@@ -1,7 +1,7 @@
 #![feature(allocator_api)]
 
+#[macro_use] extern crate ndarray;
 extern crate cgmath;
-extern crate ndarray;
 
 mod consts;
 mod continuous;
@@ -13,7 +13,7 @@ use std::mem;
 use std::slice;
 
 use cgmath::Vector2;
-use ndarray::{ArrayView2, ArrayViewMut2};
+use ndarray::{ArrayView2, ArrayViewMut2, ArrayView4, ShapeBuilder};
 
 #[no_mangle]
 pub extern "C" fn alloc(size: usize) -> *mut u8 {
@@ -35,6 +35,7 @@ pub extern "C" fn dealloc(ptr: *mut u8, size: usize) {
 pub fn fill(
     map_ptr: *mut u8, map_width: usize, map_height: usize,
     screen_ptr: *mut u8, screen_width: usize, screen_height: usize,
+    textures_ptr: *mut u8, textures_width: usize, textures_height: usize,
     cx: f64, cy: f64,
     dx: f64, dy: f64
 ) {
@@ -57,10 +58,22 @@ pub fn fill(
     };
     let map = ArrayView2::from_shape((map_height, map_width), map_slice).unwrap();
 
+    let textures_slice: &[screen::Pixel] = unsafe {
+        slice::from_raw_parts(
+            std::mem::transmute(textures_ptr),
+            textures_width * textures_height
+        )
+    };
+    let textures = ArrayView4::from_shape(
+        (19, 6, 64, 64).strides((64*6*64, 64, 64*6, 1)),
+        textures_slice
+    ).unwrap();
+    let wall: ArrayView2<screen::Pixel> = textures.slice(s![0, 0, .., ..]);
+
     let pos = Vector2::new(cx, cy);
     let dir = Vector2::new(dx, dy);
 
-    core::render(map, &mut screen, pos, dir, continuous::cast_ray);
+    core::render(map, &mut screen, wall, pos, dir, continuous::cast_ray);
 }
 
 fn main() {