From 3ed46e72e85aca8a3d44f92c156b83cb5f266859 Mon Sep 17 00:00:00 2001 From: David Halls Date: Sun, 23 May 2021 22:47:07 +0100 Subject: [PATCH] Split canvas code into separate file --- gl-canvas.js | 43 +++++++++++++++++++++++++++++ test.html | 78 +++++++++++++++++++--------------------------------- 2 files changed, 72 insertions(+), 49 deletions(-) create mode 100644 gl-canvas.js diff --git a/gl-canvas.js b/gl-canvas.js new file mode 100644 index 0000000..e1dd893 --- /dev/null +++ b/gl-canvas.js @@ -0,0 +1,43 @@ +// Use glsl-canvas to make managing webgl stuff easier. +import { Canvas } from 'glsl-canvas-js'; + +export class InvisibleGlCanvas extends Canvas { + constructor(document) { + // Create a canvas for doing webgl + const canvas = document.createElement('canvas'); + + // Because it won't be visible, client dimensions are zero so we + // need to substitute actual dimensions instead. + super(new Proxy(canvas, { + get: function (target, name, receiver) { + if (name === 'getBoundingClientRect') { + return () => new DOMRect(0, 0, target.width, target.height); + } + if (name === 'clientWidth') { + return target.width; + } + if (name === 'clientHeight') { + return target.height; + } + const r = target[name]; + return typeof r === 'function' ? r.bind(target) : r; + }, + set: function (target, name, value) { + target[name] = value; + return true; + } + })); + } + + // Use setInterval instead of requestAnimation frame so video continues + // even when tab is hidden + onLoop() { + this.checkRender(); + this.siId = setInterval(() => this.checkRender(), 33); + } + destroy() { + clearInterval(this.siId); + super.destroy(); + } +} + diff --git a/test.html b/test.html index 807ffeb..5f193b0 100644 --- a/test.html +++ b/test.html @@ -1,30 +1,19 @@ - - + - +

- - + +