Next gen UI

[domesticmouse]

First cut at steps. Some of these steps are massive, but I need help in figuring out sane sub-steps.

Pre-launch Checklist

• I read the Effective Dart: Style recently, and have followed its advice.
• I signed the CLA.
• I updated/added relevant documentation (doc comments with ///).
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-devrel channel on Discord.

[jonahwilliams]

No ios directory?

[jonahwilliams]

The shaders have unused uniforms which is causing runtime problems with impeller. I'd recommend cleaning those up

[jonahwilliams]

This doesn't currently run on simulators because it has too many bindings.

[jonahwilliams]

I can no longer find the right line of code to comment on, feel free to address after landing. To make this work on iOS simulators:

--- a/next-gen-ui/final/assets/shaders/orb_shader.frag
+++ b/next-gen-ui/final/assets/shaders/orb_shader.frag
@@ -13,11 +13,12 @@ precision highp float;
 #define RAY_STEPS 30
 
 uniform vec2 uResolution;
-uniform float uTime;
-uniform vec2 uMouse;
-uniform float uExposure;
-uniform float uFov;
-uniform float uRoughness;
+uniform vec4 uPackedData;
+float uTime = uPackedData[0];
+float uExposure = uPackedData[1];
+float uFov = uPackedData[2];
+float uRoughness = uPackedData[3];
+

[jonahwilliams]

Replace the guts of the litimage with the following, essentially removing the color filter.

  @override
  Widget build(BuildContext context) {
    final hsl = HSLColor.fromColor(color);

    return Image.asset(imgSrc, color: hsl.withLightness(hsl.lightness * energy).toColor(), colorBlendMode: BlendMode.modulate);
  }

[jonahwilliams]

Another issue: almost all of these images are too big when running on a iPhone 13:

Another exception was thrown: Image assets/images/fg-light-receive.png has a display size of 2080×1170 but a decode size of 3840×2160, which uses an additional 30525KB
(assuming a device pixel ratio of 3.0).
Another exception was thrown: Image assets/images/fg-light-emit.png has a display size of 2080×1170 but a decode size of 3840×2160, which uses an additional 30525KB
(assuming a device pixel ratio of 3.0).
Another exception was thrown: Image assets/images/bg-base.jpg has a display size of 2080×1170 but a decode size of 3840×2160, which uses an additional 30525KB (assuming a
device pixel ratio of 3.0).
Another exception was thrown: Image assets/images/bg-light-receive.png has a display size of 2080×1170 but a decode size of 3840×2160, which uses an additional 30525KB
(assuming a device pixel ratio of 3.0).
Another exception was thrown: Image assets/images/mg-base.png has a display size of 2080×1170 but a decode size of 3840×2160, which uses an additional 30525KB (assuming a
device pixel ratio of 3.0).
Another exception was thrown: Image assets/images/mg-light-receive.png has a display size of 2080×1170 but a decode size of 3840×2160, which uses an additional 30525KB
(assuming a device pixel ratio of 3.0).
Another exception was thrown: Image assets/images/mg-light-emit.png has a display size of 2080×1170 but a decode size of 3840×2160, which uses an additional 30525KB
(assuming a device pixel ratio of 3.0).
Another exception was thrown: Image assets/images/fg-base.png has a display size of 2080×1170 but a decode size of 3840×2160, which uses an additional 30525KB (assuming a
device pixel ratio of 3.0).

[jonahwilliams]

like waaaay too big

[domesticmouse]

like waaaay too big

Images will get shrunk to a width of 2080

[jonahwilliams]

You could use the resize image API to do it at runtime, but I'd also recommend adding 1x 2x 3x variants if possible?

[domesticmouse]

PTAL @jonahwilliams, I've added the Android and iOS runners, and turned on Impeller for iOS. It runs in the iPad simulator on my machine, with the modifications you suggested to the orb shader

[domesticmouse]

PTAL @RedBrogdon @craiglabenz, I'd love an LGTM so I can land this =)

[jonahwilliams]

LGTM