backup-05-06-2024

src/assets/asset.class.ts

@@ -0,0 +1,18 @@
+import * as Three from 'three';
+
+export default class Asset
+{
+    #mat: Three.Matrix4;
+    #layer: number;
+
+    ready: boolean = false;
+
+    _obj: Three.Object3D | undefined;
+
+    constructor(mat?: Three.Matrix4, layer?: number)
+    {
+        this.#mat = mat ?? new Three.Matrix4();
+        this.#layer = layer ?? 0;
+    }
+    static init(): void {}
+}

src/assets/sprite.class.ts

@@ -0,0 +1,13 @@
+import Asset from './asset.class';
+import * as CONST from '../consts';
+import * as Three from 'three';
+
+export default class Sprite extends Asset
+{
+    static #material = new Three.RawShaderMaterial({
+        fragmentShader: "",
+        vertexShader: "",
+    });
+    static #mesh = CONST.QUAD;
+    static #instance = new Three.InstancedMesh(CONST.QUAD, Sprite.#material, 2**14);
+}

src/consts.ts

@@ -0,0 +1,11 @@
+import * as Three from 'three';
+
+const QUAD = new Three.BufferGeometry();
+QUAD.setIndex( new Three.Float32BufferAttribute(  [ 0, 2, 1, 2, 3, 1 ], 1 ) )
+QUAD.setAttribute( 'position', new Three.Float32BufferAttribute( [ -0.5, 0.5, 0, 0.5, 0.5, 0, -0.5, -0.5, 0, 0.5, -0.5, 0 ], 3 ) );
+QUAD.setAttribute( 'normal', new Three.Float32BufferAttribute( [ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1 ], 3 ) );
+QUAD.setAttribute( 'uv', new Three.Float32BufferAttribute( [ 0, 1, 1, 1, 0, 0, 1, 0 ], 2 ) );
+
+export {
+    QUAD
+};

src/main.ts

@@ -0,0 +1,3 @@
+import Renderer from './renderer/renderer.class';
+
+Renderer.init();

src/renderer/renderer.class.ts

@@ -0,0 +1,47 @@
+import * as Three from 'three';
+import Asset from '../assets/asset.class';
+
+export default class Renderer
+{
+	static #scene: Three.Scene;
+	static #camera: Three.OrthographicCamera;
+	static init(): Boolean
+	{
+		try {
+			const canvas = document.createElement("canvas");
+			canvas.addEventListener("webglcontextcreationerror", console.error);
+			const context = canvas.getContext("webgl2");
+			
+			this.#renderer.setPixelRatio( window.devicePixelRatio );
+			document.body.appendChild(this.#renderer.domElement);
+
+			this.#scene = new Three.Scene();
+			this.#camera = new Three.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 );
+
+			this.#resize();
+			window.addEventListener("resize", this.#resize.bind(this));
+
+			return true;
+		}
+		catch(e)
+		{
+			console.error(e);
+			return false;
+		}
+	}
+	static #resize(): void
+	{
+		this.#renderer.setSize( window.innerWidth, window.innerHeight );
+		this.#camera.left = window.innerWidth / - 2;
+		this.#camera.right = window.innerWidth / 2;
+		this.#camera.top = window.innerHeight / 2;
+		this.#camera.bottom = window.innerHeight / - 2;
+
+		this.render();
+	}
+	static render(): void
+	{
+		console.log(new Three.PlaneGeometry());
+		this.#renderer.render(this.#scene, this.#camera);
+	}
+}

src/style.css

@@ -0,0 +1,5 @@
+html, body, div
+{
+  padding: 0;
+  margin: 0;
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />