c++ - 如何在 Opengl Windows 上使用 Cairo 加速绘图？

Question

我的问题是如何在 Windows 上加速 OpenGL 的绘图。

测试代码如下。我从网上的一些 cairo 示例中复制了它。

fps 下降到每秒 30 到 40，甚至比网络浏览器还慢。

只是每帧画线，我试着在 html5 上写 javascript。同样的函数只是画一条线，而且运行速度更快。

为什么 cairo 在 opengl 上画线这么慢？我做错什么了吗？我怎样才能加快速度？

我觉得c++应该比javascript快很多

#include <stdlib.h>
#include <stdio.h>
#include <malloc.h>

#define _USE_MATH_DEFINES
#include <math.h>

#include <iostream>
#include <chrono>
#include <random>

#include <gl/glut.h>
#include <gl/glext.h>

#include <cairo.h>

using namespace std;

double win_width = 800;
double win_height = 600;
double hw = win_width / 2;
double hh = win_height / 2;
double line_width = 1;
//double line_width = 1 / win_width;

cairo_surface_t * surf = NULL;
cairo_t         * cr = NULL;
unsigned char   * surf_data = NULL;

GLuint texture_id;

// Interface //

void opengl_init(void)
{
    printf("OpenGL version: %s\n", glGetString(GL_VERSION));
    printf("OpenGL vendor: %s\n", glGetString(GL_VENDOR));
    printf("OpenGL renderer: %s\n", glGetString(GL_RENDERER));

    glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
    glDisable(GL_DEPTH_TEST);
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    glEnable(GL_TEXTURE_RECTANGLE_ARB);
}

void opengl_cleanup(void)
{
    glDeleteTextures(1, &texture_id);
}

void opengl_draw(int width, int height, unsigned char * surf_data)
{
    if (!surf_data)
    {
        printf("draw_func() - No valid pointer to surface-data passed\n");
        return;
    }

    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    glClear(GL_COLOR_BUFFER_BIT);

    glPushMatrix();

    glBindTexture(GL_TEXTURE_RECTANGLE_ARB, texture_id);
    glTexImage2D(GL_TEXTURE_RECTANGLE_ARB,
        0,
        GL_RGBA,
        width,
        height,
        0,
        GL_BGRA,
        GL_UNSIGNED_BYTE,
        surf_data);

    glColor3f(0.25f, 0.5f, 1.0f);
    glBegin(GL_QUADS);
    glTexCoord2f(0.0f, 0.0f);
    glVertex2f(0.0f, 0.0f);
    glTexCoord2f((GLfloat)width, 0.0f);
    glVertex2f(1.0f, 0.0f);
    glTexCoord2f((GLfloat)width, (GLfloat)height);
    glVertex2f(1.0f, 1.0f);
    glTexCoord2f(0.0f, (GLfloat)height);
    glVertex2f(0.0f, 1.0f);
    glEnd();

    glPopMatrix();
}

void opengl_resize(int width, int height)
{
    glViewport(0, 0, width, height);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glOrtho(0.0f, 1.0f, 0.0f, 1.0f, -1.0f, 1.0f);

    glClear(GL_COLOR_BUFFER_BIT);

    glDeleteTextures(1, &texture_id);
    glGenTextures(1, &texture_id);
    glBindTexture(GL_TEXTURE_RECTANGLE_ARB, texture_id);
    glTexImage2D(GL_TEXTURE_RECTANGLE_ARB,
        0,
        GL_RGBA,
        width,
        height,
        0,
        GL_BGRA,
        GL_UNSIGNED_BYTE,
        NULL);
    glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_DECAL);
}


void drawShape()
{
    //save current brush
    cairo_save(cr);

    // clear background
    cairo_set_operator(cr, CAIRO_OPERATOR_OVER);
    //cairo_scale(cr, (double)win_height / 1.0f, (double)win_height / 1.0f);
    cairo_set_source_rgba(cr, 1, 1, 1, 1);
    cairo_paint(cr);

    //set line color and style
    cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
    cairo_set_line_width(cr, line_width);



    static double angle = 0;
    angle += 0.01f;

    //draw rect
    cairo_set_source_rgba(cr, 1, 0, 0, 1);
    //cairo_rectangle(cr, 0.5f + sinf(angle) * 0.1f, 0.5f, 0.1f, 0.1f);
    cairo_rectangle(cr, hw + sin(angle) * 100, hh, 100, 100);
    cairo_fill(cr);
    cairo_stroke(cr);

    //draw circle
    cairo_set_source_rgba(cr, 0, 0, 1, 1);
    cairo_arc(cr, 300, hh, 100, 0, 2 * M_PI);
    //cairo_fill(cr);
    cairo_stroke(cr);

    //draw line
    static double r = 100;
    static double posx = 500;
    static double posy = 500;
    static double x = 0;
    static double y = 0;

    x = r * cosf(angle);
    y = r * sinf(angle);

    cairo_set_source_rgba(cr, 0, 1, 0, 1);
    cairo_move_to(cr, x + posx, y + posy);
    cairo_line_to(cr, -x + posx, -y + posy);
    cairo_stroke(cr);


    int minx = 5;
    int maxx = win_width - 5;
    int miny = 5;
    int maxy = win_height - 5;
    int n = 50 * 2;

    std::default_random_engine randomEngine;
    randomEngine.seed(std::chrono::steady_clock::now().time_since_epoch().count());


    std::uniform_real_distribution<float> rangeX(minx, maxx);
    std::uniform_real_distribution<float> rangeY(miny, maxy);

    cairo_set_source_rgba(cr, 0, 0, 0, 1);
    for (int i = 0; i < n * 2; i += 4)
    {
        float x1 = rangeX(randomEngine);
        float y1 = rangeY(randomEngine);

        float x2 = rangeX(randomEngine);
        float y2 = rangeY(randomEngine);

        cairo_move_to(cr, x1, y1);
        cairo_line_to(cr, x2, y2);

    }
    cairo_stroke(cr);


    //restore previous brush
    cairo_restore(cr);
}


void display(void)
{
    static int fps = 0;
    static int frame = 0;
    static long long startTime = chrono::system_clock::now().time_since_epoch().count();
    static long long lastTime = 2;
    long long now = chrono::system_clock::now().time_since_epoch().count();

    ++frame;

    //update per second
    if (now - lastTime > 10000000)
    {
        lastTime = now;
        fps = frame;
        frame = 0;
        cout << fps << endl;
    }

    drawShape();

    opengl_draw(win_width, win_height, surf_data);

    glutSwapBuffers();
}

cairo_t*
create_cairo_context(int               width,
    int               height,
    int               channels,
    cairo_surface_t** surf,
    unsigned char**   buffer)
{
    cairo_t* cr;

    // create cairo-surface/context to act as OpenGL-texture source
    *buffer = (unsigned char*)calloc(channels * width * height, sizeof(unsigned char));
    if (!*buffer)
    {
        printf("create_cairo_context() - Couldn't allocate buffer\n");
        return NULL;
    }

    *surf = cairo_image_surface_create_for_data(*buffer,
        CAIRO_FORMAT_ARGB32,
        width,
        height,
        channels * width);
    if (cairo_surface_status(*surf) != CAIRO_STATUS_SUCCESS)
    {
        free(*buffer);
        printf("create_cairo_context() - Couldn't create surface\n");
        return NULL;
    }

    cr = cairo_create(*surf);
    if (cairo_status(cr) != CAIRO_STATUS_SUCCESS)
    {
        free(*buffer);
        printf("create_cairo_context() - Couldn't create context\n");
        return NULL;
    }

    return cr;
}

void cleanup(void)
{
    opengl_cleanup();
    free(surf_data);
    cairo_destroy(cr);
    exit(0);
}

void keyboard(unsigned char key, int x, int y)
{
    switch (key)
    {
    //27 is ESC key
    case 27:
    case 'q':
        cleanup();
        break;

    case 'd':
        cairo_surface_write_to_png(surf, "frame.png");
        break;

    case '+':
        if (line_width < 10)
            line_width += 1;
        break;

    case '-':
        if (line_width > 1)
            line_width -= 1;
        break;

    }
}

void idle(void)
{
    glutPostRedisplay();
}

int main(int argc, char ** argv)
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA);
    glutInitWindowSize(win_width, win_height);

    if (glutCreateWindow("Opengl Test") == 0)
        exit(-2);

    // create cairo-surface/context to act as OpenGL-texture source
    cr = create_cairo_context(win_width, win_height, 4, &surf, &surf_data);

    // setup "GL-context"
    opengl_init();

    glutDisplayFunc(display);
    glutKeyboardFunc(keyboard);
    glutIdleFunc(idle);
    opengl_resize(win_width, win_height);

    glutMainLoop();

    return 0;
}

这是我使用的html和js

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="main.js"></script>
    <style type="text/css">
    html, body {
        margin: 0px;
    }

    canvas {
        display: block;
    }

    </style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

主要.js

window.onload = function() {
    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        width = canvas.width = window.innerWidth,
        height = canvas.height = window.innerHeight;

    render();

    function render() {
        context.clearRect(0, 0, width, height);
        for(var i = 0; i < 100; i += 1){
            context.beginPath();
            context.moveTo(Math.random() * width, Math.random() * height);
            context.lineTo(Math.random() * width, Math.random() * height);
            context.stroke();
        }
        requestAnimationFrame(render);
    }   
};

Answer 1

您的瓶颈实际上不是 OpenGL，而是 Cairo。您正在使用 Cairo 及其标准软件光栅化器后端；所以 CPU 正在做所有繁重的工作，而 OpenGL 只是用作美化的表面 blitter。不可否认，将完成的图像加载到 OpenGL 中的方法不是最佳的(应该使用 glTexSubImage2D 而不是 glTexImage2D)，但这几乎不是你的瓶颈。

那么您应该怎么做:理想情况下，您将使用 OpenGL 加速后端作为 Cairo，如 http://cairographics.org/OpenGL/ 中所述。

另一种选择是放弃 Cairo 并使用直接针对 OpenGL 的 vector 渲染库；我在这里想到的是 NanoVG(我与这个项目没有任何关系)。 NanoVG 的主要优点是，其整个内部架构在设计时都考虑了 OpenGL 作为后端。

如果你想分析对纹理上传选择不当方法的影响，这里有一个固定的代码变体(删除 opengl_cleanup，它对这个例子没有任何好处，也摆脱了 opengl_resize 在调整大小处理程序中进行投影设置是非常糟糕的做法。

void opengl_draw(int width, int height, void const * surf_data)
{
    static GLuint texture_id = 0;
    static int tex_width = 0;
    static int tex_height = 0;

    if (!surf_data)
    {
        printf("draw_func() - No valid pointer to surface-data passed\n");
        return;
    }

    if( !texture_id ) {
        glGenTextures(1, &texture_id);
    }
    glBindTexture(GL_TEXTURE_RECTANGLE_ARB, texture_id);
    if( width != tex_width || height != tex_height ) {
        glTexImage2D(GL_TEXTURE_RECTANGLE_ARB,
            0,
            GL_RGBA,
            tex_width = width,
            tex_height = height,
            0,
            GL_BGRA,
            GL_UNSIGNED_BYTE,
            surf_data);
    } else {
        glTexSubImage2D(GL_TEXTURE_RECTANGLE_ARB,
            0, 0, 0,
            tex_width, tex_height,
            GL_BGRA,
            GL_UNSIGNED_BYTE,
            surf_data);
    }

    glViewport(0, 0, width, height);

    glMatrixMode(GL_PROJECTION);
    glPushMatrix();
    glLoadIdentity();
    glOrtho(0.0f, 1.0f, 0.0f, 1.0f, -1.0f, 1.0f);

    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    glPushMatrix();

    glColor3f(0.25f, 0.5f, 1.0f);
    glBegin(GL_QUADS);
    glTexCoord2f(0.0f, 0.0f);
    glVertex2f(0.0f, 0.0f);
    glTexCoord2f((GLfloat)width, 0.0f);
    glVertex2f(1.0f, 0.0f);
    glTexCoord2f((GLfloat)width, (GLfloat)height);
    glVertex2f(1.0f, 1.0f);
    glTexCoord2f(0.0f, (GLfloat)height);
    glVertex2f(0.0f, 1.0f);
    glEnd();

    glMatrixMode(GL_PROJECTION);
    glPopMatrix();
    glMatrixMode(GL_MODELVIEW);
    glPopMatrix();
}

just draw line every frame, I tried write javascript on html5. The same function just draws a line, and it runs much faster.

您认为这告诉您什么？ HTML Canvas 可以以任何满足规范的方式实现。浏览器可能会使用 Cairo，它自己的渲染引擎，可能会也可能不会使用 GPU。这不是有用的比较，因为您不知道实际比较的是什么。