three-slug 1.0.0 → 1.1.0

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/main.js

@@ -229,6 +229,25 @@ function createTextMesh() {
     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;
@@ -255,11 +274,14 @@ function createTextMesh() {
         // 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
+            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);
@@ -300,6 +322,10 @@ function animate() {
                 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) {

package/package.json

@@ -3,7 +3,7 @@
     "opentype.js": "^1.3.4"
   },
   "name": "three-slug",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "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 };