@tarsis/toolkit 0.6.5 → 0.7.0

package/dist/gl-B0NhVYRl.cjs

@@ -0,0 +1,177 @@
+const require_chunk = require("./chunk-CKQMccvm.cjs");
+const require_assets = require("./assets-BMqH4phf.cjs");
+let three = require("three");
+three = require_chunk.__toESM(three);
+let load_bmfont = require("load-bmfont");
+load_bmfont = require_chunk.__toESM(load_bmfont);
+let three_bmfont_text = require("three-bmfont-text");
+three_bmfont_text = require_chunk.__toESM(three_bmfont_text);
+let three_bmfont_text_shaders_msdf = require("three-bmfont-text/shaders/msdf");
+three_bmfont_text_shaders_msdf = require_chunk.__toESM(three_bmfont_text_shaders_msdf);
+let three_orbit_controls = require("three-orbit-controls");
+three_orbit_controls = require_chunk.__toESM(three_orbit_controls);
+//#region src/components/Loaders/EndlessLoader/shaders.ts
+var vertexShader = `
+  varying vec2 vUv;
+  varying vec3 vPos;
+
+  void main() {
+    vUv = uv;
+    vPos = position;
+
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
+  }
+`;
+var fragmentShader = `
+  varying vec2 vUv;
+  varying vec3 vPos;
+
+  uniform sampler2D uTexture;
+  uniform float uTime;
+
+  void main() {
+    float time = uTime * 0.5;
+    vec2 repeat = -vec2(12., 3.);
+    // To repeat the uvs we need to multiply them by a scalar
+    // and then get the fractional part of it so they from 0 to 1
+    // To move them continuously we have to add time
+    // to the x or y component, to change the direction
+    vec2 uv = fract(vUv * repeat - vec2(time, 0.)); // The sign of time change direction of movement
+
+    // Fake shadow
+    float shadow = clamp(vPos.z / 5., 0., 1.);
+
+    vec3 texture = texture2D(uTexture, uv).rgb;
+    // texture *= vec3(uv.x, uv.y, 1.); // To help visualize the repeated uvs
+
+    gl_FragColor = vec4(texture * shadow, 1.);
+  }
+`;
+//#endregion
+//#region src/components/Loaders/EndlessLoader/gl.ts
+var GL = class {
+	renderer;
+	camera;
+	scene;
+	controls;
+	clock;
+	rt;
+	rtCamera;
+	rtScene;
+	text;
+	mesh;
+	geometry;
+	material;
+	fontGeometry;
+	fontMaterial;
+	loader;
+	rafId;
+	isDestroyed = false;
+	boundResize = null;
+	constructor(container) {
+		this.renderer = new three.WebGLRenderer({ alpha: true });
+		this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
+		this.renderer.setSize(window.innerWidth, window.innerHeight);
+		this.renderer.setClearColor(0, 1);
+		(container || document.body).appendChild(this.renderer.domElement);
+		this.camera = new three.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1e3);
+		this.camera.position.z = 60;
+		this.scene = new three.Scene();
+		this.controls = new ((0, three_orbit_controls.default)(three))(this.camera, this.renderer.domElement);
+		this.clock = new three.Clock();
+	}
+	init() {
+		(0, load_bmfont.default)(require_assets.endlessLoaderAssets.font, (_, font) => {
+			this.fontGeometry = (0, three_bmfont_text.default)({
+				font,
+				text: "ENDLESS"
+			});
+			this.loader = new three.TextureLoader();
+			this.loader.load(require_assets.endlessLoaderAssets.atlas, (texture) => {
+				this.fontMaterial = new three.RawShaderMaterial((0, three_bmfont_text_shaders_msdf.default)({
+					map: texture,
+					side: three.DoubleSide,
+					transparent: true,
+					negate: false,
+					color: 16777215
+				}));
+				this.createRenderTarget();
+				this.createMesh();
+				this.animate();
+				this.addEvents();
+			});
+		});
+	}
+	createRenderTarget() {
+		this.rt = new three.WebGLRenderTarget(window.innerWidth, window.innerHeight);
+		this.rtCamera = new three.PerspectiveCamera(45, 1, .1, 1e3);
+		this.rtCamera.position.z = 2.5;
+		this.rtScene = new three.Scene();
+		this.rtScene.background = new three.Color("#000000");
+		this.text = new three.Mesh(this.fontGeometry, this.fontMaterial);
+		this.text.position.set(-.965, -.525, 0);
+		this.text.rotation.set(Math.PI, 0, 0);
+		this.text.scale.set(.008, .04, 1);
+		this.rtScene.add(this.text);
+	}
+	createMesh() {
+		if (!this.rt) return;
+		this.geometry = new three.TorusKnotGeometry(9, 3, 768, 3, 4, 3);
+		this.material = new three.ShaderMaterial({
+			vertexShader,
+			fragmentShader,
+			uniforms: {
+				uTime: { value: 0 },
+				uTexture: { value: this.rt.texture }
+			}
+		});
+		this.mesh = new three.Mesh(this.geometry, this.material);
+		this.scene.add(this.mesh);
+	}
+	animate() {
+		if (this.isDestroyed) return;
+		this.rafId = requestAnimationFrame(this.animate.bind(this));
+		this.render();
+	}
+	render() {
+		if (!this.material || !this.rt || !this.rtScene || !this.rtCamera) return;
+		this.controls.update();
+		this.material.uniforms.uTime.value = this.clock.getElapsedTime();
+		this.renderer.setRenderTarget(this.rt);
+		this.renderer.render(this.rtScene, this.rtCamera);
+		this.renderer.setRenderTarget(null);
+		this.renderer.render(this.scene, this.camera);
+	}
+	addEvents() {
+		this.boundResize = this.resize.bind(this);
+		window.addEventListener("resize", this.boundResize);
+	}
+	resize() {
+		const width = window.innerWidth;
+		const height = window.innerHeight;
+		this.camera.aspect = width / height;
+		this.camera.updateProjectionMatrix();
+		this.renderer.setSize(width, height);
+	}
+	destroy() {
+		this.isDestroyed = true;
+		if (this.rafId) {
+			cancelAnimationFrame(this.rafId);
+			this.rafId = void 0;
+		}
+		if (this.boundResize) {
+			window.removeEventListener("resize", this.boundResize);
+			this.boundResize = null;
+		}
+		if (this.geometry) this.geometry.dispose();
+		if (this.material) this.material.dispose();
+		if (this.fontMaterial) this.fontMaterial.dispose();
+		if (this.rt) this.rt.dispose();
+		if (this.renderer) {
+			this.renderer.dispose();
+			if (this.renderer.domElement.parentNode) this.renderer.domElement.parentNode.removeChild(this.renderer.domElement);
+		}
+	}
+};
+//#endregion
+exports.GL = GL;

package/dist/gl-BipoEx9s.js

@@ -0,0 +1,171 @@
+import { n as endlessLoaderAssets } from "./assets-huTvlamy.js";
+import * as THREE from "three";
+import loadFont from "load-bmfont";
+import createGeometry from "three-bmfont-text";
+import MSDFShader from "three-bmfont-text/shaders/msdf";
+import OrbitControls from "three-orbit-controls";
+//#region src/components/Loaders/EndlessLoader/shaders.ts
+var vertexShader = `
+  varying vec2 vUv;
+  varying vec3 vPos;
+
+  void main() {
+    vUv = uv;
+    vPos = position;
+
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
+  }
+`;
+var fragmentShader = `
+  varying vec2 vUv;
+  varying vec3 vPos;
+
+  uniform sampler2D uTexture;
+  uniform float uTime;
+
+  void main() {
+    float time = uTime * 0.5;
+    vec2 repeat = -vec2(12., 3.);
+    // To repeat the uvs we need to multiply them by a scalar
+    // and then get the fractional part of it so they from 0 to 1
+    // To move them continuously we have to add time
+    // to the x or y component, to change the direction
+    vec2 uv = fract(vUv * repeat - vec2(time, 0.)); // The sign of time change direction of movement
+
+    // Fake shadow
+    float shadow = clamp(vPos.z / 5., 0., 1.);
+
+    vec3 texture = texture2D(uTexture, uv).rgb;
+    // texture *= vec3(uv.x, uv.y, 1.); // To help visualize the repeated uvs
+
+    gl_FragColor = vec4(texture * shadow, 1.);
+  }
+`;
+//#endregion
+//#region src/components/Loaders/EndlessLoader/gl.ts
+var GL = class {
+	renderer;
+	camera;
+	scene;
+	controls;
+	clock;
+	rt;
+	rtCamera;
+	rtScene;
+	text;
+	mesh;
+	geometry;
+	material;
+	fontGeometry;
+	fontMaterial;
+	loader;
+	rafId;
+	isDestroyed = false;
+	boundResize = null;
+	constructor(container) {
+		this.renderer = new THREE.WebGLRenderer({ alpha: true });
+		this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
+		this.renderer.setSize(window.innerWidth, window.innerHeight);
+		this.renderer.setClearColor(0, 1);
+		(container || document.body).appendChild(this.renderer.domElement);
+		this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1e3);
+		this.camera.position.z = 60;
+		this.scene = new THREE.Scene();
+		this.controls = new (OrbitControls(THREE))(this.camera, this.renderer.domElement);
+		this.clock = new THREE.Clock();
+	}
+	init() {
+		loadFont(endlessLoaderAssets.font, (_, font) => {
+			this.fontGeometry = createGeometry({
+				font,
+				text: "ENDLESS"
+			});
+			this.loader = new THREE.TextureLoader();
+			this.loader.load(endlessLoaderAssets.atlas, (texture) => {
+				this.fontMaterial = new THREE.RawShaderMaterial(MSDFShader({
+					map: texture,
+					side: THREE.DoubleSide,
+					transparent: true,
+					negate: false,
+					color: 16777215
+				}));
+				this.createRenderTarget();
+				this.createMesh();
+				this.animate();
+				this.addEvents();
+			});
+		});
+	}
+	createRenderTarget() {
+		this.rt = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
+		this.rtCamera = new THREE.PerspectiveCamera(45, 1, .1, 1e3);
+		this.rtCamera.position.z = 2.5;
+		this.rtScene = new THREE.Scene();
+		this.rtScene.background = new THREE.Color("#000000");
+		this.text = new THREE.Mesh(this.fontGeometry, this.fontMaterial);
+		this.text.position.set(-.965, -.525, 0);
+		this.text.rotation.set(Math.PI, 0, 0);
+		this.text.scale.set(.008, .04, 1);
+		this.rtScene.add(this.text);
+	}
+	createMesh() {
+		if (!this.rt) return;
+		this.geometry = new THREE.TorusKnotGeometry(9, 3, 768, 3, 4, 3);
+		this.material = new THREE.ShaderMaterial({
+			vertexShader,
+			fragmentShader,
+			uniforms: {
+				uTime: { value: 0 },
+				uTexture: { value: this.rt.texture }
+			}
+		});
+		this.mesh = new THREE.Mesh(this.geometry, this.material);
+		this.scene.add(this.mesh);
+	}
+	animate() {
+		if (this.isDestroyed) return;
+		this.rafId = requestAnimationFrame(this.animate.bind(this));
+		this.render();
+	}
+	render() {
+		if (!this.material || !this.rt || !this.rtScene || !this.rtCamera) return;
+		this.controls.update();
+		this.material.uniforms.uTime.value = this.clock.getElapsedTime();
+		this.renderer.setRenderTarget(this.rt);
+		this.renderer.render(this.rtScene, this.rtCamera);
+		this.renderer.setRenderTarget(null);
+		this.renderer.render(this.scene, this.camera);
+	}
+	addEvents() {
+		this.boundResize = this.resize.bind(this);
+		window.addEventListener("resize", this.boundResize);
+	}
+	resize() {
+		const width = window.innerWidth;
+		const height = window.innerHeight;
+		this.camera.aspect = width / height;
+		this.camera.updateProjectionMatrix();
+		this.renderer.setSize(width, height);
+	}
+	destroy() {
+		this.isDestroyed = true;
+		if (this.rafId) {
+			cancelAnimationFrame(this.rafId);
+			this.rafId = void 0;
+		}
+		if (this.boundResize) {
+			window.removeEventListener("resize", this.boundResize);
+			this.boundResize = null;
+		}
+		if (this.geometry) this.geometry.dispose();
+		if (this.material) this.material.dispose();
+		if (this.fontMaterial) this.fontMaterial.dispose();
+		if (this.rt) this.rt.dispose();
+		if (this.renderer) {
+			this.renderer.dispose();
+			if (this.renderer.domElement.parentNode) this.renderer.domElement.parentNode.removeChild(this.renderer.domElement);
+		}
+	}
+};
+//#endregion
+export { GL };