@figliolia/ripples
Version:
WebGL ripples based on the clever work of Pim Schreurs
86 lines (85 loc) • 3.53 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BrowserSupport = void 0;
class BrowserSupport {
constructor() {
this.detect();
}
detect() {
const extensions = this.getExtensions();
const texture = this.frameAndBuffer();
const configurations = this.getAll(extensions);
const { length } = configurations;
for (let i = 0; i < length; i++) {
this.GL.texImage2D(this.GL.TEXTURE_2D, 0, this.GL.RGBA, 32, 32, 0, this.GL.RGBA, configurations[i].type, null);
this.GL.framebufferTexture2D(this.GL.FRAMEBUFFER, this.GL.COLOR_ATTACHMENT0, this.GL.TEXTURE_2D, texture, 0);
if (this.GL.checkFramebufferStatus(this.GL.FRAMEBUFFER) ===
this.GL.FRAMEBUFFER_COMPLETE) {
const config = configurations[i];
this.type = config.type;
this.arrayType = config.arrayType;
this.extensions = config.extensions;
this.linearSupport = config.linearSupport;
return;
}
}
throw new Error("No compatible browser configurations");
}
getAll(extensions) {
const configs = [];
configs.push(this.createConfig("float", this.GL.FLOAT, Float32Array, extensions));
if (extensions.OES_texture_half_float) {
configs.push(this.createConfig("half_float", extensions.OES_texture_half_float.HALF_FLOAT_OES, null, extensions));
}
return configs;
}
createConfig(type, glType, arrayType, extensions) {
const name = "OES_texture_" + type, nameLinear = name + "_linear", linearSupport = nameLinear in extensions, configExtensions = [name];
if (linearSupport) {
configExtensions.push(nameLinear);
}
return {
type: glType,
arrayType: arrayType,
linearSupport: linearSupport,
extensions: configExtensions,
};
}
frameAndBuffer() {
const texture = this.GL.createTexture();
const frameBuffer = this.GL.createFramebuffer();
this.GL.bindFramebuffer(this.GL.FRAMEBUFFER, frameBuffer);
this.GL.bindTexture(this.GL.TEXTURE_2D, texture);
this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_MIN_FILTER, this.GL.NEAREST);
this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_MAG_FILTER, this.GL.NEAREST);
this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_WRAP_S, this.GL.CLAMP_TO_EDGE);
this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_WRAP_T, this.GL.CLAMP_TO_EDGE);
return texture;
}
getExtensions() {
const canvas = document.createElement("canvas");
this.GL = (canvas.getContext("webgl") ||
canvas.getContext("experimental-webgl"));
if (!this.GL) {
throw new Error("No WebGL support");
}
const extensions = {};
const keys = [
"OES_texture_float",
"OES_texture_half_float",
"OES_texture_float_linear",
"OES_texture_half_float_linear",
];
keys.forEach(name => {
const extension = this.GL.getExtension(name);
if (extension) {
extensions[name] = extension;
}
});
if (!extensions.OES_texture_float) {
throw new Error("No texture float support");
}
return extensions;
}
}
exports.BrowserSupport = BrowserSupport;