Question

问题

我尝试使用Canvas创建一个粒子系统。有趣的是，drawImage方法非常快。即使使用drawImage，我也能以60 fps获得90.000个粒子。但是，这只是使用相同的图像。当我为粒子使用不同的图像时，性能大幅下降。然后我改变了图像的顺序，以便e。 G。首先绘制image1的所有粒子，然后绘制所有的image2等，再次表现良好。

问题

有谁知道为什么会这样？在drawImage中是否有必须考虑的内部缓存机制？

代码

以下是示例代码：

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.SnapshotParameters;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.Image;
import javafx.scene.image.WritableImage;
import javafx.scene.layout.BorderPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class CanvasExample extends Application {

    GraphicsContext gc;
    double width = 800;
    double height = 600;
    Image[] images;

    @Override
    public void start(Stage primaryStage) {

        Canvas canvas = new Canvas( width, height);
        gc = canvas.getGraphicsContext2D();

        BorderPane root = new BorderPane();
        root.setCenter( canvas);

        Scene scene = new Scene( root, width, height);
        scene.setFill(Color.BEIGE);

        primaryStage.setScene(scene);
        primaryStage.show();

        createImages(255);

        AnimationTimer loop = new AnimationTimer() {

            double prev = 0;
            double frameCount = 0;
            double fps = 0;

            @Override
            public void handle(long now) {

                // very basic frame counter
                if( now - prev > 1_000_000_000) {

                    System.out.println( "FPS: " + frameCount);

                    fps = frameCount;

                    prev = now;
                    frameCount = 0;

                } else {
                    frameCount++;
                }

                // clear canvas
                gc.setFill( Color.BLACK);
                gc.fillRect(0, 0, width, height);

                // paint images
                int numIterations = 90000;
                for( int i=0; i < numIterations; i++) {

                    int index = i % 2; // <==== change here: i % 1 is fast, i % 2 is slow

                    gc.drawImage(images[ index], 100, 100);

                }

                gc.setFill(Color.WHITE);
                gc.fillText("fps: " + fps, 0, 10);
            }

        };

        loop.start();

    }

    public void createImages( int count) {

        Rectangle rect = new Rectangle(10,10);
        rect.setFill(Color.RED);

        images = new Image[count];

        for( int i=0; i < count; i++) {
            images[i] = createImage(rect);
        }

    }

    /**
     * Snapshot an image out of a node, consider transparency.
     * 
     * @param node
     * @return
     */
    public Image createImage(Node node) {

        WritableImage wi;

        SnapshotParameters parameters = new SnapshotParameters();
        parameters.setFill(Color.TRANSPARENT);

        int imageWidth = (int) node.getBoundsInLocal().getWidth();
        int imageHeight = (int) node.getBoundsInLocal().getHeight();

        wi = new WritableImage(imageWidth, imageHeight);
        node.snapshot(parameters, wi);

        return wi;

    }

    public static void main(String[] args) {
        launch(args);
    }

}

这是非常基本的。从矩形创建图像，然后将其放入数组中，并在AnimationTimer循环中，在“画布”上绘制图像numIterations-times。

当您使用index = i % 1时，我。即同样的图像一遍又一遍，然后fps在我的系统上是60 fps。如果你使用index = i % 2，我。即交替显示图像，然后fps在我的系统上为14 fps。这是一个相当大的差异。

非常感谢您的帮助！

Answer 1

关于画布如何工作的背景

Canvas保留缓冲区。每次向画布发出命令（例如绘制图像）时，该命令都会附加到缓冲区。在下一个渲染脉冲上，通过处理每个命令并将它们渲染到纹理来刷新缓冲区。纹理被发送到图形卡，将在屏幕上呈现。

在源代码中跟踪画布操作

注意：这里引用的链接代码已经过时而不是官方的，因为它是一个backport，但它是最简单的在线交叉引用代码，实现与JDK中的官方代码类似（或相同）。所以只需追踪它：

您调用drawImage和GraphicsContext writes an image到the buffer。

对于JavaFX图形系统的下一个脉冲或快照请求，缓冲区清空issuing render commands。 render command for the image使用cached texture from a resource factory呈现图片。

为什么你的应用程序速度变慢（我实际上并不知道）

我想也许，当您替换图像时，您不会将“实时”图像保留在场景中作为场景图的一部分进行渲染，因此纹理缓存会逐出旧图像，从而导致系统抖动和重新创建图像的纹理（just a guess）。但是，我在调试器中完成了整个过程（删除屏幕上的fps标签，并在应用程序运行几秒钟后在BaseShaderGraphics.drawTexture中设置断点）。您将看到重用相同的缓存纹理。纹理缓存看起来很好，并且正在为每个图像缓存纹理，所以我真的不知道观察到的减速的根本原因是什么。

Canvas drawImage的优化如何工作？

1 个答案: