Merge pull request #2 from PlugFox/feature/shaders-hello-world

Feature/shaders hello world

.vscode/extensions.json

@@ -3,5 +3,7 @@
     "dart-code.dart-code",
     "Dart-Code.flutter",
     "github.vscode-github-actions",
+    "raczzalan.webgl-glsl-editor",
+    "circledev.glsl-canvas"
   ]
 }

.vscode/launch.json

@@ -12,6 +12,18 @@
         "--dart-define-from-file=config/development.json",
       ],
       "env": {}
+    },
+    {
+      "name": "Example (Release)",
+      "type": "dart",
+      "program": "lib/main.dart",
+      "request": "launch",
+      "flutterMode": "release",
+      "cwd": "${workspaceFolder}/example",
+      "args": [
+        "--dart-define-from-file=config/development.json",
+      ],
+      "env": {}
     }
   ]
 }

.vscode/settings.json

@@ -64,7 +64,7 @@
     ".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*",
     "readme.*": "authors, backers.md, changelog*, citation*, code_of_conduct.md, codeowners, contributing.md, contributors, copying, credits, governance.md, history.md, license*, maintainers, readme*, security.md, sponsors.md",
     "*.dart": "$(capture).g.dart, $(capture).freezed.dart, $(capture).config.dart"
-  }
+  },
   /* "files.associations": {
     "*.drift": "sql"
   }, */
@@ -80,5 +80,19 @@
         }
       ]
     }
-  } */
+  }, */
+  // -- Shaders -- //
+  "glsl-canvas.refreshOnChange": false,
+  "glsl-canvas.refreshOnSave": true,
+  "[glsl]": {
+    "editor.defaultFormatter": "raczzalan.webgl-glsl-editor"
+  },
+  "[frag]": {
+    "editor.defaultFormatter": "raczzalan.webgl-glsl-editor"
+  },
+  "[vert]": {
+    "editor.defaultFormatter": "raczzalan.webgl-glsl-editor"
+  },
+  "editor.defaultFormatter": "raczzalan.webgl-glsl-editor",
+  "notebook.defaultFormatter": "raczzalan.webgl-glsl-editor",
 }

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.3
+
+- Updated Frame Limiter logic
+
 ## 0.0.2
 
 - Added example project

Makefile

@@ -46,7 +46,7 @@ deploy-check: publish-check
 
 .PHONY: publish
 publish: ## Publish the package
-	@yes | flutter pub publish
+	@flutter pub publish
 
 .PHONY: deploy
 deploy: publish

example/ios/Flutter/Debug.xcconfig

@@ -1 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
 #include "Generated.xcconfig"

example/ios/Flutter/Release.xcconfig

@@ -1 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"
 #include "Generated.xcconfig"

example/ios/Podfile

@@ -0,0 +1,44 @@
+# Uncomment this line to define a global platform for your project
+# platform :ios, '12.0'
+
+# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
+ENV['COCOAPODS_DISABLE_STATS'] = 'true'
+
+project 'Runner', {
+  'Debug' => :debug,
+  'Profile' => :release,
+  'Release' => :release,
+}
+
+def flutter_root
+  generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'Generated.xcconfig'), __FILE__)
+  unless File.exist?(generated_xcode_build_settings_path)
+    raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure flutter pub get is executed first"
+  end
+
+  File.foreach(generated_xcode_build_settings_path) do |line|
+    matches = line.match(/FLUTTER_ROOT\=(.*)/)
+    return matches[1].strip if matches
+  end
+  raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Generated.xcconfig, then run flutter pub get"
+end
+
+require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)
+
+flutter_ios_podfile_setup
+
+target 'Runner' do
+  use_frameworks!
+  use_modular_headers!
+
+  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
+  target 'RunnerTests' do
+    inherit! :search_paths
+  end
+end
+
+post_install do |installer|
+  installer.pods_project.targets.each do |target|
+    flutter_additional_ios_build_settings(target)
+  end
+end

example/lib/src/common/widget/routes.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:repaintexample/src/feature/clock/clock_screen.dart';
+import 'package:repaintexample/src/feature/fps/fps_screen.dart';
 import 'package:repaintexample/src/feature/home/home_screen.dart';
+import 'package:repaintexample/src/feature/shaders/fragment_shaders_screen.dart';
 
 /// The routes to navigate to.
 final Map<String, Page<void> Function(Map<String, Object?>?)> $routes =
@@ -15,4 +17,14 @@ final Map<String, Page<void> Function(Map<String, Object?>?)> $routes =
         child: const ClockScreen(),
         arguments: arguments,
       ),
+  'fragment-shaders': (arguments) => MaterialPage<void>(
+        name: 'fragment-shaders',
+        child: const FragmentShadersScreen(),
+        arguments: arguments,
+      ),
+  'fps': (arguments) => MaterialPage<void>(
+        name: 'fps',
+        child: const FpsScreen(),
+        arguments: arguments,
+      ),
 };

example/lib/src/feature/clock/clock_screen.dart

@@ -18,100 +18,110 @@ class ClockScreen extends StatelessWidget {
           ),
         ),
         body: SafeArea(
-          child: Center(
-            child: RePaint.inline<Paint>(
-              frameRate: 1,
-              setUp: (box) => Paint()
-                ..color = Colors.black
-                ..style = PaintingStyle.stroke
-                ..strokeWidth = 2,
-              render: (box, paint, canvas) {
-                final size = box.size; // Get the size of the box
-                final now = DateTime.now(); // Get the current time
+          child: Padding(
+            padding: const EdgeInsets.all(16),
+            child: Center(
+              child: AspectRatio(
+                aspectRatio: 1,
+                child: RePaint.inline<Paint>(
+                  frameRate: 6,
+                  setUp: (box) => Paint()..style = PaintingStyle.stroke,
+                  render: (box, paint, canvas) {
+                    final size = box.size; // Get the size of the box
+                    final now = DateTime.now(); // Get the current time
 
-                final center = size.center(Offset.zero);
-                final radius = size.shortestSide / 3;
+                    final center = size.center(Offset.zero);
+                    final radius = size.shortestSide / 2 - 8;
 
-                // Draw the clock face
-                canvas.drawCircle(center, radius, paint);
+                    // Draw the clock face
+                    canvas.drawCircle(
+                      center,
+                      radius,
+                      paint
+                        ..color = Colors.black
+                        ..strokeWidth = 2,
+                    );
+
+                    final textPainter = TextPainter(
+                      textAlign: TextAlign.center,
+                      textDirection: TextDirection.ltr,
+                    );
 
-                final textPainter = TextPainter(
-                  textAlign: TextAlign.center,
-                  textDirection: TextDirection.ltr,
-                );
+                    // Draw the clock numbers
+                    for (int i = 1; i <= 12; i++) {
+                      final angle =
+                          math.pi / 6 * (i - 3); // Positioning the numbers
+                      final numberPosition = Offset(
+                        center.dx + radius * 0.8 * math.cos(angle),
+                        center.dy + radius * 0.8 * math.sin(angle),
+                      );
 
-                // Draw the clock numbers
-                for (int i = 1; i <= 12; i++) {
-                  final angle =
-                      math.pi / 6 * (i - 3); // Positioning the numbers
-                  final numberPosition = Offset(
-                    center.dx + radius * 0.8 * math.cos(angle),
-                    center.dy + radius * 0.8 * math.sin(angle),
-                  );
+                      textPainter
+                        ..text = TextSpan(
+                          text: '$i',
+                          style: TextStyle(
+                            color: Colors.black,
+                            fontSize: radius * 0.15,
+                          ),
+                        )
+                        ..layout()
+                        ..paint(
+                          canvas,
+                          numberPosition -
+                              Offset(textPainter.width / 2,
+                                  textPainter.height / 2),
+                        );
+                    }
 
-                  textPainter
-                    ..text = TextSpan(
-                      text: '$i',
-                      style: TextStyle(
-                        color: Colors.black,
-                        fontSize: radius * 0.15,
+                    // Draw the hour hand
+                    final hourAngle =
+                        math.pi / 6 * (now.hour % 12 + now.minute / 60) -
+                            math.pi / 2;
+                    final hourHandLength = radius * 0.5;
+                    paint
+                      ..color = Colors.black
+                      ..strokeWidth = 4;
+                    canvas.drawLine(
+                      center,
+                      Offset(
+                        center.dx + hourHandLength * math.cos(hourAngle),
+                        center.dy + hourHandLength * math.sin(hourAngle),
                       ),
-                    )
-                    ..layout()
-                    ..paint(
-                      canvas,
-                      numberPosition -
-                          Offset(textPainter.width / 2, textPainter.height / 2),
+                      paint,
                     );
-                }
-
-                // Draw the hour hand
-                final hourAngle =
-                    math.pi / 6 * (now.hour % 12 + now.minute / 60) -
-                        math.pi / 2;
-                final hourHandLength = radius * 0.5;
-                paint
-                  ..color = Colors.black
-                  ..strokeWidth = 4;
-                canvas.drawLine(
-                  center,
-                  Offset(
-                    center.dx + hourHandLength * math.cos(hourAngle),
-                    center.dy + hourHandLength * math.sin(hourAngle),
-                  ),
-                  paint,
-                );
 
-                // Draw the minute hand
-                final minuteAngle = math.pi / 30 * now.minute - math.pi / 2;
-                final minuteHandLength = radius * 0.7;
-                paint
-                  ..color = Colors.blue
-                  ..strokeWidth = 3;
-                canvas.drawLine(
-                  center,
-                  Offset(
-                    center.dx + minuteHandLength * math.cos(minuteAngle),
-                    center.dy + minuteHandLength * math.sin(minuteAngle),
-                  ),
-                  paint,
-                );
+                    // Draw the minute hand
+                    final minuteAngle = math.pi / 30 * now.minute - math.pi / 2;
+                    final minuteHandLength = radius * 0.7;
+                    paint
+                      ..color = Colors.blue
+                      ..strokeWidth = 3;
+                    canvas.drawLine(
+                      center,
+                      Offset(
+                        center.dx + minuteHandLength * math.cos(minuteAngle),
+                        center.dy + minuteHandLength * math.sin(minuteAngle),
+                      ),
+                      paint,
+                    );
 
-                // Draw the second hand
-                final secondAngle = math.pi / 30 * now.second - math.pi / 2;
-                final secondHandLength = radius * 0.9;
-                paint
-                  ..color = Colors.red
-                  ..strokeWidth = 2;
-                canvas.drawLine(
-                  center,
-                  Offset(
-                    center.dx + secondHandLength * math.cos(secondAngle),
-                    center.dy + secondHandLength * math.sin(secondAngle),
-                  ),
-                  paint,
-                );
-              },
+                    // Draw the second hand
+                    final secondAngle = math.pi / 30 * now.second - math.pi / 2;
+                    final secondHandLength = radius * 0.9;
+                    paint
+                      ..color = Colors.red
+                      ..strokeWidth = 2;
+                    canvas.drawLine(
+                      center,
+                      Offset(
+                        center.dx + secondHandLength * math.cos(secondAngle),
+                        center.dy + secondHandLength * math.sin(secondAngle),
+                      ),
+                      paint,
+                    );
+                  },
+                ),
+              ),
             ),
           ),
         ),