Added a background color for the renderer.

calder-gl · Jul 2, 2018 · 2d72c39 · 2d72c39
1 parent a42004e
commit 2d72c39
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);