Archive commit

This commit is contained in:
Erik McClure
2019-08-28 21:15:02 -07:00
commit 735845746e
1435 changed files with 140724 additions and 0 deletions
@@ -0,0 +1,928 @@
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
// import { range, sample } from 'lodash';
// import { PonyState, Palette, Sprite } from '../../../common/interfaces';
// import { startGameLoop } from '../../../client/gameLoop';
// import { defaultPonyState } from '../../../client/ponyHelpers';
// import { SpriteBatch } from '../../../graphics/spriteBatch';
// import { loadSpriteSheets, loadAndInitSpriteSheets } from '../../../client/spriteUtils';
// import { Key } from '../../../client/input/input';
// import { trot } from '../../../client/ponyAnimations';
// import { createTexturesForSpriteSheets } from '../../../graphics/spriteSheetUtils';
// import { PaletteManager, releasePalette } from '../../../graphics/paletteManager';
// import { getWebGLContext, createViewMatrix2 } from '../../../graphics/webgl/webglUtils';
// import * as sprites from '../../../generated/sprites';
// import { SpriteBatch2 } from '../../../graphics/spriteBatch2';
// import { loadImage, createCanvas } from '../../../client/canvasUtils';
// import { WHITE, ORANGE, RED, BLUE } from '../../../common/colors';
// import { PaletteSpriteBatch } from '../../../graphics/paletteSpriteBatch';
// import { PaletteSpriteBatch2 } from '../../../graphics/paletteSpriteBatch2';
// import { PaletteSpriteBatch3 } from '../../../graphics/paletteSpriteBatch3';
// import { createFrameBuffer, bindFrameBuffer } from '../../../graphics/webgl/glFbo';
// import { createTexture, Texture2D } from '../../../graphics/webgl/texture2d';
// import { times } from '../../../common/utils';
// import { createShader } from '../../../graphics/webgl/shader-new';
// import {
// lightShader, spriteShader, sprite2Shader, paletteDepthShader, paletteLayersShader, paletteLayersInstancedShader
// } from '../../../generated/shaders';
@Component({
selector: 'tools-webgl',
templateUrl: 'tools-webgl.pug',
})
export class ToolsWebgl implements OnInit {
@ViewChild('canvas', { static: true }) canvasElement!: ElementRef;
@ViewChild('canvas2', { static: true }) canvasElement2!: ElementRef;
ngOnInit() {
// testSpriteBatch(this.canvasElement.nativeElement);
}
}
// export function testLightsShader(canvas: HTMLCanvasElement) {
// const gl = getWebGLContext(canvas);
// const shader = createShader(gl, lightShader);
// const batch = new SpriteBatch(gl);
// const fps = document.getElementById('fps')!;
// const handle = startGameLoop({
// fps: 0,
// load() {
// return loadAndInitSpriteSheets();
// },
// init() {
// createTexturesForSpriteSheets(gl, sprites.spriteSheets);
// },
// update(_delta: number) {
// },
// draw() {
// const scale = 2;
// const width = Math.ceil(window.innerWidth / scale);
// const height = Math.ceil(window.innerHeight / scale);
// gl.canvas.width = width;
// gl.canvas.height = height;
// gl.canvas.style.width = (width * scale) + 'px';
// gl.canvas.style.height = (height * scale) + 'px';
// gl.clearColor(0.13, 0.5, 0.5, 1.0);
// gl.clear(gl.COLOR_BUFFER_BIT);
// gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// gl.disable(gl.DEPTH_TEST);
// gl.depthFunc(gl.LEQUAL);
// gl.enable(gl.BLEND);
// gl.blendEquation(gl.FUNC_ADD);
// gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
// const transformMatrix = mat4.ortho(mat4.create(), 0, gl.drawingBufferWidth, gl.drawingBufferHeight, 0, 0, 1000);
// batch.begin(shader, {} as any);
// gl.uniformMatrix4fv(shader.uniforms.transfrom, false, transformMatrix);
// gl.uniform4f(shader.uniforms.lighting, 1, 1, 1, 1);
// batch.drawImage(ORANGE, -1, -1, 2, 2, 100, 100, 300, 200);
// batch.end();
// },
// });
// window.addEventListener('keyup', e => {
// if (e.keyCode === Key.KEY_Q) {
// handle.cancel();
// fps.textContent = `off`;
// }
// });
// }
// export function testSpriteBatch(canvas: HTMLCanvasElement) {
// const gl = getWebGLContext(canvas);
// const shader = createShader(gl, paletteLayersShader);
// const batch = new PaletteSpriteBatch3(gl);
// const paletteManager = new PaletteManager();
// const defaultPalette = paletteManager.addArray(sprites.defaultPalette);
// // const applePalette = paletteManager.addArray(sprites.apple_1.palettes![0]);
// const fps = document.getElementById('fps')!;
// const handle = startGameLoop({
// fps: 0,
// load() {
// return loadAndInitSpriteSheets();
// },
// init() {
// createTexturesForSpriteSheets(gl, sprites.spriteSheets);
// },
// update(_delta: number) {
// },
// draw() {
// const scale = 2;
// const width = Math.ceil(window.innerWidth / scale);
// const height = Math.ceil(window.innerHeight / scale);
// gl.canvas.width = width;
// gl.canvas.height = height;
// gl.canvas.style.width = (width * scale) + 'px';
// gl.canvas.style.height = (height * scale) + 'px';
// paletteManager.commit(gl);
// batch.palette = paletteManager.texture;
// batch.rectSprite = sprites.pixel2;
// batch.defaultPalette = defaultPalette;
// gl.clearColor(0.13, 0.5, 0.5, 1.0);
// gl.clear(gl.COLOR_BUFFER_BIT);
// gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// gl.disable(gl.DEPTH_TEST);
// gl.depthFunc(gl.LEQUAL);
// gl.enable(gl.BLEND);
// gl.blendEquation(gl.FUNC_ADD);
// gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
// const transformMatrix = mat4.ortho(mat4.create(), 0, gl.drawingBufferWidth, gl.drawingBufferHeight, 0, 0, 1000);
// batch.begin(shader, {} as any);
// gl.uniformMatrix4fv(shader.uniforms.transfrom, false, transformMatrix);
// gl.uniform4f(shader.uniforms.lighting, 1, 1, 1, 1);
// gl.uniform1f(shader.uniforms.pixelSize, paletteManager.pixelSize);
// // batch.drawSprite(sprites.apple_1.color, WHITE, applePalette, 100, 100);
// batch.drawRect(ORANGE, 200, 200, 300, 150);
// batch.end();
// },
// });
// window.addEventListener('keyup', e => {
// if (e.keyCode === Key.KEY_Q) {
// handle.cancel();
// fps.textContent = `off`;
// }
// });
// }
// export function testInstancedSprites(canvas: HTMLCanvasElement) {
// const gl = getWebGLContext(canvas);
// const shader = createShader(gl, paletteLayersShader);
// const shader2 = createShader(gl, paletteLayersInstancedShader);
// const batch = new PaletteSpriteBatch3(gl);
// const batch2 = new InstancedPaletteSpriteBatch(gl);
// const paletteManager = new PaletteManager();
// const defaultPalette = paletteManager.addArray(sprites.defaultPalette);
// const fps = document.getElementById('fps')!;
// const randomSprites = [
// sprites.pumpkin_default,
// sprites.box_lanterns,
// sprites.flower_patch5,
// sprites.leafpile_medium,
// ];
// const width = 600;
// const height = 500;
// const itemCount = 100000;
// const items = times(itemCount, () => {
// const sprite = sample(randomSprites)!;
// return {
// sprite: sprite.color,
// palette: paletteManager.addArray(sprite.palettes![0]),
// x: width * Math.random(),
// y: height * Math.random(),
// };
// });
// let mode = 'instanced';
// const handle = startGameLoop({
// fps: 0,
// load() {
// return loadAndInitSpriteSheets();
// },
// init() {
// createTexturesForSpriteSheets(gl, sprites.spriteSheets);
// },
// update(_delta: number) {
// },
// draw() {
// const scale = 2;
// const width = Math.ceil(window.innerWidth / scale);
// const height = Math.ceil(window.innerHeight / scale);
// gl.canvas.width = width;
// gl.canvas.height = height;
// gl.canvas.style.width = (width * scale) + 'px';
// gl.canvas.style.height = (height * scale) + 'px';
// paletteManager.commit(gl);
// batch.palette = paletteManager.texture;
// batch.rectSprite = sprites.pixelRect2;
// batch.defaultPalette = defaultPalette;
// batch2.palette = paletteManager.texture;
// batch2.rectSprite = sprites.pixelRect2;
// batch2.defaultPalette = defaultPalette;
// gl.clearColor(0.13, 0.5, 0.5, 1.0);
// gl.clear(gl.COLOR_BUFFER_BIT);
// gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// gl.disable(gl.DEPTH_TEST);
// gl.depthFunc(gl.LEQUAL);
// gl.enable(gl.BLEND);
// gl.blendEquation(gl.FUNC_ADD);
// gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
// const transformMatrix = mat4.ortho(mat4.create(), 0, gl.drawingBufferWidth, gl.drawingBufferHeight, 0, 0, 1000);
// if (mode === 'regular') {
// batch.begin(shader, {} as any);
// gl.uniformMatrix4fv(shader.uniforms.transfrom, false, transformMatrix);
// gl.uniform4f(shader.uniforms.lighting, 1, 1, 1, 1);
// gl.uniform1f(shader.uniforms.pixelSize, paletteManager.pixelSize);
// for (const item of items) {
// batch.drawSprite(item.sprite, WHITE, item.palette, item.x, item.y);
// }
// batch.end();
// } else if (mode === 'instanced') {
// batch2.begin(shader2);
// gl.uniformMatrix4fv(shader.uniforms.transfrom, false, transformMatrix);
// gl.uniform4f(shader.uniforms.lighting, 1, 1, 1, 1);
// gl.uniform1f(shader.uniforms.pixelSize, paletteManager.pixelSize);
// for (const item of items) {
// batch2.drawSprite(item.sprite, WHITE, item.palette, item.x, item.y);
// }
// batch2.end();
// }
// fps.textContent = `${this.fps.toFixed(0)} fps (${mode})`;
// },
// });
// window.addEventListener('keyup', e => {
// if (e.keyCode === Key.KEY_Q) {
// handle.cancel();
// fps.textContent = `off`;
// }
// if (e.keyCode === Key.KEY_M) {
// mode = mode === 'regular' ? 'instanced' : 'regular';
// }
// });
// }
// export function testLayeredSprites(canvas: HTMLCanvasElement, canvas2: HTMLCanvasElement) {
// function transferPixels(src: HTMLCanvasElement, dst: HTMLCanvasElement, srcChannel: number, dstChannel: number) {
// const srcContext = src.getContext('2d')!;
// const dstContext = dst.getContext('2d')!;
// const srcData = srcContext.getImageData(0, 0, src.width, src.height);
// const dstData = dstContext.getImageData(0, 0, dst.width, dst.height);
// for (let y = 0; y < dstData.height; y++) {
// for (let x = 0; x < dstData.width; x++) {
// const offset = (x + y * dstData.width) * 4;
// dstData.data[offset + dstChannel] = srcData.data[offset + srcChannel];
// }
// }
// dstContext.putImageData(dstData, 0, 0);
// }
// function transferPixels2(src: HTMLCanvasElement, dstData: ImageData, srcChannel: number, dstChannel: number) {
// const srcContext = src.getContext('2d')!;
// const srcData = srcContext.getImageData(0, 0, src.width, src.height);
// for (let y = 0; y < srcData.height; y++) {
// for (let x = 0; x < srcData.width; x++) {
// const offset = (x + y * srcData.width) * 4;
// dstData.data[offset + dstChannel] = srcData.data[offset + srcChannel];
// }
// }
// }
// const gl = getWebGLContext(canvas);
// const shader = createShader(gl, paletteLayersShader);
// const batch = new PaletteSpriteBatch3(gl);
// const paletteManager = new PaletteManager();
// const defaultPalette = paletteManager.addArray(sprites.defaultPalette);
// const palettes = [
// paletteManager.addArray(sprites.pumpkin_default.palettes![0]),
// paletteManager.addArray(sprites.rock.palettes![0]),
// paletteManager.addArray(sprites.sign_1.palettes![0]),
// paletteManager.addArray(sprites.box_lanterns.palettes![0]),
// ];
// const theSprites: Sprite[] = [];
// const handle = startGameLoop({
// fps: 0,
// load() {
// return loadAndInitSpriteSheets();
// },
// init() {
// const canvas = canvas2;
// canvas2.style.display = 'block';
// canvas.width = 256;
// canvas.height = 256;
// const context = canvas.getContext('2d')!;
// context.fillStyle = 'white';
// context.globalAlpha = 200 / 0xff;
// context.fillRect(0, 0, 256, 256);
// context.globalAlpha = 1;
// const sheetData = (sprites.spriteSheets[1] as any).data;
// const sheetImage = createCanvas(sheetData.width, sheetData.height);
// sheetImage.getContext('2d')!.putImageData(sheetData, 0, 0);
// const sheetCanvas = createCanvas(256, 256);
// const sheetContext = sheetCanvas.getContext('2d')!;
// const pixels = sheetContext.createImageData(256, 256); // new Uint8Array(256 * 256 * 4);
// for (let i = 0; i < pixels.width * pixels.height * 4; i++) {
// pixels.data[i] = 255;
// }
// const pumpkin = sprites.pumpkin_default.color;
// sheetContext.clearRect(0, 0, 256, 256);
// sheetContext.drawImage(sheetImage, pumpkin.x, pumpkin.y, pumpkin.w, pumpkin.h, 0, 0, pumpkin.w, pumpkin.h);
// transferPixels(sheetCanvas, canvas, 0, 0);
// transferPixels2(sheetCanvas, pixels, 0, 0);
// const rock = sprites.rock.color;
// sheetContext.clearRect(0, 0, 256, 256);
// sheetContext.drawImage(sheetImage, rock.x, rock.y, rock.w, rock.h, 0, 0, rock.w, rock.h);
// transferPixels(sheetCanvas, canvas, 0, 1);
// transferPixels2(sheetCanvas, pixels, 0, 1);
// const sign = sprites.sign_1.color;
// sheetContext.clearRect(0, 0, 256, 256);
// sheetContext.drawImage(sheetImage, sign.x, sign.y, sign.w, sign.h, 0, 0, sign.w, sign.h);
// transferPixels(sheetCanvas, canvas, 0, 2);
// transferPixels2(sheetCanvas, pixels, 0, 2);
// const box = sprites.box_lanterns.color;
// sheetContext.clearRect(0, 0, 256, 256);
// sheetContext.drawImage(sheetImage, box.x, box.y, box.w, box.h, 0, 0, box.w, box.h);
// // transferPixels(sheetCanvas, canvas, 0, 3);
// transferPixels2(sheetCanvas, pixels, 0, 3);
// const texture = createTexture(gl, pixels);
// // texture.bind(0);
// // gl.texImage2D(gl.TEXTURE_2D, 0, texture.format, 256, 256, 0, texture.format, texture.type, pixels);
// const spr = {
// x: 0,
// y: 0,
// w: 50,
// h: 50,
// ox: 0,
// oy: 0,
// tex: texture,
// };
// theSprites.push({ ...spr, type: 3 });
// theSprites.push({ ...spr, type: 4 });
// theSprites.push({ ...spr, type: 5 });
// theSprites.push({ ...spr, type: 6 });
// createTexturesForSpriteSheets(gl, sprites.spriteSheets);
// },
// update(_delta: number) {
// },
// draw() {
// const scale = 4;
// const width = Math.ceil(window.innerWidth / scale);
// const height = Math.ceil(window.innerHeight / scale);
// gl.canvas.width = width;
// gl.canvas.height = height;
// gl.canvas.style.width = (width * scale) + 'px';
// gl.canvas.style.height = (height * scale) + 'px';
// paletteManager.commit(gl);
// batch.palette = paletteManager.texture;
// batch.rectSprite = sprites.pixelRect2;
// batch.defaultPalette = defaultPalette;
// gl.clearColor(0.13, 0.5, 0.5, 1.0);
// gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// gl.enable(gl.DEPTH_TEST);
// gl.depthFunc(gl.LEQUAL);
// gl.enable(gl.BLEND);
// gl.blendEquation(gl.FUNC_ADD);
// gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
// const transformMatrix = mat4.ortho(mat4.create(), 0, gl.drawingBufferWidth, gl.drawingBufferHeight, 0, 0, 1000);
// batch.begin(shader, {} as any);
// gl.uniformMatrix4fv(shader.uniforms.transfrom, false, transformMatrix);
// gl.uniform4f(shader.uniforms.lighting, 1, 1, 1, 1);
// gl.uniform1f(shader.uniforms.pixelSize, paletteManager.pixelSize);
// batch.drawSprite(sprites.pumpkin_default.color, WHITE, palettes[0], 50, 50);
// batch.drawSprite(theSprites[0], WHITE, palettes[0], 50, 120);
// batch.drawSprite(theSprites[1], WHITE, palettes[1], 100, 120);
// batch.drawSprite(theSprites[2], WHITE, palettes[2], 150, 120);
// batch.drawSprite(theSprites[3], WHITE, palettes[3], 200, 120);
// batch.end();
// },
// });
// window.addEventListener('keyup', e => {
// if (e.keyCode === Key.KEY_Q) {
// handle.cancel();
// }
// });
// }
// export function test3DMap(canvas: HTMLCanvasElement) {
// const gl = getWebGLContext(canvas);
// const paletteShader = createShader(gl, paletteDepthShader);
// const paletteSpriteBatch = new PaletteSpriteBatch2(gl);
// const paletteManager = new PaletteManager();
// // const treePalette = paletteManager.add(sprites.tree_6Crown0_0.palettes![0]);
// const grassPalette = paletteManager.addArray(sprites.grass_tile.palettes![0]);
// // const wallPalette = paletteManager.add(sprites.stone_wall_6.palettes![0]);
// const defaultPalette = paletteManager.addArray(sprites.defaultPalette);
// const camera = {
// x: -2,
// y: -2,
// w: 100,
// h: 100,
// };
// let redZ = 2;
// let blueZ = -2;
// const handle = startGameLoop({
// fps: 0,
// load() {
// return loadAndInitSpriteSheets();
// },
// init() {
// createTexturesForSpriteSheets(gl, sprites.spriteSheets);
// },
// update(_delta: number) {
// },
// draw() {
// const scale = 4;
// const width = Math.ceil(window.innerWidth / scale);
// const height = Math.ceil(window.innerHeight / scale);
// camera.w = width / 32;
// camera.h = height / 32;
// gl.canvas.width = width;
// gl.canvas.height = height;
// gl.canvas.style.width = (width * scale) + 'px';
// gl.canvas.style.height = (height * scale) + 'px';
// paletteManager.commit(gl);
// paletteSpriteBatch.palette = paletteManager.texture;
// paletteSpriteBatch.rectSprite = sprites.pixelRect2;
// paletteSpriteBatch.defaultPalette = defaultPalette;
// gl.clearColor(0.13, 0.5, 0.5, 1.0);
// gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// gl.enable(gl.DEPTH_TEST);
// gl.depthFunc(gl.LEQUAL);
// gl.enable(gl.BLEND);
// gl.blendEquation(gl.FUNC_ADD);
// gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
// const viewMatrix = mat4.lookAt(mat4.create(), [0, 1, 1], [0, 0, 0], [0, 0, -1]);
// const projMatrix = mat4.ortho(mat4.create(), camera.x, camera.x + camera.w, camera.y + camera.h, camera.y, -1000, 1000);
// const transformMatrix = mat4.mul(mat4.create(), projMatrix, viewMatrix);
// paletteSpriteBatch.begin(paletteShader, sprites.paletteSpriteSheet);
// gl.uniformMatrix4fv(paletteShader.uniforms.transfrom, false, transformMatrix);
// gl.uniform4f(paletteShader.uniforms.lighting, 1, 1, 1, 1);
// gl.uniform1f(paletteShader.uniforms.pixelSize, paletteManager.pixelSize);
// // for (let y = 0; y < 15; y++) {
// // for (let x = 0; x < 10; x++) {
// // paletteSpriteBatch.drawSprite(sprites.grass_tile.color, WHITE, grassPalette, x * 32, y * 24);
// // }
// // }
// // paletteSpriteBatch.drawSprite(sprites.stone_wall_6.color!, WHITE, wallPalette, 60, 40);
// // paletteSpriteBatch.drawSprite(sprites.tree_6Crown0_0.color!, WHITE, treePalette, 120, 10);
// const sprite = sprites.grass_tile.color;
// function drawHTileAt(x: number, y: number, z: number, color: number) {
// paletteSpriteBatch.drawQuad(color, grassPalette,
// x + 0, y + 0, z,
// x + 1, y + 0, z,
// x + 1, y + 1, z,
// x + 0, y + 1, z,
// sprite.x, sprite.y, sprite.w, sprite.h);
// }
// drawHTileAt(0.5, 0, redZ, RED);
// drawHTileAt(0, 0, 0, WHITE);
// drawHTileAt(0.5, 0, 0, ORANGE);
// paletteSpriteBatch.drawQuad(BLUE, grassPalette,
// 0, 0, blueZ,
// 1, 0, blueZ,
// 1, 1, blueZ - 1,
// 0, 1, blueZ - 1,
// sprite.x, sprite.y, sprite.w, sprite.h);
// paletteSpriteBatch.end();
// },
// });
// window.addEventListener('keyup', e => {
// if (e.keyCode === Key.KEY_Q) {
// handle.cancel();
// }
// });
// window.addEventListener('keydown', e => {
// if (e.keyCode === Key.LEFT) {
// camera.x -= 1;
// } else if (e.keyCode === Key.RIGHT) {
// camera.x += 1;
// } else if (e.keyCode === Key.UP) {
// camera.y -= 1;
// } else if (e.keyCode === Key.DOWN) {
// camera.y += 1;
// }
// if (e.keyCode === Key.KEY_A) {
// camera.x -= 1;
// } else if (e.keyCode === Key.KEY_D) {
// camera.x += 1;
// } else if (e.keyCode === Key.KEY_W) {
// camera.y -= 1;
// } else if (e.keyCode === Key.KEY_S) {
// camera.y += 1;
// }
// if (e.keyCode === Key.KEY_R) {
// redZ -= 0.1;
// } else if (e.keyCode === Key.KEY_T) {
// redZ += 0.1;
// }
// if (e.keyCode === Key.KEY_F) {
// blueZ -= 0.1;
// } else if (e.keyCode === Key.KEY_G) {
// blueZ += 0.1;
// }
// });
// }
// export function oldTests(canvas: HTMLCanvasElement) {
// let skewTime = 0;
// let animationTime = 0;
// let lightTexture: Texture2D;
// // let tilesTexture: Texture2D;
// const gl = getWebGLContext(canvas);
// const spriteShaderInstance = createShader(gl, spriteShader);
// const paletteShader = createShader(gl, paletteDepthShader);
// const lightShader = createShader(gl, sprite2Shader);
// const spriteBatch = new SpriteBatch(gl);
// const spriteBatch2 = new SpriteBatch2(gl);
// const paletteSpriteBatch2 = new PaletteSpriteBatch2(gl);
// const paletteSpriteBatch = new PaletteSpriteBatch(gl);
// const paletteManager = new PaletteManager();
// const palettes: Palette[] = [];
// const fbo = createFrameBuffer(gl, 1024, 1024, { depth: false });
// //const light = createFBO(gl, 1024, 1024, { depth: true });
// // const INFO = createDefaultPony();
// const STATE: PonyState = {
// ...defaultPonyState(),
// animation: trot,
// animationFrame: 0,
// headAnimation: undefined,
// headAnimationFrame: 0,
// blinkFrame: 2,
// };
// const scale = 4;
// // const ponyInfo = toPalette(INFO, paletteManager);
// const treePalette = paletteManager.addArray(sprites.tree_6Crown0_0.palettes![0]);
// const rockPalette = paletteManager.addArray(sprites.rock.palettes![0]);
// const grassPalette = paletteManager.addArray(sprites.grass_2.palettes![0]);
// let mouseX = 0, mouseY = 0;
// // font.lineSpacing = 5;
// canvas.addEventListener('mousemove', e => {
// mouseX = e.pageX / scale;
// mouseY = e.pageY / scale;
// });
// const handle = startGameLoop({
// load() {
// return Promise.all([
// //loadImage('/assets/images/pony2.png').then(img => pony2 = createTexture(gl, img, gl.RGBA, gl.UNSIGNED_BYTE)),
// // loadImage('/assets/images/tiles.png').then(img => tilesTexture = createTexture(gl, img)),
// loadImage('/images/light2.png').then(img => lightTexture = createTexture(gl, img)),
// loadSpriteSheets(sprites.spriteSheets, loadImage),
// ]).then(() => {
// createTexturesForSpriteSheets(gl, sprites.spriteSheets);
// });
// },
// init() {
// },
// update(delta: number) {
// skewTime += delta * 2; // * 0.5;
// while (skewTime > 1) {
// skewTime -= 1;
// }
// STATE.animationFrame = Math.floor(animationTime * 24) % STATE.animation!.frames.length;
// },
// draw() {
// gl.canvas.width = document.body.clientWidth;
// gl.canvas.height = document.body.clientHeight;
// gl.canvas.style.width = document.body.clientWidth + 'px';
// gl.canvas.style.height = document.body.clientHeight + 'px';
// paletteManager.commit(gl);
// paletteSpriteBatch.palette = paletteManager.texture;
// const width = Math.ceil(gl.canvas.width / scale);
// const height = Math.ceil(gl.canvas.height / scale);
// // render color
// bindFrameBuffer(fbo);
// gl.viewport(0, 0, width, height);
// gl.clearColor(0.13, 0.5, 0.5, 1.0);
// gl.clear(gl.COLOR_BUFFER_BIT);
// gl.disable(gl.DEPTH_TEST);
// gl.enable(gl.BLEND);
// gl.blendEquation(gl.FUNC_ADD);
// gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
// const viewMatrix = mat4.ortho(mat4.create(), 0, width, height, 0, 0, 1000);
// paletteSpriteBatch.begin(paletteShader, {} as any);
// gl.uniformMatrix4fv(paletteShader.uniforms.transfrom, false, viewMatrix);
// gl.uniform4f(paletteShader.uniforms.lighting, 1, 1, 1, 1);
// gl.uniform1f(paletteShader.uniforms.pixelSize, paletteManager.pixelSize);
// for (let y = 0; y < 15; y++) {
// for (let x = 0; x < 10; x++) {
// paletteSpriteBatch.drawSprite(sprites.grass_2.color, WHITE, grassPalette, x * 32, y * 24);
// }
// }
// paletteSpriteBatch.drawSprite(sprites.tree_6Crown0_0.color!, WHITE, treePalette, 120, 10);
// paletteSpriteBatch.end();
// // render frame buffer (color)
// gl.bindFramebuffer(gl.FRAMEBUFFER, null);
// gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// gl.clearColor(0.13, 0.5, 0.5, 1.0);
// gl.clear(gl.COLOR_BUFFER_BIT);
// gl.disable(gl.DEPTH_TEST);
// gl.disable(gl.BLEND);
// const fboMatrix = mat4.ortho(mat4.create(), 0, width, height, 0, 0, 1000);
// spriteBatch.begin(spriteShaderInstance, { texture: fbo.depth } as any);
// gl.uniformMatrix4fv(spriteShaderInstance.uniforms.transfrom, false, fboMatrix);
// gl.uniform4f(spriteShaderInstance.uniforms.lighting, 1, 1, 1, 1);
// spriteBatch.drawImage(WHITE, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
// spriteBatch.end();
// },
// draw2() {
// gl.canvas.width = document.body.clientWidth;
// gl.canvas.height = document.body.clientHeight;
// gl.canvas.style.width = document.body.clientWidth + 'px';
// gl.canvas.style.height = document.body.clientHeight + 'px';
// paletteManager.commit(gl);
// paletteSpriteBatch2.palette = paletteManager.texture;
// const width = Math.ceil(gl.canvas.width / scale);
// const height = Math.ceil(gl.canvas.height / scale);
// // render color
// bindFrameBuffer(fbo);
// gl.viewport(0, 0, width, height);
// gl.clearColor(0.13, 0.5, 0.5, 1.0);
// gl.clearDepth(1000); //gl.DEPTH_CLEAR_VALUE);
// gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// gl.enable(gl.DEPTH_TEST);
// //gl.depthMask(true);
// gl.depthFunc(gl.LEQUAL);
// //gl.depthRange(0, 1000);
// gl.enable(gl.BLEND);
// gl.blendEquation(gl.FUNC_ADD);
// gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
// //const mat = createViewMatrix(mat4.create(), width, height, 1);
// const tst = mat4.create();
// mat4.identity(tst);
// mat4.translate(tst, tst, vec3.fromValues(-1, 1, 0));
// mat4.scale(tst, tst, vec3.fromValues(2 / width, -2 / height, 1));
// mat4.scale(tst, tst, vec3.fromValues(1, 1, 0.005));
// //mat4.translate(tst, tst, vec3.fromValues(0, 0, 0));
// const tst2 = mat4.ortho(mat4.create(), 0, width, height, 0, 0, 100);
// //const viewMatrix = mat4.ortho(this.viewMatrix, camera.x, camera.x + camera.w, camera.y, camera.y + camera.h, 0, 100);
// //const fboMatrix = mat4.ortho(
// // this.fboMatrix, 0, this.canvas.width / actualScale, this.canvas.height / actualScale, 0, 0, 100);
// //console.log(mat4.str(tst));
// //console.log(mat4.str(tst2));
// //handle.cancel();
// //spriteBatch.begin(spriteShader);
// //spriteShader.uniforms.transform = mat;
// //spriteShader.uniforms.lighting = [1, 1, s1, 1];
// //spriteBatch.drawRect(GRAY, 10, 140, SIZE, SIZE);
// //spriteBatch.end();
// paletteSpriteBatch2.begin(paletteShader, {} as any);
// gl.uniformMatrix4fv(paletteShader.uniforms.transfrom, false, tst2);
// gl.uniform4f(paletteShader.uniforms.lighting, 1, 1, 1, 1);
// gl.uniform1f(paletteShader.uniforms.pixelSize, paletteManager.pixelSize);
// paletteSpriteBatch2.depth = -100;
// for (let y = 0; y < 15; y++) {
// for (let x = 0; x < 10; x++) {
// paletteSpriteBatch2.drawSprite(sprites.grass_2.color, WHITE, grassPalette, x * 32, y * 24);
// }
// }
// paletteSpriteBatch2.depth = -90;
// paletteSpriteBatch2.drawSprite(sprites.rock.color, WHITE, rockPalette, 65, 70);
// paletteSpriteBatch2.depth = -80;
// // drawPony(paletteSpriteBatch2, ponyInfo, STATE, 100, 100, defaultDrawPonyOptions());
// //const tail = mat2d.create();
// //mat2d.identity(tail);
// //mat2d.translate(tail, tail, vec2.fromValues(10, 60));
// //skewY(tail, tail, (skewTime > 0.5 ? (1 - skewTime) : skewTime) * 0.4);
// //mat2d.translate(tail, tail, vec2.fromValues(-46, -44));
// //
// //paletteSpriteBatch.transform = tail;
// //paletteSpriteBatch.drawSprite(sprites.ponTails[1][1].color, null, ponyInfo.tail.palette, 0, 0);
// //paletteSpriteBatch.transform = null;
// paletteSpriteBatch2.depth = -60;
// paletteSpriteBatch2.drawSprite(sprites.tree_6Crown0_0.color, WHITE, treePalette, 120, 10);
// //gl.depthMask(false);
// paletteSpriteBatch2.end();
// //spriteBatch.begin(spriteShader);
// //spriteShader.uniforms.transform = mat;
// //spriteShader.uniforms.lighting = [1, 1, 1, 1];
// //spriteBatch.drawRect(GRAY, 10, 140, paletteManager.textureSize, paletteManager.textureSize);
// //spriteBatch.drawImage(
// // paletteManager.texture, null, 0, 0, paletteManager.textureSize, paletteManager.textureSize,
// // 10, 140, paletteManager.textureSize, paletteManager.textureSize);
// //spriteBatch.drawImage(lightTexture, null, 0, 0, 64, 64, 50, 50, 64, 64);
// //spriteBatch.end();
// // render lighting test
// // gl.blendEquation(gl.FUNC_ADD);
// // gl.blendFunc(gl.ONE, gl.ONE);
// //
// // spriteBatch2.begin(lightShader);
// // lightShader.uniforms.transform = tst;
// // spriteBatch2.defaultDepth = 70;
// // spriteBatch2.drawImage(lightTexture, null, 0, 0, 128, 128, mouseX - 64, mouseY - 64, 128, 128);
// // spriteBatch2.end();
// // render lighting
// // light.bind();
// //
// // gl.viewport(0, 0, width, height);
// // gl.clearColor(0.2, 0, 0, 1.0);
// // gl.clear(gl.COLOR_BUFFER_BIT);
// //
// // gl.disable(gl.DEPTH_TEST);
// // gl.enable(gl.BLEND);
// // gl.blendEquation(gl.FUNC_ADD);
// // gl.blendFunc(gl.ONE, gl.ONE);
// //
// // spriteBatch.begin(spriteShader);
// // spriteShader.uniforms.transform = mat;
// // spriteShader.uniforms.lighting = [1, 1, 1, 1];
// // spriteBatch.drawImage(lightTexture, null, 0, 0, 128, 128, mouseX - 64, mouseY - 64, 128, 128);
// // spriteBatch.end();
// // render frame buffer (color)
// gl.bindFramebuffer(gl.FRAMEBUFFER, null);
// gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// gl.clearColor(1, 1, 1, 1);
// gl.clear(gl.COLOR_BUFFER_BIT);
// gl.disable(gl.DEPTH_TEST);
// gl.enable(gl.BLEND);
// gl.blendEquation(gl.FUNC_ADD);
// gl.blendFunc(gl.DST_COLOR, gl.ZERO);
// spriteBatch.begin(spriteShaderInstance, { texture: fbo.depth } as any);
// const viewMatrix = createViewMatrix2(mat4.create(), canvas.width, canvas.height, scale);
// gl.uniformMatrix4fv(spriteShaderInstance.uniforms.transfrom, false, viewMatrix);
// gl.uniform4f(spriteShaderInstance.uniforms.lighting, 1, 1, 1, 1);
// spriteBatch.drawImage(WHITE, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
// //spriteBatch.drawImage(fbo.color[0], WHITE, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
// //spriteBatch.drawImage(fbo.color[1], WHITE, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
// //spriteBatch.drawImage(light.color[0], WHITE, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
// spriteBatch.end();
// // render light
// bindFrameBuffer(fbo);
// gl.viewport(0, 0, width, height);
// gl.clearColor(0.13, 0.5, 0.5, 1.0); // ambient light color here
// gl.clear(gl.COLOR_BUFFER_BIT);
// gl.enable(gl.DEPTH_TEST);
// gl.depthFunc(gl.LESS);
// gl.blendEquation(gl.FUNC_ADD);
// gl.blendFunc(gl.ONE, gl.ONE);
// spriteBatch2.begin(lightShader, { texture: lightTexture } as any);
// gl.uniformMatrix4fv(lightShader.uniforms.transfrom, false, tst);
// spriteBatch2.depth = 70;
// spriteBatch2.drawImage(WHITE, 0, 0, 256, 200, mouseX - 128, mouseY - 100, 256, 200);
// spriteBatch2.end();
// // render frame buffer (light)
// gl.bindFramebuffer(gl.FRAMEBUFFER, null);
// gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// gl.disable(gl.DEPTH_TEST);
// gl.enable(gl.BLEND);
// gl.blendEquation(gl.FUNC_ADD);
// gl.blendFunc(gl.DST_COLOR, gl.ZERO);
// spriteBatch.begin(spriteShaderInstance, { texture: fbo.color[0] } as any);
// const mat = createViewMatrix2(mat4.create(), canvas.width, canvas.height, scale);
// gl.uniformMatrix4fv(spriteShaderInstance.uniforms.transfrom, false, mat);
// gl.uniform4f(spriteShaderInstance.uniforms.lighting, 1, 1, 1, 1);
// //spriteBatch.drawImage(fbo.depth, WHITE, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
// spriteBatch.drawImage(WHITE, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
// //spriteBatch.drawImage(fbo.color[1], WHITE, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
// //spriteBatch.drawImage(light.color[0], WHITE, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
// spriteBatch.end();
// },
// } as any);
// window.addEventListener('keyup', e => {
// if (e.keyCode === Key.KEY_Q) {
// handle.cancel();
// }
// });
// window.addEventListener('keydown', e => {
// if (e.keyCode === Key.KEY_E) {
// animationTime -= 1 / 24;
// } else if (e.keyCode === Key.KEY_R) {
// animationTime += 1 / 24;
// } else if (e.keyCode === Key.KEY_T) {
// for (let i = 0; i < 5; i++) {
// palettes.push(paletteManager.add(range(0, 40 * Math.random()).map(() => Math.random() * 0xffffffff)));
// }
// } else if (e.keyCode === Key.KEY_Y) {
// palettes.forEach(releasePalette);
// palettes.length = 0;
// }
// });
// }