pixospritz-core 0.10.1 → 1.0.1

package/src/engine/shaders/effects/index.js

@@ -0,0 +1,450 @@
+/*                                                 *\
+** ----------------------------------------------- **
+**          Calliope - Pixos Game Engine           **
+** ----------------------------------------------- **
+**  Copyright (c) 2020-2025 - Kyle Derby MacInnis  **
+**                                                 **
+**    Any unauthorized distribution or transfer    **
+**       of this work is strictly prohibited.      **
+**                                                 **
+**               All Rights Reserved.              **
+** ----------------------------------------------- **
+*                                                 */
+
+/**
+ * Effect Shader Library - Post-processing visual effects
+ * 
+ * Each effect exports a vertex shader (vs) and fragment shader (fs)
+ * for use with the post-processing pipeline.
+ */
+
+// Common vertex shader for all post-processing effects
+export const commonVS = `
+  attribute vec2 aPosition;
+  varying vec2 vUV;
+  void main() {
+      vUV = (aPosition + 1.0) * 0.5;
+      gl_Position = vec4(aPosition, 0.0, 1.0);
+  }
+`;
+
+/**
+ * CRT Monitor Effect
+ * Simulates a retro CRT monitor with curvature, scanlines, and color bleeding
+ */
+export const crt = {
+  vs: commonVS,
+  fs: `
+    precision mediump float;
+    varying vec2 vUV;
+    uniform sampler2D uTexture;
+    uniform vec2 uResolution;
+    uniform float uTime;
+    uniform float uCurvature;    // 0-1, barrel distortion amount
+    uniform float uScanlines;    // 0-1, scanline intensity
+    uniform float uVignette;     // 0-1, vignette intensity
+    
+    vec2 curveUV(vec2 uv) {
+        uv = uv * 2.0 - 1.0;
+        vec2 offset = abs(uv.yx) / vec2(6.0, 4.0);
+        uv = uv + uv * offset * offset * uCurvature;
+        uv = uv * 0.5 + 0.5;
+        return uv;
+    }
+    
+    void main() {
+        vec2 uv = curveUV(vUV);
+        
+        // Check if outside screen bounds (black out)
+        if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
+            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+            return;
+        }
+        
+        // Sample with slight RGB offset for color bleeding
+        float offset = 0.001;
+        float r = texture2D(uTexture, uv + vec2(offset, 0.0)).r;
+        float g = texture2D(uTexture, uv).g;
+        float b = texture2D(uTexture, uv - vec2(offset, 0.0)).b;
+        vec3 color = vec3(r, g, b);
+        
+        // Scanlines
+        float scanline = sin(uv.y * uResolution.y * 2.0) * 0.5 + 0.5;
+        color *= 1.0 - uScanlines * (1.0 - scanline) * 0.3;
+        
+        // Vignette
+        float dist = length(vUV - 0.5);
+        color *= 1.0 - uVignette * dist * dist * 2.0;
+        
+        // Slight flicker
+        color *= 0.98 + 0.02 * sin(uTime * 60.0);
+        
+        gl_FragColor = vec4(color, 1.0);
+    }
+  `
+};
+
+/**
+ * Bloom/Glow Effect
+ * Adds a glow to bright areas of the image
+ */
+export const bloom = {
+  vs: commonVS,
+  fs: `
+    precision mediump float;
+    varying vec2 vUV;
+    uniform sampler2D uTexture;
+    uniform vec2 uResolution;
+    uniform float uThreshold;  // Brightness threshold for bloom
+    uniform float uIntensity;  // Bloom intensity
+    uniform float uRadius;     // Blur radius
+    
+    void main() {
+        vec4 color = texture2D(uTexture, vUV);
+        vec3 bloom = vec3(0.0);
+        
+        // Simple box blur for bloom
+        float total = 0.0;
+        int samples = 8;
+        
+        for (int x = -4; x <= 4; x++) {
+            for (int y = -4; y <= 4; y++) {
+                vec2 offset = vec2(float(x), float(y)) * uRadius / uResolution;
+                vec4 sample = texture2D(uTexture, vUV + offset);
+                
+                // Extract bright parts
+                float brightness = dot(sample.rgb, vec3(0.2126, 0.7152, 0.0722));
+                if (brightness > uThreshold) {
+                    bloom += sample.rgb * (brightness - uThreshold);
+                    total += 1.0;
+                }
+            }
+        }
+        
+        if (total > 0.0) {
+            bloom /= total;
+        }
+        
+        gl_FragColor = vec4(color.rgb + bloom * uIntensity, color.a);
+    }
+  `
+};
+
+/**
+ * Scanlines Effect
+ * Adds horizontal scanlines overlay
+ */
+export const scanlines = {
+  vs: commonVS,
+  fs: `
+    precision mediump float;
+    varying vec2 vUV;
+    uniform sampler2D uTexture;
+    uniform vec2 uResolution;
+    uniform float uIntensity;  // 0-1
+    uniform float uCount;      // Number of scanlines
+    uniform float uSpeed;      // Scroll speed
+    uniform float uTime;
+    
+    void main() {
+        vec4 color = texture2D(uTexture, vUV);
+        
+        // Moving scanlines
+        float y = vUV.y + uTime * uSpeed;
+        float scanline = sin(y * uCount * 3.14159) * 0.5 + 0.5;
+        
+        // Apply scanline darkening
+        color.rgb *= 1.0 - uIntensity * (1.0 - scanline);
+        
+        gl_FragColor = color;
+    }
+  `
+};
+
+/**
+ * Chromatic Aberration Effect
+ * Color channel separation for a distorted look
+ */
+export const chromaticAberration = {
+  vs: commonVS,
+  fs: `
+    precision mediump float;
+    varying vec2 vUV;
+    uniform sampler2D uTexture;
+    uniform float uAmount;     // Separation amount
+    uniform vec2 uDirection;   // Direction of separation
+    
+    void main() {
+        vec2 dir = normalize(vUV - 0.5);
+        float dist = length(vUV - 0.5);
+        
+        // Stronger effect towards edges
+        float offset = uAmount * dist * dist;
+        
+        float r = texture2D(uTexture, vUV + dir * offset).r;
+        float g = texture2D(uTexture, vUV).g;
+        float b = texture2D(uTexture, vUV - dir * offset).b;
+        
+        gl_FragColor = vec4(r, g, b, 1.0);
+    }
+  `
+};
+
+/**
+ * Posterize Effect
+ * Reduces color palette for a stylized look
+ */
+export const posterize = {
+  vs: commonVS,
+  fs: `
+    precision mediump float;
+    varying vec2 vUV;
+    uniform sampler2D uTexture;
+    uniform float uLevels;  // Number of color levels (2-16)
+    
+    void main() {
+        vec4 color = texture2D(uTexture, vUV);
+        
+        // Quantize each channel
+        float levels = max(2.0, uLevels);
+        color.rgb = floor(color.rgb * levels) / (levels - 1.0);
+        
+        gl_FragColor = color;
+    }
+  `
+};
+
+/**
+ * Grayscale Effect
+ * Converts image to black and white
+ */
+export const grayscale = {
+  vs: commonVS,
+  fs: `
+    precision mediump float;
+    varying vec2 vUV;
+    uniform sampler2D uTexture;
+    uniform float uIntensity;  // 0-1, blend with original
+    
+    void main() {
+        vec4 color = texture2D(uTexture, vUV);
+        
+        // Luminance-weighted grayscale
+        float gray = dot(color.rgb, vec3(0.2126, 0.7152, 0.0722));
+        vec3 grayColor = vec3(gray);
+        
+        // Blend with original
+        color.rgb = mix(color.rgb, grayColor, uIntensity);
+        
+        gl_FragColor = color;
+    }
+  `
+};
+
+/**
+ * Sepia Effect
+ * Vintage brown-tinted effect
+ */
+export const sepia = {
+  vs: commonVS,
+  fs: `
+    precision mediump float;
+    varying vec2 vUV;
+    uniform sampler2D uTexture;
+    uniform float uIntensity;  // 0-1
+    
+    void main() {
+        vec4 color = texture2D(uTexture, vUV);
+        
+        // Sepia matrix
+        vec3 sepia;
+        sepia.r = dot(color.rgb, vec3(0.393, 0.769, 0.189));
+        sepia.g = dot(color.rgb, vec3(0.349, 0.686, 0.168));
+        sepia.b = dot(color.rgb, vec3(0.272, 0.534, 0.131));
+        
+        color.rgb = mix(color.rgb, sepia, uIntensity);
+        
+        gl_FragColor = color;
+    }
+  `
+};
+
+/**
+ * Thermal/Heat Vision Effect
+ * False color heat map effect
+ */
+export const thermal = {
+  vs: commonVS,
+  fs: `
+    precision mediump float;
+    varying vec2 vUV;
+    uniform sampler2D uTexture;
+    uniform float uIntensity;  // 0-1
+    
+    vec3 heatmap(float t) {
+        // Cold (blue) -> warm (red) -> hot (white)
+        vec3 cold = vec3(0.0, 0.0, 1.0);
+        vec3 warm = vec3(1.0, 1.0, 0.0);
+        vec3 hot = vec3(1.0, 0.0, 0.0);
+        vec3 white = vec3(1.0, 1.0, 1.0);
+        
+        if (t < 0.33) {
+            return mix(cold, warm, t * 3.0);
+        } else if (t < 0.66) {
+            return mix(warm, hot, (t - 0.33) * 3.0);
+        } else {
+            return mix(hot, white, (t - 0.66) * 3.0);
+        }
+    }
+    
+    void main() {
+        vec4 color = texture2D(uTexture, vUV);
+        
+        // Calculate brightness as "heat"
+        float heat = dot(color.rgb, vec3(0.2126, 0.7152, 0.0722));
+        vec3 thermal = heatmap(heat);
+        
+        color.rgb = mix(color.rgb, thermal, uIntensity);
+        
+        gl_FragColor = color;
+    }
+  `
+};
+
+/**
+ * Displacement/Wave Effect
+ * Water ripple or wave distortion
+ */
+export const displacement = {
+  vs: commonVS,
+  fs: `
+    precision mediump float;
+    varying vec2 vUV;
+    uniform sampler2D uTexture;
+    uniform float uTime;
+    uniform float uAmplitude;    // Wave height
+    uniform float uFrequency;    // Wave frequency
+    uniform float uSpeed;        // Wave speed
+    uniform int uWaveType;       // 0=horizontal, 1=vertical, 2=radial
+    
+    void main() {
+        vec2 uv = vUV;
+        
+        float wave;
+        if (uWaveType == 0) {
+            // Horizontal waves
+            wave = sin(uv.y * uFrequency + uTime * uSpeed) * uAmplitude;
+            uv.x += wave;
+        } else if (uWaveType == 1) {
+            // Vertical waves
+            wave = sin(uv.x * uFrequency + uTime * uSpeed) * uAmplitude;
+            uv.y += wave;
+        } else {
+            // Radial waves
+            float dist = length(uv - 0.5);
+            wave = sin(dist * uFrequency - uTime * uSpeed) * uAmplitude;
+            uv += normalize(uv - 0.5) * wave * 0.1;
+        }
+        
+        gl_FragColor = texture2D(uTexture, uv);
+    }
+  `
+};
+
+/**
+ * Vignette Effect
+ * Darkens edges of screen
+ */
+export const vignette = {
+  vs: commonVS,
+  fs: `
+    precision mediump float;
+    varying vec2 vUV;
+    uniform sampler2D uTexture;
+    uniform float uIntensity;  // 0-1
+    uniform float uSoftness;   // Edge softness
+    
+    void main() {
+        vec4 color = texture2D(uTexture, vUV);
+        
+        float dist = length(vUV - 0.5);
+        float vignette = smoothstep(0.5, 0.5 - uSoftness, dist);
+        
+        color.rgb *= mix(1.0, vignette, uIntensity);
+        
+        gl_FragColor = color;
+    }
+  `
+};
+
+/**
+ * Pixelate Effect
+ * Reduces resolution for retro look
+ */
+export const pixelate = {
+  vs: commonVS,
+  fs: `
+    precision mediump float;
+    varying vec2 vUV;
+    uniform sampler2D uTexture;
+    uniform vec2 uResolution;
+    uniform float uPixelSize;  // Size of pixels
+    
+    void main() {
+        vec2 pixelatedUV = floor(vUV * uResolution / uPixelSize) * uPixelSize / uResolution;
+        gl_FragColor = texture2D(uTexture, pixelatedUV);
+    }
+  `
+};
+
+/**
+ * Film Grain Effect
+ * Adds noise for a filmic look
+ */
+export const filmGrain = {
+  vs: commonVS,
+  fs: `
+    precision mediump float;
+    varying vec2 vUV;
+    uniform sampler2D uTexture;
+    uniform float uTime;
+    uniform float uIntensity;  // 0-1
+    
+    float random(vec2 co) {
+        return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
+    }
+    
+    void main() {
+        vec4 color = texture2D(uTexture, vUV);
+        
+        // Generate noise
+        float noise = random(vUV + fract(uTime));
+        noise = noise * 2.0 - 1.0;
+        
+        // Apply grain
+        color.rgb += noise * uIntensity * 0.1;
+        
+        gl_FragColor = color;
+    }
+  `
+};
+
+/**
+ * Get all available effects
+ */
+export const effects = {
+  crt,
+  bloom,
+  scanlines,
+  chromaticAberration,
+  posterize,
+  grayscale,
+  sepia,
+  thermal,
+  displacement,
+  vignette,
+  pixelate,
+  filmGrain
+};
+
+export default effects;

package/src/engine/shaders/fs.js

@@ -0,0 +1,222 @@
+/*                                                 *\
+** ----------------------------------------------- **
+**          Calliope - Pixos Game Engine   	       **
+** ----------------------------------------------- **
+**  Copyright (c) 2020-2025 - Kyle Derby MacInnis  **
+**                                                 **
+**    Any unauthorized distribution or transfer    **
+**       of this work is strictly prohibited.      **
+**                                                 **
+**               All Rights Reserved.              **
+** ----------------------------------------------- **
+\*                                                 */
+export default function fs() {
+  return `
+  precision mediump int;
+  precision mediump float;
+
+  const float Near = 0.1;
+  const float Far = 50.0;
+
+  struct PointLight {
+    float enabled;
+    vec3 color;
+    vec3 position;
+    vec3 attenuation;
+    vec3 direction;
+    vec3 scatteringCoefficients;
+    float density;
+  };
+
+  float unpack(vec4 color) {
+    const vec4 bitShifts = vec4(1.0, 1.0 / 255.0, 1.0 / (255.0 * 255.0), 1.0 / (255.0 * 255.0 * 255.0));
+    return dot(color, bitShifts);
+  }
+
+  varying vec4 vWorldVertex;
+  varying vec3 vWorldNormal;
+  varying vec3 vTransformedNormal;
+  varying vec4 vPosition;
+  varying vec2 vTextureCoord;
+
+  varying vec3 vLighting;
+
+  uniform PointLight uLights[32];
+  uniform sampler2D uDepthMap;
+  uniform vec4 u_id;
+
+  uniform float runTransition;
+  uniform float useSampler;
+  uniform float useDiffuse;
+  uniform float isSelected;
+  uniform vec4 uColorMultiplier; 
+  uniform sampler2D uSampler;
+  uniform sampler2D uDiffuseMap;
+
+  uniform vec3 uDiffuse;
+  uniform vec3 uSpecular;
+  uniform float uSpecularExponent;
+
+  uniform vec3 uLightColor;
+  varying vec3 vFragPos;
+  varying vec3 vLightDir;
+  varying vec3 vViewDir;
+
+  float getAttenuation(PointLight light) {
+    float distance_from_light;
+    vec3 to_light;
+
+    to_light = light.position - vPosition.xyz;
+    distance_from_light = length(to_light);
+    
+    float attenuation = 1.0 / (
+        1.0 + light.attenuation.x
+        + light.attenuation.y * distance_from_light 
+        + light.attenuation.z * pow(distance_from_light, 2.0)
+      );
+    return attenuation;
+  }
+
+  vec3 getReflectedLightColor(vec3 color) {
+    vec3 reflectedLightColor = vec3(0.0);
+  
+    for(int i = 0; i < 32; i++) {
+      if(uLights[i].enabled <= 0.5) continue;
+  
+      vec3 specular_color;
+      vec3 diffuse_color;
+      vec3 to_light;
+      vec3 reflection;
+      vec3 to_camera;
+      float cos_angle;
+      float attenuation;
+      vec3 normal;
+  
+      // Calculate a vector from the fragment location to the light source
+      to_light = normalize(uLights[i].position - vFragPos);
+      normal = normalize(vWorldNormal);
+  
+      // DIFFUSE calculations
+      if (useSampler == 1.0) {
+        cos_angle = 0.67; // billboard sprites
+        cos_angle += dot(to_camera, to_light);
+      } else {
+        cos_angle = dot(normal, to_light);
+        cos_angle = clamp(cos_angle, 0.0, 1.0);
+      }
+  
+      // Scale the color of this fragment based on its angle to the light.
+      diffuse_color = uLights[i].color * cos_angle;
+  
+      // SPECULAR calculations
+      reflection = 2.0 * dot(normal, to_light) * normal - to_light;
+      reflection = normalize(reflection);
+  
+      to_camera = normalize(vViewDir);
+  
+      cos_angle = dot(reflection, to_camera);
+      cos_angle = clamp(cos_angle, 0.0, 1.0);
+      specular_color = uLights[i].color * cos_angle;
+  
+      // ATTENUATION calculations
+      attenuation = getAttenuation(uLights[i]);
+  
+      // Combine and attenuate the colors from this light source
+      reflectedLightColor += attenuation * (diffuse_color + specular_color);
+    }
+  
+    return clamp(0.5 * color + reflectedLightColor, 0.0, 1.0);
+  }
+
+  // Diffuse Colour Calculation
+  vec3 calculateDiffuse() {
+    vec4 texelColors = texture2D(uDiffuseMap, vTextureCoord);
+    vec3 color = uDiffuse;
+    if(useDiffuse == 1.0) {
+      // If texture has valid data, use it multiplied by material diffuse color
+      if(texelColors.a > 0.01) {
+        color = texelColors.rgb * uDiffuse;
+      }
+    }
+    return color;
+  }
+
+  // Sampler Texture Colour Calculation
+  vec3 calculateSampler(vec4 texelColors) {
+    vec3 color = texelColors.rgb;
+    if(texelColors.a < 0.1) discard;
+    return color;
+  }
+
+  // linearize depth
+  float LinearizeDepth(float depth) {
+    float z = depth * 2.0 - 1.0; // back to NDC 
+    return (2.0 * Near * Far) / (Far + Near - z * (Far - Near));
+  }
+
+  // fog effect based on depth
+  vec4 fogEffect(vec4 color4) {
+    float depth = LinearizeDepth(gl_FragCoord.z) / Far;
+    vec4 depthVec4 = vec4(vec3(pow(depth, 1.4)), 1.0);
+    return (color4 * (1.0 - depth)) + depthVec4;
+  }
+
+  // Volumetric Calculation
+  vec4 volumetricCalculation(vec4 color4) {
+    vec3 finalColor;
+
+    for(int i = 0; i < 32; i++) {
+      if(uLights[i].enabled <= 0.5) continue;
+        
+      // Calculate the distance from the fragment to the light
+      float distance = length(uLights[i].position - vec3(vWorldVertex));
+
+      // directional lighting - not working atm
+      // if(length(uLights[i].direction) > 0.0){
+      //   // Calculate the angle between the light direction and the fragment
+      //   float cos_angle = dot(normalize(uLights[i].direction), normalize(vFragPos - uLights[i].position));
+      //   // If the fragment is not within the light cone, skip this light
+      //   if(cos_angle <= 0.0) continue;
+      // }
+
+      // Calculate the scattering effect
+      float scattering = exp(-uLights[i].density * distance);
+      vec3 scatteredLight = uLights[i].color * scattering * uLights[i].scatteringCoefficients;
+      // Combine the scattered light with the existing lighting
+      finalColor += scatteredLight;
+    }
+
+    return color4 * vec4(finalColor, 1.0);
+  }
+
+  void main(void) {
+    vec4 finalColor = vec4(0.0, 0.0, 0.0, 1.0);
+
+    if(runTransition == 1.0) {
+      finalColor = vec4(0.0, 0.0, 0.0, 0.0);
+      gl_FragColor = finalColor;
+      return;
+    }
+
+    if(useSampler == 1.0) { // sampler
+      vec4 texelColors = texture2D(uSampler, vTextureCoord);
+      vec3 color = calculateSampler(texelColors);
+      vec4 color4 = vec4(getReflectedLightColor(color), texelColors.a);
+      finalColor = volumetricCalculation(vec4(color, texelColors.a)) * fogEffect(color4);
+    } else { // diffuse
+      vec3 color = calculateDiffuse();
+      vec4 color4 = vec4((getReflectedLightColor(color)), 1.0);
+      finalColor = volumetricCalculation(vec4(color,1.0)) * fogEffect(color4);
+    }
+
+    // flash on selection
+    if(isSelected == 1.0) {
+      finalColor = finalColor * uColorMultiplier;
+    }
+
+    // gl_FragColor = vec4(vec3(u_id),1.0);
+
+    gl_FragColor = finalColor;
+  }
+`;
+}

package/src/engine/shaders/particles/fs.js

@@ -0,0 +1,41 @@
+/*                                                 *\
+** ----------------------------------------------- **
+**          Calliope - Pixos Game Engine   	       **
+** ----------------------------------------------- **
+**  Copyright (c) 2020-2025 - Kyle Derby MacInnis  **
+**                                                 **
+**    Any unauthorized distribution or transfer    **
+**       of this work is strictly prohibited.      **
+**                                                 **
+**               All Rights Reserved.              **
+** ----------------------------------------------- **
+\*                                                 */
+
+export default function() {
+  return `
+    precision mediump float;
+
+    varying vec2 vTextureCoord;
+    varying vec3 vColor;
+    varying float vAlpha;
+
+    void main(void) {
+      // Calculate distance from center for soft circular particles
+      vec2 center = vTextureCoord - vec2(0.5);
+      float dist = length(center) * 2.0;
+      
+      // Soft falloff from center - creates a glowing effect
+      float softEdge = 1.0 - smoothstep(0.0, 1.0, dist);
+      
+      // Apply color with soft edge and alpha fade
+      float alpha = softEdge * vAlpha;
+      
+      // Discard fully transparent pixels for performance
+      if (alpha < 0.01) discard;
+      
+      // Output with glow effect - slightly brighter in center
+      vec3 glowColor = vColor * (1.0 + (1.0 - dist) * 0.5);
+      gl_FragColor = vec4(glowColor, alpha);
+    }
+  `;
+}