melonjs 14.5.0 → 15.1.0

package/src/video/texture/atlas.js

@@ -1,6 +1,4 @@
 import Vector2d from "./../../math/vector2.js";
-import WebGLRenderer from "./../webgl/webgl_renderer.js";
-import TextureCache from "./../texture/cache.js";
 import Sprite from "./../../renderable/sprite.js";
 import { renderer } from "./../video.js";
 import pool from "./../../system/pooling.js";
@@ -88,8 +86,8 @@ export class TextureAtlas {
         if (typeof (atlases) !== "undefined") {
             // normalize to array to keep the following code generic
             atlases = Array.isArray(atlases) ? atlases : [atlases];
-            for (var i in atlases) {
-                var atlas = atlases[i];
+            for (let i in atlases) {
+                let atlas = atlases[i];
 
                 if (typeof(atlas.meta) !== "undefined") {
                     // Texture Packer or Free Texture Packer
@@ -98,7 +96,7 @@ export class TextureAtlas {
                         // set the texture
                         if (typeof(src) === "undefined") {
                             // get the texture name from the atlas meta data
-                            var image = getImage(atlas.meta.image);
+                            let image = getImage(atlas.meta.image);
                             if (!image) {
                                 throw new Error(
                                     "Atlas texture '" + image + "' not found"
@@ -159,11 +157,7 @@ export class TextureAtlas {
         // Add self to TextureCache if cache !== false
         if (cache !== false) {
             this.sources.forEach((source) => {
-                if (cache instanceof TextureCache) {
-                    cache.set(source, this);
-                } else {
-                    renderer.cache.set(source, this);
-                }
+                renderer.cache.set(source, this);
             });
         }
     }
@@ -173,17 +167,17 @@ export class TextureAtlas {
      * @ignore
      */
     parse(data) {
-        var atlas = {};
+        let atlas = {};
 
         data.frames.forEach((frame) => {
             // fix wrongly formatted JSON (e.g. last dummy object in ShoeBox)
             if (frame.hasOwnProperty("filename")) {
                 // Source coordinates
-                var s = frame.frame;
+                let s = frame.frame;
 
-                var originX, originY;
+                let originX, originY;
                 // Pixel-based offset origin from the top-left of the source frame
-                var hasTextureAnchorPoint = (frame.spriteSourceSize && frame.sourceSize && frame.pivot);
+                let hasTextureAnchorPoint = (frame.spriteSourceSize && frame.sourceSize && frame.pivot);
                 if (hasTextureAnchorPoint) {
                     originX = (frame.sourceSize.w * frame.pivot.x) - ((frame.trimmed) ? frame.spriteSourceSize.x : 0);
                     originY = (frame.sourceSize.h * frame.pivot.y) - ((frame.trimmed) ? frame.spriteSourceSize.y : 0);
@@ -210,16 +204,16 @@ export class TextureAtlas {
      * @ignore
      */
     parseFromSpriteSheet(data) {
-        var atlas = {};
-        var image = data.image;
-        var spacing = data.spacing || 0;
-        var margin = data.margin || 0;
+        let atlas = {};
+        let image = data.image;
+        let spacing = data.spacing || 0;
+        let margin = data.margin || 0;
 
-        var width = image.width;
-        var height = image.height;
+        let width = image.width;
+        let height = image.height;
 
         // calculate the sprite count (line, col)
-        var spritecount = pool.pull("Vector2d",
+        let spritecount = pool.pull("Vector2d",
             ~~((width - margin + spacing) / (data.framewidth + spacing)),
             ~~((height - margin + spacing) / (data.frameheight + spacing))
         );
@@ -227,8 +221,8 @@ export class TextureAtlas {
         // verifying the texture size
         if ((width % (data.framewidth + spacing)) !== 0 ||
             (height % (data.frameheight + spacing)) !== 0) {
-            var computed_width = spritecount.x * (data.framewidth + spacing);
-            var computed_height = spritecount.y * (data.frameheight + spacing);
+            let computed_width = spritecount.x * (data.framewidth + spacing);
+            let computed_height = spritecount.y * (data.frameheight + spacing);
             if (computed_width - width !== spacing && computed_height - height !== spacing) {
                 // "truncate size" if delta is different from the spacing size
                 width = computed_width;
@@ -244,8 +238,8 @@ export class TextureAtlas {
         }
 
         // build the local atlas
-        for (var frame = 0, count = spritecount.x * spritecount.y; frame < count; frame++) {
-            var name = "" + frame;
+        for (let frame = 0, count = spritecount.x * spritecount.y; frame < count; frame++) {
+            let name = "" + frame;
             atlas[name] = {
                 name        : name,
                 texture     : "default", // the source texture
@@ -316,10 +310,10 @@ export class TextureAtlas {
             console.warn("Adding texture region", name, "for texture", this);
         }
 
-        var source = this.getTexture();
-        var atlas = this.getAtlas();
-        var dw = source.width;
-        var dh = source.height;
+        let source = this.getTexture();
+        let atlas = this.getAtlas();
+        let dw = source.width;
+        let dh = source.height;
 
         atlas[name] = {
             name    : name,
@@ -341,7 +335,7 @@ export class TextureAtlas {
      * @returns {object}
      */
     getRegion(name, atlas) {
-        var region;
+        let region;
         if (typeof atlas === "string") {
             region = this.getAtlas(atlas)[name];
         } else {
@@ -364,11 +358,11 @@ export class TextureAtlas {
      */
     getUVs(name) {
         // Get the source texture region
-        var region = this.getRegion(name);
+        let region = this.getRegion(name);
 
         if (typeof(region) === "undefined") {
             // TODO: Require proper atlas regions instead of caching arbitrary region keys
-            var keys = name.split(","),
+            let keys = name.split(","),
                 sx = +keys[0],
                 sy = +keys[1],
                 sw = +keys[2],
@@ -388,11 +382,11 @@ export class TextureAtlas {
      */
     addUVs(atlas, name, w, h) {
         // ignore if using the Canvas Renderer
-        if (renderer instanceof WebGLRenderer) {
+        if (typeof renderer.gl !== "undefined") {
             // Source coordinates
-            var s = atlas[name].offset;
-            var sw = atlas[name].width;
-            var sh = atlas[name].height;
+            let s = atlas[name].offset;
+            let sw = atlas[name].width;
+            let sh = atlas[name].height;
 
             atlas[name].uvs = new Float32Array([
                 s.x / w,        // u0 (left)
@@ -402,7 +396,7 @@ export class TextureAtlas {
             ]);
             // Cache source coordinates
             // TODO: Remove this when the Batcher only accepts a region name
-            var key = s.x + "," + s.y + "," + w + "," + h;
+            let key = s.x + "," + s.y + "," + w + "," + h;
             atlas[key] = atlas[name];
         }
         return atlas[name].uvs;
@@ -423,13 +417,13 @@ export class TextureAtlas {
      * ...
      * ...
      * // create a new "coin" sprite
-     * var sprite = game.texture.createSpriteFromName("coin.png");
+     * let sprite = game.texture.createSpriteFromName("coin.png");
      * // set the renderable position to bottom center
      * sprite.anchorPoint.set(0.5, 1.0);
      * ...
      * ...
      * // create a 9-slice sprite
-     * var dialogPanel = game.texture.createSpriteFromName(
+     * let dialogPanel = game.texture.createSpriteFromName(
      *    "rpg_dialo.png",
      *    // width & height are mandatory for 9-slice sprites
      *    { width: this.width, height: this.height },
@@ -462,7 +456,7 @@ export class TextureAtlas {
      * );
      *
      * // create a new Animated Sprite
-     * var sprite = game.texture.createAnimationFromName([
+     * let sprite = game.texture.createAnimationFromName([
      *     "walk0001.png", "walk0002.png", "walk0003.png",
      *     "walk0004.png", "walk0005.png", "walk0006.png",
      *     "walk0007.png", "walk0008.png", "walk0009.png",
@@ -479,12 +473,12 @@ export class TextureAtlas {
      * sprite.anchorPoint.set(0.5, 1.0);
      */
     createAnimationFromName(names, settings) {
-        var tpAtlas = [], indices = {};
-        var width = 0, height = 0;
-        var region;
+        let tpAtlas = [], indices = {};
+        let width = 0, height = 0;
+        let region;
         // iterate through the given names
         // and create a "normalized" atlas
-        for (var i = 0; i < names.length; ++i) {
+        for (let i = 0; i < names.length; ++i) {
             region = this.getRegion(names[i]);
             if (region == null) {
                 // throw an error

package/src/video/texture/cache.js

@@ -49,14 +49,14 @@ class TextureCache {
      * @ignore
      */
     get(image, atlas) {
-        var entry;
+        let entry;
 
         if (typeof atlas === "undefined") {
             entry = this.cache.get(image)[0];
         } else {
             // manage cases where a specific atlas is specified
             this.cache.forEach((value, key) => {
-                var _atlas = value.getAtlas()[0];
+                let _atlas = value.getAtlas()[0];
                 if (key === image && _atlas.width === atlas.framewidth && _atlas.height === atlas.frameheight) {
                     entry = value;
                 }
@@ -88,7 +88,7 @@ class TextureCache {
      */
     tint(src, color) {
         // make sure the src is in the cache
-        var image_cache = this.tinted.get(src);
+        let image_cache = this.tinted.get(src);
 
         if (image_cache === undefined) {
             image_cache = this.tinted.set(src, new Map());
@@ -105,12 +105,12 @@ class TextureCache {
      * @ignore
      */
     set(image, texture) {
-        var width = image.width;
-        var height = image.height;
+        let width = image.width;
+        let height = image.height;
 
         // warn if a non POT texture is added to the cache when using WebGL1
         if (renderer.WebGLVersion === 1 && (!isPowerOfTwo(width) || !isPowerOfTwo(height))) {
-            var src = typeof image.src !== "undefined" ? image.src : image;
+            let src = typeof image.src !== "undefined" ? image.src : image;
             console.warn(
                 "[Texture] " + src + " is not a POT texture " +
                 "(" + width + "x" + height + ")"

package/src/video/texture/canvas_texture.js

@@ -3,7 +3,7 @@ import { setPrefixed } from "./../../utils/agent.js";
 import { clamp } from "../../math/math.js";
 
 // default canvas settings
-var defaultAttributes = {
+let defaultAttributes = {
     offscreenCanvas : false,
     willReadFrequently : false,
     antiAlias : false,
@@ -65,7 +65,7 @@ class CanvasTexture {
      * @param {boolean} [enable=false]
      */
     setAntiAlias(enable = false) {
-        var canvas = this.canvas;
+        let canvas = this.canvas;
 
         // enable/disable antialias on the given Context2d object
         setPrefixed("imageSmoothingEnabled", enable, this.context);
@@ -117,6 +117,66 @@ class CanvasTexture {
         return this.context.getImageData(x, y, width, height);
     }
 
+    /**
+     * creates a Blob object representing the image contained in this canvas texture
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning a Blob object representing the image contained in this canvas texture
+     * @example
+     * canvasTexture.convertToBlob().then((blob) => console.log(blob));
+     */
+    toBlob(options) {
+        if (typeof this.canvas.convertToBlob === "function") {
+            return this.canvas.convertToBlob(options);
+        } else {
+            return new Promise(function(resolve) {
+                this.canvas.toBlob((blob) => {
+                    resolve(blob);
+                }, options ? options.type : undefined, options ? options.quality : undefined);
+            });
+        }
+    }
+
+    /**
+     * creates an ImageBitmap object from the most recently rendered image of this canvas texture
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning an ImageBitmap.
+     * @example
+     * canvasTexture.transferToImageBitmap().then((bitmap) => console.log(bitmap));
+     */
+    toImageBitmap(options) {
+        return new Promise((resolve) => {
+            if (typeof this.canvas.transferToImageBitmap === "function") {
+                resolve(this.canvas.transferToImageBitmap());
+            } else {
+                let image = new Image();
+                image.src = this.canvas.toDataURL(options);
+                image.onload = () => {
+                    createImageBitmap(image).then((bitmap) => resolve(bitmap));
+                };
+            }
+        });
+    }
+
+    /**
+     * returns a data URL containing a representation of the most recently rendered image of this canvas texture
+     * (not supported by OffscreenCanvas)
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning a string containing the requested data URL.
+     * @example
+     * renderer.toDataURL().then((dataURL) => console.log(dataURL));
+     */
+    toDataURL(options) {
+        return new Promise((resolve) => {
+            resolve(this.canvas.toDataURL(options));
+        });
+    }
+
     /**
      * @ignore
      */

package/src/video/video.js

@@ -149,7 +149,7 @@ export function init(width, height, options) {
  * @returns {HTMLCanvasElement|OffscreenCanvas}
  */
 export function createCanvas(width, height, returnOffscreenCanvas = false) {
-    var _canvas;
+    let _canvas;
 
     if (width === 0 || height === 0) {
         throw new Error("width or height was zero, Canvas could not be initialized !");

package/src/video/webgl/buffer/vertex.js

@@ -7,18 +7,18 @@
 
  export default class VertexArrayBuffer {
 
-    constructor(vertex_size, vertex_per_quad) {
+    constructor(vertex_size, vertex_per_obj) {
         // the size of one vertex in float
         this.vertexSize = vertex_size;
-        // size of a quad in vertex
-        this.quadSize = vertex_per_quad;
+        // size of an object in vertex
+        this.objSize = vertex_per_obj;
         // the maximum number of vertices the vertex array buffer can hold
-        this.maxVertex = 256;
+        this.maxVertex = 256; // (note: this seems to be the sweet spot performance-wise when using batching)
         // the current number of vertices added to the vertex array buffer
         this.vertexCount = 0;
 
         // the actual vertex data buffer
-        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.quadSize);
+        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.objSize);
         // Float32 and Uint32 view of the vertex data array buffer
         this.bufferF32 = new Float32Array(this.buffer);
         this.bufferU32 = new Uint32Array(this.buffer);
@@ -37,7 +37,7 @@
      * return true if full
      * @ignore
      */
-    isFull(vertex = this.quadSize) {
+    isFull(vertex = this.objSize) {
          return (this.vertexCount + vertex >= this.maxVertex);
     }
 
@@ -45,14 +45,18 @@
      * resize the vertex buffer, retaining its original contents
      * @ignore
      */
-    resize() {
-        // double the vertex size
-        this.maxVertex <<= 1;
+    resize(vertexCount) {
+
+        while (vertexCount > this.maxVertex) {
+            // double the vertex size
+            this.maxVertex <<= 1;
+        }
+
         // save a reference to the previous data
-        var data = this.bufferF32;
+        let data = this.bufferF32;
 
         // recreate ArrayBuffer and views
-        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.quadSize);
+        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.objSize);
         this.bufferF32 = new Float32Array(this.buffer);
         this.bufferU32 = new Uint32Array(this.buffer);
 
@@ -67,22 +71,22 @@
      * @ignore
      */
     push(x, y, u, v, tint) {
-        var offset = this.vertexCount * this.vertexSize;
+        let offset = this.vertexCount * this.vertexSize;
 
         if (this.vertexCount >= this.maxVertex) {
-            this.resize();
+            this.resize(this.vertexCount);
         }
 
-        this.bufferF32[offset + 0] = x;
-        this.bufferF32[offset + 1] = y;
+        this.bufferF32[offset] = x;
+        this.bufferF32[++offset] = y;
 
         if (typeof u !== "undefined") {
-            this.bufferF32[offset + 2] = u;
-            this.bufferF32[offset + 3] = v;
+            this.bufferF32[++offset] = u;
+            this.bufferF32[++offset] = v;
         }
 
         if (typeof tint !== "undefined") {
-            this.bufferU32[offset + 4] = tint;
+            this.bufferU32[++offset] = tint;
         }
 
         this.vertexCount++;

package/src/video/webgl/compositors/compositor.js

@@ -1,5 +1,5 @@
-import * as event from "../../../system/event.js";
-
+import VertexArrayBuffer from "../buffer/vertex.js";
+import GLShader from "../glshader.js";
 
 /**
  * @classdesc
@@ -8,19 +8,26 @@ import * as event from "../../../system/event.js";
  export default class Compositor {
     /**
      * @param {WebGLRenderer} renderer - the current WebGL renderer session
+     * @param {Object} settings - additional settings to initialize this compositors
+     * @param {object[]} attribute - an array of attributes definition
+     * @param {string} attribute.name - name of the attribute in the vertex shader
+     * @param {number} attribute.size - number of components per vertex attribute. Must be 1, 2, 3, or 4.
+     * @param {GLenum} attribute.type - data type of each component in the array
+     * @param {boolean} attribute.normalized - whether integer data values should be normalized into a certain range when being cast to a float
+     * @param {number} attribute.offset - offset in bytes of the first component in the vertex attribute array
+     * @param {object} shader - an array of attributes definition
+     * @param {string} shader.vertex - a string containing the GLSL source code to set
+     * @param {string} shader.fragment - a string containing the GLSL source code to set
      */
-    constructor (renderer) {
-        this.init(renderer);
+    constructor (renderer, settings) {
+        this.init(renderer, settings);
     }
 
     /**
      * Initialize the compositor
      * @ignore
      */
-    init (renderer) {
-        // local reference
-        var gl = renderer.gl;
-
+    init (renderer, settings) {
         // the associated renderer
         this.renderer = renderer;
 
@@ -34,17 +41,23 @@ import * as event from "../../../system/event.js";
         this.viewMatrix = renderer.currentTransform;
 
         /**
-         * a reference to the active WebGL shader
+         * the default shader created by this compositor
          * @type {GLShader}
          */
-        this.activeShader = null;
+        this.defaultShader = undefined;
+
+        /**
+         * the shader currently used by this compositor
+         * @type {GLShader}
+         */
+        this.currentShader = undefined;
 
         /**
          * primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
          * @type {number}
          * @default gl.TRIANGLES
          */
-        this.mode = gl.TRIANGLES;
+        this.mode = this.gl.TRIANGLES;
 
         /**
          * an array of vertex attribute properties
@@ -69,11 +82,28 @@ import * as event from "../../../system/event.js";
          */
         this.vertexSize = 0;
 
-        // register to the CANVAS resize channel
-        event.on(event.CANVAS_ONRESIZE, (width, height) => {
-            this.flush();
-            this.setViewport(0, 0, width, height);
-        });
+        /**
+         * the vertex data buffer used by this compositor
+         * @type {VertexArrayBuffer}
+         */
+        this.vertexData = null;
+
+        // parse given attibrutes
+        if (typeof settings !== "undefined" && Array.isArray(settings.attributes)) {
+            settings.attributes.forEach((attr) => {
+                this.addAttribute(attr.name, attr.size, attr.type, attr.normalized, attr.offset);
+                this.vertexData = new VertexArrayBuffer(this.vertexSize, 6);
+            });
+        } else {
+            throw new Error("attributes definition missing");
+        }
+
+        // parse and instantiate the default shader
+        if (typeof settings !== "undefined" && typeof settings.shader !== "undefined") {
+            this.defaultShader = new GLShader(this.gl, settings.shader.vertex, settings.shader.fragment);
+        } else {
+            throw new Error("shader definition missing");
+        }
     }
 
     /**
@@ -84,17 +114,35 @@ import * as event from "../../../system/event.js";
         // WebGL context
         this.gl = this.renderer.gl;
 
-        this.flush();
+        // clear the vertex data buffer
+        this.vertexData.clear();
+    }
+
+    /**
+     * @ignore
+     * called by the WebGL renderer when a compositor become the current one
+     */
+    bind() {
+        if (this.renderer.currentProgram !== this.defaultShader.program) {
+            this.useShader(this.defaultShader);
+        }
+    }
 
-        // initial viewport size
-        this.setViewport(
-            0, 0,
-            this.renderer.getCanvas().width,
-            this.renderer.getCanvas().height
-        );
+    /**
+     * Select the shader to use for compositing
+     * @see GLShader
+     * @param {GLShader} shader - a reference to a GLShader instance
+     */
+    useShader(shader) {
+        if (this.renderer.currentProgram !== shader.program) {
+            this.flush();
+            shader.bind();
+            shader.setUniform("uProjectionMatrix", this.renderer.projectionMatrix);
+            shader.setVertexAttributes(this.gl, this.attributes, this.vertexByteSize);
 
-        // Initialize clear color
-        this.clearColor(0.0, 0.0, 0.0, 0.0);
+            this.currentShader = shader;
+            this.renderer.currentProgram = this.currentShader.program;
+        }
     }
 
     /**
@@ -142,51 +190,25 @@ import * as event from "../../../system/event.js";
         this.vertexSize = this.vertexByteSize / Float32Array.BYTES_PER_ELEMENT;
     }
 
-    /**
-     * Sets the viewport
-     * @param {number} x - x position of viewport
-     * @param {number} y - y position of viewport
-     * @param {number} w - width of viewport
-     * @param {number} h - height of viewport
-     */
-    setViewport(x, y, w, h) {
-        this.gl.viewport(x, y, w, h);
-    }
-
     /**
      * set/change the current projection matrix
      * @param {Matrix3d} matrix
      */
     setProjection(matrix) {
-        this.activeShader.setUniform("uProjectionMatrix", matrix);
+        this.currentShader.setUniform("uProjectionMatrix", matrix);
     }
 
     /**
-     * Select the shader to use for compositing
-     * @see GLShader
-     * @param {GLShader} shader - a reference to a GLShader instance
-     */
-    useShader(shader) {
-        if (this.activeShader !== shader) {
-            this.flush();
-            this.activeShader = shader;
-            this.activeShader.bind();
-            this.activeShader.setUniform("uProjectionMatrix", this.renderer.projectionMatrix);
-            this.activeShader.setVertexAttributes(this.gl, this.attributes, this.vertexByteSize);
-        }
-    }
-
-    /**
-     * Flush batched texture operations to the GPU
+     * Flush batched vertex data to the GPU
      * @param {number} [mode=gl.TRIANGLES] - the GL drawing mode
      */
     flush(mode = this.mode) {
-        var vertex = this.vertexBuffer;
-        var vertexCount = vertex.vertexCount;
+        let vertex = this.vertexData;
+        let vertexCount = vertex.vertexCount;
 
         if (vertexCount > 0) {
-            var gl = this.gl;
-            var vertexSize = vertex.vertexSize;
+            let gl = this.gl;
+            let vertexSize = vertex.vertexSize;
 
             // Copy data into stream buffer
             if (this.renderer.WebGLVersion > 1) {
@@ -201,27 +223,4 @@ import * as event from "../../../system/event.js";
             vertex.clear();
         }
     }
-
-    /**
-     * Clear the frame buffer
-     * @param {number} [alpha = 0.0] - the alpha value used when clearing the framebuffer
-     */
-    clear(alpha = 0) {
-        var gl = this.gl;
-        gl.clearColor(0, 0, 0, alpha);
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
-    }
-
-    /**
-     * Specify the color values used when clearing color buffers. The values are clamped between 0 and 1.
-     * @param {number} [r = 0] - the red color value used when the color buffers are cleared
-     * @param {number} [g = 0] - the green color value used when the color buffers are cleared
-     * @param {number} [b = 0] - the blue color value used when the color buffers are cleared
-     * @param {number} [a = 0] - the alpha color value used when the color buffers are cleared
-     */
-    clearColor(r = 0, g = 0, b = 0, a = 0) {
-        var gl = this.gl;
-        gl.clearColor(r, g, b, a);
-        gl.clear(gl.COLOR_BUFFER_BIT);
-    }
 }