@shopify/react-native-skia 2.3.0 → 2.3.5

package/src/renderer/__tests__/e2e/LightingImageFilters.spec.tsx

@@ -1,1478 +0,0 @@
-import { importSkia, surface, images } from "../setup";
-import type { SkColor } from "../../../skia/types";
-import { BlendMode, ClipOp, PaintStyle, TileMode } from "../../../skia/types";
-import { checkImage, docPath, itRunsE2eOnly } from "../../../__tests__/setup";
-
-const checkResult = (base64: string, path: string) => {
-  const { Skia } = importSkia();
-  const rData = Skia.Data.fromBase64(base64);
-  const image = Skia.Image.MakeImageFromEncoded(rData)!;
-  expect(rData).toBeDefined();
-  checkImage(image, docPath(path));
-};
-
-describe("Lighting Image Filters", () => {
-  itRunsE2eOnly("DistantLitDiffuse - Dramatic Relief", async () => {
-    const { skiaLogoPng } = images;
-    const base64 = await surface.eval(
-      (Skia, ctx) => {
-        const sur = Skia.Surface.MakeOffscreen(768, 768)!;
-        const canvas = sur.getCanvas();
-
-        // Create a dark background to enhance contrast
-        const bgPaint = Skia.Paint();
-        bgPaint.setColor(Skia.Color("rgb(20, 20, 30)"));
-        canvas.drawRect(Skia.XYWHRect(0, 0, 768, 768), bgPaint);
-
-        // Create high-contrast emboss effect
-        const paint = Skia.Paint();
-
-        // Pre-process the image with a threshold filter to make shapes more defined
-        // This will help the lighting effect appear more dramatic
-        const inputFilter = Skia.ImageFilter.MakeColorFilter(
-          Skia.ColorFilter.MakeMatrix([
-            1.5,
-            0,
-            0,
-            0,
-            -20, // Increased contrast for red
-            0,
-            1.5,
-            0,
-            0,
-            -20, // Increased contrast for green
-            0,
-            0,
-            1.5,
-            0,
-            -20, // Increased contrast for blue
-            0,
-            0,
-            0,
-            1.2,
-            0, // Slightly boosted alpha
-          ]),
-          null
-        );
-
-        // Direction vector for dramatic side lighting
-        const direction = { x: -3, y: -0.5, z: 0.5 };
-
-        // Light color (stark white for contrast)
-        const lightColor = Skia.Color("rgb(255, 255, 255)");
-
-        // Higher surface scale for more dramatic relief
-        const surfaceScale = 4.0;
-        const kd = 2.5; // Stronger diffuse coefficient
-
-        // Create the distant light diffuse filter
-        const distantLitFilter = Skia.ImageFilter.MakeDistantLitDiffuse(
-          direction,
-          lightColor,
-          surfaceScale,
-          kd,
-          inputFilter, // Use high-contrast image as input
-          null // No crop rect
-        );
-
-        // Set the filter to our paint
-        paint.setImageFilter(distantLitFilter);
-
-        // Add a subtle color tint
-        paint.setColorFilter(
-          Skia.ColorFilter.MakeMatrix([
-            1.2,
-            0,
-            0,
-            0,
-            10, // Boosted red
-            0,
-            1.0,
-            0,
-            0,
-            0, // Normal green
-            0,
-            0,
-            0.8,
-            0,
-            0, // Reduced blue for warmer tone
-            0,
-            0,
-            0,
-            1,
-            0, // Alpha unchanged
-          ])
-        );
-
-        // Draw the image with the dramatic lighting
-        const padding = 30;
-        canvas.drawImageRect(
-          ctx.skiaLogoPng,
-          Skia.XYWHRect(
-            0,
-            0,
-            ctx.skiaLogoPng.width(),
-            ctx.skiaLogoPng.height()
-          ),
-          Skia.XYWHRect(padding, padding, 768 - padding * 2, 768 - padding * 2),
-          paint
-        );
-
-        // Add a subtle vignette effect to enhance depth
-        const vignetteRect = Skia.XYWHRect(-100, -100, 968, 968);
-        const vignettePaint = Skia.Paint();
-        const vignetteShader = Skia.Shader.MakeRadialGradient(
-          { x: 384, y: 384 },
-          500,
-          [Skia.Color("rgba(0,0,0,0)"), Skia.Color("rgba(0,0,0,0.7)")],
-          [0.5, 1.0],
-          ctx.TileMode.Clamp
-        );
-        vignettePaint.setShader(vignetteShader);
-        canvas.drawRect(vignetteRect, vignettePaint);
-
-        sur.flush();
-        return sur.makeImageSnapshot().encodeToBase64();
-      },
-      { skiaLogoPng, TileMode }
-    );
-    checkResult(base64, "lighting-image-filters/distant-lit-diffuse.png");
-  });
-
-  itRunsE2eOnly("PointLitDiffuse - Glowing Core", async () => {
-    const { skiaLogoPng } = images;
-    const base64 = await surface.eval(
-      (Skia, ctx) => {
-        const sur = Skia.Surface.MakeOffscreen(768, 768)!;
-        const canvas = sur.getCanvas();
-
-        // Create a dark background (not completely black) for better visibility
-        const bgPaint = Skia.Paint();
-        bgPaint.setColor(Skia.Color("rgb(10, 10, 15)"));
-        canvas.drawRect(Skia.XYWHRect(0, 0, 768, 768), bgPaint);
-
-        // Create a glowing center effect
-        const paint = Skia.Paint();
-
-        // Position light inside the image for a glowing core effect
-        // Moved light closer to surface (z is now positive)
-        const location = { x: 384, y: 384, z: 200 };
-
-        // Light color (intense orange-yellow for a fiery glow)
-        const lightColor = Skia.Color("rgb(255, 200, 50)");
-
-        // Parameters for the filter
-        const surfaceScale = 2.0; // Height effect
-        const kd = 1.5; // Diffuse reflection strength
-
-        // Create the point light diffuse filter
-        const pointLitFilter = Skia.ImageFilter.MakePointLitDiffuse(
-          location,
-          lightColor,
-          surfaceScale,
-          kd,
-          null, // Use source bitmap as input
-          null // No crop rect
-        );
-
-        // Set the filter to our paint
-        paint.setImageFilter(pointLitFilter);
-
-        // Add a color boost to make the effect more visible
-        paint.setColorFilter(
-          Skia.ColorFilter.MakeMatrix([
-            1.2,
-            0,
-            0,
-            0,
-            20, // Boosted red
-            0,
-            1.1,
-            0,
-            0,
-            10, // Boosted green
-            0,
-            0,
-            1.0,
-            0,
-            0, // Blue unchanged
-            0,
-            0,
-            0,
-            1,
-            0, // Alpha unchanged
-          ])
-        );
-
-        // Draw the image with the glowing core effect
-        canvas.drawImage(ctx.skiaLogoPng, 0, 0, paint);
-
-        // Add a second layer of lighting for more intensity
-        const accentPaint = Skia.Paint();
-        const accentFilter = Skia.ImageFilter.MakePointLitDiffuse(
-          { x: 384, y: 384, z: 50 }, // Closer light source
-          Skia.Color("rgb(255, 255, 200)"), // Brighter light
-          surfaceScale * 0.5,
-          kd * 0.8,
-          null,
-          null
-        );
-
-        accentPaint.setImageFilter(accentFilter);
-        accentPaint.setBlendMode(ctx.BlendMode.Plus); // Additive lighting
-
-        // Draw second layer
-        canvas.drawImage(ctx.skiaLogoPng, 0, 0, accentPaint);
-
-        sur.flush();
-        return sur.makeImageSnapshot().encodeToBase64();
-      },
-      { skiaLogoPng, BlendMode }
-    );
-    checkResult(
-      base64,
-      `lighting-image-filters/point-lit-diffuse-${surface.OS}.png`
-    );
-  });
-
-  itRunsE2eOnly("SpotLitDiffuse - Theatrical Spotlight", async () => {
-    const { skiaLogoPng } = images;
-    const base64 = await surface.eval(
-      (Skia, ctx) => {
-        const sur = Skia.Surface.MakeOffscreen(768, 768)!;
-        const canvas = sur.getCanvas();
-
-        // Fill background with deep black for theatrical effect
-        const bgPaint = Skia.Paint();
-        bgPaint.setColor(Skia.Color("rgb(0, 0, 0)"));
-        canvas.drawRect(Skia.XYWHRect(0, 0, 768, 768), bgPaint);
-
-        // Add a very subtle gradient stage background
-        const stagePaint = Skia.Paint();
-        const stageShader = Skia.Shader.MakeLinearGradient(
-          { x: 0, y: 600 },
-          { x: 0, y: 768 },
-          [
-            Skia.Color("rgba(20, 10, 30, 0)"),
-            Skia.Color("rgba(40, 20, 60, 0.6)"),
-          ],
-          null,
-          ctx.TileMode.Clamp
-        );
-        stagePaint.setShader(stageShader);
-        canvas.drawRect(Skia.XYWHRect(0, 0, 768, 768), stagePaint);
-
-        // Create multiple spotlight effects for dramatic theatre lighting
-        const createSpotlight = (
-          location: { x: number; y: number; z: number },
-          target: { x: number; y: number; z: number },
-          color: SkColor,
-          intensity: number,
-          angle: number
-        ) => {
-          const paint = Skia.Paint();
-
-          // Spotlight parameters
-          const falloffExponent = 2.5; // Sharp falloff
-          const cutoffAngle = angle; // Narrow spotlight cone
-
-          // Light color
-          const lightColor = color;
-
-          // Surface parameters
-          const surfaceScale = 2.0;
-          const kd = intensity; // Strong diffuse coefficient for dramatic effect
-
-          // Create the spotlight diffuse filter
-          const spotLitFilter = Skia.ImageFilter.MakeSpotLitDiffuse(
-            location,
-            target,
-            falloffExponent,
-            cutoffAngle,
-            lightColor,
-            surfaceScale,
-            kd,
-            null, // Use source bitmap as input
-            null // No crop rect
-          );
-
-          // Set the filter and blend mode
-          paint.setImageFilter(spotLitFilter);
-          paint.setBlendMode(ctx.BlendMode.Plus); // Additive lighting
-
-          // Draw the image with spotlight effect
-          canvas.drawImage(ctx.skiaLogoPng, 0, 0, paint);
-        };
-
-        // Main spotlight from top-right
-        createSpotlight(
-          { x: 600, y: 100, z: 400 },
-          { x: 384, y: 384, z: 0 },
-          Skia.Color("rgb(255, 220, 180)"), // Warm white
-          2.5,
-          30.0
-        );
-
-        // Accent light from left
-        createSpotlight(
-          { x: 100, y: 300, z: 300 },
-          { x: 300, y: 384, z: 0 },
-          Skia.Color("rgb(90, 160, 255)"), // Cool blue
-          1.2,
-          40.0
-        );
-
-        // Subtle rim light from below
-        createSpotlight(
-          { x: 384, y: 650, z: 150 },
-          { x: 384, y: 500, z: 0 },
-          Skia.Color("rgb(255, 100, 50)"), // Warm orange/red
-          0.8,
-          60.0
-        );
-
-        // Add volumetric light rays
-        const raysPaint = Skia.Paint();
-        raysPaint.setColor(Skia.Color("rgba(255, 230, 180, 0.2)"));
-
-        // Primary light source position
-        const lightX = 600;
-        const lightY = 100;
-
-        // Draw 12 light rays from the main spotlight
-        for (let i = 0; i < 12; i++) {
-          const angle = (i / 12) * Math.PI * 0.5 + Math.PI * 0.75; // Angles for right-top quadrant
-          const length = 300 + 0.5 * 200;
-          const endX = lightX + Math.cos(angle) * length;
-          const endY = lightY + Math.sin(angle) * length;
-
-          const rayPaint = Skia.Paint();
-          rayPaint.setColor(Skia.Color("rgba(255, 230, 180, 0.1)"));
-          rayPaint.setStrokeWidth(2 + 0.5 * 4);
-          rayPaint.setStyle(ctx.PaintStyle.Stroke);
-          rayPaint.setImageFilter(
-            Skia.ImageFilter.MakeBlur(3, 3, ctx.TileMode.Decal)
-          );
-
-          canvas.drawLine(lightX, lightY, endX, endY, rayPaint);
-        }
-
-        sur.flush();
-        return sur.makeImageSnapshot().encodeToBase64();
-      },
-      { skiaLogoPng, TileMode, BlendMode, PaintStyle }
-    );
-    checkResult(
-      base64,
-      `lighting-image-filters/spot-lit-diffuse-${surface.OS}.png`
-    );
-  });
-
-  itRunsE2eOnly("DistantLitSpecular - Metallic Gold", async () => {
-    const { skiaLogoPng } = images;
-    const base64 = await surface.eval(
-      (Skia, ctx) => {
-        const sur = Skia.Surface.MakeOffscreen(768, 768)!;
-        const canvas = sur.getCanvas();
-
-        // Draw a rich dark background with subtle texture
-        const bgPaint = Skia.Paint();
-        bgPaint.setColor(Skia.Color("rgb(25, 15, 10)"));
-        canvas.drawRect(Skia.XYWHRect(0, 0, 768, 768), bgPaint);
-
-        // Add subtle noise texture to background
-        const noisePaint = Skia.Paint();
-
-        // Use a fine turbulence noise as a background texture
-        for (let y = 0; y < 768; y += 4) {
-          for (let x = 0; x < 768; x += 4) {
-            // Simple noise function
-            const noise = Math.sin(x * 0.1) * Math.cos(y * 0.1) * 0.5 + 0.5;
-            const alpha = noise * 0.15; // Very subtle
-
-            noisePaint.setColor(Skia.Color(`rgba(50, 30, 10, ${alpha})`));
-            canvas.drawRect(Skia.XYWHRect(x, y, 4, 4), noisePaint);
-          }
-        }
-
-        // Create our metallic gold effect
-        const paint = Skia.Paint();
-
-        // Preprocess the image with a blur and contrast enhancement
-        const preprocessFilter = Skia.ImageFilter.MakeColorFilter(
-          Skia.ColorFilter.MakeMatrix([
-            2.0,
-            0,
-            0,
-            0,
-            -50, // High red contrast
-            0,
-            2.0,
-            0,
-            0,
-            -50, // High green contrast
-            0,
-            0,
-            2.0,
-            0,
-            -50, // High blue contrast
-            0,
-            0,
-            0,
-            1,
-            0, // Alpha unchanged
-          ]),
-          Skia.ImageFilter.MakeBlur(1, 1, ctx.TileMode.Decal)
-        );
-
-        // Direction vectors for multiple lights to create more complex highlights
-        const direction = { x: 0.5, y: -1, z: 0.3 };
-
-        // Gold light color with intense highlights
-        const lightColor = Skia.Color("rgb(255, 240, 180)");
-
-        // Parameters for the filter - high shininess for gold
-        const surfaceScale = 0.6; // Not too high for gold
-        const ks = 0.9; // Strong specular coefficient
-        const shininess = 50.0; // Very high shininess for metallic look
-
-        // Create the distant specular filter
-        const specularFilter = Skia.ImageFilter.MakeDistantLitSpecular(
-          direction,
-          lightColor,
-          surfaceScale,
-          ks,
-          shininess,
-          preprocessFilter, // Use enhanced image as input
-          null // No crop rect
-        );
-
-        // Set the filter to our paint
-        paint.setImageFilter(specularFilter);
-
-        // Add a gold color tint
-        const goldMatrix = [
-          1.2,
-          0.3,
-          0.0,
-          0,
-          30, // Boost red with some green mixed in
-          0.2,
-          1.0,
-          0.0,
-          0,
-          20, // Moderate green
-          0.0,
-          0.1,
-          0.4,
-          0,
-          0, // Minimal blue for gold
-          0,
-          0,
-          0,
-          1,
-          0, // Alpha unchanged
-        ];
-
-        const colorFilter = Skia.ColorFilter.MakeMatrix(goldMatrix);
-        paint.setColorFilter(colorFilter);
-
-        // Add a second light from another angle for more complex highlights
-        const secondaryPaint = Skia.Paint();
-        const secondDirection = { x: -0.5, y: -0.8, z: 0.2 };
-
-        const secondaryFilter = Skia.ImageFilter.MakeDistantLitSpecular(
-          secondDirection,
-          Skia.Color("rgb(255, 255, 255)"), // White highlights
-          surfaceScale * 0.5,
-          ks * 0.3,
-          shininess * 1.5, // Even sharper highlights
-          preprocessFilter,
-          null
-        );
-
-        secondaryPaint.setImageFilter(secondaryFilter);
-        secondaryPaint.setBlendMode(ctx.BlendMode.Plus); // Additive blending
-
-        // Draw with padding for a framed effect
-        const padding = 40;
-        const imageRect = Skia.XYWHRect(
-          padding,
-          padding,
-          768 - padding * 2,
-          768 - padding * 2
-        );
-
-        // Create an ornate frame border
-        const framePaint = Skia.Paint();
-        framePaint.setStyle(ctx.PaintStyle.Stroke);
-        framePaint.setStrokeWidth(10);
-        framePaint.setColor(Skia.Color("rgb(80, 50, 10)"));
-        canvas.drawRect(
-          Skia.XYWHRect(
-            padding - 15,
-            padding - 15,
-            768 - padding * 2 + 30,
-            768 - padding * 2 + 30
-          ),
-          framePaint
-        );
-
-        // Add gold leaf effect to frame
-        const frameGoldPaint = Skia.Paint();
-        frameGoldPaint.setStyle(ctx.PaintStyle.Stroke);
-        frameGoldPaint.setStrokeWidth(6);
-        frameGoldPaint.setColor(Skia.Color("rgb(200, 170, 40)"));
-        canvas.drawRect(
-          Skia.XYWHRect(
-            padding - 15,
-            padding - 15,
-            768 - padding * 2 + 30,
-            768 - padding * 2 + 30
-          ),
-          frameGoldPaint
-        );
-
-        // Draw the main image
-        canvas.drawImageRect(
-          ctx.skiaLogoPng,
-          Skia.XYWHRect(
-            0,
-            0,
-            ctx.skiaLogoPng.width(),
-            ctx.skiaLogoPng.height()
-          ),
-          imageRect,
-          paint
-        );
-
-        // Apply secondary highlights
-        canvas.drawImageRect(
-          ctx.skiaLogoPng,
-          Skia.XYWHRect(
-            0,
-            0,
-            ctx.skiaLogoPng.width(),
-            ctx.skiaLogoPng.height()
-          ),
-          imageRect,
-          secondaryPaint
-        );
-
-        sur.flush();
-        return sur.makeImageSnapshot().encodeToBase64();
-      },
-      { skiaLogoPng, TileMode, BlendMode, PaintStyle }
-    );
-    checkResult(base64, "lighting-image-filters/distant-lit-specular.png");
-  });
-
-  itRunsE2eOnly("PointLitSpecular - Wet Surface", async () => {
-    const { skiaLogoPng } = images;
-    const base64 = await surface.eval(
-      (Skia, ctx) => {
-        const sur = Skia.Surface.MakeOffscreen(768, 768)!;
-        const canvas = sur.getCanvas();
-
-        // Create a dark wet-looking surface
-        const bgPaint = Skia.Paint();
-        const bgShader = Skia.Shader.MakeLinearGradient(
-          { x: 0, y: 0 },
-          { x: 768, y: 768 },
-          [Skia.Color("rgb(10, 20, 30)"), Skia.Color("rgb(20, 40, 60)")],
-          null,
-          ctx.TileMode.Clamp
-        );
-        bgPaint.setShader(bgShader);
-        canvas.drawRect(Skia.XYWHRect(0, 0, 768, 768), bgPaint);
-
-        // Add water droplet texture in background
-        const dropletPaint = Skia.Paint();
-        dropletPaint.setColor(Skia.Color("rgba(255, 255, 255, 0.1)"));
-
-        // Random water droplets
-        const numDroplets = 200;
-        for (let i = 0; i < numDroplets; i++) {
-          const x = 0.5 * 768;
-          const y = 0.5 * 768;
-          const size = 1 + 0.5 * 5;
-
-          // Make some droplets blurry for depth
-          if (0.5 > 0.7) {
-            dropletPaint.setImageFilter(
-              Skia.ImageFilter.MakeBlur(
-                1 + 0.5 * 2,
-                1 + 0.5 * 2,
-                ctx.TileMode.Decal
-              )
-            );
-          } else {
-            dropletPaint.setImageFilter(null);
-          }
-
-          canvas.drawCircle(x, y, size, dropletPaint);
-        }
-
-        // Create wet surface effect with high specularity
-        const mainPaint = Skia.Paint();
-
-        // Create the point specular light source
-        const mainLight = { x: 200, y: 200, z: 300 };
-        const specularFilter = Skia.ImageFilter.MakePointLitSpecular(
-          mainLight,
-          Skia.Color("rgb(240, 250, 255)"), // Slightly blue-white for water highlights
-          1.0, // Moderate surface scale
-          1.0, // Full specular strength
-          80.0, // Very high shininess for wet look
-          null,
-          null
-        );
-
-        mainPaint.setImageFilter(specularFilter);
-
-        // Create second light for additional highlights
-        const secondaryPaint = Skia.Paint();
-        const secondLight = { x: 600, y: 400, z: 400 };
-        const secondFilter = Skia.ImageFilter.MakePointLitSpecular(
-          secondLight,
-          Skia.Color("rgb(200, 220, 255)"), // Cooler light
-          0.8,
-          0.7,
-          100.0, // Even higher shininess
-          null,
-          null
-        );
-
-        secondaryPaint.setImageFilter(secondFilter);
-        secondaryPaint.setBlendMode(ctx.BlendMode.Plus);
-
-        // Create diffuse lighting for the base image
-        const diffusePaint = Skia.Paint();
-        const diffuseFilter = Skia.ImageFilter.MakePointLitDiffuse(
-          { x: 384, y: 384, z: 300 },
-          Skia.Color("rgb(150, 160, 170)"), // Soft gray-blue
-          1.5,
-          1.0,
-          null,
-          null
-        );
-
-        diffusePaint.setImageFilter(diffuseFilter);
-
-        // Add a blue-tinted color adjustment for underwater effect
-        diffusePaint.setColorFilter(
-          Skia.ColorFilter.MakeMatrix([
-            0.8, 0.0, 0.0, 0, 0, 0.0, 0.9, 0.1, 0, 0, 0.1, 0.1, 1.0, 0, 20, 0,
-            0, 0, 1, 0,
-          ])
-        );
-
-        // Draw with the base diffuse lighting first
-        canvas.drawImage(ctx.skiaLogoPng, 0, 0, diffusePaint);
-
-        // Draw with specular highlights
-        canvas.drawImage(ctx.skiaLogoPng, 0, 0, mainPaint);
-        canvas.drawImage(ctx.skiaLogoPng, 0, 0, secondaryPaint);
-
-        // Add water flowing/dripping effect
-        const waterStreakPaint = Skia.Paint();
-        waterStreakPaint.setColor(Skia.Color("rgba(220, 230, 255, 0.15)"));
-
-        // Create several water streaks
-        for (let i = 0; i < 8; i++) {
-          const startX = 50 + 0.5 * 700;
-          const startY = 20 + 0.5 * 100;
-          let currentX = startX;
-          let currentY = startY;
-
-          const flowPath = Skia.Path.Make();
-          flowPath.moveTo(currentX, currentY);
-
-          // Create a wavy downward path
-          const length = 100 + 0.5 * 600;
-          const segments = 10 + Math.floor(length / 30);
-
-          for (let j = 0; j < segments; j++) {
-            // Gravity pulls downward
-            currentY += length / segments;
-            // Random side-to-side waviness
-            currentX += (0.5 - 0.5) * 30;
-
-            flowPath.lineTo(currentX, currentY);
-          }
-
-          // Make the water streak taper and blur
-          const streakPaint = Skia.Paint();
-          streakPaint.setStyle(ctx.PaintStyle.Stroke);
-          streakPaint.setColor(Skia.Color("rgba(200, 240, 255, 0.2)"));
-          streakPaint.setStrokeWidth(1 + 0.5 * 3);
-          streakPaint.setImageFilter(
-            Skia.ImageFilter.MakeBlur(1, 1, ctx.TileMode.Decal)
-          );
-
-          canvas.drawPath(flowPath, streakPaint);
-        }
-
-        // Add water puddle at bottom
-        const puddlePaint = Skia.Paint();
-        const puddleShader = Skia.Shader.MakeLinearGradient(
-          { x: 0, y: 600 },
-          { x: 0, y: 768 },
-          [
-            Skia.Color("rgba(40, 80, 120, 0)"),
-            Skia.Color("rgba(40, 80, 120, 0.4)"),
-          ],
-          null,
-          ctx.TileMode.Clamp
-        );
-        puddlePaint.setShader(puddleShader);
-        canvas.drawRect(Skia.XYWHRect(0, 600, 768, 168), puddlePaint);
-
-        sur.flush();
-        return sur.makeImageSnapshot().encodeToBase64();
-      },
-      { skiaLogoPng, BlendMode, TileMode, PaintStyle }
-    );
-    checkResult(
-      base64,
-      `lighting-image-filters/point-lit-specular-${surface.OS}.png`
-    );
-  });
-  itRunsE2eOnly("SpotLitSpecular - Crystal Prism", async () => {
-    const { skiaLogoPng } = images;
-    const base64 = await surface.eval(
-      (Skia, ctx) => {
-        const sur = Skia.Surface.MakeOffscreen(768, 768)!;
-        const canvas = sur.getCanvas();
-
-        // Create a black background for maximum contrast with crystal effect
-        const bgPaint = Skia.Paint();
-        bgPaint.setColor(Skia.Color("rgb(0, 0, 0)"));
-        canvas.drawRect(Skia.XYWHRect(0, 0, 768, 768), bgPaint);
-
-        // Create a "crystal prism" effect with rainbow colors
-
-        // Draw colored ambient light beams in background
-        const beamColors = [
-          "rgba(255, 50, 50, 0.2)", // Red
-          "rgba(255, 150, 50, 0.2)", // Orange
-          "rgba(255, 255, 50, 0.2)", // Yellow
-          "rgba(50, 255, 50, 0.2)", // Green
-          "rgba(50, 150, 255, 0.2)", // Blue
-          "rgba(150, 50, 255, 0.2)", // Purple
-        ];
-
-        // Create rainbow beams
-        for (let i = 0; i < beamColors.length; i++) {
-          const beamPaint = Skia.Paint();
-          beamPaint.setColor(Skia.Color(beamColors[i]));
-
-          // Calculate angle for each beam
-          const angle = (i / beamColors.length) * Math.PI + Math.PI / 2;
-
-          // Create beam path
-          const beamPath = Skia.Path.Make();
-          beamPath.moveTo(384, 384);
-
-          // End coordinates based on angle
-          const endX = 384 + Math.cos(angle) * 900;
-          const endY = 384 + Math.sin(angle) * 900;
-
-          beamPath.lineTo(endX, endY);
-
-          // Draw wide blurred beam
-          beamPaint.setStyle(ctx.PaintStyle.Stroke);
-          beamPaint.setStrokeWidth(60 + i * 10);
-          beamPaint.setImageFilter(
-            Skia.ImageFilter.MakeBlur(20, 20, ctx.TileMode.Decal)
-          );
-
-          canvas.drawPath(beamPath, beamPaint);
-        }
-
-        // Apply crystalline effect to the main image
-        // First, prepare a base with enhanced contrast
-        const basePaint = Skia.Paint();
-        basePaint.setColorFilter(
-          Skia.ColorFilter.MakeMatrix([
-            1.5,
-            0,
-            0,
-            0,
-            -30, // Boosted red
-            0,
-            1.5,
-            0,
-            0,
-            -30, // Boosted green
-            0,
-            0,
-            1.5,
-            0,
-            -30, // Boosted blue
-            0,
-            0,
-            0,
-            1.2,
-            0, // Slightly boosted alpha
-          ])
-        );
-
-        // Draw base layer at reduced size to create crystal border effect
-        const padding = 100;
-        const imageRect = Skia.XYWHRect(
-          padding,
-          padding,
-          768 - padding * 2,
-          768 - padding * 2
-        );
-
-        canvas.drawImageRect(
-          ctx.skiaLogoPng,
-          Skia.XYWHRect(
-            0,
-            0,
-            ctx.skiaLogoPng.width(),
-            ctx.skiaLogoPng.height()
-          ),
-          imageRect,
-          basePaint
-        );
-
-        // Now create multiple specular highlights from different angles
-        // These simulate light refracting through crystal facets
-
-        // Function to create a colored specular highlight
-        const createCrystalFacet = (
-          location: { x: number; y: number; z: number },
-          target: { x: number; y: number; z: number },
-          color: SkColor,
-          cutoffAngle: number,
-          shininess: number
-        ) => {
-          const paint = Skia.Paint();
-
-          // Create the spotlight specular filter
-          const spotLitFilter = Skia.ImageFilter.MakeSpotLitSpecular(
-            location,
-            target,
-            3.0, // Sharp falloff
-            cutoffAngle, // Narrow spotlight cone
-            color, // Colored light
-            1.0, // Surface scale
-            0.9, // Strong specular coefficient
-            shininess, // Very high shininess
-            null, // Use source bitmap as input
-            null // No crop rect
-          );
-
-          // Set the filter and blend mode
-          paint.setImageFilter(spotLitFilter);
-          paint.setBlendMode(ctx.BlendMode.Plus); // Additive lighting
-
-          // Draw the specular highlight
-          canvas.drawImageRect(
-            ctx.skiaLogoPng,
-            Skia.XYWHRect(
-              0,
-              0,
-              ctx.skiaLogoPng.width(),
-              ctx.skiaLogoPng.height()
-            ),
-            imageRect,
-            paint
-          );
-        };
-
-        // Create crystal facets with rainbow colors
-        createCrystalFacet(
-          { x: 500, y: 200, z: 300 },
-          { x: 384, y: 384, z: 0 },
-          Skia.Color("rgb(255, 50, 50)"), // Red
-          25.0,
-          100.0
-        );
-
-        createCrystalFacet(
-          { x: 200, y: 600, z: 300 },
-          { x: 300, y: 384, z: 0 },
-          Skia.Color("rgb(255, 150, 50)"), // Orange
-          30.0,
-          120.0
-        );
-
-        createCrystalFacet(
-          { x: 600, y: 600, z: 300 },
-          { x: 500, y: 400, z: 0 },
-          Skia.Color("rgb(255, 255, 50)"), // Yellow
-          20.0,
-          150.0
-        );
-
-        createCrystalFacet(
-          { x: 200, y: 200, z: 300 },
-          { x: 300, y: 300, z: 0 },
-          Skia.Color("rgb(50, 255, 50)"), // Green
-          15.0,
-          200.0
-        );
-
-        createCrystalFacet(
-          { x: 400, y: 100, z: 300 },
-          { x: 400, y: 300, z: 0 },
-          Skia.Color("rgb(50, 150, 255)"), // Blue
-          25.0,
-          180.0
-        );
-
-        createCrystalFacet(
-          { x: 700, y: 384, z: 300 },
-          { x: 500, y: 384, z: 0 },
-          Skia.Color("rgb(150, 50, 255)"), // Purple
-          20.0,
-          160.0
-        );
-
-        // Add intense white highlights for sharp crystal edges
-        createCrystalFacet(
-          { x: 384, y: 100, z: 400 },
-          { x: 384, y: 384, z: 0 },
-          Skia.Color("rgb(255, 255, 255)"), // Pure white
-          10.0,
-          250.0
-        );
-
-        // Add crystal border effect
-        const borderPaint = Skia.Paint();
-
-        // Create a crystal-like faceted border
-        const borderPath = Skia.Path.Make();
-
-        // Create an irregular crystal shape around the image
-        const centerX = 384;
-        const centerY = 384;
-        const facets = 12;
-
-        borderPath.moveTo(
-          centerX + (padding - 20) * Math.cos(0),
-          centerY + (padding - 20) * Math.sin(0)
-        );
-
-        for (let i = 1; i <= facets; i++) {
-          const angle = (i / facets) * Math.PI * 2;
-
-          // Vary the radius for each facet
-          const radiusVariation = 30 + 0.5 * 40;
-          const radius = padding - 20 + radiusVariation;
-
-          borderPath.lineTo(
-            centerX + radius * Math.cos(angle),
-            centerY + radius * Math.sin(angle)
-          );
-        }
-
-        borderPath.close();
-
-        // Draw crystal border with gradient effect
-        const borderShader = Skia.Shader.MakeLinearGradient(
-          { x: 0, y: 0 },
-          { x: 768, y: 768 },
-          [
-            Skia.Color("rgba(220, 240, 255, 0.6)"),
-            Skia.Color("rgba(180, 220, 255, 0.3)"),
-            Skia.Color("rgba(150, 200, 255, 0.6)"),
-          ],
-          null,
-          ctx.TileMode.Clamp
-        );
-
-        borderPaint.setShader(borderShader);
-        borderPaint.setStyle(ctx.PaintStyle.Stroke);
-        borderPaint.setStrokeWidth(30);
-        borderPaint.setImageFilter(
-          Skia.ImageFilter.MakeBlur(8, 8, ctx.TileMode.Decal)
-        );
-
-        canvas.drawPath(borderPath, borderPaint);
-
-        // Add some star-shaped highlights
-        const starPaint = Skia.Paint();
-        starPaint.setColor(Skia.Color("rgb(255, 255, 255)"));
-
-        const createStar = (x: number, y: number, size: number) => {
-          const starPath = Skia.Path.Make();
-
-          // Draw 4-point star
-          starPath.moveTo(x, y - size);
-          starPath.lineTo(x + size / 4, y - size / 4);
-          starPath.lineTo(x + size, y);
-          starPath.lineTo(x + size / 4, y + size / 4);
-          starPath.lineTo(x, y + size);
-          starPath.lineTo(x - size / 4, y + size / 4);
-          starPath.lineTo(x - size, y);
-          starPath.lineTo(x - size / 4, y - size / 4);
-          starPath.close();
-
-          // Add blur for glow
-          const glowPaint = Skia.Paint();
-          glowPaint.setColor(Skia.Color("rgba(255, 255, 255, 0.8)"));
-          glowPaint.setImageFilter(
-            Skia.ImageFilter.MakeBlur(size / 4, size / 4, ctx.TileMode.Decal)
-          );
-
-          canvas.drawPath(starPath, glowPaint);
-
-          // Draw sharp center
-          const centerPaint = Skia.Paint();
-          centerPaint.setColor(Skia.Color("rgb(255, 255, 255)"));
-          canvas.drawCircle(x, y, size / 10, centerPaint);
-        };
-
-        // Add several highlight stars
-        createStar(150, 200, 20);
-        createStar(600, 150, 15);
-        createStar(500, 600, 25);
-        createStar(200, 500, 18);
-        createStar(350, 250, 12);
-
-        sur.flush();
-        return sur.makeImageSnapshot().encodeToBase64();
-      },
-      { skiaLogoPng, BlendMode, TileMode, PaintStyle }
-    );
-    checkResult(
-      base64,
-      `lighting-image-filters/spot-lit-specular-${surface.OS}.png`
-    );
-  });
-
-  itRunsE2eOnly("Combined Lighting - Elemental Fire & Ice", async () => {
-    const { skiaLogoPng } = images;
-    const base64 = await surface.eval(
-      (Skia, ctx) => {
-        const sur = Skia.Surface.MakeOffscreen(768, 768)!;
-        const canvas = sur.getCanvas();
-
-        // Fill with dark background
-        const bgPaint = Skia.Paint();
-        bgPaint.setColor(Skia.Color("rgb(5, 10, 20)"));
-        canvas.drawRect(Skia.XYWHRect(0, 0, 768, 768), bgPaint);
-
-        // Create a split-screen effect with fire and ice
-
-        // First, create a mask for each half
-        const leftMask = Skia.Path.Make();
-        leftMask.addRect(Skia.XYWHRect(0, 0, 384, 768));
-
-        const rightMask = Skia.Path.Make();
-        rightMask.addRect(Skia.XYWHRect(384, 0, 384, 768));
-
-        // Prepare the image with enhanced contrast
-        const preprocessFilter = Skia.ImageFilter.MakeColorFilter(
-          Skia.ColorFilter.MakeMatrix([
-            1.8,
-            0,
-            0,
-            0,
-            -40, // High contrast red
-            0,
-            1.8,
-            0,
-            0,
-            -40, // High contrast green
-            0,
-            0,
-            1.8,
-            0,
-            -40, // High contrast blue
-            0,
-            0,
-            0,
-            1.2,
-            0, // Slightly boosted alpha
-          ]),
-          Skia.ImageFilter.MakeBlur(1, 1, ctx.TileMode.Decal)
-        );
-
-        // ******** FIRE SIDE (LEFT) ********
-        canvas.save();
-        canvas.clipPath(leftMask, ctx.ClipOp.Intersect, true);
-
-        // Create fiery background
-        const fireBgPaint = Skia.Paint();
-        const fireShader = Skia.Shader.MakeLinearGradient(
-          { x: 0, y: 768 },
-          { x: 384, y: 0 },
-          [
-            Skia.Color("rgb(80, 0, 0)"),
-            Skia.Color("rgb(180, 30, 0)"),
-            Skia.Color("rgb(255, 150, 0)"),
-          ],
-          [0.2, 0.5, 0.9],
-          ctx.TileMode.Clamp
-        );
-        fireBgPaint.setShader(fireShader);
-        canvas.drawRect(Skia.XYWHRect(0, 0, 384, 768), fireBgPaint);
-
-        // Draw stylized flames in background
-        const drawFlame = (
-          x: number,
-          y: number,
-          width: number,
-          height: number
-        ) => {
-          const flamePath = Skia.Path.Make();
-
-          // Start at bottom center
-          flamePath.moveTo(x, y + height);
-
-          // Define control points for bezier curve
-          // Left side of flame
-          flamePath.cubicTo(
-            x - width * 0.5,
-            y + height * 0.7, // Control point 1
-            x - width * 0.2,
-            y + height * 0.3, // Control point 2
-            x,
-            y // End point (top of flame)
-          );
-
-          // Right side of flame
-          flamePath.cubicTo(
-            x + width * 0.2,
-            y + height * 0.3, // Control point 1
-            x + width * 0.5,
-            y + height * 0.7, // Control point 2
-            x,
-            y + height // End point (back to start)
-          );
-
-          // Fill with gradient
-          const flamePaint = Skia.Paint();
-          const flameShader = Skia.Shader.MakeLinearGradient(
-            { x: x, y: y + height },
-            { x: x, y: y },
-            [
-              Skia.Color("rgb(255, 60, 0)"),
-              Skia.Color("rgb(255, 150, 0)"),
-              Skia.Color("rgb(255, 220, 120)"),
-            ],
-            [0.2, 0.6, 0.9],
-            ctx.TileMode.Clamp
-          );
-          flamePaint.setShader(flameShader);
-
-          // Add glow with blur
-          flamePaint.setImageFilter(
-            Skia.ImageFilter.MakeBlur(
-              width * 0.1,
-              width * 0.1,
-              ctx.TileMode.Decal
-            )
-          );
-
-          canvas.drawPath(flamePath, flamePaint);
-        };
-
-        // Draw multiple flames
-        for (let i = 0; i < 8; i++) {
-          const x = 50 + 0.5 * 300;
-          const baseHeight = 200 + 0.5 * 300;
-          drawFlame(x, 768 - baseHeight, 20 + 0.5 * 50, baseHeight);
-        }
-
-        // Create fire lighting with composite of diffuse and specular
-
-        // Create fiery diffuse lighting from below
-        const fireLight = { x: 200, y: 700, z: 100 };
-        const fireColor = Skia.Color("rgb(255, 180, 50)");
-
-        const fireDiffuseFilter = Skia.ImageFilter.MakePointLitDiffuse(
-          fireLight,
-          fireColor,
-          2.0, // Exaggerated surface scale
-          2.0, // Strong diffuse
-          preprocessFilter, // Use preprocessed image
-          null
-        );
-
-        // Create specular highlights for embers and sparks
-        const fireSpecularFilter = Skia.ImageFilter.MakePointLitSpecular(
-          { x: 150, y: 550, z: 200 },
-          Skia.Color("rgb(255, 230, 150)"),
-          1.0,
-          0.7,
-          50.0, // High shininess for sparks
-          preprocessFilter,
-          null
-        );
-
-        // Combine diffuse and specular with Plus blending
-        const fireFilter = Skia.ImageFilter.MakeBlend(
-          ctx.BlendMode.Plus,
-          fireDiffuseFilter,
-          fireSpecularFilter
-        );
-
-        // Create the fire paint
-        const firePaint = Skia.Paint();
-        firePaint.setImageFilter(fireFilter);
-
-        // Add fiery color tint
-        firePaint.setColorFilter(
-          Skia.ColorFilter.MakeMatrix([
-            1.5,
-            0.3,
-            0.1,
-            0,
-            20, // Strong red
-            0.2,
-            1.0,
-            0.1,
-            0,
-            0, // Moderate green
-            0.0,
-            0.1,
-            0.5,
-            0,
-            -20, // Reduced blue
-            0,
-            0,
-            0,
-            1,
-            0, // Alpha unchanged
-          ])
-        );
-
-        // Draw the image with fire effect
-        canvas.drawImage(ctx.skiaLogoPng, 0, 0, firePaint);
-
-        // Add ember particles
-        const emberPaint = Skia.Paint();
-
-        for (let i = 0; i < 60; i++) {
-          const x = 0.5 * 384;
-          const y = 300 + 0.5 * 468;
-          const size = 1 + 0.5 * 3;
-
-          const brightness = 150 + 0.5 * 105;
-          emberPaint.setColor(
-            Skia.Color(`rgba(${brightness}, ${brightness * 0.6}, 0, 0.8)`)
-          );
-
-          // Add glow to some embers
-          if (0.5 > 0.6) {
-            emberPaint.setImageFilter(
-              Skia.ImageFilter.MakeBlur(size * 2, size * 2, ctx.TileMode.Decal)
-            );
-          } else {
-            emberPaint.setImageFilter(null);
-          }
-
-          canvas.drawCircle(x, y, size, emberPaint);
-        }
-
-        canvas.restore();
-
-        // ******** ICE SIDE (RIGHT) ********
-        canvas.save();
-        canvas.clipPath(rightMask, ctx.ClipOp.Intersect, true);
-
-        // Create icy background
-        const iceBgPaint = Skia.Paint();
-        const iceShader = Skia.Shader.MakeLinearGradient(
-          { x: 768, y: 768 },
-          { x: 384, y: 0 },
-          [
-            Skia.Color("rgb(0, 20, 50)"),
-            Skia.Color("rgb(30, 70, 120)"),
-            Skia.Color("rgb(180, 220, 255)"),
-          ],
-          [0.2, 0.5, 0.9],
-          ctx.TileMode.Clamp
-        );
-        iceBgPaint.setShader(iceShader);
-        canvas.drawRect(Skia.XYWHRect(384, 0, 384, 768), iceBgPaint);
-
-        // Draw ice crystals in background
-        const drawCrystal = (
-          x: number,
-          y: number,
-          size: number,
-          rotation: number
-        ) => {
-          const crystalPaint = Skia.Paint();
-          crystalPaint.setColor(Skia.Color("rgba(200, 230, 255, 0.4)"));
-
-          // Save canvas state for rotation
-          canvas.save();
-          canvas.translate(x, y);
-          canvas.rotate(rotation, 0, 0);
-
-          // Draw crystal shape
-          const crystalPath = Skia.Path.Make();
-          crystalPath.moveTo(0, -size); // Top
-          crystalPath.lineTo(size / 3, -size / 2); // Upper right
-          crystalPath.lineTo(size / 2, size / 2); // Lower right
-          crystalPath.lineTo(0, size); // Bottom
-          crystalPath.lineTo(-size / 2, size / 2); // Lower left
-          crystalPath.lineTo(-size / 3, -size / 2); // Upper left
-          crystalPath.close();
-
-          // Add light refraction effect
-          crystalPaint.setImageFilter(
-            Skia.ImageFilter.MakeBlur(
-              size * 0.1,
-              size * 0.1,
-              ctx.TileMode.Decal
-            )
-          );
-
-          canvas.drawPath(crystalPath, crystalPaint);
-
-          // Add highlight
-          const highlightPaint = Skia.Paint();
-          highlightPaint.setColor(Skia.Color("rgba(255, 255, 255, 0.7)"));
-
-          const highlightPath = Skia.Path.Make();
-          highlightPath.moveTo(0, -size * 0.8);
-          highlightPath.lineTo(size / 5, -size / 3);
-          highlightPath.lineTo(-size / 5, -size / 3);
-          highlightPath.close();
-
-          canvas.drawPath(highlightPath, highlightPaint);
-
-          // Restore canvas
-          canvas.restore();
-        };
-
-        // Draw multiple crystals
-        for (let i = 0; i < 15; i++) {
-          const x = 384 + 0.5 * 384;
-          const y = 0.5 * 768;
-          const size = 20 + 0.5 * 60;
-          const rotation = 0.5 * 360;
-
-          drawCrystal(x, y, size, rotation);
-        }
-
-        // Create ice lighting with diffuse and specular
-
-        // Create ice diffuse lighting from top
-        const iceLight = { x: 600, y: 100, z: 200 };
-        const iceColor = Skia.Color("rgb(200, 230, 255)");
-
-        const iceDiffuseFilter = Skia.ImageFilter.MakePointLitDiffuse(
-          iceLight,
-          iceColor,
-          1.5, // Moderate surface scale
-          1.2, // Strong diffuse
-          preprocessFilter, // Use preprocessed image
-          null
-        );
-
-        // Create specular highlights for ice crystals
-        const iceSpecularFilter = Skia.ImageFilter.MakePointLitSpecular(
-          { x: 620, y: 200, z: 300 },
-          Skia.Color("rgb(240, 250, 255)"),
-          1.0,
-          0.8,
-          80.0, // Very high shininess for ice
-          preprocessFilter,
-          null
-        );
-
-        // Combine diffuse and specular with Screen blending
-        const iceFilter = Skia.ImageFilter.MakeBlend(
-          ctx.BlendMode.Screen,
-          iceDiffuseFilter,
-          iceSpecularFilter
-        );
-
-        // Create the ice paint
-        const icePaint = Skia.Paint();
-        icePaint.setImageFilter(iceFilter);
-
-        // Add icy color tint
-        icePaint.setColorFilter(
-          Skia.ColorFilter.MakeMatrix([
-            0.7,
-            0.0,
-            0.0,
-            0,
-            -20, // Reduced red
-            0.0,
-            0.9,
-            0.2,
-            0,
-            0, // Boosted green slightly
-            0.2,
-            0.3,
-            1.2,
-            0,
-            30, // Strong blue
-            0,
-            0,
-            0,
-            1,
-            0, // Alpha unchanged
-          ])
-        );
-
-        // Draw the image with ice effect
-        canvas.drawImage(ctx.skiaLogoPng, 0, 0, icePaint);
-
-        // Add snowflake particles
-        const snowPaint = Skia.Paint();
-        snowPaint.setColor(Skia.Color("rgba(255, 255, 255, 0.8)"));
-
-        for (let i = 0; i < 60; i++) {
-          const x = 384 + 0.5 * 384;
-          const y = 0.5 * 768;
-          const size = 1 + 0.5 * 3;
-
-          // Add glow to some snowflakes
-          if (0.5 > 0.7) {
-            snowPaint.setImageFilter(
-              Skia.ImageFilter.MakeBlur(size * 2, size * 2, ctx.TileMode.Decal)
-            );
-            canvas.drawCircle(x, y, size * 1.5, snowPaint);
-          } else {
-            snowPaint.setImageFilter(null);
-            canvas.drawCircle(x, y, size, snowPaint);
-          }
-        }
-
-        canvas.restore();
-
-        // Draw dividing line with glowing effect
-        const dividerPaint = Skia.Paint();
-        const dividerShader = Skia.Shader.MakeLinearGradient(
-          { x: 384 - 20, y: 0 },
-          { x: 384 + 20, y: 0 },
-          [
-            Skia.Color("rgba(255, 120, 0, 0.7)"),
-            Skia.Color("rgba(255, 255, 255, 1.0)"),
-            Skia.Color("rgba(100, 180, 255, 0.7)"),
-          ],
-          [0.0, 0.5, 1.0],
-          ctx.TileMode.Clamp
-        );
-        dividerPaint.setShader(dividerShader);
-        dividerPaint.setImageFilter(
-          Skia.ImageFilter.MakeBlur(10, 10, ctx.TileMode.Decal)
-        );
-
-        canvas.drawRect(Skia.XYWHRect(384 - 5, 0, 10, 768), dividerPaint);
-
-        sur.flush();
-        return sur.makeImageSnapshot().encodeToBase64();
-      },
-      { skiaLogoPng, BlendMode, TileMode, PaintStyle, ClipOp }
-    );
-    checkResult(
-      base64,
-      `lighting-image-filters/combined-lighting-fire-ice-${surface.OS}.png`
-    );
-  });
-});