Refactored drawing functions
This commit is contained in:
parent
2d1d3b6034
commit
4835d7ef21
|
@ -1,3 +1,8 @@
|
||||||
|
function initializeContext(canvasId) {
|
||||||
|
const canvas = document.getElementById(canvasId);
|
||||||
|
const ctx = canvas.getContext("webgl2", { antialias: false });
|
||||||
|
return ctx;
|
||||||
|
}
|
||||||
class Vec2 {
|
class Vec2 {
|
||||||
x;
|
x;
|
||||||
y;
|
y;
|
||||||
|
@ -56,4 +61,4 @@ class Vec3 {
|
||||||
this.z -= other.z;
|
this.z -= other.z;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export { Vec2, Vec3 };
|
export { initializeContext, Vec2, Vec3 };
|
||||||
|
|
|
@ -1,3 +1,10 @@
|
||||||
|
function initializeContext(canvasId: string): WebGL2RenderingContext | null {
|
||||||
|
const canvas = document.getElementById(canvasId) as HTMLCanvasElement;
|
||||||
|
const ctx = canvas.getContext("webgl2", {antialias: false});
|
||||||
|
|
||||||
|
return ctx;
|
||||||
|
}
|
||||||
|
|
||||||
class Vec2 {
|
class Vec2 {
|
||||||
x: number;
|
x: number;
|
||||||
y: number;
|
y: number;
|
||||||
|
@ -71,4 +78,4 @@ class Vec3 {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export {Vec2, Vec3};
|
export { initializeContext, Vec2, Vec3 };
|
||||||
|
|
|
@ -0,0 +1,92 @@
|
||||||
|
import { Vec2 } from "./common.js";
|
||||||
|
function drawTriangle(gfx, positions) {
|
||||||
|
const a_position = gfx.getAttribute("a_position");
|
||||||
|
const a_color = gfx.getAttribute("a_color");
|
||||||
|
const points = [
|
||||||
|
positions[0].x, positions[0].y,
|
||||||
|
positions[1].x, positions[1].y,
|
||||||
|
positions[2].x, positions[2].y,
|
||||||
|
];
|
||||||
|
const color = [
|
||||||
|
1, 0, 0, 1,
|
||||||
|
0, 1, 0, 1,
|
||||||
|
0, 0, 1, 1,
|
||||||
|
];
|
||||||
|
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
||||||
|
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
||||||
|
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
|
||||||
|
}
|
||||||
|
function drawTriangleExts(gfx, position, exts) {
|
||||||
|
const a_position = gfx.getAttribute("a_position");
|
||||||
|
const a_color = gfx.getAttribute("a_color");
|
||||||
|
const points = [
|
||||||
|
position.x, position.y,
|
||||||
|
position.x + exts.x, position.y,
|
||||||
|
position.x, position.y + exts.y,
|
||||||
|
];
|
||||||
|
const color = [
|
||||||
|
1, 0, 0, 1,
|
||||||
|
0, 1, 0, 1,
|
||||||
|
0, 0, 1, 1,
|
||||||
|
];
|
||||||
|
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
||||||
|
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
||||||
|
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
|
||||||
|
}
|
||||||
|
function drawRectangle(gfx, position, exts) {
|
||||||
|
const a_position = gfx.getAttribute("a_position");
|
||||||
|
const a_color = gfx.getAttribute("a_color");
|
||||||
|
const points = [
|
||||||
|
position.x, position.y,
|
||||||
|
position.x + exts.x, position.y,
|
||||||
|
position.x, position.y + exts.y,
|
||||||
|
position.x + exts.x, position.y + exts.y,
|
||||||
|
position.x + exts.x, position.y,
|
||||||
|
position.x, position.y + exts.y,
|
||||||
|
];
|
||||||
|
const color = [
|
||||||
|
1, 0, 0, 1,
|
||||||
|
0, 1, 0, 1,
|
||||||
|
0, 0, 1, 1,
|
||||||
|
1, 0, 0, 1,
|
||||||
|
0, 1, 0, 1,
|
||||||
|
0, 0, 1, 1,
|
||||||
|
];
|
||||||
|
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
||||||
|
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
||||||
|
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
|
||||||
|
}
|
||||||
|
function drawCircle(gfx, position, radius) {
|
||||||
|
const points = new Array();
|
||||||
|
const precision = 40;
|
||||||
|
const angle = 2.0 * Math.PI / precision;
|
||||||
|
let a = 0;
|
||||||
|
for (let i = 0; i < precision; ++i) {
|
||||||
|
var vec = Vec2.angle(a);
|
||||||
|
vec.mult(radius);
|
||||||
|
a += angle;
|
||||||
|
points.push(vec);
|
||||||
|
}
|
||||||
|
for (let i = 0; i < points.length; i++) {
|
||||||
|
const current = points[i];
|
||||||
|
const next = points[(i + 1) % points.length];
|
||||||
|
let center = position;
|
||||||
|
drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function drawLine(gfx, A, B) {
|
||||||
|
const a_position = gfx.getAttribute("a_position");
|
||||||
|
const a_color = gfx.getAttribute("a_color");
|
||||||
|
let points = [
|
||||||
|
A.x, A.y,
|
||||||
|
B.x, B.y,
|
||||||
|
];
|
||||||
|
const color = [
|
||||||
|
1, 0, 0, 1,
|
||||||
|
0, 0, 1, 1,
|
||||||
|
];
|
||||||
|
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
||||||
|
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
||||||
|
gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
|
||||||
|
}
|
||||||
|
export { drawTriangle, drawTriangleExts, drawRectangle, drawCircle, drawLine };
|
|
@ -0,0 +1,115 @@
|
||||||
|
import { Vec2 } from "./common.js"
|
||||||
|
import { Graphics } from "./graphics.js";
|
||||||
|
|
||||||
|
function drawTriangle(gfx: Graphics, positions: [Vec2, Vec2, Vec2]) {
|
||||||
|
const a_position = gfx.getAttribute("a_position");
|
||||||
|
const a_color = gfx.getAttribute("a_color");
|
||||||
|
|
||||||
|
const points: Array<number> = [
|
||||||
|
positions[0].x, positions[0].y,
|
||||||
|
positions[1].x, positions[1].y,
|
||||||
|
positions[2].x, positions[2].y,
|
||||||
|
]
|
||||||
|
|
||||||
|
const color: Array<number> = [
|
||||||
|
1, 0, 0, 1,
|
||||||
|
0, 1, 0, 1,
|
||||||
|
0, 0, 1, 1,
|
||||||
|
];
|
||||||
|
|
||||||
|
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
||||||
|
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
||||||
|
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawTriangleExts(gfx: Graphics, position: Vec2, exts: Vec2) {
|
||||||
|
const a_position = gfx.getAttribute("a_position");
|
||||||
|
const a_color = gfx.getAttribute("a_color");
|
||||||
|
|
||||||
|
const points: Array<number> = [
|
||||||
|
position.x, position.y,
|
||||||
|
position.x + exts.x, position.y,
|
||||||
|
position.x, position.y + exts.y,
|
||||||
|
]
|
||||||
|
|
||||||
|
const color: Array<number> = [
|
||||||
|
1, 0, 0, 1,
|
||||||
|
0, 1, 0, 1,
|
||||||
|
0, 0, 1, 1,
|
||||||
|
];
|
||||||
|
|
||||||
|
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
||||||
|
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
||||||
|
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawRectangle(gfx: Graphics, position: Vec2, exts: Vec2) {
|
||||||
|
const a_position = gfx.getAttribute("a_position");
|
||||||
|
const a_color = gfx.getAttribute("a_color");
|
||||||
|
|
||||||
|
const points: Array<number> = [
|
||||||
|
position.x, position.y,
|
||||||
|
position.x + exts.x, position.y,
|
||||||
|
position.x, position.y + exts.y,
|
||||||
|
|
||||||
|
position.x + exts.x, position.y + exts.y,
|
||||||
|
position.x + exts.x, position.y,
|
||||||
|
position.x, position.y + exts.y,
|
||||||
|
]
|
||||||
|
|
||||||
|
const color: Array<number> = [
|
||||||
|
1, 0, 0, 1,
|
||||||
|
0, 1, 0, 1,
|
||||||
|
0, 0, 1, 1,
|
||||||
|
1, 0, 0, 1,
|
||||||
|
0, 1, 0, 1,
|
||||||
|
0, 0, 1, 1,
|
||||||
|
];
|
||||||
|
|
||||||
|
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
||||||
|
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
||||||
|
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawCircle(gfx: Graphics, position: Vec2, radius: number) {
|
||||||
|
const points: Array<Vec2> = new Array<Vec2>();
|
||||||
|
|
||||||
|
const precision = 40;
|
||||||
|
const angle = 2.0*Math.PI/precision;
|
||||||
|
let a = 0;
|
||||||
|
for (let i = 0; i < precision; ++i) {
|
||||||
|
var vec = Vec2.angle(a);
|
||||||
|
vec.mult(radius);
|
||||||
|
a += angle;
|
||||||
|
points.push(vec);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < points.length; i++) {
|
||||||
|
const current = points[i];
|
||||||
|
const next = points[(i + 1) % points.length];
|
||||||
|
let center = position;
|
||||||
|
drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawLine(gfx: Graphics, A: Vec2, B: Vec2) {
|
||||||
|
const a_position = gfx.getAttribute("a_position");
|
||||||
|
const a_color = gfx.getAttribute("a_color");
|
||||||
|
|
||||||
|
let points: Array<number> = [
|
||||||
|
A.x, A.y,
|
||||||
|
B.x, B.y,
|
||||||
|
];
|
||||||
|
|
||||||
|
const color: Array<number> = [
|
||||||
|
1, 0, 0, 1,
|
||||||
|
0, 0, 1, 1,
|
||||||
|
];
|
||||||
|
|
||||||
|
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
||||||
|
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
||||||
|
gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { drawTriangle, drawTriangleExts, drawRectangle, drawCircle, drawLine }
|
|
@ -1,3 +1,9 @@
|
||||||
|
function fullscreenCanvas(gfx, id) {
|
||||||
|
const canvas = document.getElementById(id);
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
gfx.ctx.viewport(0, 0, canvas.width, canvas.height);
|
||||||
|
}
|
||||||
function createShader(ctx, type, source) {
|
function createShader(ctx, type, source) {
|
||||||
var shader = ctx.createShader(type);
|
var shader = ctx.createShader(type);
|
||||||
if (!shader) {
|
if (!shader) {
|
||||||
|
@ -101,4 +107,4 @@ class Attribute {
|
||||||
ctx.vertexAttribPointer(this.loc, this.size, this.type, this.normalized, this.stride, this.offset);
|
ctx.vertexAttribPointer(this.loc, this.size, this.type, this.normalized, this.stride, this.offset);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export { Graphics, Attribute };
|
export { fullscreenCanvas, Graphics, Attribute };
|
||||||
|
|
11
graphics.ts
11
graphics.ts
|
@ -1,3 +1,12 @@
|
||||||
|
import { Vec2 } from "./common.js"
|
||||||
|
|
||||||
|
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 {
|
function createShader(ctx: WebGL2RenderingContext, type: GLenum, source: string): WebGLShader {
|
||||||
var shader = ctx.createShader(type);
|
var shader = ctx.createShader(type);
|
||||||
if (!shader) {
|
if (!shader) {
|
||||||
|
@ -136,4 +145,4 @@ class Attribute {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Graphics, Attribute }
|
export { fullscreenCanvas, Graphics, Attribute }
|
||||||
|
|
120
script.js
120
script.js
|
@ -1,5 +1,6 @@
|
||||||
import { Vec2 } from "./common.js";
|
import { initializeContext, Vec2 } from "./common.js";
|
||||||
import { Graphics } from "./graphics.js";
|
import { Graphics, fullscreenCanvas } from "./graphics.js";
|
||||||
|
import * as drawing from "./draw.js";
|
||||||
const vertexShader = `#version 300 es
|
const vertexShader = `#version 300 es
|
||||||
|
|
||||||
in vec2 a_position;
|
in vec2 a_position;
|
||||||
|
@ -25,123 +26,24 @@ const fragmentShader = `#version 300 es
|
||||||
outColor = color;
|
outColor = color;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
function initializeContext(canvasId) {
|
|
||||||
const canvas = document.getElementById(canvasId);
|
|
||||||
const ctx = canvas.getContext("webgl2", { antialias: false });
|
|
||||||
return ctx;
|
|
||||||
}
|
|
||||||
function drawTriangle(gfx, positions) {
|
|
||||||
const a_position = gfx.getAttribute("a_position");
|
|
||||||
const a_color = gfx.getAttribute("a_color");
|
|
||||||
const points = [
|
|
||||||
positions[0].x, positions[0].y,
|
|
||||||
positions[1].x, positions[1].y,
|
|
||||||
positions[2].x, positions[2].y,
|
|
||||||
];
|
|
||||||
const color = [
|
|
||||||
1, 0, 0, 1,
|
|
||||||
0, 1, 0, 1,
|
|
||||||
0, 0, 1, 1,
|
|
||||||
];
|
|
||||||
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
|
||||||
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
|
||||||
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
|
|
||||||
}
|
|
||||||
function drawTriangleExts(gfx, position, exts) {
|
|
||||||
const a_position = gfx.getAttribute("a_position");
|
|
||||||
const a_color = gfx.getAttribute("a_color");
|
|
||||||
const points = [
|
|
||||||
position.x, position.y,
|
|
||||||
position.x + exts.x, position.y,
|
|
||||||
position.x, position.y + exts.y,
|
|
||||||
];
|
|
||||||
const color = [
|
|
||||||
1, 0, 0, 1,
|
|
||||||
0, 1, 0, 1,
|
|
||||||
0, 0, 1, 1,
|
|
||||||
];
|
|
||||||
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
|
||||||
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
|
||||||
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
|
|
||||||
}
|
|
||||||
function drawRectangle(gfx, position, exts) {
|
|
||||||
const a_position = gfx.getAttribute("a_position");
|
|
||||||
const a_color = gfx.getAttribute("a_color");
|
|
||||||
const points = [
|
|
||||||
position.x, position.y,
|
|
||||||
position.x + exts.x, position.y,
|
|
||||||
position.x, position.y + exts.y,
|
|
||||||
position.x + exts.x, position.y + exts.y,
|
|
||||||
position.x + exts.x, position.y,
|
|
||||||
position.x, position.y + exts.y,
|
|
||||||
];
|
|
||||||
const color = [
|
|
||||||
1, 0, 0, 1,
|
|
||||||
0, 1, 0, 1,
|
|
||||||
0, 0, 1, 1,
|
|
||||||
1, 0, 0, 1,
|
|
||||||
0, 1, 0, 1,
|
|
||||||
0, 0, 1, 1,
|
|
||||||
];
|
|
||||||
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
|
||||||
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
|
||||||
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
|
|
||||||
}
|
|
||||||
function drawCircle(gfx, position, radius) {
|
|
||||||
const points = new Array();
|
|
||||||
const precision = 40;
|
|
||||||
const angle = 2.0 * Math.PI / precision;
|
|
||||||
let a = 0;
|
|
||||||
for (let i = 0; i < precision; ++i) {
|
|
||||||
var vec = Vec2.angle(a);
|
|
||||||
vec.mult(radius);
|
|
||||||
a += angle;
|
|
||||||
points.push(vec);
|
|
||||||
}
|
|
||||||
for (let i = 0; i < points.length; i++) {
|
|
||||||
const current = points[i];
|
|
||||||
const next = points[(i + 1) % points.length];
|
|
||||||
let center = position;
|
|
||||||
drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function drawLine(gfx, A, B) {
|
|
||||||
const a_position = gfx.getAttribute("a_position");
|
|
||||||
const a_color = gfx.getAttribute("a_color");
|
|
||||||
let points = [
|
|
||||||
A.x, A.y,
|
|
||||||
B.x, B.y,
|
|
||||||
];
|
|
||||||
const color = [
|
|
||||||
1, 0, 0, 1,
|
|
||||||
0, 0, 1, 1,
|
|
||||||
];
|
|
||||||
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
|
||||||
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
|
||||||
gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
|
|
||||||
}
|
|
||||||
function fullscreenCanvas(id) {
|
|
||||||
const canvas = document.getElementById(id);
|
|
||||||
canvas.width = window.innerWidth;
|
|
||||||
canvas.height = window.innerHeight;
|
|
||||||
}
|
|
||||||
function draw(gfx) {
|
function draw(gfx) {
|
||||||
const position = new Vec2(gfx.ctx.canvas.width / 2 - 100, gfx.ctx.canvas.height / 2 - 100);
|
const position = new Vec2(gfx.ctx.canvas.width / 2 - 100, gfx.ctx.canvas.height / 2 - 100);
|
||||||
gfx.clear(0, 0, 0, 0);
|
gfx.clear(0, 0, 0, 0);
|
||||||
gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
|
gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
|
||||||
drawRectangle(gfx, position, new Vec2(200, 200));
|
drawing.drawRectangle(gfx, position, new Vec2(200, 200));
|
||||||
drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
|
drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
|
||||||
drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));
|
drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));
|
||||||
drawCircle(gfx, new Vec2(400, 200), 100);
|
drawing.drawCircle(gfx, new Vec2(400, 200), 100);
|
||||||
drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600));
|
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 canvasId = "game";
|
||||||
fullscreenCanvas(canvasId);
|
|
||||||
const ctx = initializeContext(canvasId);
|
const ctx = initializeContext(canvasId);
|
||||||
if (ctx === null)
|
if (ctx === null)
|
||||||
return;
|
return;
|
||||||
const gfx = new Graphics(ctx, vertexShader, fragmentShader);
|
const gfx = new Graphics(ctx, vertexShader, fragmentShader);
|
||||||
|
fullscreenCanvas(gfx, canvasId);
|
||||||
const a_position = gfx.createAttribute("a_position");
|
const a_position = gfx.createAttribute("a_position");
|
||||||
a_position.format(2, gfx.ctx.FLOAT, false, 0, 0);
|
a_position.format(2, gfx.ctx.FLOAT, false, 0, 0);
|
||||||
const a_color = gfx.createAttribute("a_color");
|
const a_color = gfx.createAttribute("a_color");
|
||||||
|
@ -149,7 +51,7 @@ function draw(gfx) {
|
||||||
gfx.createUniform("u_resolution");
|
gfx.createUniform("u_resolution");
|
||||||
draw(gfx);
|
draw(gfx);
|
||||||
window.onresize = () => {
|
window.onresize = () => {
|
||||||
fullscreenCanvas(canvasId);
|
fullscreenCanvas(gfx, canvasId);
|
||||||
draw(gfx);
|
draw(gfx);
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|
143
script.ts
143
script.ts
|
@ -1,5 +1,6 @@
|
||||||
import { Vec2 } from "./common.js";
|
import { initializeContext, Vec2 } from "./common.js";
|
||||||
import { Graphics } from "./graphics.js";
|
import { Graphics, fullscreenCanvas } from "./graphics.js";
|
||||||
|
import * as drawing from "./draw.js";
|
||||||
|
|
||||||
const vertexShader =
|
const vertexShader =
|
||||||
`#version 300 es
|
`#version 300 es
|
||||||
|
@ -30,150 +31,28 @@ const fragmentShader =
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
function initializeContext(canvasId: string): WebGL2RenderingContext | null {
|
|
||||||
const canvas = document.getElementById(canvasId) as HTMLCanvasElement;
|
|
||||||
const ctx = canvas.getContext("webgl2", {antialias: false});
|
|
||||||
|
|
||||||
return ctx;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawTriangle(gfx: Graphics, positions: [Vec2, Vec2, Vec2]) {
|
|
||||||
const a_position = gfx.getAttribute("a_position");
|
|
||||||
const a_color = gfx.getAttribute("a_color");
|
|
||||||
|
|
||||||
const points: Array<number> = [
|
|
||||||
positions[0].x, positions[0].y,
|
|
||||||
positions[1].x, positions[1].y,
|
|
||||||
positions[2].x, positions[2].y,
|
|
||||||
]
|
|
||||||
|
|
||||||
const color: Array<number> = [
|
|
||||||
1, 0, 0, 1,
|
|
||||||
0, 1, 0, 1,
|
|
||||||
0, 0, 1, 1,
|
|
||||||
];
|
|
||||||
|
|
||||||
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
|
||||||
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
|
||||||
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawTriangleExts(gfx: Graphics, position: Vec2, exts: Vec2) {
|
|
||||||
const a_position = gfx.getAttribute("a_position");
|
|
||||||
const a_color = gfx.getAttribute("a_color");
|
|
||||||
|
|
||||||
const points: Array<number> = [
|
|
||||||
position.x, position.y,
|
|
||||||
position.x + exts.x, position.y,
|
|
||||||
position.x, position.y + exts.y,
|
|
||||||
]
|
|
||||||
|
|
||||||
const color: Array<number> = [
|
|
||||||
1, 0, 0, 1,
|
|
||||||
0, 1, 0, 1,
|
|
||||||
0, 0, 1, 1,
|
|
||||||
];
|
|
||||||
|
|
||||||
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
|
||||||
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
|
||||||
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawRectangle(gfx: Graphics, position: Vec2, exts: Vec2) {
|
|
||||||
const a_position = gfx.getAttribute("a_position");
|
|
||||||
const a_color = gfx.getAttribute("a_color");
|
|
||||||
|
|
||||||
const points: Array<number> = [
|
|
||||||
position.x, position.y,
|
|
||||||
position.x + exts.x, position.y,
|
|
||||||
position.x, position.y + exts.y,
|
|
||||||
|
|
||||||
position.x + exts.x, position.y + exts.y,
|
|
||||||
position.x + exts.x, position.y,
|
|
||||||
position.x, position.y + exts.y,
|
|
||||||
]
|
|
||||||
|
|
||||||
const color: Array<number> = [
|
|
||||||
1, 0, 0, 1,
|
|
||||||
0, 1, 0, 1,
|
|
||||||
0, 0, 1, 1,
|
|
||||||
1, 0, 0, 1,
|
|
||||||
0, 1, 0, 1,
|
|
||||||
0, 0, 1, 1,
|
|
||||||
];
|
|
||||||
|
|
||||||
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
|
||||||
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
|
||||||
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawCircle(gfx: Graphics, position: Vec2, radius: number) {
|
|
||||||
const points: Array<Vec2> = new Array<Vec2>();
|
|
||||||
|
|
||||||
const precision = 40;
|
|
||||||
const angle = 2.0*Math.PI/precision;
|
|
||||||
let a = 0;
|
|
||||||
for (let i = 0; i < precision; ++i) {
|
|
||||||
var vec = Vec2.angle(a);
|
|
||||||
vec.mult(radius);
|
|
||||||
a += angle;
|
|
||||||
points.push(vec);
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < points.length; i++) {
|
|
||||||
const current = points[i];
|
|
||||||
const next = points[(i + 1) % points.length];
|
|
||||||
let center = position;
|
|
||||||
drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawLine(gfx: Graphics, A: Vec2, B: Vec2) {
|
|
||||||
const a_position = gfx.getAttribute("a_position");
|
|
||||||
const a_color = gfx.getAttribute("a_color");
|
|
||||||
|
|
||||||
let points: Array<number> = [
|
|
||||||
A.x, A.y,
|
|
||||||
B.x, B.y,
|
|
||||||
];
|
|
||||||
|
|
||||||
const color: Array<number> = [
|
|
||||||
1, 0, 0, 1,
|
|
||||||
0, 0, 1, 1,
|
|
||||||
];
|
|
||||||
|
|
||||||
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
|
||||||
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
|
||||||
gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
function fullscreenCanvas(id: string) {
|
|
||||||
const canvas = document.getElementById(id) as HTMLCanvasElement;
|
|
||||||
canvas.width = window.innerWidth;
|
|
||||||
canvas.height = window.innerHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw(gfx: Graphics) {
|
function draw(gfx: Graphics) {
|
||||||
const position: Vec2 = new Vec2(gfx.ctx.canvas.width / 2 - 100, gfx.ctx.canvas.height / 2 - 100);
|
const position: Vec2 = new Vec2(gfx.ctx.canvas.width / 2 - 100, gfx.ctx.canvas.height / 2 - 100);
|
||||||
|
|
||||||
gfx.clear(0, 0, 0, 0);
|
gfx.clear(0, 0, 0, 0);
|
||||||
gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
|
gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
|
||||||
drawRectangle(gfx, position, new Vec2(200, 200))
|
drawing.drawRectangle(gfx, position, new Vec2(200, 200))
|
||||||
drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
|
drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
|
||||||
drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));
|
drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));
|
||||||
drawCircle(gfx, new Vec2(400, 200), 100);
|
drawing.drawCircle(gfx, new Vec2(400, 200), 100);
|
||||||
drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600));
|
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 canvasId = "game";
|
||||||
fullscreenCanvas(canvasId);
|
|
||||||
const ctx = initializeContext(canvasId);
|
const ctx = initializeContext(canvasId);
|
||||||
if (ctx === null) return;
|
if (ctx === null) return;
|
||||||
|
|
||||||
const gfx = new Graphics(ctx, vertexShader, fragmentShader);
|
const gfx = new Graphics(ctx, vertexShader, fragmentShader);
|
||||||
|
fullscreenCanvas(gfx, canvasId);
|
||||||
|
|
||||||
const a_position = gfx.createAttribute("a_position");
|
const a_position = gfx.createAttribute("a_position");
|
||||||
a_position.format(2, gfx.ctx.FLOAT, false, 0, 0);
|
a_position.format(2, gfx.ctx.FLOAT, false, 0, 0);
|
||||||
|
@ -185,7 +64,7 @@ function draw(gfx: Graphics) {
|
||||||
|
|
||||||
draw(gfx);
|
draw(gfx);
|
||||||
window.onresize = () => {
|
window.onresize = () => {
|
||||||
fullscreenCanvas(canvasId);
|
fullscreenCanvas(gfx, canvasId);
|
||||||
draw(gfx);
|
draw(gfx);
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
Loading…
Reference in New Issue