发布于 由admin

Flutter 3D 渲染尝试：使用 Vertices 与 Texture Coordinates 绘制自定义多边形

好的，我们开始吧。

Flutter 3D 渲染尝试：使用 Vertices 与 Texture Coordinates 绘制自定义多边形

大家好，今天我们来深入探讨一下在 Flutter 中进行 3D 渲染的一种方法：使用 Vertices 和 Texture Coordinates 绘制自定义多边形。 虽然 Flutter 本身并没有内置的 3D 渲染引擎（例如 OpenGL 或 DirectX），但我们可以利用其底层的 Canvas API 和自定义 painters 来实现一些基本的 3D 效果。 这次讲座将涵盖以下几个方面：

  1. 理解 Vertices 类： Vertices 类是 Flutter 中用于描述多边形几何形状的关键。 我们将详细了解其构造函数参数，以及如何使用它来定义顶点位置、颜色和纹理坐标。

  2. 纹理坐标 (Texture Coordinates) 的重要性： 纹理坐标决定了纹理图像如何映射到多边形表面。 我们将学习如何正确设置纹理坐标，以避免纹理扭曲或拉伸。

  3. 使用 CustomPainter 进行绘制： CustomPainter 允许我们完全控制 Flutter Canvas 上的绘制过程。 我们将创建一个自定义 painter，它使用 Vertices 对象和纹理图像来绘制 3D 多边形。

  4. 实现简单的 3D 旋转： 为了让我们的多边形看起来更像 3D 对象，我们将实现一个简单的旋转动画。

  5. 性能考量： 在 Flutter 中进行自定义渲染可能会消耗大量的计算资源。 我们将讨论一些优化技巧，以提高渲染性能。

1. 理解 Vertices 类

Vertices 类是 Flutter 提供的用于定义多边形的类。 它包含顶点数据、颜色数据和纹理坐标数据。 让我们看一下 Vertices 类的构造函数：

Vertices(
  VertexMode mode,
  List<Offset> positions, {
  List<Color>? colors,
  List<Offset>? textureCoordinates,
  List<int>? indices,
})

参数解释：

  • mode: VertexMode 枚举，指定如何解释顶点数据。 常用的值包括：
    • VertexMode.triangles: 将顶点数据解释为三角形列表。 每三个顶点定义一个三角形。
    • VertexMode.triangleStrip: 将顶点数据解释为三角形带。 前三个顶点定义第一个三角形，随后的每个顶点都与前两个顶点一起定义一个新的三角形。
    • VertexMode.triangleFan: 将顶点数据解释为三角形扇。 第一个顶点作为扇的中心，随后的每个顶点都与中心顶点和前一个顶点一起定义一个新的三角形。
  • positions: List<Offset>，包含每个顶点的 2D 坐标 (x, y)。 坐标值相对于 Canvas 的左上角。
  • colors: List<Color>?，可选参数，包含每个顶点的颜色。 如果提供了颜色数据，则每个顶点都会根据其对应的颜色进行着色。 如果没有提供，则使用默认颜色。
  • textureCoordinates: List<Offset>?，可选参数，包含每个顶点的纹理坐标。 纹理坐标是介于 0.0 和 1.0 之间的值，用于指定纹理图像上的哪个区域映射到该顶点。
  • indices: List<int>?，可选参数，包含顶点索引。 如果提供了索引数据，则可以使用它来重用顶点数据，从而减少内存占用。

代码示例：创建一个简单的三角形

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomPaint(
            painter: MyPainter(),
          ),
        ),
      ),
    ),
  );
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final vertices = Vertices(
      VertexMode.triangles,
      [
        Offset(size.width / 2, size.height / 4), // Top
        Offset(size.width / 4, size.height * 3 / 4), // Bottom Left
        Offset(size.width * 3 / 4, size.height * 3 / 4), // Bottom Right
      ],
      colors: [
        Colors.red,
        Colors.green,
        Colors.blue,
      ],
    );

    final paint = Paint();
    canvas.drawVertices(vertices, BlendMode.srcOver, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

在这个例子中，我们创建了一个简单的三角形，并为每个顶点指定了不同的颜色。 drawVertices 方法用于在 Canvas 上绘制 Vertices 对象。

2. 纹理坐标 (Texture Coordinates) 的重要性

纹理坐标 (通常称为 UV 坐标) 是用于将纹理图像映射到多边形表面的值。 它们是介于 0.0 和 1.0 之间的浮点数，分别表示纹理图像的水平 (U) 和垂直 (V) 坐标。

  • (0.0, 0.0) 表示纹理图像的左上角。
  • (1.0, 0.0) 表示纹理图像的右上角。
  • (0.0, 1.0) 表示纹理图像的左下角。
  • (1.0, 1.0) 表示纹理图像的右下角。

通过为每个顶点指定纹理坐标，我们可以控制纹理图像如何拉伸、压缩或平铺在多边形表面上。

代码示例：使用纹理坐标绘制一个矩形

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomPaint(
            painter: TexturePainter(),
          ),
        ),
      ),
    ),
  );
}

class TexturePainter extends CustomPainter {
  Image? image;

  TexturePainter({this.image});

  Future<Image> loadImage() async {
    final ByteData data = await NetworkAssetBundle(Uri.parse('https://via.placeholder.com/150'))
        .load('https://via.placeholder.com/150');
    final Uint8List bytes = data.buffer.asUint8List();
    final Image image = await decodeImageFromList(bytes);
    return image;
  }

  @override
  Future<void> paint(Canvas canvas, Size size) async {
    image ??= await loadImage();

    if (image == null) {
      return;
    }

    final vertices = Vertices(
      VertexMode.triangleStrip,
      [
        Offset(0, 0),
        Offset(size.width, 0),
        Offset(0, size.height),
        Offset(size.width, size.height),
      ],
      textureCoordinates: [
        Offset(0, 0),
        Offset(1, 0),
        Offset(0, 1),
        Offset(1, 1),
      ],
    );

    final paint = Paint()
      ..shader = ImageShader(
        image!,
        TileMode.clamp,
        TileMode.clamp,
        Matrix4.identity().storage,
      );

    canvas.drawVertices(vertices, BlendMode.srcOver, paint);
  }

  @override
  bool shouldRepaint(covariant TexturePainter oldDelegate) {
    return true;
  }

  @override
  bool shouldRebuildSemantics(covariant TexturePainter oldDelegate) {
    return false;
  }
}

在这个例子中，我们首先加载一个图像，然后创建一个矩形，并为每个顶点指定纹理坐标。 纹理坐标与矩形顶点的位置相对应，因此纹理图像会完整地映射到矩形表面。 ImageShader 用于将图像作为 shader 应用于 paint 对象。 TileMode.clamp 指定纹理在超出 0-1 范围时如何平铺。

3. 使用 CustomPainter 进行绘制

CustomPainter 是 Flutter 中用于自定义绘制的类。 它提供了一个 paint 方法，我们可以在其中使用 Canvas API 来绘制任何我们想要的东西。

要使用 CustomPainter 绘制 3D 多边形，我们需要创建一个自定义 painter 类，并重写其 paint 方法。 在 paint 方法中，我们将：

  1. 创建 Vertices 对象，并设置顶点位置、颜色和纹理坐标。
  2. 创建一个 Paint 对象，并设置其颜色、shader 等。
  3. 调用 canvas.drawVertices 方法，将 Vertices 对象绘制到 Canvas 上。

代码示例：使用 CustomPainter 绘制一个带纹理的三角形

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 300,
            height: 300,
            child: CustomPaint(
              painter: TexturedTrianglePainter(),
            ),
          ),
        ),
      ),
    ),
  );
}

class TexturedTrianglePainter extends CustomPainter {
  Image? image;

  TexturedTrianglePainter({this.image});

  Future<Image> loadImage() async {
    final ByteData data = await NetworkAssetBundle(Uri.parse('https://via.placeholder.com/150'))
        .load('https://via.placeholder.com/150');
    final Uint8List bytes = data.buffer.asUint8List();
    final Image image = await decodeImageFromList(bytes);
    return image;
  }

  @override
  Future<void> paint(Canvas canvas, Size size) async {
    image ??= await loadImage();

    if (image == null) {
      return;
    }

    final vertices = Vertices(
      VertexMode.triangles,
      [
        Offset(size.width / 2, size.height / 4), // Top
        Offset(size.width / 4, size.height * 3 / 4), // Bottom Left
        Offset(size.width * 3 / 4, size.height * 3 / 4), // Bottom Right
      ],
      textureCoordinates: [
        Offset(0.5, 0.0), // Top
        Offset(0.0, 1.0), // Bottom Left
        Offset(1.0, 1.0), // Bottom Right
      ],
    );

    final paint = Paint()
      ..shader = ImageShader(
        image!,
        TileMode.clamp,
        TileMode.clamp,
        Matrix4.identity().storage,
      );

    canvas.drawVertices(vertices, BlendMode.srcOver, paint);
  }

  @override
  bool shouldRepaint(covariant TexturedTrianglePainter oldDelegate) {
    return true;
  }

  @override
  bool shouldRebuildSemantics(covariant TexturedTrianglePainter oldDelegate) {
    return false;
  }
}

在这个例子中，我们创建了一个 TexturedTrianglePainter 类，它使用 Vertices 对象和纹理图像来绘制一个带纹理的三角形。 我们为每个顶点指定了纹理坐标，以便纹理图像正确地映射到三角形表面。

4. 实现简单的 3D 旋转

为了让我们的多边形看起来更像 3D 对象，我们可以实现一个简单的旋转动画。 我们可以使用 Matrix4 类来创建旋转矩阵，并将其应用于顶点位置。

代码示例：旋转一个立方体

import 'dart:math' as math;
import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: AnimatedBuilder(
            animation: _rotationController,
            builder: (context, child) {
              return Transform(
                alignment: Alignment.center,
                transform: Matrix4.identity()
                  ..rotateX(_rotationController.value)
                  ..rotateY(_rotationController.value * 2),
                child: CustomPaint(
                  size: const Size(200, 200),
                  painter: CubePainter(),
                ),
              );
            },
          ),
        ),
      ),
    ),
  );
}

final _rotationController = AnimationController(
  vsync: TickerProviderStateMixin(),
  duration: const Duration(seconds: 5),
)..repeat();

mixin TickerProviderStateMixin on State<StatefulWidget> implements TickerProvider {
  @override
  Ticker createTicker(TickerCallback onTick) => Ticker(onTick, debugLabel: kDebugMode ? describeIdentity(this) : null);
}

class CubePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final width = size.width;
    final height = size.height;

    final vertices = Vertices(
      VertexMode.triangles,
      [
        // Front face
        Offset(-width / 2, -height / 2),
        Offset(width / 2, -height / 2),
        Offset(width / 2, height / 2),

        Offset(-width / 2, -height / 2),
        Offset(width / 2, height / 2),
        Offset(-width / 2, height / 2),

        // Back face
        Offset(-width / 2, -height / 2),
        Offset(width / 2, -height / 2),
        Offset(width / 2, height / 2),

        Offset(-width / 2, -height / 2),
        Offset(width / 2, height / 2),
        Offset(-width / 2, height / 2),
      ],
      colors: [
        Colors.red,
        Colors.red,
        Colors.red,
        Colors.red,
        Colors.red,
        Colors.red,
        Colors.blue,
        Colors.blue,
        Colors.blue,
        Colors.blue,
        Colors.blue,
        Colors.blue,
      ],
    );

    final paint = Paint();
    canvas.translate(size.width / 2, size.height / 2);
    canvas.drawVertices(vertices, BlendMode.srcOver, paint);
  }

  @override
  bool shouldRepaint(covariant CubePainter oldDelegate) {
    return false;
  }
}

在这个例子中，我们创建了一个 CubePainter 类，它使用 Vertices 对象来绘制一个立方体。 我们使用 AnimatedBuilder 和 Matrix4.rotationX 和 Matrix4.rotationY 来创建一个旋转动画。

5. 性能考量

在 Flutter 中进行自定义渲染可能会消耗大量的计算资源，尤其是在处理复杂的几何形状或高分辨率纹理时。 为了提高渲染性能，可以考虑以下优化技巧：

  • 减少顶点数量： 顶点数量越多，渲染所需的计算量就越大。 尽量使用最少的顶点来定义多边形。
  • 使用索引数据： 如果多个三角形共享相同的顶点，可以使用索引数据来重用顶点数据，从而减少内存占用和渲染时间。
  • 使用低分辨率纹理： 纹理分辨率越高，渲染所需的内存和计算量就越大。 尽量使用满足视觉要求的最低分辨率纹理。
  • 避免不必要的重绘： 只有在需要更新时才重绘 CustomPainter。 可以使用 shouldRepaint 方法来控制重绘行为。
  • 使用 RepaintBoundary： RepaintBoundary 可以将一部分 UI 隔离出来，使其独立于其他部分进行重绘。 这可以提高整体渲染性能，尤其是在 UI 中有多个动态元素时。
  • 使用 Shader 进行优化： 对于复杂的着色效果，使用自定义 Shader 可以比使用 Flutter 内置的颜色和纹理混合方式更高效。

表格总结：Vertices 类参数

参数名称 类型 描述
mode VertexMode 指定如何解释顶点数据。 例如，VertexMode.triangles 表示将顶点数据解释为三角形列表。
positions List<Offset> 包含每个顶点的 2D 坐标 (x, y)。 坐标值相对于 Canvas 的左上角。
colors List<Color>? 可选参数，包含每个顶点的颜色。 如果提供了颜色数据，则每个顶点都会根据其对应的颜色进行着色。
textureCoordinates List<Offset>? 可选参数，包含每个顶点的纹理坐标。 纹理坐标是介于 0.0 和 1.0 之间的值，用于指定纹理图像上的哪个区域映射到该顶点。
indices List<int>? 可选参数，包含顶点索引。 如果提供了索引数据，则可以使用它来重用顶点数据，从而减少内存占用。

尾声：自定义渲染的强大与挑战

我们学习了如何使用 Flutter 的 Vertices 类和 CustomPainter 来进行基本的 3D 渲染。虽然 Flutter 不是专门的 3D 引擎，但通过自定义渲染，我们可以实现一些有趣的视觉效果。 不过，自定义渲染也需要仔细考虑性能问题，并采取相应的优化措施。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注