fix: use glyph provider in sdfTest component and fix parameter qualifiers in glyph shaders (#18)

Author: kjerandp

src/components/SDFTest/SDFTest.stories.tsx

@@ -1,12 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { Canvas3dDecorator } from '../../storybook/decorators/canvas-3d-decorator'
+import { GlyphsDecorator } from '../../storybook/decorators/glyphs-decorator'
 import { PerformanceDecorator } from '../../storybook/decorators/performance-decorator'
 import { SDFTest } from './SDFTest'
 
 const meta = {
   title: 'Components/Misc/SDFTest',
   component: SDFTest,
   decorators: [
+    GlyphsDecorator,
     PerformanceDecorator,
     Canvas3dDecorator,
   ],

src/components/SDFTest/SDFTest.tsx

@@ -1,10 +1,8 @@
-import { useTexture } from '@react-three/drei'
 import { extend, useFrame } from '@react-three/fiber'
 import { MeshLineGeometry, MeshLineMaterial } from 'meshline'
-import { useEffect, useMemo, useState } from 'react'
-import { DataTexture, DoubleSide, LinearFilter, Texture, Uniform, Vector2 } from 'three'
-import { createConfig, GlyphConfig, MsdfFontJson } from '../../sdk/utils/glyphs'
-import { get } from '../../storybook/dependencies/api'
+import { useContext, useEffect, useMemo } from 'react'
+import { DataTexture, DoubleSide, Texture, Uniform, Vector2 } from 'three'
+import { GlyphsContext } from '../../main'
 import fragmentShader from './shaders/fragment.glsl'
 import vertexShader from './shaders/vertex.glsl'
 
@@ -24,25 +22,10 @@ type Props = {
   horizontalAlign?: number
 }
 
-const fileName = 'OpenSans-Regular'
-
 
 export const SDFTest = ({ text, inBias = 0, outBias = 0, fontSize = 32, rotation = 0, spacing = 0, verticalAlign = 0.0, horizontalAlign = 0.0 }: Props) => {
 
-  const glyphAtlas = useTexture(`./glyphs/${fileName}.png`, (tex: Texture) => {
-    tex.generateMipmaps = false
-    tex.magFilter = LinearFilter
-    tex.minFilter = LinearFilter
-    tex.flipY = true
-  })
-
-  const [glyphConfig, setGlyphConfig] = useState<GlyphConfig | null>()
-
-  useEffect(() => {
-    get(`./glyphs/${fileName}.json`).then((json: MsdfFontJson) => {
-      setGlyphConfig(createConfig(json))
-    }).catch(() => setGlyphConfig(null))
-  }, [])
+  const glyphContext = useContext(GlyphsContext)
 
   const uniforms = useMemo(() => {
     return {
@@ -64,40 +47,46 @@ export const SDFTest = ({ text, inBias = 0, outBias = 0, fontSize = 32, rotation
   }, [])
 
   useEffect(() => {
-    if (glyphConfig) {
+    if (glyphContext) {
+      uniforms.glyphAtlas.value = glyphContext.glyphAtlas
+    }
+  }, [uniforms, glyphContext])
+
+  useEffect(() => {
+    if (glyphContext) {
       if (uniforms.textTexture.value) {
         uniforms.textTexture.value.dispose()
       }
-      const { texture, textPointersOffset, textPointersCount } = glyphConfig.encodeTextTexture(text.split('\n'))
+      const { texture, textPointersOffset, textPointersCount } = glyphContext.encodeTextTexture(text.split('\n'))
       uniforms.textTexture.value = texture
       uniforms.textPointersOffset.value = textPointersOffset
       uniforms.textPointersCount.value = textPointersCount
-      uniforms.digits.value = [...glyphConfig.encodeText('0123456789.-').indices]
+      uniforms.digits.value = [...glyphContext.encodeText('0123456789.-').indices]
     }
 
     return () => {
-      if (glyphConfig) {
-        glyphConfig.dispose()
+      if (glyphContext) {
+        glyphContext.dispose()
       }
     }
-  }, [uniforms, glyphConfig, text])
+  }, [uniforms, glyphContext, text])
+
 
   useEffect(() => {
-    uniforms.glyphAtlas.value = glyphAtlas    
     uniforms.in_bias.value = inBias
     uniforms.out_bias.value = outBias
     uniforms.fontSize.value = fontSize
     uniforms.rotation.value = rotation
     uniforms.spacing.value = spacing
     uniforms.verticalAlign.value = verticalAlign
     uniforms.horizontalAlign.value = horizontalAlign
-  }, [uniforms, glyphAtlas, glyphConfig, inBias, outBias, fontSize, rotation, spacing, verticalAlign, horizontalAlign])
+  }, [uniforms, inBias, outBias, fontSize, rotation, spacing, verticalAlign, horizontalAlign])
 
   useFrame(({ clock }) => {
     uniforms.time.value = clock.elapsedTime
   })
 
-  if (!glyphConfig) return null
+  if (!glyphContext) return null
 
   return (
     <group>
@@ -107,10 +96,10 @@ export const SDFTest = ({ text, inBias = 0, outBias = 0, fontSize = 32, rotation
         {/* <icosahedronGeometry args={[WIDTH, 32]} /> */}
         <shaderMaterial
           defines={{
-            GLYPHS_LENGTH: glyphConfig.glyphsCount,
+            GLYPHS_LENGTH: glyphContext.glyphsCount,
           }}
           uniforms={uniforms}
-          uniformsGroups={[glyphConfig.glyphData]}
+          uniformsGroups={[glyphContext.glyphData]}
           vertexShader={vertexShader}
           fragmentShader={fragmentShader}
           side={DoubleSide}

src/components/SDFTest/shaders/fragment.glsl

@@ -17,7 +17,7 @@ uniform float horizontalAlign;
 #include ../../../sdk/materials/shaderLib/sdf-functions.glsl
 
 // Debug
-void textGuides(out vec3 outColor, vec2 position) {
+void textGuides(inout vec3 outColor, vec2 position) {
   float helper;
 
   // helper = sdfBox(position - vec2(0.0, 8.5), vec2(1000.0, glyphFontSize / 2.0));
@@ -40,7 +40,7 @@ void textGuides(out vec3 outColor, vec2 position) {
 }
 
 // Examples
-void example1(out vec3 color, vec2 pixelCoords) {
+void example1(inout vec3 color, vec2 pixelCoords) {
   // the scale we need for a specific font size
   float scale = glyphFontSize / fontSize;
 
@@ -74,7 +74,7 @@ void example1(out vec3 color, vec2 pixelCoords) {
   renderText(color, pixelCoords, textPointer, verticalAlign, horizontalAlign, vec3(0.09, 0.74, 0.51), spacing, scale);
 }
 
-void example2(out vec3 color, vec2 pixelCoords) {
+void example2(inout vec3 color, vec2 pixelCoords) {
   uint i = 0u;
 
   uvec3 textPointer = readTextPointerFromTexture(i);
@@ -101,7 +101,7 @@ void example2(out vec3 color, vec2 pixelCoords) {
   renderText(color, pixelCoords, textPointer, verticalAlign, horizontalAlign, textColor, spacing, scale);
 }
 
-void exmaple3(out vec3 color, vec2 pixelCoords) {
+void exmaple3(inout vec3 color, vec2 pixelCoords) {
   float scale = glyphFontSize / fontSize;
 
   float number = time;//-495.549221;

src/sdk/materials/shaderLib/glyphs.glsl

@@ -68,7 +68,7 @@ float _sdfGlyph(vec2 p, uint glyphId) {
   return sigDist;
 }
 
-void renderGlyph(out vec3 outColor, vec2 position, uint glyphId, vec3 glyphColor, float pxRange) {
+void renderGlyph(inout vec3 outColor, vec2 position, uint glyphId, vec3 glyphColor, float pxRange) {
   float dist = _sdfGlyph(position, glyphId);
   float e = pxRange * (dist - 0.5 + in_bias) + 0.5 + out_bias;
 

src/sdk/materials/shaderLib/render-number.glsl

@@ -1,7 +1,7 @@
 uniform uint digits[12];
 
 float renderNumber(
-  out vec3 outColor,
+  inout vec3 outColor,
   vec2 position,
   float number,
   uint decimals,

src/sdk/materials/shaderLib/render-text.glsl

@@ -37,7 +37,7 @@ uvec3 readTextPointerFromTexture(uint index) {
 }
 
 void renderText(
-  out vec3 outColor,
+  inout vec3 outColor,
   vec2 position,
   uvec3 textPointer,
   float verticalAlign,
@@ -46,7 +46,6 @@ void renderText(
   float spacing,
   float scale
 ) {
-
   // do nothing if the text widht is 0
   if(textPointer.z == 0u)
     return;

src/storybook/decorators/glyphs-decorator.tsx

@@ -0,0 +1,9 @@
+import { GlyphsProvider } from '../../main'
+
+export const GlyphsDecorator = (Story: any) => (
+  <GlyphsProvider fontAtlasUrl='glyphs/OpenSans-Regular.png' fontConfigUrl='glyphs/OpenSans-Regular.json'>
+    <Story />
+  </GlyphsProvider>
+)
+
+