background color

components/ascii-effect/fragment.glsl

@@ -8,6 +8,16 @@ uniform bool uGreyscale;
 uniform bool uInvert;
 uniform bool uMatrix;
 uniform float uTime;
+uniform vec3 uBackground;
+
+vec3 blendNormal(vec3 base, vec3 blend) {
+	return blend;
+}
+
+vec3 blendNormal(vec3 base, vec3 blend, float opacity) {
+	return (blendNormal(base, blend) * opacity + base * (1.0 - opacity));
+}
+
 
 float grayscale(vec3 c) {
     return c.x * 0.299 + c.y * 0.587 + c.z * 0.114;
@@ -94,8 +104,17 @@ void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor)
     } else {
         color = pixelizedColor * ascii.r;
     }
+
+    if(color.rgb == vec3(0.)) {
+        color.a = 0.;
+    }
 
 
+    // outputColor = vec4(uBackground, 1.) + color;
+    // if(outputColor.rgb == vec3(0.)) {
+    //     outputColor.a = 0.;
+    // }
 
-    outputColor = color;
+    float alpha = uBackground == vec3(0.) ? color.a : 1.;
+    outputColor = vec4(blendNormal(uBackground, color.rgb, color.a), alpha);
 }

components/ascii-effect/index.js

@@ -19,6 +19,7 @@ class ASCIIEffectImpl extends Effect {
     greyscale = false,
     invert = false,
     matrix = false,
+    background = '#000000',
   } = {}) {
     super('ASCIIEffect', fragmentShader, {
       blendFunction: BlendFunction.NORMAL,
@@ -33,6 +34,7 @@ class ASCIIEffectImpl extends Effect {
         ['uInvert', new Uniform(invert)],
         ['uMatrix', new Uniform(matrix)],
         ['uTime', new Uniform(0)],
+        ['uBackground', new Uniform(new Color('#ff0000'))],
       ]),
     })
   }
@@ -62,6 +64,7 @@ export const ASCIIEffect = forwardRef((props = {}, ref) => {
       invert,
       matrix,
       time,
+      background,
     } = props
 
     effect.uniforms.get('uCharactersTexture').value = charactersTexture
@@ -73,6 +76,7 @@ export const ASCIIEffect = forwardRef((props = {}, ref) => {
     effect.uniforms.get('uGreyscale').value = greyscale
     effect.uniforms.get('uInvert').value = invert
     effect.uniforms.get('uMatrix').value = matrix
+    effect.uniforms.get('uBackground').value.set(background)
 
     effect.overwriteTime = time !== undefined
 

components/ascii/index.js

@@ -312,7 +312,9 @@ function Postprocessing() {
     invert,
     matrix,
     time,
+    background,
   } = useContext(AsciiContext)
+  console.log('background', background)
 
   return (
     <EffectComposer>
@@ -327,6 +329,7 @@ function Postprocessing() {
         invert={invert}
         matrix={matrix}
         time={time}
+        background={background}
       />
     </EffectComposer>
   )
@@ -348,6 +351,13 @@ function Inner() {
             orthographic
             camera={{ position: [0, 0, 500], near: 0.1, far: 10000 }}
             resize={{ debounce: 100 }}
+            gl={{
+              antialias: false,
+              alpha: true,
+              depth: false,
+              stencil: false,
+              powerPreference: 'high-performance',
+            }}
           >
             <ContextBridge>
               <Scene />
@@ -370,6 +380,7 @@ const DEFAULT = {
   fillPixels: false,
   setColor: true,
   color: '#ffffff',
+  background: '#000000',
   greyscale: false,
   invert: false,
   matrix: false,
@@ -405,6 +416,7 @@ export function ASCII({ children }) {
       matrix,
       setTime,
       time,
+      background,
     },
     _set,
   ] = useControls(
@@ -486,6 +498,13 @@ export function ASCII({ children }) {
         render: (get) => get('setColor') === true,
         // disabled: !initialUrlParams.get('color'),
       },
+      background: {
+        value: initialUrlParams.get('background')
+          ? '#' + initialUrlParams.get('background')
+          : DEFAULT.background,
+        // optional: true,
+        label: 'background',
+      },
     }),
     []
   )
@@ -531,6 +550,8 @@ export function ASCII({ children }) {
     } else {
       params.delete('color')
     }
+
+    params.set('background', background.replace('#', ''))
     return params
   }, [
     characters,
@@ -544,6 +565,7 @@ export function ASCII({ children }) {
     matrix,
     setTime,
     time,
+    background,
   ])
 
   useEffect(() => {
@@ -579,6 +601,7 @@ export function ASCII({ children }) {
           invert,
           matrix,
           time: setTime ? time : undefined,
+          background,
           set,
         }}
       >