three-slug 1.1.0 → 1.1.1

package/demo/fonts/fonts.json

@@ -8,5 +8,6 @@
   "SpaceMono-Regular.ttf",
   "SpaceMono-Bold.ttf",
   "SpaceMono-Italic.ttf",
-  "SpaceMono-BoldItalic.ttf"
-]
+  "SpaceMono-BoldItalic.ttf",
+  "Barbarian.ttf"
+]

package/demo/index.html

@@ -56,8 +56,9 @@
         </div>
         <hr style="border-color: #444; margin: 15px 0;">
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-            <label><input type="checkbox" id="autoScroll" checked /> Auto Scroll</label>
+            <label><input type="checkbox" id="autoScroll" /> Auto Scroll</label>
             <label><input type="checkbox" id="matrixGlitch" /> Matrix Glitch</label>
+            <label><input type="checkbox" id="testMap" /> Test Map</label>
             <label><input type="checkbox" id="useRawShader" /> RawShader Fallback</label>
         </div>
         <div style="margin-bottom: 15px;">

package/demo/main.js

@@ -1,383 +1,391 @@
-
-import * as THREE from 'three';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-import { SlugMaterial, SlugGeometry, SlugGenerator, SlugLoader, injectSlug } from '../src/index.js';
-
-// Only handles some generic unicode:
-// 漢字 ॐ ♞ ♠ ♡ ♢ ♣ ☻ ☼ 🎵 🚀 (Demonstrating generic Unicode vectors)
-// ✌️🌴🐢🐐🍄⚽🍻👑📸😬👀🚨🏡🕊️🏆😻🌟🧿🍀🎨🍜
-
-
-let camera, scene, renderer;
-let controls;
-let slugMesh;
-let spotLight;
-let pointLight;
-let debugCube;
-let loadedData = null;
-let loadedFileName = 'font';
-
-init();
-animate();
-
-function init() {
-    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
-    renderer.setPixelRatio(window.devicePixelRatio);
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    renderer.setClearColor(0x000000, 1.0); // Pure black background
-    renderer.shadowMap.enabled = true;
-    renderer.shadowMap.type = THREE.PCFShadowMap;
-    renderer.shadowMap.samples = 4;
-    document.body.appendChild(renderer.domElement);
-
-    // Swap to Perspective camera to fly around
-    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
-    camera.position.set(307, -500, 400);
-
-    scene = new THREE.Scene();
-
-    const ambientLight = new THREE.AmbientLight(0x404040, 0.2); // Very low ambient to keep shadows dark
-    scene.add(ambientLight);
-
-    // Extreme intensity for high contrast, positioned head-on to cast perfectly square shadows onto the backend plane
-    spotLight = new THREE.SpotLight(0xffffff, 5000000.0);
-    spotLight.position.set(0, 0, 800);
-    spotLight.angle = Math.PI / 4;
-    spotLight.penumbra = 0.5;
-    spotLight.decay = 2.0;
-    spotLight.distance = 3000;
-    spotLight.castShadow = true;
-    spotLight.shadow.bias = -0.0001; // Tiny absolute depth offset to kill shadow acne
-    spotLight.shadow.normalBias = 0.05; // Slightly push the intersection along the normal
-    spotLight.shadow.mapSize.width = 2048;
-    spotLight.shadow.mapSize.height = 2048;
-    spotLight.shadow.camera.near = 10;
-    spotLight.shadow.camera.far = 2000;
-    scene.add(spotLight);
-
-    // Explicitly add target so Three.js auto-updates its matrices
-    spotLight.target.position.set(0, 0, -100);
-    scene.add(spotLight.target);
-
-    const planeGeometry = new THREE.PlaneGeometry(10000, 10000);
-    const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.8 });
-    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
-    plane.position.z = -10; // Moved explicitly further back so depth bounds are 100% unambiguous in shadow map
-    plane.receiveShadow = true;
-    scene.add(plane);
-
-    // Floating Debug Cube to cast shadows on text
-    const cubeGeo = new THREE.BoxGeometry(20, 20, 20);
-    const cubeMat = new THREE.MeshStandardMaterial({ color: 0xff3333, roughness: 0.1 });
-    debugCube = new THREE.Mesh(cubeGeo, cubeMat);
-    debugCube.position.set(0, 0, 50);
-    debugCube.castShadow = true;
-    scene.add(debugCube);
-
-    // Small blue point light that orbits the debug cube
-    pointLight = new THREE.PointLight(0x00aaff, 200000.0, 2500); // Increased intensity + reach radius
-    const bulbGeo = new THREE.SphereGeometry(10, 16, 8); // Larger visible sphere
-    const bulbMat = new THREE.MeshBasicMaterial({ color: 0x00aaff });
-    pointLight.add(new THREE.Mesh(bulbGeo, bulbMat));
-    pointLight.castShadow = true;
-    pointLight.shadow.bias = -0.0001;
-    scene.add(pointLight);
-
-    controls = new OrbitControls(camera, renderer.domElement);
-    controls.enableDamping = true;
-    controls.target.set(207, 0, 0);
-    window.addEventListener('resize', onWindowResize);
-
-    document.getElementById('fileSluggish').addEventListener('change', handleSluggishUpload);
-    document.getElementById('fileTtf').addEventListener('change', handleTtfUpload);
-    document.getElementById('btnDownload').addEventListener('click', handleDownload);
-    document.getElementById('textInput').addEventListener('input', () => {
-        if (loadedData) createTextMesh();
-    });
-
-    document.getElementById('fontSelect').addEventListener('change', (e) => {
-        loadFont(e.target.value);
-    });
-
-    document.getElementById('textInput').addEventListener('input', () => {
-        if (loadedData) createTextMesh();
-    });
-
-    document.getElementById('useRawShader').addEventListener('change', () => {
-        if (loadedData) createTextMesh();
-    });
-
-    document.getElementById('textJustify').addEventListener('change', () => {
-        if (loadedData) createTextMesh();
-    });
-
-    // Prepopulate textarea with our own source code to demonstrate large paragraphs
-    fetch('./main.js')
-        .then(response => response.text())
-        .then(text => {
-            const textArea = document.getElementById('textInput');
-            textArea.value = text; // 1x copies
-            if (loadedData) createTextMesh();
-        })
-        .catch(err => console.error("Could not load main.js for textarea", err));
-
-    // Dynamically populate font select from index
-    const select = document.getElementById('fontSelect');
-    fetch('./fonts/fonts.json')
-        .then(r => r.json())
-        .then(fonts => {
-            fonts.forEach(f => {
-                const opt = document.createElement('option');
-                opt.value = f;
-                opt.innerText = f.replace(/\.[^/.]+$/, "");
-                select.appendChild(opt);
-            });
-            if (select.children.length > 0) {
-                loadFont(select.value);
-            } else {
-                loadFont('DejaVuSansMono.ttf');
-            }
-        })
-        .catch(err => {
-            console.error("Could not load fonts.json list:", err);
-            loadFont('DejaVuSansMono.ttf'); // Fallback
-        });
-}
-
-async function loadFont(fontName) {
-    try {
-        console.log(`Loading font: ${fontName}...`);
-        const response = await fetch(`./fonts/${fontName}`);
-        const buffer = await response.arrayBuffer();
-        const generator = new SlugGenerator();
-        loadedData = await generator.generateFromBuffer(buffer);
-        loadedFileName = fontName.replace(/\.[^/.]+$/, "");
-        console.log(`Loaded font data for ${fontName}:`, loadedData);
-        createTextMesh();
-    } catch (err) {
-        console.error(`Failed to load font ${fontName}`, err);
-    }
-}
-
-function handleSluggishUpload(event) {
-    const file = event.target.files[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = function (e) {
-        const buffer = e.target.result;
-        try {
-            const loader = new SlugLoader();
-            loadedData = loader.parse(buffer);
-            console.log("Loaded Sluggish Data:", loadedData);
-            createTextMesh();
-        } catch (err) {
-            console.error(err);
-            alert("Error parsing sluggish file: " + err.message);
-        }
-    };
-    reader.readAsArrayBuffer(file);
-}
-
-async function handleTtfUpload(event) {
-    const file = event.target.files[0];
-    if (!file) return;
-
-    loadedFileName = file.name.replace(/\.[^/.]+$/, "");
-
-    try {
-        console.log("Generating slug data from TTF...");
-        const generator = new SlugGenerator();
-        loadedData = await generator.generateFromFile(file);
-        console.log("Generated Data:", loadedData);
-        createTextMesh();
-    } catch (err) {
-        console.error(err);
-        alert("Error generating sluggish data: " + err.message);
-    }
-}
-
-function handleDownload() {
-    if (!loadedData || !loadedData._raw) {
-        alert("No generated TTF data to download. Please load a .ttf file first.");
-        return;
-    }
-    const generator = new SlugGenerator();
-    const buffer = generator.exportSluggish(loadedData);
-
-    const blob = new Blob([buffer], { type: "application/octet-stream" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = loadedFileName + ".sluggish";
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-}
-
-function createTextMesh() {
-    if (!loadedData) return;
-
-    if (slugMesh) {
-        scene.remove(slugMesh);
-        slugMesh.geometry.dispose();
-        slugMesh.material.dispose();
-    }
-
-    const useRawFallback = document.getElementById('useRawShader').checked;
-    let material;
-
-    // Create a procedural grid texture to test local UV-mapping layout support
-    const canvas = document.createElement('canvas');
-    canvas.width = 128;
-    canvas.height = 128;
-    const ctx = canvas.getContext('2d');
-
-    // Draw highly contrasting 2x2 Checkerboard 
-    ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, 128, 128);
-    ctx.fillStyle = '#ee0088'; // Vibrant magenta for clear grid inspection
-    ctx.fillRect(0, 0, 64, 64);
-    ctx.fillRect(64, 64, 64, 64);
-
-    const gridTex = new THREE.CanvasTexture(canvas);
-    gridTex.wrapS = THREE.RepeatWrapping;
-    gridTex.wrapT = THREE.RepeatWrapping;
-    gridTex.repeat.set(.5, .5);
-    gridTex.magFilter = THREE.NearestFilter;
-    gridTex.minFilter = THREE.NearestFilter;
-
-
-
-    const textToRender = document.getElementById('textInput').value;
-    const justifyMode = document.getElementById('textJustify').value;
-
-    // Dynamically size the geometry capacity to exactly the number of characters
-    // Add a minimum of 1 to avoid Three.js throwing empty buffer errors
-    const geometry = new SlugGeometry(Math.max(1, textToRender.length));
-
-    geometry.clear();
-
-    geometry.addText(textToRender, loadedData, {
-        fontScale: 0.5,
-        startX: 0,
-        startY: 0,
-        justify: justifyMode
-    });
-
-    if (useRawFallback) {
-        material = new SlugMaterial({
-            curvesTex: loadedData.curvesTex,
-            bandsTex: loadedData.bandsTex
-        });
-        // No custom shadow material for raw shader fallback
-    } else {
-        material = new THREE.MeshStandardMaterial({
-            color: 0xffffff,//0x00aaff,     // Golden yellow
-            roughness: 0.1,      // Pure diffuse plastic surface to properly scatter un-angled SpotLight luminance
-            metalness: 0.05,      // Removing metalness prevents the flat quads from reflecting the void into a dark mirror
-            side: THREE.DoubleSide,
-            map: gridTex
-        });
-        material.defines = { SLUG_MODELSPACE_UV: '' };
-        material.needsUpdate = true;
-    }
-
-    let newSlugMesh = new THREE.Mesh(geometry, material);
-    if (slugMesh) {
-        newSlugMesh.position.copy(slugMesh.position);
-    }
-    slugMesh = newSlugMesh;
-
-    // Apply the architectural PBR macros and instantiate Shared Global Shadow maps securely
-    injectSlug(slugMesh, material, loadedData);
-
-    // Let Three.js dynamically build the Depth Material derived from our onBeforeCompile graph instead of forcing custom
-    slugMesh.castShadow = true;
-    slugMesh.receiveShadow = true;
-
-    // Disabling frustum culling temporally to purely isolate WebGL shadow buffer pipelines
-    //slugMesh.frustumCulled = false;
-    slugMesh.scale.multiplyScalar(.02);
-    scene.add(slugMesh);
-}
-
-function onWindowResize() {
-    camera.aspect = window.innerWidth / window.innerHeight;
-    camera.updateProjectionMatrix();
-    renderer.setSize(window.innerWidth, window.innerHeight);
-}
-
-function animate() {
-    requestAnimationFrame(animate);
-
-    // Star Wars Title Crawl
-    if (slugMesh) {
-        const autoScroll = document.getElementById('autoScroll');
-        if (autoScroll && autoScroll.checked) {
-            const speed = 1.7;
-            slugMesh.position.y += speed;
-            if (slugMesh.position.y > 1500) {
-                slugMesh.position.y -= 1000;
-            }
-        }
-        if (slugMesh.material.map) {
-            //let st = 1.1 + (Math.sin(performance.now() / 1000) * .5);
-            //slugMesh.material.map.repeat.set(st, st)
-        }
-
-        const glitchCheckbox = document.getElementById('matrixGlitch');
-        if (glitchCheckbox && glitchCheckbox.checked && loadedData) {
-            if (Math.random() < 0.25) { // 25% chance per frame to glitch
-                let currentText = document.getElementById('textInput').value.split('');
-                let numGlitches = Math.floor(Math.random() * 1800) + 1;
-                const keys = Array.from(loadedData.codePoints.keys()).filter(k => k > 32); // Exclude space and hidden ones
-
-                for (let i = 0; i < numGlitches; i++) {
-                    let idx = Math.floor(Math.random() * currentText.length);
-                    if (currentText[idx] !== '\n' && currentText[idx] !== ' ') {
-                        let randomChar = String.fromCodePoint(keys[Math.floor(Math.random() * keys.length)]);
-                        currentText[idx] = randomChar;
-                    }
-                }
-
-                slugMesh.geometry.clear();
-                slugMesh.geometry.addText(currentText.join(''), loadedData, {
-                    fontScale: 0.5,
-                    startX: 0,
-                    startY: 0,
-                    justify: document.getElementById('textJustify').value
-                });
-                slugMesh.userData.isGlitched = true;
-            }
-        } else if (slugMesh.userData.isGlitched) {
-            // Restore original clean text immediately when unchecked
-            slugMesh.geometry.clear();
-            slugMesh.geometry.addText(document.getElementById('textInput').value, loadedData, {
-                fontScale: 0.5,
-                startX: 0,
-                startY: 0,
-                justify: document.getElementById('textJustify').value
-            });
-            slugMesh.userData.isGlitched = false;
-        }
-    }
-
-    if (debugCube) {
-        // Keep debug cube visible in frame and spinning wildly
-        debugCube.position.y = 50;
-        debugCube.position.x = Math.sin(Date.now() * 0.001) * 300;
-        debugCube.rotation.x += 0.01;
-        debugCube.rotation.y += 0.02;
-
-        if (pointLight) {
-            pointLight.position.x = debugCube.position.x + Math.cos(Date.now() * 0.0015) * 300;
-            pointLight.position.y = debugCube.position.y + Math.sin(Date.now() * 0.0015) * 300;
-            pointLight.position.z = debugCube.position.z + Math.cos(Date.now() * 0.001) * 150;
-        }
-    }
-
-    if (controls) controls.update();
-    renderer.render(scene, camera);
-}
+
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+import { SlugMaterial, SlugGeometry, SlugGenerator, SlugLoader, injectSlug } from '../src/index.js';
+
+// Only handles some generic unicode:
+// 漢字 ॐ ♞ ♠ ♡ ♢ ♣ ☻ ☼ 🎵 🚀 (Demonstrating generic Unicode vectors)
+// ✌️🌴🐢🐐🍄⚽🍻👑📸😬👀🚨🏡🕊️🏆😻🌟🧿🍀🎨🍜
+
+
+let camera, scene, renderer;
+let controls;
+let slugMesh;
+let spotLight;
+let pointLight;
+let debugCube;
+let loadedData = null;
+let loadedFileName = 'font';
+
+init();
+animate();
+
+function init() {
+    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setClearColor(0x000000, 1.0); // Pure black background
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFShadowMap;
+    renderer.shadowMap.samples = 4;
+    document.body.appendChild(renderer.domElement);
+
+    // Swap to Perspective camera to fly around
+    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
+    camera.position.set(307, -500, 400);
+
+    scene = new THREE.Scene();
+
+    const ambientLight = new THREE.AmbientLight(0x404040, 0.2); // Very low ambient to keep shadows dark
+    scene.add(ambientLight);
+
+    // Extreme intensity for high contrast, positioned head-on to cast perfectly square shadows onto the backend plane
+    spotLight = new THREE.SpotLight(0xffffff, 5000000.0);
+    spotLight.position.set(0, 0, 800);
+    spotLight.angle = Math.PI / 4;
+    spotLight.penumbra = 0.5;
+    spotLight.decay = 2.0;
+    spotLight.distance = 3000;
+    spotLight.castShadow = true;
+    spotLight.shadow.bias = -0.0001; // Tiny absolute depth offset to kill shadow acne
+    spotLight.shadow.normalBias = 0.05; // Slightly push the intersection along the normal
+    spotLight.shadow.mapSize.width = 1024;
+    spotLight.shadow.mapSize.height = 1024;
+    spotLight.shadow.camera.near = 10;
+    spotLight.shadow.camera.far = 2000;
+    scene.add(spotLight);
+
+    // Explicitly add target so Three.js auto-updates its matrices
+    spotLight.target.position.set(0, 0, -100);
+    scene.add(spotLight.target);
+
+    const planeGeometry = new THREE.PlaneGeometry(10000, 10000);
+    const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.8 });
+    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
+    plane.position.z = -10; // Moved explicitly further back so depth bounds are 100% unambiguous in shadow map
+    plane.receiveShadow = true;
+    scene.add(plane);
+
+    // Floating Debug Cube to cast shadows on text
+    const cubeGeo = new THREE.BoxGeometry(20, 20, 20);
+    const cubeMat = new THREE.MeshStandardMaterial({ color: 0xff3333, roughness: 0.1 });
+    debugCube = new THREE.Mesh(cubeGeo, cubeMat);
+    debugCube.position.set(0, 0, 50);
+    debugCube.castShadow = true;
+    scene.add(debugCube);
+
+    // Small blue point light that orbits the debug cube
+    pointLight = new THREE.PointLight(0x00aaff, 200000.0, 2500); // Increased intensity + reach radius
+    const bulbGeo = new THREE.SphereGeometry(10, 16, 8); // Larger visible sphere
+    const bulbMat = new THREE.MeshBasicMaterial({ color: 0x00aaff });
+    pointLight.add(new THREE.Mesh(bulbGeo, bulbMat));
+    pointLight.castShadow = true;
+    pointLight.shadow.bias = -0.0001;
+    scene.add(pointLight);
+
+    controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.target.set(207, 0, 0);
+    window.addEventListener('resize', onWindowResize);
+
+    document.getElementById('fileSluggish').addEventListener('change', handleSluggishUpload);
+    document.getElementById('fileTtf').addEventListener('change', handleTtfUpload);
+    document.getElementById('btnDownload').addEventListener('click', handleDownload);
+    document.getElementById('textInput').addEventListener('input', () => {
+        if (loadedData) createTextMesh();
+    });
+
+    document.getElementById('fontSelect').addEventListener('change', (e) => {
+        loadFont(e.target.value);
+    });
+
+    document.getElementById('textInput').addEventListener('input', () => {
+        if (loadedData) createTextMesh();
+    });
+
+    document.getElementById('useRawShader').addEventListener('change', () => {
+        if (loadedData) createTextMesh();
+    });
+
+    document.getElementById('testMap').addEventListener('change', () => {
+        if (loadedData) createTextMesh();
+    });
+
+    document.getElementById('textJustify').addEventListener('change', () => {
+        if (loadedData) createTextMesh();
+    });
+
+    // Prepopulate textarea with our own source code to demonstrate large paragraphs
+    fetch('./main.js')
+        .then(response => response.text())
+        .then(text => {
+            const textArea = document.getElementById('textInput');
+            textArea.value = text; // 1x copies
+            if (loadedData) createTextMesh();
+        })
+        .catch(err => console.error("Could not load main.js for textarea", err));
+
+    // Dynamically populate font select from index
+    const select = document.getElementById('fontSelect');
+    fetch('./fonts/fonts.json')
+        .then(r => r.json())
+        .then(fonts => {
+            fonts.forEach(f => {
+                const opt = document.createElement('option');
+                opt.value = f;
+                opt.innerText = f.replace(/\.[^/.]+$/, "");
+                select.appendChild(opt);
+            });
+            if (select.children.length > 0) {
+                loadFont(select.value);
+            } else {
+                loadFont('DejaVuSansMono.ttf');
+            }
+        })
+        .catch(err => {
+            console.error("Could not load fonts.json list:", err);
+            loadFont('DejaVuSansMono.ttf'); // Fallback
+        });
+}
+
+async function loadFont(fontName) {
+    try {
+        console.log(`Loading font: ${fontName}...`);
+        const response = await fetch(`./fonts/${fontName}`);
+        const buffer = await response.arrayBuffer();
+        const generator = new SlugGenerator();
+        loadedData = await generator.generateFromBuffer(buffer);
+        loadedFileName = fontName.replace(/\.[^/.]+$/, "");
+        console.log(`Loaded font data for ${fontName}:`, loadedData);
+        createTextMesh();
+    } catch (err) {
+        console.error(`Failed to load font ${fontName}`, err);
+    }
+}
+
+function handleSluggishUpload(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = function (e) {
+        const buffer = e.target.result;
+        try {
+            const loader = new SlugLoader();
+            loadedData = loader.parse(buffer);
+            console.log("Loaded Sluggish Data:", loadedData);
+            createTextMesh();
+        } catch (err) {
+            console.error(err);
+            alert("Error parsing sluggish file: " + err.message);
+        }
+    };
+    reader.readAsArrayBuffer(file);
+}
+
+async function handleTtfUpload(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    loadedFileName = file.name.replace(/\.[^/.]+$/, "");
+
+    try {
+        console.log("Generating slug data from TTF...");
+        const generator = new SlugGenerator();
+        loadedData = await generator.generateFromFile(file);
+        console.log("Generated Data:", loadedData);
+        createTextMesh();
+    } catch (err) {
+        console.error(err);
+        alert("Error generating sluggish data: " + err.message);
+    }
+}
+
+function handleDownload() {
+    if (!loadedData || !loadedData._raw) {
+        alert("No generated TTF data to download. Please load a .ttf file first.");
+        return;
+    }
+    const generator = new SlugGenerator();
+    const buffer = generator.exportSluggish(loadedData);
+
+    const blob = new Blob([buffer], { type: "application/octet-stream" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = loadedFileName + ".sluggish";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+
+function createTextMesh() {
+    if (!loadedData) return;
+
+    if (slugMesh) {
+        scene.remove(slugMesh);
+        slugMesh.geometry.dispose();
+        slugMesh.material.dispose();
+    }
+
+    const useRawFallback = document.getElementById('useRawShader').checked;
+    const testMapChecked = document.getElementById('testMap').checked;
+    let material;
+
+    // Create a procedural grid texture to test local UV-mapping layout support
+    const canvas = document.createElement('canvas');
+    canvas.width = 128;
+    canvas.height = 128;
+    const ctx = canvas.getContext('2d');
+
+    // Draw highly contrasting 2x2 Checkerboard 
+    ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, 128, 128);
+    ctx.fillStyle = '#ee0088'; // Vibrant magenta for clear grid inspection
+    ctx.fillRect(0, 0, 64, 64);
+    ctx.fillRect(64, 64, 64, 64);
+
+    const gridTex = new THREE.CanvasTexture(canvas);
+    gridTex.wrapS = THREE.RepeatWrapping;
+    gridTex.wrapT = THREE.RepeatWrapping;
+    gridTex.repeat.set(.5, .5);
+    gridTex.magFilter = THREE.NearestFilter;
+    gridTex.minFilter = THREE.NearestFilter;
+
+
+
+    const textToRender = document.getElementById('textInput').value;
+    const justifyMode = document.getElementById('textJustify').value;
+
+    // Dynamically size the geometry capacity to exactly the number of characters
+    // Add a minimum of 1 to avoid Three.js throwing empty buffer errors
+    const geometry = new SlugGeometry(Math.max(1, textToRender.length));
+
+    geometry.clear();
+
+    geometry.addText(textToRender, loadedData, {
+        fontScale: 0.5,
+        startX: 0,
+        startY: 0,
+        justify: justifyMode
+    });
+
+    if (useRawFallback) {
+        material = new SlugMaterial({
+            curvesTex: loadedData.curvesTex,
+            bandsTex: loadedData.bandsTex
+        });
+        // No custom shadow material for raw shader fallback
+    } else {
+        material = new THREE.MeshStandardMaterial({
+            color: 0xffffff,//0x00aaff,     // Golden yellow
+            roughness: 0.1,      // Pure diffuse plastic surface to properly scatter un-angled SpotLight luminance
+            metalness: 0.05,      // Removing metalness prevents the flat quads from reflecting the void into a dark mirror
+            side: THREE.DoubleSide,
+            map: testMapChecked ? gridTex : null
+        });
+
+        if (testMapChecked) {
+            material.defines = { SLUG_MODELSPACE_UV: '' };
+            material.needsUpdate = true;
+        }
+    }
+
+    let newSlugMesh = new THREE.Mesh(geometry, material);
+    if (slugMesh) {
+        newSlugMesh.position.copy(slugMesh.position);
+    }
+    slugMesh = newSlugMesh;
+
+    // Apply the architectural PBR macros and instantiate Shared Global Shadow maps securely
+    injectSlug(slugMesh, material, loadedData);
+
+    // Let Three.js dynamically build the Depth Material derived from our onBeforeCompile graph instead of forcing custom
+    slugMesh.castShadow = true;
+    slugMesh.receiveShadow = true;
+
+    // Disabling frustum culling temporally to purely isolate WebGL shadow buffer pipelines
+    //slugMesh.frustumCulled = false;
+    slugMesh.scale.multiplyScalar(.02);
+    scene.add(slugMesh);
+}
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+
+    // Star Wars Title Crawl
+    if (slugMesh) {
+        const autoScroll = document.getElementById('autoScroll');
+        if (autoScroll && autoScroll.checked) {
+            const speed = 1.7;
+            slugMesh.position.y += speed;
+            if (slugMesh.position.y > 1500) {
+                slugMesh.position.y -= 1000;
+            }
+        }
+        if (slugMesh.material.map) {
+            //let st = 1.1 + (Math.sin(performance.now() / 1000) * .5);
+            //slugMesh.material.map.repeat.set(st, st)
+        }
+
+        const glitchCheckbox = document.getElementById('matrixGlitch');
+        if (glitchCheckbox && glitchCheckbox.checked && loadedData) {
+            if (Math.random() < 0.25) { // 25% chance per frame to glitch
+                let currentText = document.getElementById('textInput').value.split('');
+                let numGlitches = Math.floor(Math.random() * 1800) + 1;
+                const keys = Array.from(loadedData.codePoints.keys()).filter(k => k > 32); // Exclude space and hidden ones
+
+                for (let i = 0; i < numGlitches; i++) {
+                    let idx = Math.floor(Math.random() * currentText.length);
+                    if (currentText[idx] !== '\n' && currentText[idx] !== ' ') {
+                        let randomChar = String.fromCodePoint(keys[Math.floor(Math.random() * keys.length)]);
+                        currentText[idx] = randomChar;
+                    }
+                }
+
+                slugMesh.geometry.clear();
+                slugMesh.geometry.addText(currentText.join(''), loadedData, {
+                    fontScale: 0.5,
+                    startX: 0,
+                    startY: 0,
+                    justify: document.getElementById('textJustify').value
+                });
+                slugMesh.userData.isGlitched = true;
+            }
+        } else if (slugMesh.userData.isGlitched) {
+            // Restore original clean text immediately when unchecked
+            slugMesh.geometry.clear();
+            slugMesh.geometry.addText(document.getElementById('textInput').value, loadedData, {
+                fontScale: 0.5,
+                startX: 0,
+                startY: 0,
+                justify: document.getElementById('textJustify').value
+            });
+            slugMesh.userData.isGlitched = false;
+        }
+    }
+
+    if (debugCube) {
+        // Keep debug cube visible in frame and spinning wildly
+        debugCube.position.y = 50;
+        debugCube.position.x = Math.sin(Date.now() * 0.001) * 300;
+        debugCube.rotation.x += 0.01;
+        debugCube.rotation.y += 0.02;
+
+        if (pointLight) {
+            pointLight.position.x = debugCube.position.x + Math.cos(Date.now() * 0.0015) * 300;
+            pointLight.position.y = debugCube.position.y + Math.sin(Date.now() * 0.0015) * 300;
+            pointLight.position.z = debugCube.position.z + Math.cos(Date.now() * 0.001) * 150;
+        }
+    }
+
+    if (controls) controls.update();
+    renderer.render(scene, camera);
+}

package/package.json

@@ -3,7 +3,7 @@
     "opentype.js": "^1.3.4"
   },
   "name": "three-slug",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "JSlug is a Javascript and WebGL port of Eric Lengyel's **Slug** font rendering algorithm, implemented for **Three.js**.",
   "main": "src/index.js",
   "module": "src/index.js",