346 lines
9.5 KiB
TypeScript
346 lines
9.5 KiB
TypeScript
import {Vec2, Vec3, Vec4} from "./common.js";
|
|
import { TileFillament, TileFill } from "./world.js";
|
|
|
|
export function fullscreenCanvas(gfx: Graphics, id: string) {
|
|
const canvas = document.getElementById(id) as HTMLCanvasElement;
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
gfx.ctx.viewport(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
function createShader(ctx: WebGL2RenderingContext, type: GLenum, source: string): WebGLShader {
|
|
var shader = ctx.createShader(type);
|
|
if (!shader) {
|
|
throw new Error("Couldn't create shader: " + type);
|
|
}
|
|
|
|
ctx.shaderSource(shader, source);
|
|
ctx.compileShader(shader);
|
|
|
|
var success = ctx.getShaderParameter(shader, ctx.COMPILE_STATUS);
|
|
if (!success) {
|
|
console.log(ctx.getShaderInfoLog(shader));
|
|
ctx.deleteShader(shader);
|
|
throw new Error("Couldn't compile shader: " + type);
|
|
}
|
|
|
|
return shader;
|
|
}
|
|
|
|
function createProgram(ctx: WebGL2RenderingContext, vertexShaderSource: string | null, fragmentShaderSource: string | null): WebGLProgram {
|
|
var program = ctx.createProgram();
|
|
|
|
if (vertexShaderSource !== null) {
|
|
const vs = createShader(ctx, ctx.VERTEX_SHADER, vertexShaderSource);
|
|
ctx.attachShader(program, vs);
|
|
}
|
|
|
|
if (fragmentShaderSource !== null) {
|
|
const fs = createShader(ctx, ctx.FRAGMENT_SHADER, fragmentShaderSource);
|
|
ctx.attachShader(program, fs);
|
|
}
|
|
|
|
ctx.linkProgram(program);
|
|
|
|
var success = ctx.getProgramParameter(program, ctx.LINK_STATUS);
|
|
if (!success) {
|
|
console.log(ctx.getProgramInfoLog(program));
|
|
ctx.deleteProgram(program);
|
|
throw new Error("Failed to create program!");
|
|
}
|
|
|
|
return program;
|
|
}
|
|
|
|
export enum DrawTag {
|
|
ISO,
|
|
}
|
|
|
|
export interface Drawable {
|
|
attribs: string[];
|
|
tags: Array<DrawTag>;
|
|
|
|
data: number[][];
|
|
vertexSize: number;
|
|
|
|
sprites: Spritesheet | undefined;
|
|
}
|
|
|
|
export class Graphics {
|
|
ctx: WebGL2RenderingContext;
|
|
program: WebGLProgram;
|
|
attribs: Map<string, Attribute> = new Map();
|
|
uniforms: Map<string, WebGLUniformLocation> = new Map();
|
|
vao: WebGLVertexArrayObject;
|
|
vbo: WebGLBuffer;
|
|
|
|
toRender: Array<Drawable> = [];
|
|
texCount: number = 0;
|
|
|
|
constructor(ctx: WebGL2RenderingContext, vs: string, fs: string) {
|
|
this.ctx = ctx;
|
|
this.program = createProgram(ctx, vs, fs);
|
|
this.vao = ctx.createVertexArray();
|
|
this.vbo = ctx.createBuffer();
|
|
|
|
ctx.bindVertexArray(this.vao);
|
|
ctx.viewport(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
ctx.useProgram(this.program);
|
|
|
|
ctx.blendFunc(ctx.SRC_ALPHA, ctx.ONE_MINUS_SRC_ALPHA);
|
|
ctx.enable(ctx.BLEND);
|
|
}
|
|
|
|
clear(r: number, g: number, b: number, a: number) {
|
|
this.ctx.clearColor(r, g, b, a);
|
|
this.ctx.clear(this.ctx.COLOR_BUFFER_BIT);
|
|
}
|
|
|
|
createAttribute(name: string): Attribute {
|
|
const attrib = new Attribute(this.ctx, this.program, name);
|
|
this.attribs.set(name, attrib);
|
|
return attrib;
|
|
}
|
|
|
|
getAttribute(name: string): Attribute {
|
|
const attrib = this.attribs.get(name);
|
|
|
|
if (attrib === undefined)
|
|
throw new Error("Tried to get uninitialized attribute: " + name);
|
|
|
|
return attrib;
|
|
}
|
|
|
|
createUniform(name: string) {
|
|
const loc = this.ctx.getUniformLocation(this.program, name);
|
|
|
|
if (loc === null)
|
|
throw new Error("Couldn't get location for uniform: " + name);
|
|
|
|
this.uniforms.set(name, loc);
|
|
}
|
|
|
|
getUniform(name: string): WebGLUniformLocation {
|
|
const loc = this.uniforms.get(name);
|
|
|
|
if (loc === undefined)
|
|
throw new Error("Tried to get uninitialized uniform: " + name);
|
|
|
|
return loc;
|
|
}
|
|
|
|
draw() {
|
|
for (let o of this.toRender) {
|
|
const data = o.data.flat();
|
|
|
|
this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.vbo);
|
|
this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(data), this.ctx.STATIC_DRAW);
|
|
|
|
let aid = 0;
|
|
for (let a of o.attribs) {
|
|
let attr = this.getAttribute(a);
|
|
if (!attr.formatted)
|
|
throw new Error("Tried to use unformatted attribute!");
|
|
|
|
this.ctx.enableVertexAttribArray(attr.loc);
|
|
this.ctx.vertexAttribPointer(attr.loc, attr.size, attr.type, attr.normalized, o.vertexSize * 4, aid * 4);
|
|
aid += attr.size;
|
|
}
|
|
|
|
// Generalize the tag uniforms aka. don't hard code them
|
|
for (let t of o.tags) {
|
|
switch (t) {
|
|
case DrawTag.ISO: {
|
|
this.ctx.uniform1ui(this.getUniform("u_isIso"), 1);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
o.sprites?.bind(this);
|
|
|
|
this.ctx.drawArrays(this.ctx.TRIANGLES, 0, data.length / o.vertexSize);
|
|
|
|
o.sprites?.unbind(this);
|
|
|
|
for (let t of o.tags) {
|
|
switch (t) {
|
|
case DrawTag.ISO: {
|
|
this.ctx.uniform1ui(this.getUniform("u_isIso"), 0);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// TODO: Maybe add persistent rendering?
|
|
this.toRender = [];
|
|
}
|
|
}
|
|
|
|
export class Attribute {
|
|
loc: GLint;
|
|
formatted: boolean = false;
|
|
|
|
size: GLint = 0;
|
|
type: GLenum = 0;
|
|
offset: GLintptr = 0;
|
|
normalized: GLboolean = false;
|
|
|
|
constructor(ctx: WebGL2RenderingContext, program: WebGLProgram, name: string) {
|
|
this.loc = ctx.getAttribLocation(program, name);
|
|
}
|
|
|
|
format(
|
|
size: GLint,
|
|
type: GLenum,
|
|
normalized: GLboolean,
|
|
offset: GLintptr)
|
|
{
|
|
this.size = size;
|
|
this.type = type;
|
|
this.normalized = normalized;
|
|
this.offset = offset;
|
|
|
|
this.formatted = true;
|
|
}
|
|
}
|
|
|
|
export class Texture {
|
|
tex: WebGLTexture | null;
|
|
texId: number;
|
|
width: number = 0;
|
|
height: number = 0;
|
|
|
|
constructor(texId: number, tex: WebGLTexture, width: number, height: number) {
|
|
this.height = height;
|
|
this.width = width;
|
|
this.tex = tex;
|
|
this.texId = texId;
|
|
}
|
|
|
|
// TODO: Load sprite sheet only once
|
|
// TODO: Allow changing sprite size
|
|
static async load(gfx: Graphics, path: string): Promise<Texture> {
|
|
let image = await loadTexture(path);
|
|
|
|
let tex = gfx.ctx.createTexture();
|
|
gfx.ctx.bindTexture(gfx.ctx.TEXTURE_2D, tex);
|
|
gfx.ctx.texImage2D(gfx.ctx.TEXTURE_2D, 0, gfx.ctx.RGBA, gfx.ctx.RGBA, gfx.ctx.UNSIGNED_BYTE, image);
|
|
gfx.ctx.texParameteri(gfx.ctx.TEXTURE_2D, gfx.ctx.TEXTURE_MAG_FILTER, gfx.ctx.NEAREST);
|
|
gfx.ctx.texParameteri(gfx.ctx.TEXTURE_2D, gfx.ctx.TEXTURE_MIN_FILTER, gfx.ctx.NEAREST);
|
|
gfx.ctx.bindTexture(gfx.ctx.TEXTURE_2D, null);
|
|
|
|
gfx.texCount += 1;
|
|
return new Texture(gfx.texCount, tex, image.width, image.height);
|
|
}
|
|
|
|
bind(gfx: Graphics) {
|
|
gfx.ctx.bindTexture(gfx.ctx.TEXTURE_2D, this.tex);
|
|
}
|
|
|
|
unbind(gfx: Graphics) {
|
|
gfx.ctx.bindTexture(gfx.ctx.TEXTURE_2D, null);
|
|
}
|
|
}
|
|
|
|
export type SpriteId = number;
|
|
|
|
export class Sprite {
|
|
id: SpriteId = 0;
|
|
|
|
private constructor(id: SpriteId) {
|
|
this.id = id;
|
|
}
|
|
|
|
static id(id: SpriteId): Sprite {
|
|
return new Sprite(id);
|
|
}
|
|
|
|
static tile(id: SpriteId): TileFill {
|
|
let s = new Sprite(id);
|
|
|
|
return {
|
|
left: s,
|
|
top: s,
|
|
right: s,
|
|
}
|
|
}
|
|
};
|
|
|
|
export class Spritesheet {
|
|
texture: Texture; // Texture is a horizontal spritesheet
|
|
spriteSize: Vec2; // width and height of one sprite
|
|
spriteCount: number; // number of sprites
|
|
|
|
constructor(texture: Texture, spriteSize: Vec2) {
|
|
this.texture = texture;
|
|
this.spriteSize = spriteSize;
|
|
this.spriteCount = texture.width / spriteSize.x;
|
|
}
|
|
|
|
getUVs(id: number): [Vec2, Vec2, Vec2, Vec2] {
|
|
return [
|
|
new Vec2((this.spriteSize.x * id) / this.texture.width, 0),
|
|
new Vec2((this.spriteSize.x * (id + 1)) / this.texture.width, 0),
|
|
new Vec2((this.spriteSize.x * (id + 1)) / this.texture.width, -1),
|
|
new Vec2((this.spriteSize.x * id) / this.texture.width, -1),
|
|
];
|
|
}
|
|
|
|
bind(gfx: Graphics) {
|
|
this.texture.bind(gfx);
|
|
}
|
|
|
|
unbind(gfx: Graphics) {
|
|
this.texture.unbind(gfx);
|
|
}
|
|
}
|
|
|
|
async function loadTexture(path: string): Promise<HTMLImageElement> {
|
|
return new Promise(resolve => {
|
|
const img = new Image();
|
|
img.addEventListener("load", () => {
|
|
resolve(img);
|
|
})
|
|
img.src = path;
|
|
});
|
|
}
|
|
|
|
export class Camera {
|
|
dt: number = 0;
|
|
|
|
position: Vec3;
|
|
movement: Vec4;
|
|
speed: number = 600;
|
|
|
|
scale: number = 1.0;
|
|
scaling: Vec2;
|
|
scaleSpeed: number = 1.5;
|
|
|
|
constructor(position: Vec3) {
|
|
this.position = position;
|
|
this.movement = new Vec4(0, 0, 0, 0);
|
|
this.scaling = new Vec2(0, 0);
|
|
}
|
|
|
|
update(dt: number) {
|
|
this.dt = dt;
|
|
|
|
let newPosition = this.movement.multScalarNew(this.dt);
|
|
this.position.x += (newPosition.x + newPosition.y) * this.speed;
|
|
this.position.y += (newPosition.z + newPosition.w) * this.speed;
|
|
|
|
this.scale += (this.scaling.x + this.scaling.y) * this.dt * this.scaleSpeed;
|
|
|
|
if (this.scale < 0.5) {
|
|
this.scale = 0.5;
|
|
}
|
|
|
|
if (this.scale > 1.5) {
|
|
this.scale = 1.5;
|
|
}
|
|
}
|
|
}
|
|
|