58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
import { initializeContext, Vec2 } from "./common.js";
|
|
import { Graphics, fullscreenCanvas } from "./graphics.js";
|
|
import * as drawing from "./draw.js";
|
|
const vertexShader = `#version 300 es
|
|
|
|
in vec2 a_position;
|
|
in vec4 a_color;
|
|
out vec4 color;
|
|
uniform vec2 u_resolution;
|
|
|
|
void main() {
|
|
vec2 clipSpace = (a_position / u_resolution) * 2.0 - 1.0;
|
|
|
|
color = a_color;
|
|
|
|
gl_Position = vec4(clipSpace.xy, 0.0, 1.0);
|
|
}
|
|
`;
|
|
const fragmentShader = `#version 300 es
|
|
|
|
precision highp float;
|
|
in vec4 color;
|
|
out vec4 outColor;
|
|
|
|
void main() {
|
|
outColor = color;
|
|
}
|
|
`;
|
|
function draw(gfx) {
|
|
const position = new Vec2(gfx.ctx.canvas.width / 2 - 100, gfx.ctx.canvas.height / 2 - 100);
|
|
gfx.clear(0, 0, 0, 0);
|
|
gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
|
|
drawing.drawRectangle(gfx, position, new Vec2(200, 200));
|
|
drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
|
|
drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));
|
|
drawing.drawCircle(gfx, new Vec2(400, 200), 100);
|
|
drawing.drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600));
|
|
drawing.drawLine(gfx, new Vec2(0, 1), new Vec2(100, 1));
|
|
}
|
|
(() => {
|
|
const canvasId = "game";
|
|
const ctx = initializeContext(canvasId);
|
|
if (ctx === null)
|
|
return;
|
|
const gfx = new Graphics(ctx, vertexShader, fragmentShader);
|
|
fullscreenCanvas(gfx, canvasId);
|
|
const a_position = gfx.createAttribute("a_position");
|
|
a_position.format(2, gfx.ctx.FLOAT, false, 0, 0);
|
|
const a_color = gfx.createAttribute("a_color");
|
|
a_color.format(4, gfx.ctx.FLOAT, false, 0, 0);
|
|
gfx.createUniform("u_resolution");
|
|
draw(gfx);
|
|
window.onresize = () => {
|
|
fullscreenCanvas(gfx, canvasId);
|
|
draw(gfx);
|
|
};
|
|
})();
|