streamana/site/gl-canvas.js

46 lines
1.5 KiB
JavaScript
Raw Normal View History

2021-05-24 05:47:07 +08:00
// Use glsl-canvas to make managing webgl stuff easier.
import importUMD from './import-umd.js';
const { Canvas } = await importUMD('./glsl-canvas.min.js');
2021-05-24 05:47:07 +08:00
2021-07-06 15:35:17 +08:00
export class GlCanvas extends Canvas {
constructor(canvas_el) {
super(new Proxy(canvas_el, {
get: (target, name, receiver) => {
if (name === 'getBoundingClientRect') {
return () => new DOMRect(0, 0, target.width, target.height);
}
if (name === 'clientWidth') {
return Math.ceil(target.width / this.devicePixelRatio);
}
if (name === 'clientHeight') {
return Math.ceil(target.height / this.devicePixelRatio);
}
const r = target[name];
return typeof r === 'function' ? r.bind(target) : r;
2021-05-24 05:47:07 +08:00
},
2021-07-06 15:35:17 +08:00
set: (target, name, value) => {
if ((name !== 'width') && (name !== 'height')) {
target[name] = value;
}
return true;
2021-05-24 05:47:07 +08:00
}
}));
}
2021-07-09 03:55:27 +08:00
// Allow rendering loop to be driven externally (e.g. by the audio encoder)
2021-07-06 15:35:17 +08:00
// to avoid requestAnimationFrame (or indeed setInterval) throttling.
2021-05-24 05:47:07 +08:00
onLoop() {
2021-07-09 03:55:27 +08:00
this.checkRender();
2021-05-24 05:47:07 +08:00
}
2021-07-09 03:55:27 +08:00
// Prevent errors after destruction
2021-05-24 05:47:07 +08:00
destroy() {
super.destroy();
this.uniforms = {
createTexture() {
return {};
},
create() {}
};
2021-07-06 15:35:17 +08:00
this.textures = {};
2021-05-24 05:47:07 +08:00
}
}