2021-05-24 05:47:07 +08:00
|
|
|
// Use glsl-canvas to make managing webgl stuff easier.
|
2021-05-26 06:23:00 +08:00
|
|
|
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();
|
2021-06-06 04:45:22 +08:00
|
|
|
this.uniforms = {
|
|
|
|
createTexture() {
|
|
|
|
return {};
|
|
|
|
},
|
|
|
|
create() {}
|
|
|
|
};
|
2021-07-06 15:35:17 +08:00
|
|
|
this.textures = {};
|
2021-05-24 05:47:07 +08:00
|
|
|
}
|
|
|
|
}
|