mirror of
https://github.com/Terncode/pixel.horse.git
synced 2026-09-25 22:25:53 +02:00
Eliot Partridge
caf70a864f
* Revert "7f7efbb94bab8574e42d942ad82d414e007b2970" Code style changes should probably be part of a PR
929 lines
33 KiB
TypeScript
929 lines
33 KiB
TypeScript
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;
|
|
// }
|
|
// });
|
|
// }
|