MaciejSamborski
/
webgl_game
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved Vec2 and Vec3 to common.ts file

This commit is contained in:
Maciej Samborski 2024-12-09 23:46:48 +01:00
parent 88edb2af0a
commit 690360c3f2
6 changed files with 140 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
common.js Normal file
View File

@ -0,0 +1,59 @@
class Vec2 {
x;
y;
constructor(x, y) {
this.x = x;
this.y = y;
}
add(other) {
this.x += other.x;
this.y += other.y;
}
addNew(other) {
return new Vec2(this.x + other.x, this.y + other.y);
}
sub(other) {
this.x -= other.x;
this.y -= other.y;
}
mult(scalar) {
this.x *= scalar;
this.y *= scalar;
}
splatToArray() {
return [this.x, this.y];
}
static angle(angle) {
const eps = 1e-6;
let x = Math.cos(angle);
let y = Math.sin(angle);
if ((x > 0 && x < eps)
|| (x < 0 && x > -eps))
x = 0;
if ((y > 0 && y < eps)
|| (y < 0 && y > -eps))
y = 0;
return new Vec2(x, y);
}
}
class Vec3 {
x;
y;
z;
constructor(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
}
add(other) {
this.x += other.x;
this.y += other.y;
this.z += other.z;
}
sub(other) {
this.x -= other.x;
this.y -= other.y;
this.z -= other.z;
}
}
export { Vec2, Vec3 };

74
common.ts Normal file
View File

@ -0,0 +1,74 @@
class Vec2 {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
add(other: Vec2) {
this.x += other.x;
this.y += other.y;
}
addNew(other: Vec2): Vec2 {
return new Vec2(this.x + other.x, this.y + other.y);
}
sub(other: Vec2) {
this.x -= other.x;
this.y -= other.y;
}
mult(scalar: number) {
this.x *= scalar;
this.y *= scalar;
}
splatToArray(): Array<number> {
return [this.x, this.y];
}
static angle(angle: number): Vec2 {
const eps = 1e-6;
let x = Math.cos(angle);
let y = Math.sin(angle);
if ((x > 0 && x < eps)
|| (x < 0 && x > -eps))
x = 0;
if ((y > 0 && y < eps)
|| (y < 0 && y > -eps))
y = 0;
return new Vec2(x, y);
}
}
class Vec3 {
x: number;
y: number;
z: number;
constructor(x: number, y: number, z: number) {
this.x = x;
this.y = y;
this.z = z;
}
add(other: Vec3) {
this.x += other.x;
this.y += other.y;
this.z += other.z;
}
sub(other: Vec3) {
this.x -= other.x;
this.y -= other.y;
this.z -= other.z;
}
}
export {Vec2, Vec3};

2
index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="" /> <meta name="description" content="" />
<link rel="stylesheet" href="style.css"></link> <link rel="stylesheet" href="style.css"></link>
<script src="script.js" defer></script> <script type="module" src="script.js" defer> var exports = {}; </script>
</head> </head>
<body> <body>
<canvas id="game"></canvas> <canvas id="game"></canvas>

66
script.js
View File

@ -1,4 +1,4 @@
"use strict"; import { Vec2 } from "./common.js";
var vertexShaderSource = `#version 300 es var vertexShaderSource = `#version 300 es
@ -55,10 +55,6 @@ function createProgram(ctx, vertexShaderSource, fragmentShaderSource) {
} }
return program; return program;
} }
function createUniform(ctx, program, name) {
const loc = ctx.getUniformLocation(program, name);
return loc;
}
function initializeContext(canvasId) { function initializeContext(canvasId) {
const canvas = document.getElementById(canvasId); const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext("webgl2", { antialias: false }); const ctx = canvas.getContext("webgl2", { antialias: false });
@ -192,64 +188,6 @@ class Graphics {
return loc; return loc;
} }
} }
class Vec2 {
x;
y;
constructor(x, y) {
this.x = x;
this.y = y;
}
add(other) {
this.x += other.x;
this.y += other.y;
}
addNew(other) {
return new Vec2(this.x + other.x, this.y + other.y);
}
sub(other) {
this.x -= other.x;
this.y -= other.y;
}
mult(scalar) {
this.x *= scalar;
this.y *= scalar;
}
splatToArray() {
return [this.x, this.y];
}
static angle(angle) {
const eps = 1e-6;
let x = Math.cos(angle);
let y = Math.sin(angle);
if ((x > 0 && x < eps)
|| (x < 0 && x > -eps))
x = 0;
if ((y > 0 && y < eps)
|| (y < 0 && y > -eps))
y = 0;
return new Vec2(x, y);
}
}
class Vec3 {
x;
y;
z;
constructor(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
}
add(other) {
this.x += other.x;
this.y += other.y;
this.z += other.z;
}
sub(other) {
this.x -= other.x;
this.y -= other.y;
this.z -= other.z;
}
}
function fullscreenCanvas(id) { function fullscreenCanvas(id) {
const canvas = document.getElementById(id); const canvas = document.getElementById(id);
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
@ -268,7 +206,7 @@ function draw() {
const position = new Vec2(ctx.canvas.width / 2 - 100, ctx.canvas.height / 2 - 100); const position = new Vec2(ctx.canvas.width / 2 - 100, ctx.canvas.height / 2 - 100);
gfx.clear(0, 0, 0, 0); gfx.clear(0, 0, 0, 0);
ctx.uniform2f(gfx.getUniform("u_resolution"), ctx.canvas.width, ctx.canvas.height); ctx.uniform2f(gfx.getUniform("u_resolution"), ctx.canvas.width, ctx.canvas.height);
ctx.uniform4f(gfx.getUniform("u_color"), 0.5, 0.2, 0.2, 1); ctx.uniform4f(gfx.getUniform("u_color"), Math.random(), Math.random(), Math.random(), 1);
drawRectangle(gfx, position, new Vec2(200, 200)); drawRectangle(gfx, position, new Vec2(200, 200));
drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]); drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100)); drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));

83
script.ts
View File

@ -1,3 +1,5 @@
import { Vec2 } from "./common.js";
var vertexShaderSource = var vertexShaderSource =
`#version 300 es `#version 300 es
@ -68,12 +70,6 @@ function createProgram(ctx: WebGL2RenderingContext, vertexShaderSource: string |
return program; return program;
} }
function createUniform(ctx: WebGL2RenderingContext, program: WebGLProgram, name: string): WebGLUniformLocation | null {
const loc = ctx.getUniformLocation(program, name);
return loc;
}
function initializeContext(canvasId: string): WebGL2RenderingContext | null { function initializeContext(canvasId: string): WebGL2RenderingContext | null {
const canvas = document.getElementById(canvasId) as HTMLCanvasElement; const canvas = document.getElementById(canvasId) as HTMLCanvasElement;
const ctx = canvas.getContext("webgl2", {antialias: false}); const ctx = canvas.getContext("webgl2", {antialias: false});
@ -243,79 +239,6 @@ class Graphics {
} }
} }
class Vec2 {
x;
y;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
add(other: Vec2) {
this.x += other.x;
this.y += other.y;
}
addNew(other: Vec2): Vec2 {
return new Vec2(this.x + other.x, this.y + other.y);
}
sub(other: Vec2) {
this.x -= other.x;
this.y -= other.y;
}
mult(scalar: number) {
this.x *= scalar;
this.y *= scalar;
}
splatToArray(): Array<number> {
return [this.x, this.y];
}
static angle(angle: number): Vec2 {
const eps = 1e-6;
let x = Math.cos(angle);
let y = Math.sin(angle);
if ((x > 0 && x < eps)
|| (x < 0 && x > -eps))
x = 0;
if ((y > 0 && y < eps)
|| (y < 0 && y > -eps))
y = 0;
return new Vec2(x, y);
}
}
class Vec3 {
x;
y;
z;
constructor(x: number, y: number, z: number) {
this.x = x;
this.y = y;
this.z = z;
}
add(other: Vec3) {
this.x += other.x;
this.y += other.y;
this.z += other.z;
}
sub(other: Vec3) {
this.x -= other.x;
this.y -= other.y;
this.z -= other.z;
}
}
function fullscreenCanvas(id: string) { function fullscreenCanvas(id: string) {
const canvas = document.getElementById(id) as HTMLCanvasElement; const canvas = document.getElementById(id) as HTMLCanvasElement;
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
@ -338,7 +261,7 @@ function draw() {
gfx.clear(0, 0, 0, 0); gfx.clear(0, 0, 0, 0);
ctx.uniform2f(gfx.getUniform("u_resolution"), ctx.canvas.width, ctx.canvas.height); ctx.uniform2f(gfx.getUniform("u_resolution"), ctx.canvas.width, ctx.canvas.height);
ctx.uniform4f(gfx.getUniform("u_color"), 0.5, 0.2, 0.2, 1); ctx.uniform4f(gfx.getUniform("u_color"), Math.random(), Math.random(), Math.random(), 1);
drawRectangle(gfx, position, new Vec2(200, 200)) drawRectangle(gfx, position, new Vec2(200, 200))
drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]); drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100)); drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));

2
tsconfig.json
View File

@ -25,7 +25,7 @@
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
/* Modules */ /* Modules */
"module": "commonjs", /* Specify what module code is generated. */ "module": "es2022", /* Specify what module code is generated. */
// "rootDir": "./", /* Specify the root folder within your source files. */ // "rootDir": "./", /* Specify the root folder within your source files. */
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */