planet-wars/frontend/www/webgl/texture.ts

69 lines
1.7 KiB
TypeScript
Raw Normal View History

2019-09-16 19:18:01 +00:00
// TODO: fix texture locations, not use only 0
export class Texture {
texture: WebGLTexture;
image: HTMLImageElement;
loaded: boolean;
name: string;
constructor(
gl: WebGLRenderingContext,
path: string,
name: string,
) {
this.loaded = false;
this.name = name;
this.image = new Image();
this.image.onload = () => this.handleImageLoaded(gl);
this.image.onerror = error;
this.image.src = path;
this.texture = gl.createTexture();
this.bind(gl);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA,
gl.UNSIGNED_BYTE, new Uint8Array([255, 0, 0, 255]));
}
handleImageLoaded(gl: WebGLRenderingContext) {
console.log('handling image loaded');
this.bind(gl);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.image);
this.unbind(gl);
this.loaded = true;
}
bind(gl: WebGLRenderingContext, location=0) {
gl.activeTexture(gl.TEXTURE0 + location);
gl.bindTexture(gl.TEXTURE_2D, this.texture);
}
unbind(gl: WebGLRenderingContext) {
gl.bindTexture(gl.TEXTURE_2D, null);
}
getWidth(): number {
return this.image.width;
}
getHeight(): number {
return this.image.height;
}
}
function error(e: any) {
console.error("IMAGE LOAD ERROR");
console.error(e);
}