Despite an earlier question (asked here), our project is constrained to using glDrawPixels, so we have to do some hackery.
One of the feature requirements is to be able to have a magnified view show up on a clicked region of an image; so, looking at an image, I want to click the mouse, and have a 200% image window show up where the mouse is. As I drag my cursor, the window should follow the cursor.
The context is set up like:
The Big Red Book has code that looks like this:
Gl.glShadeModel(Gl.GL_FLAT);
Gl.glClearColor(0.1f, 0.1f, 0.1f, 0.0f);
Gl.glPixelStorei(Gl.GL_UNPACK_ALIGNMENT, 2);
Gl.glPolygonMode(Gl.GL_FRONT_AND_BACK, Gl.GL_LINE);
Gl.glDisable(Gl.GL_SCISSOR_TEST);
Gl.glDisable(Gl.GL_ALPHA_TEST);
Gl.glDisable(Gl.GL_STENCIL_TEST);
Gl.glDisable(Gl.GL_DEPTH_TEST);
Gl.glDisable(Gl.GL_BLEND);
Gl.glDisable(Gl.GL_DITHER);
Gl.glDisable(Gl.GL_LOGIC_OP);
Gl.glDisable(Gl.GL_LIGHTING);
Gl.glDisable(Gl.GL_FOG);
Gl.glDisable(Gl.GL_TEXTURE_1D);
Gl.glDisable(Gl.GL_TEXTURE_2D);
Gl.glPixelTransferi(Gl.GL_MAP_COLOR, Gl.GL_TRUE);
Gl.glPixelTransferf(Gl.GL_RED_SCALE, 1.0f);
Gl.glPixelTransferi(Gl.GL_RED_BIAS, 0);
Gl.glPixelTransferf(Gl.GL_GREEN_SCALE, 1.0f);
Gl.glPixelTransferi(Gl.GL_GREEN_BIAS, 0);
Gl.glPixelTransferf(Gl.GL_BLUE_SCALE, 1.0f);
Gl.glPixelTransferi(Gl.GL_BLUE_BIAS, 0);
Gl.glPixelTransferi(Gl.GL_ALPHA_SCALE, 1);
Gl.glPixelTransferi(Gl.GL_ALPHA_BIAS, 0);
And then the call to make the smaller-but-zoomed image looks like
int width = (int)((this.Width * 0.2)/2.0);
Gl.glReadBuffer(Gl.GL_FRONT_AND_BACK);
Gl.glRasterPos2i(0, 0);
Gl.glBitmap(0, 0, 0, 0, mStartX - (width*2), mStartY, null);
Gl.glPixelZoom(2.0f, 2.0f);
Gl.glCopyPixels(mStartX - width, mStartY, width, width, Gl.GL_COLOR);
where mStartY and mStartX are the points where the click happened.
Problem is, the window that shows up is really mangling the lookup tables, and really clamping the image down to essentially a black-and-white binary image (ie, no shades of grey).
The data is a black-and-white unsigned short array, and is set with this code:
float step = (65535.0f / (float)(max - min));
mColorTable = new ushort[65536];
int i;
for (i = 0; i < 65536; i++)
{
if (i < min)
mColorTable[i] = 0;
else if (i > max)
mColorTable[i] = 65535;
else
mColorTable[i] = (ushort)((float)(i - min) * step);
}
.... //some irrelevant code
Gl.glPixelMapusv(Gl.GL_PIXEL_MAP_R_TO_R, 65536, mColorTable);
Gl.glPixelMapusv(Gl.GL_PIXEL_MAP_G_TO_G, 65536, mColorTable);
Gl.glPixelMapusv(Gl.GL_PIXEL_MAP_B_TO_B, 65536, mColorTable);
Now, according to this documentation, I should use GL_PIXEL_MAP_I_TO_I and set INDEX_SCALE and INDEX_BIAS to zero, but doing that does not change the result, that the image is severely clamped. And by 'severely clamped' I mean it's either black or white, with very few shades of grey, but the original non-magnified image looks like what's expected.
So, how do I avoid the clamping of the magnified view? Should I make a second control that follows the cursor and gets filled in with data from the first control? That approach seems like it would take the array copies outside of the graphics card and into C#, which would almost by definition be slower, and so make the control nonresponsive.
Oh, I'm using C# and the Tao framework, if that matters.
Here's the answer. The problem is that the LUT is being applied twice, so before calling the copy, call:
Gl.glPixelTransferi(Gl.GL_MAP_COLOR, Gl.GL_FALSE);
Then, once done, call:
Gl.glPixelTransferi(Gl.GL_MAP_COLOR, Gl.GL_TRUE);
That way, the 'extreme clamping' I was describing is removed.
#thing2k-- your solution causes the copy to happen outside the graphics card, so slows down the drawing on mouse drag, but doesn't fix the double clamp.
Please, pretty please with loads of sugar, molasses, sprinkles and a mist of high-fructose corn syrup on top and all over, explain why you cannot just use texture-mapping to draw this imagery.
Texture-mapping is a core, basic, everyday, run of the mill, garden-variety, standard, typical, expected, and just generally nice feature of OpenGL. It is in version 1.4. Why not use it as a starting point?
If I understand you correctly then this should be close to what you after, using glReadPixels and glDrawPixels.
Sorry it's C++ not C# but the OpenGL function should still be the same.
// main.cpp
// glut Text
#ifdef __WIN32__
#define WIN32_LEAN_AND_MEAN
#include <windows.h>
#endif
#include <GL/glut.h>
#include <cstdio>
int WIDTH = 800;
int HEIGHT = 600;
int MouseButton, MouseY = 0, MouseX = 0;
const int size = 80;
char *image, rect[size*size*3];
int imagewidth, imageheight;
bool Init()
{
int offset;
FILE* file = fopen("image.bmp", "rb");
if (file == NULL)
return false;
fseek(file, 10, SEEK_SET);
fread(&offset, sizeof(int), 1, file);
fseek(file, 18, SEEK_SET);
fread(&imagewidth, sizeof(int), 1, file);
fread(&imageheight, sizeof(int), 1, file);
fseek(file, offset, SEEK_SET);
image = new char[imagewidth*imageheight*3];
if (image == NULL)
return false;
fread(image, 1, imagewidth*imageheight*3, file);
fclose(file);
return true;
}
void Reshape(int width, int height)
{
WIDTH = width;
HEIGHT = height;
glViewport(0 , 0, width, height);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0, width, 0, height);
}
void Display()
{
int size2 = size/2;
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glRasterPos2i(0,0);
glPixelZoom(1.f, 1.f);
glDrawPixels(imagewidth, imageheight, 0x80E0/*GL_RGB*/, GL_UNSIGNED_BYTE, image);
glReadPixels(MouseX-size2, MouseY-size2, size, size, GL_RGB, GL_UNSIGNED_BYTE, rect);
glPixelZoom(2.f, 2.f);
glRasterPos2i(MouseX-size, MouseY-size);
glDrawPixels(size, size, GL_RGB, GL_UNSIGNED_BYTE, rect);
glFlush();
glutSwapBuffers();
}
void Mouse(int button, int state, int x, int y)
{
if (state == GLUT_DOWN)
MouseButton &= (1<<button);
else
MouseButton &= ~(1<<button);
}
void MouseMove(int x, int y)
{
MouseX = x;
MouseY = HEIGHT - y;
}
int main(int argc, char* argv[])
{
glutInit(&argc, argv);
if (Init() == false)
return 1;
glutInitWindowSize(WIDTH, HEIGHT);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA);
glutCreateWindow("glut_Text");
glClearColor(0.25, 0.25, 0.25, 1.0);
glutReshapeFunc(Reshape);
glutDisplayFunc(Display);
glutIdleFunc(Display);
glutMouseFunc(Mouse);
glutMotionFunc(MouseMove);
glutPassiveMotionFunc(MouseMove);
glutMainLoop();
return 0;
}
Hope this helps.
Related
My question is how to speed up drawing on OpenGL on windows.
The test code is below. I copied it from some cairo example on the web.
the fps drop to 30 to 40 per second, even slower than a web browser.
just draw line every frame, I tried write javascript on html5. The same function just draws a line, and it runs much faster.
why cairo draw line on opengl so slow? Did I do something wrong?
and how can I speed it up?
I think c++ should be much faster than 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;
}
and here is the html and js i use
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>
main.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);
}
};
Your bottleneck is actually not OpenGL but Cairo. You're using Cairo with its standard software rasterizer backend; so the CPU is doing all the heavy lifting and OpenGL is just used as a glorified surface blitter. Admittedly the method for loading the finished image into OpenGL is not optimal (glTexSubImage2D should be used instead of glTexImage2D), but this is hardly your bottleneck there.
So what should you do: Ideally you'd be using a OpenGL accelerated backend for Cairo as described in http://cairographics.org/OpenGL/
Another option is ditching Cairo and use a vector rendering library directly targeted at OpenGL; I'm thinking of NanoVG here (I have no affiliations to this project). The main advantage of NanoVG is, that its whole internal architecture has been designed with OpenGL as backend in mind.
If you want to profile the influence on the improperly chosen method for texture upload here's a fixed variant of the code (remove opengl_cleanup, it does nothing good for this very example and also get rid of opengl_resize it's very bad practice to do projection setup in the resize handler).
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.
And what do you think does this tell you? HTML Canvas may me implemented in any way that satisfies the specification. The Browser may use Cairo, its own rendering engine, may or may not use the GPU. This is not a useful comparison, because you don't know what you're actually comparing there.
It is very painful to compile cairo with OpenGL backend on Windows. But here's how I did it. Works on cygwin and msys2 with x86_64-w64-mingw32 toolchain.
Cygwin provides a precompiled cairo package for Win64. It doesn't support OpenGL. However if you install that package it will automatically pull in all the dependencies of cairo, including pixman. Also install the GLEW package (OpenGL Extension Wrangler).
Download the cairo source code, and extract it to your workspace.
Open the configure file. Search for -lGL and replace all instances with -lglew32 -lopengl32. This will make cairo link to the Windows OpenGL library instead of the Linux one. The library name here is case-sensitive, and must match the opengl32.dll in C:\Windows\system32. If not then the build system will complain about not able to find opengl32.dll.
Open src/cairo-gl.h. Under the line
#if CAIRO_HAS_GL_SURFACE || CAIRO_HAS_GLESV2_SURFACE
Add
#include <GL/glew.h>
Under the line
#if CAIRO_HAS_WGL_FUNCTIONS
Add
#include <GL/wglew.h>
This file must be included before windows.h, otherwise GLEW will complain that gl.h is alreaded included.
There is a bug in cairo wgl device creation process. Basically cairo will create an invisible window, and attach the GL context you provide to that window. However if your context does not have the same pixel format as the dummy window, then the binding will fail. Here's my quick fix. Open src/cairo-wgl-context.c, find static cairo_status_t _wgl_dummy_ctx (cairo_wgl_context_t *ctx).
Before the line
wglMakeCurrent(ctx->dummy_dc, ctx->rc);
Add
ctx->rc = wglCreateContextAttribsARB(ctx->dummy_dc,ctx->rc,NULL);
Now execute
./configure --host=x86_64-w64-mingw32 --enable-gl --enable-wgl
make
If configure complains it cannot find certain programs, first make sure the binutils for Win64 toolchain is installed. Then use ln to make a hard link to the program with x86_64-w64-mingw32 prefix.
The make process will inevitably fail in the test folder, because it attempts to compile tests that require the Linux GL library. Ignore the failure, and go to /src/.libs. You should see libcairo-2.dll and other files needed for linking.
The most common issue is that only libcairo.a is produced, but no libcairo-2.dll. Make sure you modified the configure file exactly as I said.
Copy the libcairo-2.dll to wherever you want. If your program links dynamically to cairo, it should now work fine. However if want to link statically, there is another complication. Some parts of cairo use Windows critical section to implement mutex. The critical sections are initialized during DllMain. However if you link statically then you must manually initialize them. Just call the void _cairo_mutex_initialize (void) function within cairo-mutex.c.
I'm just setting up a simple renderer using LWJGL 3 and when it runs on my external display it looks like I expect but when resize it on my Macbook it shrinks the viewport. Then if I move the window it fixes it. Here's the code that I run when I init my GL stuff and on window resize.
public void resize(int width, int height)
{
val near = 0.1
val far = 100.0
GL11.glViewport(0, 0, width, height);
GL11.glMatrixMode(GL11.GL_PROJECTION);
GL11.glLoadIdentity();
float aspect = width / (float)height
float fov = (float)(45.0 / 360.0 * Math.PI)
float fH = Math.tan(fov) * near
float fW = fH * aspect
GL11.glFrustum(-fW, fW, -fH, fH, near, far);
GL11.glMatrixMode(GL11.GL_MODELVIEW);
GL11.glLoadIdentity();
}
Here's what I'm seeing
Wrong
Right
If I'm running it on my external display it doesn't change, it's always right.
Reading the size of the frame buffer was the answer here. I create the window with the pixel size the user passes in and then read the frameBuffer size to pass to glViewport.
public Window(String title, int width, int height)
{
_errorCallback = GLFWErrorCallback.createPrint(System.err);
GLFW.glfwSetErrorCallback(_errorCallback);
if (GLFW.glfwInit() != GLFW.GLFW_TRUE)
{
throw IllegalStateException("Unable to initialize GLFW");
}
GLFW.glfwDefaultWindowHints();
GLFW.glfwWindowHint(GLFW.GLFW_VISIBLE, GLFW.GLFW_FALSE);
GLFW.glfwWindowHint(GLFW.GLFW_RESIZABLE, GLFW.GLFW_TRUE);
_window = GLFW.glfwCreateWindow(width, height, title ?: "", 0, 0);
if (_window == 0L)
{
throw RuntimeException("Failed to create window");
}
// Setup Callbacks
// Get the resolution of the primary monitor
GLFWVidMode vidmode = GLFW.glfwGetVideoMode(GLFW.glfwGetPrimaryMonitor());
// Center our window
GLFW.glfwSetWindowPos(_window, (vidmode.width() - width) / 2, (vidmode.height() - height) / 2);
// Make the OpenGL context current
GLFW.glfwMakeContextCurrent(_window);
// Enable v-sync
GLFW.glfwSwapInterval(1);
// Make the window visible
GLFW.glfwShowWindow(_window);
}
Then I read the frame buffer size to pass into glViewport and glFrustum.
public Vector2 frameBufferSize()
{
IntBuffer bufferWidth = BufferUtils.createIntBuffer(4);
IntBuffer bufferHeight = BufferUtils.createIntBuffer(4);
GLFW.glfwGetFramebufferSize(_window, bufferWidth, bufferHeight);
return Vector2(bufferWidth.get(0), bufferHeight.get(0));
}
I have a shape that is centered on the window screen. For now on window resize it remains the same (same width and height).
What is the best way to fit it to the window on resize, and also keep it's aspect ratio?
const int WIDTH = 490;
const int HEIGHT = 600;
/**
* render scene
*/
void renderScene(void)
{
//clear all data on scene
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
//set white bg color
glClearColor(1, 1, 1, 1);
glColor3ub(153, 153, 255);
glBegin(GL_POLYGON);
glVertex2f(60, 310);
glVertex2f(245, 50);
glVertex2f(430, 310);
glVertex2f(245, 530);
glEnd();
glutSwapBuffers();
}
/**
* reshape scene
*/
void reshapeScene(GLint width, GLint height)
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glViewport(0, 0, width, height);
gluOrtho2D(0, width, height, 0);
glMatrixMode(GL_MODELVIEW);
glutPostRedisplay();
}
/**
* entry point
*/
int main(int argc, char **argv)
{
//set window properties
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH);
glutInitWindowSize(WIDTH, HEIGHT);
glutInitWindowPosition((glutGet(GLUT_SCREEN_WIDTH)-WIDTH)/2, (glutGet(GLUT_SCREEN_HEIGHT)-HEIGHT)/2);
glutCreateWindow("Test Window");
//paste opengl version in console
printf((const char*)glGetString(GL_VERSION));
//register callbacks
glutDisplayFunc(renderScene);
glutReshapeFunc(reshapeScene);
//start animation
glutMainLoop();
return 0;
}
Thanks
At the top:
const int WIDTH = 490;
const int HEIGHT = 600;
const float ASPECT = float(WIDTH)/HEIGHT; // desired aspect ratio
Then reshapeScene:
void reshapeScene(GLint width, GLint height)
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
int w = height * ASPECT; // w is width adjusted for aspect ratio
int left = (width - w) / 2;
glViewport(left, 0, w, height); // fix up the viewport to maintain aspect ratio
gluOrtho2D(0, WIDTH, HEIGHT, 0); // only the window is changing, not the camera
glMatrixMode(GL_MODELVIEW);
glutPostRedisplay();
}
Because you are not constraining the window resize to a particular aspect ratio, you need to pick one of the two dimensions (height, here) to drive the viewport reshape and calculate an adjusted width based on that height and the desired aspect ratio. See adjusted glViewport call above.
Also, gluOrtho2D is your camera, essentially. Since you aren't moving the camera or the object so much, you don't need to change that (so it just uses the initial WIDTH and HEIGHT).
For some reason the motion of the square appears jolty, when in windowed mode. I'm pretty sure I'm not optimising my code correctly and it's not a driver issue because I've played OpenGL+SDL games in windowed mode before and it's been fine.
Here is the code (updated to include framerate independent motion):
#include <SDL/SDL.h>
#include <GL/gl.h>
const int width = 1600;
const int height = 900;
const int colourDepth = 32;
void initVideo(){
SDL_Surface *screen;
SDL_Init(SDL_INIT_VIDEO);
screen = SDL_SetVideoMode(width, height, colourDepth, SDL_OPENGL|SDL_GL_DOUBLEBUFFER
|SDL_FULLSCREEN//if I comment this out it lags
);
if(!screen){
SDL_Quit();
exit(1);
}
SDL_WM_SetCaption("JERKINESS TEST", "");
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0, width, height, 0, 1, -1);
glMatrixMode(GL_MODELVIEW);
glEnable(GL_TEXTURE_2D);
}
int main(int argc, char** argv){
initVideo();
int x;
SDL_Event event;
long lastTime = 0;
while(true){
while(SDL_PollEvent(&event)){
if(event.type==SDL_KEYDOWN){
SDL_Quit();
}
}
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_QUADS);
glVertex2i(x, 425);
glVertex2i(x+50, 425);
glVertex2i(x+50, 475);
glVertex2i(x, 475);
glEnd();
long elapsedTimeMilis = SDL_GetTicks() - lastTime;
x+= 1 * (elapsedTimeMilis/(1000/60));
lastTime=SDL_GetTicks();
SDL_GL_SwapBuffers();
}
}
You increasing x the same amount in each frame. There is however no guarantee that your frame-rate will be constant. what you should rather do is measure the elapsed time an increment according to how much time has passed. The will mean the square moves the same distance in the same time irrespective of frame rates.
How to take a screenshot of an OpenGL window in C++ and save it to file.
I found the glReadPixels() function,
but I don't know what to do next. Where I can set path to a file, for example?
If not difficult, write code, please.
This piece of code captures the OpenGL window and export to a BMP file. You must have FreeImage library to run it.
// Make the BYTE array, factor of 3 because it's RBG.
BYTE* pixels = new BYTE[3 * width * height];
glReadPixels(0, 0, width, height, GL_RGB, GL_UNSIGNED_BYTE, pixels);
// Convert to FreeImage format & save to file
FIBITMAP* image = FreeImage_ConvertFromRawBits(pixels, width, height, 3 * width, 24, 0x0000FF, 0xFF0000, 0x00FF00, false);
FreeImage_Save(FIF_BMP, image, "C:/test.bmp", 0);
// Free resources
FreeImage_Unload(image);
delete [] pixels;
glReadPixels will copy the bits into a memory buffer that you supply. You have to manually format the data (to the image format of your choice) and write it to disk after glReadPixels returns.
Runnable example
Each time you click with the mouse on the window, a tmpX.ppm file is created with the current screenshot.
You can view this file for example with eog on Linux, and inspect it with a text editor.
To render without showing a window, see: How to use GLUT/OpenGL to render to a file?
#include <math.h>
#include <stdlib.h>
#include <stdio.h>
#define GL_GLEXT_PROTOTYPES 1
#include <GL/gl.h>
#include <GL/glu.h>
#include <GL/glut.h>
#include <GL/glext.h>
static GLubyte *pixels = NULL;
static const GLenum FORMAT = GL_RGBA;
static const GLuint FORMAT_NBYTES = 4;
static const unsigned int HEIGHT = 500;
static const unsigned int WIDTH = 500;
static unsigned int nscreenshots = 0;
static unsigned int time;
/* Model. */
static double angle = 0;
static double angle_speed = 45;
static void init(void) {
glReadBuffer(GL_BACK);
glClearColor(0.0, 0.0, 0.0, 0.0);
glPixelStorei(GL_PACK_ALIGNMENT, 1);
glViewport(0, 0, WIDTH, HEIGHT);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glMatrixMode(GL_MODELVIEW);
pixels = malloc(FORMAT_NBYTES * WIDTH * HEIGHT);
time = glutGet(GLUT_ELAPSED_TIME);
}
static void deinit(void) {
free(pixels);
}
static void create_ppm(char *prefix, int frame_id, unsigned int width, unsigned int height,
unsigned int color_max, unsigned int pixel_nbytes, GLubyte *pixels) {
size_t i, j, k, cur;
enum Constants { max_filename = 256 };
char filename[max_filename];
snprintf(filename, max_filename, "%s%d.ppm", prefix, frame_id);
FILE *f = fopen(filename, "w");
fprintf(f, "P3\n%d %d\n%d\n", width, HEIGHT, 255);
for (i = 0; i < height; i++) {
for (j = 0; j < width; j++) {
cur = pixel_nbytes * ((height - i - 1) * width + j);
fprintf(f, "%3d %3d %3d ", pixels[cur], pixels[cur + 1], pixels[cur + 2]);
}
fprintf(f, "\n");
}
fclose(f);
}
static void draw_scene() {
glClear(GL_COLOR_BUFFER_BIT);
glLoadIdentity();
glRotatef(angle, 0.0f, 0.0f, -1.0f);
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3f( 0.0f, 0.5f, 0.0f);
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3f(-0.5f, -0.5f, 0.0f);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3f( 0.5f, -0.5f, 0.0f);
glEnd();
}
static void display(void) {
draw_scene();
glutSwapBuffers();
glReadPixels(0, 0, WIDTH, HEIGHT, FORMAT, GL_UNSIGNED_BYTE, pixels);
}
static void idle(void) {
int new_time = glutGet(GLUT_ELAPSED_TIME);
angle += angle_speed * (new_time - time) / 1000.0;
angle = fmod(angle, 360.0);
time = new_time;
glutPostRedisplay();
}
void mouse(int button, int state, int x, int y) {
if (state == GLUT_DOWN) {
puts("screenshot");
create_ppm("tmp", nscreenshots, WIDTH, HEIGHT, 255, FORMAT_NBYTES, pixels);
nscreenshots++;
}
}
int main(int argc, char **argv) {
GLint glut_display;
glutInit(&argc, argv);
glutInitWindowSize(WIDTH, HEIGHT);
glutInitWindowPosition(100, 100);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA);
glutCreateWindow(argv[0]);
init();
glutDisplayFunc(display);
glutIdleFunc(idle);
glutMouseFunc(mouse);
atexit(deinit);
glutMainLoop();
return EXIT_SUCCESS;
}
Compile with:
gcc main.c -lm -lGL -lGLU -lglut
Tested on Ubuntu 15.10, OpenGL 4.5.0 NVIDIA 352.63.
Vulkan
This example just worked: https://github.com/SaschaWillems/Vulkan/blob/b9f0ac91d2adccc3055a904d3a8f6553b10ff6cd/examples/screenshot/screenshot.cpp how to run it: Is it possible to do offscreen rendering without Surface in Vulkan?
Saving that data to a file is something you'll either have to do yourself or use a third-party library for - OpenGL has no such feature.
Windows .bmp is probably the easiest if you're looking to do it yourself - Wikipedia has a pretty good explanation of the file format. Otherwise you can use image saving/loading libraries: libpng, libjpeg, etc. for low-level control, or devIL (there are others, but this is my favorite, and it's an extremely versatile library that goes well with GL) for high-level "just do it" image i/o.
A simple and quick solution.
Outputs a TARGA file but can easily be converted to PNG (script provided).
No extra libraries required.
Will work with both C and C++ (with some minor changes).
Note: The output file should have the tga file extension.
Here is the code:
void saveScreenshotToFile(std::string filename, int windowWidth, int windowHeight) {
const int numberOfPixels = windowWidth * windowHeight * 3;
unsigned char pixels[numberOfPixels];
glPixelStorei(GL_PACK_ALIGNMENT, 1);
glReadBuffer(GL_FRONT);
glReadPixels(0, 0, windowWidth, windowHeight, GL_BGR_EXT, GL_UNSIGNED_BYTE, pixels);
FILE *outputFile = fopen(filename.c_str(), "w");
short header[] = {0, 2, 0, 0, 0, 0, (short) windowWidth, (short) windowHeight, 24};
fwrite(&header, sizeof(header), 1, outputFile);
fwrite(pixels, numberOfPixels, 1, outputFile);
fclose(outputFile);
printf("Finish writing to file.\n");
}
And calling the function:
saveScreenshotToFile("test.tga", 1200, 900);
A bash script to convert TARGA files to PNG:
for oldFileName in *.tga; do
[ -f "$oldFileName" ] || break # Break out if no .tga files found.
newFileName=${oldFileName//.tga/.png}
convert $oldFileName $newFileName
rm $oldFileName
echo "Converted $oldFileName to $newFileName"
done
You can save screenshot with #Rafael's answer and OpenCV:
void Game::saveScreenshotToFile(std::string filename, int windowWidth, int windowHeight) {
cv::Mat img(windowHeight, windowWidth, CV_8UC3);
glPixelStorei(GL_PACK_ALIGNMENT, (img.step & 3) ? 1 : 4);
glPixelStorei(GL_PACK_ROW_LENGTH, img.step/img.elemSize());
glReadPixels(0, 0, img.cols, img.rows, GL_BGR, GL_UNSIGNED_BYTE, img.data);
cv::flip(img, img, 0);
//cv::imshow("Image",img);
//cv::waitKey(0);
cv::imwrite(filename, img);
}
Thanks for OpenCV: https://stackoverflow.com/a/9098883/10152334
Generally, OpenGL don't provide functions to save image. I think the fastest and simplest way to do this is save to .PPM format. However, this kind of format is uncompressed which means it's file size would be very large. And it can be support only by quite a few programs nowadays.
I prefer to save image to .png file which is compressed but also gives lossless image and supported by many browsers. To save the OpenGL to .png format, I first recommend the PNGwriter. It's pretty simple and easy to use. For example, to save a pixel of a image with color (R, G, B) in the position (x, y), your code will be(see "quickstart" in the PNGwriter website):
pngwriter PNG(width, height, 1.0, fileName); // "1.0" stand for the white background
PNG.plot(x, y, R, G, B);
PNG.close();
Note that, since the PNGwriter save each pixel starting from the top-left corner of the image, while the array get from glReadPixels() start from the bottom-left of the window, your code to save the whole image might probably look like this:
GLfloat* pixels = new GLfloat[nPixels];
glReadPixels(0.0, 0.0, width, height,GL_RGB, GL_FLOAT, pixels);
pngwriter PNG(width, height, 1.0, fileName);
size_t x = 1;
size_t y = 1;
double R, G, B;
for(size_t i=0; i<npixels; i++) // "i" is the index for array "pixels"
{
switch(i%3)
{
case 2:
B = static_cast<double>(pixels[i]); break;
case 1:
G = static_cast<double>(pixels[i]); break;
case 0:
R = static_cast<double>(pixels[i]);
PNG.plot(x, y, R, G, B); // set pixel to position (x, y)
if( x == width ) // Move to the next row of image
{
x=1;
y++;
}
else // To the next pixel
{ x++; }
break;
}
}
PNG.close();