three-slug 1.0.0 → 1.1.1

package/README.md

@@ -6,6 +6,10 @@
 
 Unlike traditional MSDF (Multi-Channel Signed Distance Field) font rendering which can suffer from corner rounding and texture resolution limits, the Slug algorithm evaluates the quadratic bezier curves of the TrueType font directly within the fragment shader. This enables resolution-independent font rendering, sharp corners, and precise anti-aliasing.
 
+## Demo
+
+[Demo](https://manthrax.github.io/JSlug/demo/)
+
 ## Screenshots
 
 ![three-slug Rendering Demo](screenshot.png)

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,357 +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;
-
-
-
-    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: 0xffaa00,     // Golden yellow
-            roughness: 1.0,      // Pure diffuse plastic surface to properly scatter un-angled SpotLight luminance
-            metalness: 0.0,      // Removing metalness prevents the flat quads from reflecting the void into a dark mirror
-            side: THREE.DoubleSide
-        });
-    }
-
-    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;
-            }
-        }
-
-        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.0.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",

package/src/SlugMaterial.js

@@ -138,6 +138,18 @@ flat out uvec4 vBandMaxTexCoords;
 const slug_vertex = `
     vec3 transformed = vec3( position.xy * aScaleBias.xy + aScaleBias.zw, 0.0 );
     vTexCoords = position.xy * 0.5 + 0.5;
+    
+    #ifdef SLUG_MODELSPACE_UV
+    #ifdef USE_UV
+    vUv = transformed.xy;
+    #endif
+    #ifdef USE_MAP
+    
+    
+    vMapUv = ( mapTransform * vec3( vec2(length(modelMatrix[0].xyz)*transformed.x,length(modelMatrix[2].xyz)*transformed.y), 1.0 ) ).xy;
+    #endif
+    #endif
+
     vGlyphBandScale = aGlyphBandScale;
     vBandMaxTexCoords = uvec4(aBandMaxTexCoords);
 `;
@@ -157,7 +169,7 @@ export function injectSlug(target, ...args) {
             slugData._depthMaterial = new THREE.MeshDepthMaterial({ side: THREE.DoubleSide });
             injectSlug(slugData._depthMaterial, slugData);
         }
-        
+
         if (!slugData._distanceMaterial) {
             slugData._distanceMaterial = new THREE.MeshDistanceMaterial({ side: THREE.DoubleSide });
             injectSlug(slugData._distanceMaterial, slugData);
@@ -173,9 +185,9 @@ export function injectSlug(target, ...args) {
     const slugData = args[0];
 
     if (material.userData && material.userData.slugInjected) return; // Prevent redundant native macro splicing
-    
+
     material.transparent = true;
-    material.alphaTest = 0.01;  
+    material.alphaTest = 0.01;
 
     material.onBeforeCompile = (shader) => {
         shader.uniforms.curvesTex = { value: slugData.curvesTex };