Skip to content
Snippets Groups Projects
Unverified Commit 93a28242 authored by Jamie Temple's avatar Jamie Temple
Browse files

feat: base project 

Has now the minimum implemented to create the different scenarios. The focus was to provide a proper architecture with an update loop.
parent a77daa69
No related branches found
No related tags found
1 merge request!1feat: base project
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 3379 additions and 43455 deletions
README.md deleted 100644 → 0
+ 0
− 6
View file @ a77daa69
# Computergrafik 3
```bash
npm i
npm run dev
```
assets/suzanne.obj 0 → 100644
+ 2976
− 0
View file @ 93a28242
This diff is collapsed.
babel.config.js deleted 100644 → 0
+ 0
− 6
View file @ a77daa69
module.exports = {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
'@babel/preset-typescript',
],
};
\ No newline at end of file
index.html
+ 18
− 49
View file @ 93a28242
<!DOCTYPE html>
<html lang="en">
<head>
<title>Computergrafik 3</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Computergrafik 3" />
<link rel="stylesheet" href="src/style.css" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./src/style.css" />
<title>Vite App</title>
</head>
<body>
<div class="scene deactived">
<canvas id="canvas"></canvas>
</div>
<div class="main">
<canvas class="welcome" id="preview"></canvas>
<nav class="menu">
<header>
<h2 class="title-nav">Menu</h2>
</header>
<ul>
<li><a class="nav-link active-link" href="index.html">Home</a></li>
<li><a class="nav-link" id="bezier"> Bézier Curves </a></li>
<li><a class="nav-link" id="quaternion"> Quaternions </a></li>
<li><a class="nav-link" id="simulation"> Simulation </a></li>
</ul>
<footer>
<p>
To return to the home page, simply refresh the page.
</p>
</footer>
<script type="module" src="/src/main.ts"></script>
<nav>
<a href="index.html">Home</a>
<a href="pages/bezier.html">Bezier Curves</a>
<a href="pages/quaternion.html">Quaternions</a>
<a href="pages/simulation.html">Cloth Simulation</a>
</nav>
</div>
<script type="module" src="/src/init.ts"></script>
</body>
</html>
jest.config.js deleted 100644 → 0
+ 0
− 5
View file @ a77daa69
module.exports = {
testEnvironment: 'node',
testRegex: '/tests/.*\\.(test|spec)?\\.(ts|tsx)$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};
\ No newline at end of file
models/Arrow.obj deleted 100644 → 0
+ 0
− 44
View file @ a77daa69
# Blender v3.0.0 OBJ File: ''
# www.blender.org
o Cube_Cube.001
v -1.968145 -0.103905 1.301913
v -1.968145 0.103905 1.301913
v -1.968145 -0.103905 -1.301913
v -1.968145 0.103905 -1.301913
v 2.447117 0.086475 0.000000
v -1.000000 0.386153 0.000000
v -1.000000 0.593964 0.000000
v 2.447117 -0.121336 0.000000
vt 0.375000 0.125000
vt 0.625000 0.125000
vt 0.625000 0.250000
vt 0.375000 0.250000
vt 0.625000 0.625000
vt 0.375000 0.625000
vt 0.625000 1.000000
vt 0.375000 1.000000
vt 0.125000 0.625000
vt 0.125000 0.750000
vt 0.875000 0.625000
vt 0.875000 0.750000
vt 0.875000 0.500000
vt 0.125000 0.500000
vt 0.375000 0.000000
vt 0.625000 0.000000
vn -0.8024 0.0000 0.5967
vn 0.2828 0.0000 -0.9592
vn 0.2828 0.0000 0.9592
vn -0.1313 -0.8917 -0.4333
vn 0.1313 0.8917 0.4333
vn 0.1313 0.8917 -0.4333
vn -0.1313 -0.8917 0.4333
vn -0.8024 0.0000 -0.5967
s off
f 6/1/1 7/2/1 4/3/1 3/4/1
f 3/4/2 4/3/2 5/5/2 8/6/2
f 8/6/3 5/5/3 2/7/3 1/8/3
f 6/9/4 8/6/4 1/10/4
f 5/5/5 7/11/5 2/12/5
f 5/5/6 4/13/6 7/11/6
f 3/14/7 8/6/7 6/9/7
f 1/15/8 2/16/8 7/2/8 6/1/8
models/Suzanne.obj deleted 100644 → 0
+ 0
− 31949
View file @ a77daa69
This diff is collapsed.
package-lock.json deleted 100644 → 0
+ 0
− 11380
View file @ a77daa69
This diff is collapsed.
package.json
+ 6
− 16
View file @ 93a28242
{
"name": "computergrafik-03",
"type": "commonjs",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"test": "jest",
"coverage": "jest --coverage"
"preview": "vite preview"
},
"devDependencies": {
"@babel/core": "^7.18.6",
"@babel/preset-env": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@types/dat.gui": "^0.7.7",
"@types/jest": "^28.1.3",
"@types/three": "^0.139.0",
"babel-jest": "^28.1.1",
"jest": "^28.1.1",
"typescript": "^4.7.4",
"vite": "^2.9.5"
"typescript": "^4.5.4",
"vite": "^2.9.9"
},
"dependencies": {
"@types/dat.gui": "^0.7.7",
"@types/three": "^0.141.0",
"dat.gui": "^0.7.9",
"mathjs": "^10.6.4",
"three": "^0.139.2"
"three": "^0.142.0"
}
}
pages/bezier.html 0 → 100644
+ 20
− 0
View file @ 93a28242
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../src/style.css" />
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/main.ts"></script>
<nav>
<a href="../index.html">Home</a>
<a href="bezier.html">Bezier Curves</a>
<a href="quaternion.html">Quaternions</a>
<a href="simulation.html">Cloth Simulation</a>
</nav>
</body>
</html>
pages/example.html 0 → 100644
+ 19
− 0
View file @ 93a28242
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../src/style.css" />
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/main.ts"></script>
<nav>
<a href="../index.html">Home</a>
<a href="bezier.html">Bezier Curves</a>
<a href="quaternion.html">Quaternions</a>
<a href="simulation.html">Cloth Simulation</a>
</nav>
</body>
</html>
pages/quaternion.html 0 → 100644
+ 20
− 0
View file @ 93a28242
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../src/style.css" />
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/main.ts"></script>
<nav>
<a href="../index.html">Home</a>
<a href="bezier.html">Bezier Curves</a>
<a href="quaternion.html">Quaternions</a>
<a href="simulation.html">Cloth Simulation</a>
</nav>
</body>
</html>
pages/simulation.html 0 → 100644
+ 19
− 0
View file @ 93a28242
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../src/style.css" />
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/main.ts"></script>
<nav>
<a href="../index.html">Home</a>
<a href="bezier.html">Bezier Curves</a>
<a href="quaternion.html">Quaternions</a>
<a href="simulation.html">Cloth Simulation</a>
</nav>
</body>
</html>
src/00-welcome-and-example/demo.ts 0 → 100644
+ 19
− 0
View file @ 93a28242
import * as THREE from 'three';
import { SpinningCube } from "./spinningCube";
import { PipelineData } from "../core/Pipeline";
class Demo extends PipelineData {
public constructor() { super(); }
data(): void {
const spinningCube = new SpinningCube();
this.scene.add(spinningCube.object3d);
this.observers.push(spinningCube);
const light = new THREE.PointLight(0xffffff, 10, 100);
light.position.set(10, 0, 10);
this.scene.add(light);
}
}
export { Demo };
\ No newline at end of file
src/00-welcome-and-example/example.ts 0 → 100644
+ 59
− 0
View file @ 93a28242
import * as THREE from "three" ;
import { PipelineData } from "../core/Pipeline";
import { DebugHelper, Line1d, Line2d, Point2d, Point3d, Mesh } from "../core/Shapes";
class Example extends PipelineData {
public constructor() { super(); }
data(): void {
const pointsA = [];
pointsA.push( new THREE.Vector3( 2, 0, 0 ) );
pointsA.push( new THREE.Vector3( 0, -2, 0 ) );
pointsA.push( new THREE.Vector3( -2, 0, 0 ) );
const pointsB = [];
pointsB.push( new THREE.Vector3( -2, 0, 0 ) );
pointsB.push( new THREE.Vector3( 0, 2, 0 ) );
pointsB.push( new THREE.Vector3( 2, 0, 0 ) );
const point2d = new Point2d(.1, 32, new THREE.Color(0xffffff));
const point3d = new Point3d(.1, 32, new THREE.Color(0xffffff));
const line1d = new Line1d(pointsA, new THREE.Color(0xffffff));
const line2d = new Line2d(pointsB, .001, new THREE.Color(0xffffff));
const mesh = new Mesh("../assets/suzanne.obj", new THREE.Color(0xffffff));
const debugHelper = new DebugHelper();
debugHelper.add(point2d);
debugHelper.add(point3d);
debugHelper.add(line1d);
debugHelper.add(line2d);
debugHelper.add(mesh);
this.scene.add(point2d.object3d);
this.scene.add(point3d.object3d);
this.scene.add(line1d.object3d);
this.scene.add(line2d.object3d);
this.scene.add(mesh.object3d);
debugHelper.debug.forEach(object => {
this.scene.add(object);
});
this.observers.push(point2d);
this.observers.push(point3d);
this.observers.push(line1d);
this.observers.push(line2d);
this.observers.push(mesh);
this.observers.push(debugHelper);
this.draggables.push(point2d.object3d);
this.draggables.push(point3d.object3d);
this.draggables.push(mesh.object3d);
// will give a warning
this.draggables.push(line1d.object3d);
}
}
export { Example };
\ No newline at end of file
src/00-welcome-and-example/spinningCube.ts 0 → 100644
+ 19
− 0
View file @ 93a28242
import * as THREE from "three";
import { Shape } from "../core/Shapes";
class SpinningCube extends Shape {
constructor() {
super();
const buffer = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
this._object3d = new THREE.Mesh(buffer, material);
}
update(_deltaTime: number): void {
this._object3d.rotation.x += 0.01;
this._object3d.rotation.y += 0.01;
}
}
export { SpinningCube };
\ No newline at end of file
src/01-bezierCurves/demoBezier.ts 0 → 100644
+ 11
− 0
View file @ 93a28242
import { PipelineData } from "../core/Pipeline";
class BezierDemo extends PipelineData {
public constructor() { super(); }
data(): void {
/* INIT DATA HERE */
}
}
export { BezierDemo };
\ No newline at end of file
src/02-quaternion/Quaternion.ts 0 → 100644
+ 171
− 0
View file @ 93a28242
export class Quaternion {
public x: number;
public y: number;
public z: number;
public w: number;
constructor(x: number = 0, y: number = 0, z: number = 0, w: number = 1) {
this.x = x;
this.y = y;
this.z = z;
this.w = w;
}
public static fromEuler(x: number, y: number, z: number): Quaternion {
const c1 = Math.cos(x / 2);
const s1 = Math.sin(x / 2);
const c2 = Math.cos(y / 2);
const s2 = Math.sin(y / 2);
const c3 = Math.cos(z / 2);
const s3 = Math.sin(z / 2);
const qw = c1 * c2 * c3 + s1 * s2 * s3;
const qx = s1 * c2 * c3 - c1 * s2 * s3;
const qy = c1 * s2 * c3 + s1 * c2 * s3;
const qz = c1 * c2 * s3 - s1 * s2 * c3;
return new Quaternion(qx, qy, qz, qw);
}
public static toEulerMatrix(q: Quaternion): Array<Array<number>> {
let container = new Array<Array<number>>();
let row1 = new Array<number>();
row1.push(1 - 2 * (q.y * q.y + q.z * q.z));
row1.push(2 * (q.x * q.y - q.z * q.w));
row1.push(2 * (q.x * q.z + q.y * q.w));
container.push(row1);
let row2 = new Array<number>();
row2.push(2 * (q.x * q.y + q.z * q.w));
row2.push(1 - 2 * (q.x * q.x + q.z * q.z));
row2.push(2 * (q.y * q.z - q.x * q.w));
container.push(row2);
let row3 = new Array<number>();
row3.push(2 * (q.x * q.z - q.y * q.w));
row3.push(2 * (q.y * q.z + q.x * q.w));
row3.push(1 - 2 * (q.x * q.x + q.y * q.y));
container.push(row3);
return container;
}
public static identity(): Quaternion {
return new Quaternion(0, 0, 0, 1);
}
public static lerp(qa: Quaternion, qb: Quaternion, t: number): Quaternion {
return qb.clone().sub(qa).multiplyScalar(t).add(qa);
}
public static slerp(qa: Quaternion, qb: Quaternion, t: number): Quaternion {
let dot = qa.dot(qb);
if (dot < 0.0)
{
qb.multiplyScalar(-1);
dot = -dot;
}
if (dot > 0.999999)
{
return Quaternion.slerp(qa, qb, t).normalise();
}
const theta0 = Math.acos(dot);
const theta = theta0 * t;
const sinTheta = Math.sin(theta);
const sinTheta0 = Math.sin(theta0);
const s0 = Math.cos(theta) - dot * sinTheta / sinTheta0;
const s1 = sinTheta / sinTheta0;
return qa.clone().multiplyScalar(s0).add(qb.clone().multiplyScalar(s1));
}
public toString(): string {
return `Quaternion(${this.x}, ${this.y}, ${this.z}, ${this.w})`;
}
public set(x: number, y: number, z: number, w: number): this {
this.x = x;
this.y = y;
this.z = z;
this.w = w;
return this;
}
public copy(q: Quaternion): this {
this.x = q.x;
this.y = q.y;
this.z = q.z;
this.w = q.w;
return this;
}
public clone(): Quaternion {
return new Quaternion(this.x, this.y, this.z, this.w);
}
public add(q: Quaternion): this {
this.x += q.x;
this.y += q.y;
this.z += q.z;
this.w += q.w;
return this;
}
public sub(q: Quaternion): this {
this.x -= q.x;
this.y -= q.y;
this.z -= q.z;
this.w -= q.w;
return this;
}
public multiply(q: Quaternion): this {
const x = this.x;
const y = this.y;
const z = this.z;
const w = this.w;
this.x = w * q.x + x * q.w + y * q.z - z * q.y;
this.y = w * q.y + y * q.w + z * q.x - x * q.z;
this.z = w * q.z + z * q.w + x * q.y - y * q.x;
this.w = w * q.w - x * q.x - y * q.y - z * q.z;
return this;
}
public multiplyScalar(s: number): this {
this.x *= s;
this.y *= s;
this.z *= s;
this.w *= s;
return this;
}
public dot(q: Quaternion): number {
return this.x * q.x + this.y * q.y + this.z * q.z + this.w * q.w;
}
public length(): number {
return Math.sqrt(this.dot(this));
}
public normalise(): this {
const denom = this.length();
if (denom < 1.0e-6) {
this.copy(Quaternion.identity());
return this;
}
return this.multiplyScalar(1 / this.length());
}
public conjugate(): this {
this.x *= -1;
this.y *= -1;
this.z *= -1;
return this;
}
}
\ No newline at end of file
src/02-quaternion/demoQuaternion.ts 0 → 100644
+ 11
− 0
View file @ 93a28242
import { PipelineData } from "../core/Pipeline";
class QuaternionDemo extends PipelineData {
public constructor() { super(); }
data(): void {
/* INIT DATA HERE */
}
}
export { QuaternionDemo };
\ No newline at end of file
src/03-simulation/demoSimulation.ts 0 → 100644
+ 11
− 0
View file @ 93a28242
import { PipelineData } from "../core/Pipeline";
class SimulationDemo extends PipelineData {
public constructor() { super(); }
data(): void {
/* INIT DATA HERE */
}
}
export { SimulationDemo };
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment