init

13a48a98 · Christoph-Anton Schwierz · 13a48a98 · 13a48a98 · 13a48a98 · 13a48a98
Commit 13a48a98 authored 1 year ago by Christoph-Anton Schwierz
--- a/.gitignore
+++ b/.gitignore
+.DS_Store
+node_modules
+/build
+/package
+.env
+.env.*
+!.env.example
+/dist
+/tmp/
+backup
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
\ No newline at end of file
--- a/desktop.ini
+++ b/desktop.ini
+[ViewState]
+Mode=
+Vid=
+FolderType=Generic
--- a/index.html
+++ b/index.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/cg/main.ts"></script>
+    <script type="module" src="/src/cg/pgIntro.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "computergraphics",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  },
+  "dependencies": {
+    "@types/three": "^0.163.0",
+    "three": "^0.163.0"
+  }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
--- a/src/cg/main.ts
+++ b/src/cg/main.ts
+console.log("Hi there!")
\ No newline at end of file
--- a/src/cg/pgIntro.ts
+++ b/src/cg/pgIntro.ts
+console.log("Hello there!");
+
+import Playground from "./playground";
+
+const pg = new Playground();
+
+// Visualize grids:
+pg.gridXZ();
+// pg.gridXY();
+// pg.gridYZ();
+
+// A vector is just an array:
+const v = [1, 2, 3];
+
+// Visualize a vector
+pg.visVector(v);
+
+// Add optional parameters to the visualization:
+pg.visVector(v, { color: "dodgerblue", label: "V" });
+
+// Visualize the same data as point:
+pg.visPoint(v, { pscale: .04 });
\ No newline at end of file
--- a/src/cg/playground.ts
+++ b/src/cg/playground.ts
+import * as THREE from 'three';
+
+import Stats from 'three/addons/libs/stats.module.js';
+import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+interface IVecParams {
+    color?: string,
+    label?: string,
+    labelCenter?: string,
+    triangles?: boolean,
+    placeAt?: Array<number> | boolean,
+    pscale?: number,
+    showArrow?: boolean,
+    showCone?: boolean
+}
+export default class Playground {
+
+    private container
+    private stats
+    public renderer
+    public scene
+    public camera: THREE.Camera
+    public controls
+    private gridHelperXY: THREE.GridHelper | null = null
+    private gridHelperXZ: THREE.GridHelper | null = null
+    private gridHelperYZ: THREE.GridHelper | null = null
+    private labelRenderer
+    private cubeInstance
+    private sphereInstance
+
+    constructor(side = false) {
+        // this.clock = new THREE.Clock();
+        this.container = document.getElementById('app');
+        this.stats = new Stats();
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color("white");
+
+        if (!side) {
+            this.camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, .1, 50);
+            this.camera.position.set(-5, 5, -8);
+        } else {
+            this.camera = new THREE.OrthographicCamera() as THREE.Camera
+            this.camera.position.set(-5, 0, 0);
+        }
+
+
+
+        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        if (!side) {
+            this.controls.target.set(0, 0.5, 0);
+        } else {
+            this.controls.target.set(0, 0, 0);
+        }
+
+        if (!side) {
+            // Get camera data from sessionStorage
+            const storageCamX = sessionStorage.getItem("camX");
+            const storageCamY = sessionStorage.getItem("camY");
+            const storageCamZ = sessionStorage.getItem("camZ");
+            const storageTargetX = sessionStorage.getItem("targetX");
+            const storageTargetY = sessionStorage.getItem("targetY");
+            const storageTargetZ = sessionStorage.getItem("targetZ");
+
+            if (storageCamX && storageCamY && storageCamZ) {
+
+                this.camera.position.set(Number(storageCamX), Number(storageCamY), Number(storageCamZ));
+                this.controls.target.set(Number(storageTargetX), Number(storageTargetY), Number(storageTargetZ));
+            }
+        }
+
+
+        this.controls.update();
+        this.controls.enablePan = true;
+        this.controls.enableDamping = true;
+
+        this.controls.addEventListener("change", this.handleCameraChange.bind(this))
+
+
+        this.labelRenderer = new CSS2DRenderer();
+        this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
+        this.labelRenderer.domElement.style.position = 'absolute';
+        this.labelRenderer.domElement.style.top = '0px';
+        this.labelRenderer.domElement.style.pointerEvents = 'none';
+
+        this.cubeInstance = new THREE.BoxGeometry(1, 1, 1);
+        this.sphereInstance = new THREE.SphereGeometry();
+
+        if (this.container) {
+            this.container.appendChild(this.stats.dom);
+            this.container.appendChild(this.renderer.domElement);
+            this.container.appendChild(this.labelRenderer.domElement);
+
+            window.onresize = this.handleResize.bind(this);
+            this.animate();
+        }
+
+
+        // const axesHelper = new THREE.AxesHelper(5);
+        // this.scene.add(axesHelper);
+
+    }
+
+    handleCameraChange() {
+        //-console.info(this.controls.target)
+        sessionStorage.setItem("camX", this.controls.object.position.x.toString());
+        sessionStorage.setItem("camY", this.controls.object.position.y.toString());
+        sessionStorage.setItem("camZ", this.controls.object.position.z.toString());
+
+        sessionStorage.setItem("targetX", this.controls.target.x.toString());
+        sessionStorage.setItem("targetY", this.controls.target.y.toString());
+        sessionStorage.setItem("targetZ", this.controls.target.z.toString());
+
+
+        this.controls.target
+    }
+
+    gridXY(size = 10, divisions = 10): void {
+        this.gridHelperXY = new THREE.GridHelper(size, divisions);
+        this.gridHelperXY.rotation.x = Math.PI / 2;
+        this.scene.add(this.gridHelperXY);
+    }
+
+    gridXZ(size = 10, divisions = 10): void {
+        this.gridHelperXZ = new THREE.GridHelper(size, divisions);
+        this.scene.add(this.gridHelperXZ);
+    }
+
+    gridYZ(size = 10, divisions = 10): void {
+        this.gridHelperYZ = new THREE.GridHelper(size, divisions);
+        this.gridHelperYZ.rotation.x = Math.PI / 2;
+        this.gridHelperYZ.rotation.z = Math.PI / 2;
+        this.scene.add(this.gridHelperYZ);
+    }
+
+    circle(radius = 1) {
+        const curve = new THREE.EllipseCurve(
+            0, 0,             // X, Y
+            radius, radius,   // radius
+            0, 2 * Math.PI,   // StartAngle, EndAngle
+            false,            // Clockwise
+            0                 // Rotation
+        );
+        const points = curve.getPoints(50);
+        const geometry = new THREE.BufferGeometry().setFromPoints(points);
+        const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
+
+        const ellipse = new THREE.Line(geometry, material);
+        return ellipse
+    }
+
+    unitCircleXY() {
+        const circle = this.circle();
+        circle.rotation.x = Math.PI / 2;
+        this.scene.add(circle);
+    }
+    unitCircleXZ() {
+        const circle = this.circle();
+        this.scene.add(circle);
+    }
+
+    unitCircleYZ() {
+        const circle = this.circle();
+        circle.rotation.y = Math.PI / 2;
+        circle.rotation.z = Math.PI / 2;
+        this.scene.add(circle);
+    }
+
+    private visAsVectorOrPoint(p = [1, 1, 1],
+        parameters?: IVecParams, asPoint = false) {
+        const defaults: IVecParams = {
+            color: "gray",
+            label: "",
+            labelCenter: "",
+            triangles: false,
+            placeAt: false,
+            pscale: 0.01,
+            showArrow: true,
+            showCone: true
+        }
+
+        const params = { ...defaults, ...parameters };
+
+        const pVec = new THREE.Vector3(p[0], p[1], p[2]);
+        const endPos = new THREE.Vector3();
+        const placeVec = new THREE.Vector3(0, 0, 0);
+
+        if (Array.isArray(params.placeAt)) {
+            placeVec.set(params.placeAt[0], params.placeAt[1], params.placeAt[2])
+        }
+
+        const dir = pVec.clone();
+
+        const vecLength = dir.length();
+        dir.normalize();
+
+        if (params.showArrow) {
+            const arrowHelper = new THREE.ArrowHelper(dir, placeVec, vecLength, 0.0, 0.2 * Number(params.showCone));
+            arrowHelper.setColor(new THREE.Color(params.color));
+            //arrowHelper.cone.visible = false;
+
+            this.scene.add(arrowHelper);
+        }
+
+
+        endPos.addVectors(pVec, placeVec);
+        if (asPoint) {
+            const material = new THREE.MeshBasicMaterial({ color: params.color });
+            const mesh = new THREE.InstancedMesh(this.sphereInstance, material, 1);
+            mesh.scale.set(params.pscale, params.pscale, params.pscale);
+            mesh.position.set(endPos.x, endPos.y, endPos.z)
+            this.scene.add(mesh);
+        }
+        // center is placeAt + (pVec * 0.5)
+        const centerPos = pVec.clone();
+        centerPos.multiplyScalar(0.5).add(placeVec);
+
+        this.addLabel(endPos, params.label, params.color);
+        this.addLabel(centerPos, params.labelCenter, params.color);
+
+        if (params.triangles) {
+            this.visTriangle(
+                [0, 0, 0],
+                [p[0], 0, p[2]],
+                [0, 0, p[2]],
+                "red", 0.1)
+
+            this.visTriangle(
+                [0, 0, 0],
+                [0, p[1], p[2]],
+                [0, 0, p[2]],
+                "green", 0.1)
+        }
+    }
+
+    visVector(
+        p = [1, 1, 1],
+        parameters?: IVecParams
+    ) {
+        const defaults: IVecParams = {
+            color: "gray",
+            label: "",
+            labelCenter: "",
+            triangles: false,
+            placeAt: false,
+            showArrow: true,
+            showCone: true
+        }
+
+        const params = { ...defaults, ...parameters };
+        this.visAsVectorOrPoint(p, params)
+    }
+
+    visPoint(p = [1, 1, 1],
+        parameters?: IVecParams) {
+
+        const defaults: IVecParams = {
+            color: "gray",
+            label: "",
+            labelCenter: "",
+            triangles: false,
+            placeAt: false,
+            showArrow: false,
+            showCone: false,
+            pscale: 0.01
+        }
+
+        const params = { ...defaults, ...parameters }
+        this.visAsVectorOrPoint(p, params, true)
+
+    }
+
+    addLabel(toPosition: THREE.Vector3Like, textContent = "", color: string) {
+        if (textContent == "") return;
+
+        const textContainer = document.createElement('div');
+
+        const textEl = document.createElement('div');
+        textEl.className = 'label';
+        textEl.style.position = 'absolute';
+        textEl.style.backgroundColor = 'rgba(255,255,255,0.4)';
+        textEl.style.padding = ".1rem";
+        textEl.style.fontSize = "1.5rem";
+        textEl.style.fontWeight = "300";
+        textEl.style.whiteSpace = "nowrap";
+        textEl.style.color = color;
+
+        textEl.textContent = textContent;
+        textContainer.appendChild(textEl);
+
+        const label = new CSS2DObject(textContainer);
+        label.position.copy(toPosition);
+        this.scene.add(label);
+    }
+
+    visCamera(distImagePlane = -1.0) {
+        const geometry = new THREE.BufferGeometry();
+
+        // A camera points down -Z
+        const reversedDistImagePlane = distImagePlane;
+
+
+        const vertices = new Float32Array([
+            0, 0, 0, // v0
+            -reversedDistImagePlane, -reversedDistImagePlane, reversedDistImagePlane, // v1
+            reversedDistImagePlane, -reversedDistImagePlane, reversedDistImagePlane, // v2
+            reversedDistImagePlane, reversedDistImagePlane, reversedDistImagePlane, // v3
+            -reversedDistImagePlane, reversedDistImagePlane, reversedDistImagePlane, // v4
+        ]);
+
+        const indices = [
+            0, 1, 2,
+            0, 2, 3,
+            0, 3, 4,
+            0, 1, 4
+        ];
+
+        geometry.setIndex(indices);
+        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+
+        const wireframe = new THREE.WireframeGeometry(geometry);
+        const line = new THREE.LineSegments(wireframe);
+        // @ts-ignore
+        line.material.color = new THREE.Color("red");
+        // @ts-ignore
+        line.material.depthTest = false;
+        // @ts-ignore
+        line.material.opacity = 1;
+        // @ts-ignore
+        line.material.transparent = false;
+
+        this.scene.add(line)
+
+    }
+
+
+    private visTriangle(
+        p0 = [0, 0, 0],
+        p1 = [-1, 0, 1],
+        p2 = [0, 0, 1],
+        color = "rgb(10, 200, 10)",
+        opc = 0.25) {
+
+
+        const geometry = new THREE.BufferGeometry();
+
+        const vertices = new Float32Array([
+            p0[0], p0[1], p0[2], // v0
+            p1[0], p1[1], p1[2], // v1
+            p2[0], p2[1], p2[2] // v2
+        ]);
+
+        const indices = [
+            0, 1, 2,
+
+        ];
+
+        geometry.setIndex(indices);
+        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+
+        const material = new THREE.MeshBasicMaterial({
+            color: new THREE.Color(color),
+            depthTest: false,
+            transparent: true,
+            opacity: opc,
+            side: THREE.DoubleSide
+
+        });
+
+        const mesh = new THREE.Mesh(geometry, material);
+        this.scene.add(mesh)
+    }
+
+    handleResize() {
+        (this.camera as THREE.PerspectiveCamera).aspect = window.innerWidth / window.innerHeight;
+        (this.camera as THREE.PerspectiveCamera).updateProjectionMatrix();
+
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
+
+    }
+
+    animate() {
+        requestAnimationFrame(this.animate.bind(this));
+        //const delta = this.clock.getDelta();
+        this.controls.update();
+        this.stats.update();
+        this.render();
+    }
+
+    render() {
+        this.renderer.render(this.scene, this.camera);
+        this.labelRenderer.render(this.scene, this.camera);
+    }
+}
\ No newline at end of file
--- a/src/counter.ts
+++ b/src/counter.ts
+export function setupCounter(element: HTMLButtonElement) {
+  let counter = 0
+  const setCounter = (count: number) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+}
--- a/src/main.ts
+++ b/src/main.ts
+import './style.css'
+import typescriptLogo from './typescript.svg'
+import viteLogo from '/vite.svg'
+import { setupCounter } from './counter.ts'
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://www.typescriptlang.org/" target="_blank">
+      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
+    </a>
+    <h1>Vite + TypeScript</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Vite and TypeScript logos to learn more
+    </p>
+  </div>
+`
+
+setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
--- a/src/style.css
+++ b/src/style.css
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/src/typescript.svg
+++ b/src/typescript.svg
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>
\ No newline at end of file
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}