From 2d72c39c04b817fa7f7567d60b604a8956e5a687 Mon Sep 17 00:00:00 2001
From: "Andrew R. McBurney" <andrewrobertmcburney@gmail.com>
Date: Mon, 2 Jul 2018 14:38:39 -0400
Subject: [PATCH] Added a background color for the renderer.

---
 src/examples/generation.ts      |  3 ++-
 src/examples/render.ts          |  3 ++-
 src/renderer/Renderer.ts        | 18 ++++++++++++++++--
 tests/Renderer/Renderer.spec.ts |  6 ++++--
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/examples/generation.ts b/src/examples/generation.ts
index 1886d18e..e76885a8 100644
--- a/src/examples/generation.ts
+++ b/src/examples/generation.ts
@@ -16,7 +16,8 @@ const renderer: Renderer = new Renderer({
     width: 800,
     height: 600,
     maxLights: 2,
-    ambientLightColor: RGBColor.fromRGB(90, 90, 90)
+    ambientLightColor: RGBColor.fromRGB(90, 90, 90),
+    backgroundColor: RGBColor.fromHex('#FF00FF')
 });
 
 // Create light sources for the renderer
diff --git a/src/examples/render.ts b/src/examples/render.ts
index 6988138c..128a264f 100644
--- a/src/examples/render.ts
+++ b/src/examples/render.ts
@@ -21,7 +21,8 @@ const renderer: Renderer = new Renderer({
     width: 800,
     height: 600,
     maxLights: 2,
-    ambientLightColor: RGBColor.fromRGB(0, 25, 25)
+    ambientLightColor: RGBColor.fromRGB(0, 25, 25),
+    backgroundColor: RGBColor.fromHex('#0066FF')
 });
 
 // Create light sources for the renderer
diff --git a/src/renderer/Renderer.ts b/src/renderer/Renderer.ts
index 4a79424d..48e57c8a 100644
--- a/src/renderer/Renderer.ts
+++ b/src/renderer/Renderer.ts
@@ -27,6 +27,7 @@ export type RendererParams = {
     height: number;
     maxLights: number;
     ambientLightColor: Color;
+    backgroundColor: Color;
 };
 
 /**
@@ -49,6 +50,9 @@ export class Renderer {
     private lights: Light[];
     private ambientLight: vec3;
 
+    // Length four array representing an RGBA color
+    private backgroundColorArray: [number, number, number, number];
+
     private projectionMatrix: mat4 = mat4.create();
     private ctx2D: CanvasRenderingContext2D;
 
@@ -57,7 +61,8 @@ export class Renderer {
             width: 0,
             height: 0,
             maxLights: 0,
-            ambientLightColor: RGBColor.fromHex('#000000')
+            ambientLightColor: RGBColor.fromHex('#000000'),
+            backgroundColor: RGBColor.fromHex('#000000')
         }
     ) {
         this.width = params.width;
@@ -66,6 +71,15 @@ export class Renderer {
         this.lights = [];
         this.ambientLight = params.ambientLightColor.asVec();
 
+        // Yeah, this is kinda sketchy, but REGL requires a [number, number, number, number] array instead of a number[] array
+        const backgroundColorArray = params.backgroundColor.asArray();
+        this.backgroundColorArray = [
+            backgroundColorArray[0],
+            backgroundColorArray[1],
+            backgroundColorArray[2],
+            1
+        ];
+
         // Create a single element to contain the renderer view
         this.stage = document.createElement('div');
         this.stage.style.width = `${this.width}px`;
@@ -104,7 +118,7 @@ export class Renderer {
         this.clearAll = () => {
             this.ctx2D.clearRect(0, 0, this.width, this.height);
             this.regl.clear({
-                color: [0, 0, 0, 1],
+                color: this.backgroundColorArray,
                 depth: 1
             });
         };
diff --git a/tests/Renderer/Renderer.spec.ts b/tests/Renderer/Renderer.spec.ts
index c8f3a39d..4cee3e97 100644
--- a/tests/Renderer/Renderer.spec.ts
+++ b/tests/Renderer/Renderer.spec.ts
@@ -14,7 +14,8 @@ describe('Renderer', () => {
                 width: 800,
                 height: 600,
                 maxLights: maxLights,
-                ambientLightColor: RGBColor.fromHex('#000000')
+                ambientLightColor: RGBColor.fromHex('#000000'),
+                backgroundColor: RGBColor.fromHex('#000000')
             });
             expect(renderer.getLights().length).toEqual(0);
             renderer.addLight(light);
@@ -28,7 +29,8 @@ describe('Renderer', () => {
                 width: 800,
                 height: 600,
                 maxLights: maxLights,
-                ambientLightColor: RGBColor.fromHex('#000000')
+                ambientLightColor: RGBColor.fromHex('#000000'),
+                backgroundColor: RGBColor.fromHex('#000000')
             });
             renderer.addLight(light);
             expect(renderer.getLights().length).toEqual(1);