<p>This is a very common question that most people in your situation (interested or fascinated shall I say in Computer Graphics) have and a problem they want to figure out. The solution is pretty simple, though not necessarily that straightforward to implement.</p>

<p>I can't make a specific answer because it depends on the OS you are using, and as I said this is not something you can do in 2 lines of code.</p>

<p>The answer is to use some sort of library that:</p>

<ol>
<li>allows you to create a window on your system</li>
<li>allows you to display some content (an image) in the window you created and displayed to the screen</li>
</ol>

<p>The first task is generally quite complex regardless of the OS you use (MacOS, Windows, Linux). For the second step, you need to generally go through some sort of graphics API (like OpenGL).</p>

<p>So there is hope for you. One thing you can do is use some other library that works as a wrapper around 1) and 2) In other words they help you especially with the creation of the window, and then if you know OpenGL you can do the rest of the work. You will need to create some texture that you will fill with the content of your image as it gets rendered and display this texture to the screen (that's pretty basic in OpenGL though you need to know this API in order to do so).</p>

<p><a href="http://www.glfw.org/docs/latest/quick.html" rel="nofollow noreferrer">GLFW</a> is a great library that will allow you to do that. It's simple to use and compile and install, etc. You can alternatively use Qt but I don't recommend it unless you want to become a professional programmer.</p>

<p>I had some documentation about the whole process but it's offline right now. I might put it back in a few weeks but you will need to wait I am afraid.</p>

<h1>EDIT</h1>

<p>I am editing the answer to respond to your comment. The algorithm would look like this:</p>

<pre><code>Color *buffer = Color  char [w * h];
// create a texture that you can map onto the quad stretched over the area
// of the window. You will need to create a quad rendered in the space of the
// window, aka you in 2D not 3D.
...
// now render your image using you ray-tracer
for (j = 0; j &lt; h; ++h) {
    for (i =0; i &lt; w; ++i) {
        buffer[j * w + i] =  trace(orig, dir, ...);
    }
    // it is not very efficient to update your window each time you have 
    // a new pixel so do this every row or every 10 rows ... you get the idea
    // copy content of your buffer into the GL texture
    // I am not using the right calls here, too lazy to find the right ones
    glCopyTexture(myGLTextureId, buffer, (sizeof(char) * 3 * w * h); 
    // do the texture binding, etc... all GL or DX stuff
    ...
    // this will update your window with the content of the buffer
    glSwapBuffer(); 
}
// now save content of buffer to image file
saveToDisk(buffer);
</code></pre>

<p>Windows? Arg(. You will have to use DirectX calls indeed but they 2 APIs are very close.</p>

CC BY-SA 3.0
2017-01-28T13:00:08.580Z
Thanks! I think I will do this with DirectX. So first I need to load the image as a texture on a quad from a specified file path (where the image is being rendered to) and then as the image is being rendered it will show up on the screen. Will I manually need to refresh the image as it is being rendered to see the progress (unload, delete, reload & repeat within DirectX) or is this unnecessary? I did this in C# with a picturebox but I got an error since I cannot read and write the file simultaneously or something like that, will the same happen here?
Arjan Singh
CC BY-SA 3.0
2017-01-28T13:00:30.210Z
I'm on Windows by the way.
Arjan Singh
CC BY-SA 3.0
2017-01-28T14:00:19.057Z
@ArjanSingh if I understand correctly, this answer will give you somewhere to send your partial image as you create it, rather than displaying the saved file. Treat them as two separate things. Display the image pixel by pixel as you create it in memory, and save it to file at the end when it is complete.
trichoplax is on Codidact now
CC BY-SA 3.0
2017-01-28T14:42:34.333Z
@trichoplax How can I copy the data from the image buffer to a DirectX texture? Loading, and displaying the texture isn't hard but how do I create the texture with the pixel data? Should I make this a separate question?
Arjan Singh
CC BY-SA 3.0
2017-01-28T14:46:30.603Z
@ArjanSingh does sound like a separate question.
trichoplax is on Codidact now
CC BY-SA 3.0
2017-01-28T15:00:06.260Z
@ArjanSingh Though I have to say Arjan that they are plenty of tutorials out there on how to do that ... "How can I copy the data from the image buffer to a DirectX texture? ...".  I think it is important you also look for such tutorials before asking your questions here and only ask if you really can't find... but that's a very common topic.
user18490
CC BY-SA 3.0
2017-01-28T12:24:24.843Z
2017-01-28T14:22:48.743Z
2017-01-28T14:22:48.743Z
user18490
<p>In QtCreator IDE (C++) any kind of image buffer - result of CPU raytracing or (what I did) frames captured from the camera can be easily rendered or painted on Widget - which is simplest part of the UI available in QtDesigner - UI designer.</p>

<p>You could send your ray tracing engine class to another thread and use timer which every once in a while would emit signal to send your image through signal/slot mechanism to GUI main thread and paint it on the widget. It's quite simple actually. No need of OpenGL or DirectX API. </p>

CC BY-SA 3.0
2017-01-28T14:50:53.220Z
If I wrote my ray tracer as a .DLL and used P/Invoke in C# to use it, could I then use the image buffer to send the image buffer to the picturebox? This is quite similar to what you said which got me thinking if I could do this with C#.
Arjan Singh
CC BY-SA 3.0
2017-01-28T14:52:44.720Z
Yeah probably. I'm not into c# but Visual Studio with c# libs is pretty robust IDE too.
mdkdy
CC BY-SA 3.0
2017-01-28T15:02:33.843Z
@narthex: it's a solution but saying that dealing with Qt is easy is not so true if you are a beginner in programming. Yes QtCreator simplified things a lot but you already introduced to the OP a lot of complex concepts (like signal/slots), etc which will take time to digest. The OP is interested in learning graphic, and so learning a graphics API is more a priority than learning Qt;-))) He can do this later ... + plus keep in mind that Qt UI are drawn in OpenGL and DX)))
user18490
CC BY-SA 3.0
2017-01-28T15:11:18.157Z
After looking online, I'm gonna write my ray tracer as a .DLL then use the data from the image buffer use `PictureBox.SetPixel(x, y, color)` I wanted to give my Ray Tracer a UI so writing the ray tracer in .DLL was inevitable. The OpenGL/DirectX method seems quite interesting and if the SetPixel method is too slow I'll just go with that.
Arjan Singh
CC BY-SA 3.0
2017-01-28T15:21:53.410Z
@user18490 OP stated that he is looking for simple solution to view his image in UI application and this is in my opinion the simplest and involves the least lines of code instead of tedious graphical API. Also  making UI application as OP posted in image not only in Qt invevitably involves learning  such concepts as GUI thread and some kind of signals or events.
mdkdy
CC BY-SA 3.0
2017-01-30T10:30:36.010Z
@Narthex: very true and I don't try to argue with you or pick up a fight)). There are strong divergence of opinion on the topic. I worked for 20 years with many engineers on developing complex software and I just point out that from my experience it is better to take the time to learn yourself the concepts your describe than just using a very complex API such as Qt that hides a lot of these things for you and yet that you have to use. I strongly disagree with the idea that these concepts are hard to learn. This is my opinion I have proven it many times in my work, but won't go on a crusade.
user18490
CC BY-SA 3.0
2017-01-28T14:44:13.377Z
2017-01-28T14:51:49.923Z
2017-01-28T14:51:49.923Z
mdkdy
<p>In my ray tracer, I render my images out to a .PPM file and then view it in photoshop. To make things easier and faster I want my ray tracer to open up another window and show the image being rendered each ray at a time like how modern renderers like Mental Ray or V-Ray do it. </p>

<p>How is this done? What is the most common method? I tried writing a viewer in C# that uses a <code>picturebox</code> to load the image which is then constantly refreshed but that doesn't work since the image cannot be shared. After asking on reddit most people suggested writing the image to an OpenGL quad as a texture but I don't want to do this as it complicates things. I've taken a look at at the <code>setpixel</code> function which will set the pixel's color at a specified coordinate and color, is this the way to do it? </p>

<p>It is really great to watch your image be rendered, it is also helpful because if your image is rendering wrong you can stop rather than waiting for the entire image to rendered and then noticing there is a problem. </p>

<p><em>(the image below is 3DS Max with Mental Ray which shows image being rendered each Ray at a time, I want to achieve this)</em></p>

<p><a href="https://i.sstatic.net/UyUk5.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/UyUk5.jpg" alt="enter image description here"></a></p>

CC BY-SA 3.0
2017-01-28T12:52:30.877Z
So you are into ray tracing and you are worried about creating an OpenGL window? :)
mdkdy
CC BY-SA 3.0
2017-01-28T14:06:58.837Z
If you really don't want to work with anything except .ppm files, you could render to an array of initially zeroed pixel values in memory, and save a series of .ppm files at regular intervals (probably more like one image per row rather than one image per pixel, otherwise you'll have millions of image files in the folder). You'll then be one step closer to the approach described in the answer.
trichoplax is on Codidact now
CC BY-SA 3.0
2017-01-28T14:30:44.460Z
@Arjan & Trichoplax. Yes that's actually a good idea. I was thinking trying that one day but never got the time which is to write the file to disk and let some JavaScript if your browser checking every say 2s the file on disk, reload it display it in your browser)). It would work not sure about the efficiency probably poor but with canvas now it's easy (don't even need WebGL).
user18490
<raytracing><c++><ui>
How to watch image being ray traced?
Arjan Singh
# How to watch image being ray traced?

(Asked by: username_0 on 2017-01-27)

In my ray tracer, I render my images out to a .PPM file and then view it in photoshop. To make things easier and faster I want my ray tracer to open up another window and show the image being rendered each ray at a time like how modern renderers like Mental Ray or V-Ray do it.

How is this done? What is the most common method? I tried writing a viewer in C# that uses a `picturebox` to load the image which is then constantly refreshed but that doesn't work since the image cannot be shared. After asking on reddit most people suggested writing the image to an OpenGL quad as a texture but I don't want to do this as it complicates things. I've taken a look at at the `setpixel` function which will set the pixel's color at a specified coordinate and color, is this the way to do it?

It is really great to watch your image be rendered, it is also helpful because if your image is rendering wrong you can stop rather than waiting for the entire image to rendered and then noticing there is a problem.

*(the image below is 3DS Max with Mental Ray which shows image being rendered each Ray at a time, I want to achieve this)*

[![enter image description here](https://i.sstatic.net/UyUk5.jpg)](https://i.sstatic.net/UyUk5.jpg)

**Tags:** raytracing, c++, ui

> **Comments:**
> **username_1**: So you are into ray tracing and you are worried about creating an OpenGL window? :)  
> **username_2**: If you really don't want to work with anything except .ppm files, you could render to an array of initially zeroed pixel values in memory, and save a series of .ppm files at regular intervals (probably more like one image per row rather than one image per pixel, otherwise you'll have millions of image files in the folder). You'll then be one step closer to the approach described in the answer.  
> **username_3**: @username_0 & username_2. Yes that's actually a good idea. I was thinking trying that one day but never got the time which is to write the file to disk and let some JavaScript if your browser checking every say 2s the file on disk, reload it display it in your browser)). It would work not sure about the efficiency probably poor but with canvas now it's easy (don't even need WebGL).  

---

## 2 answers

### Answer by username_3 on 2017-01-28. Score: 4 | Accepted answer

This is a very common question that most people in your situation (interested or fascinated shall I say in Computer Graphics) have and a problem they want to figure out. The solution is pretty simple, though not necessarily that straightforward to implement.

I can't make a specific answer because it depends on the OS you are using, and as I said this is not something you can do in 2 lines of code.

The answer is to use some sort of library that:

1. allows you to create a window on your system
2. allows you to display some content (an image) in the window you created and displayed to the screen

The first task is generally quite complex regardless of the OS you use (MacOS, Windows, Linux). For the second step, you need to generally go through some sort of graphics API (like OpenGL).

So there is hope for you. One thing you can do is use some other library that works as a wrapper around 1) and 2) In other words they help you especially with the creation of the window, and then if you know OpenGL you can do the rest of the work. You will need to create some texture that you will fill with the content of your image as it gets rendered and display this texture to the screen (that's pretty basic in OpenGL though you need to know this API in order to do so).

[GLFW](http://www.glfw.org/docs/latest/quick.html) is a great library that will allow you to do that. It's simple to use and compile and install, etc. You can alternatively use Qt but I don't recommend it unless you want to become a professional programmer.

I had some documentation about the whole process but it's offline right now. I might put it back in a few weeks but you will need to wait I am afraid.

# EDIT

I am editing the answer to respond to your comment. The algorithm would look like this:

```
Color *buffer = Color  char [w * h];
// create a texture that you can map onto the quad stretched over the area
// of the window. You will need to create a quad rendered in the space of the
// window, aka you in 2D not 3D.
...
// now render your image using you ray-tracer
for (j = 0; j < h; ++h) {
    for (i =0; i < w; ++i) {
        buffer[j * w + i] =  trace(orig, dir, ...);
    }
    // it is not very efficient to update your window each time you have 
    // a new pixel so do this every row or every 10 rows ... you get the idea
    // copy content of your buffer into the GL texture
    // I am not using the right calls here, too lazy to find the right ones
    glCopyTexture(myGLTextureId, buffer, (sizeof(char) * 3 * w * h); 
    // do the texture binding, etc... all GL or DX stuff
    ...
    // this will update your window with the content of the buffer
    glSwapBuffer(); 
}
// now save content of buffer to image file
saveToDisk(buffer);

```

Windows? Arg(. You will have to use DirectX calls indeed but they 2 APIs are very close.

> **Comments:**
> **username_0**: Thanks! I think I will do this with DirectX. So first I need to load the image as a texture on a quad from a specified file path (where the image is being rendered to) and then as the image is being rendered it will show up on the screen. Will I manually need to refresh the image as it is being rendered to see the progress (unload, delete, reload & repeat within DirectX) or is this unnecessary? I did this in C# with a picturebox but I got an error since I cannot read and write the file simultaneously or something like that, will the same happen here?  
> **username_0**: I'm on Windows by the way.  
> **username_2**: @username_0 if I understand correctly, this answer will give you somewhere to send your partial image as you create it, rather than displaying the saved file. Treat them as two separate things. Display the image pixel by pixel as you create it in memory, and save it to file at the end when it is complete.  
> **username_0**: @username_2 How can I copy the data from the image buffer to a DirectX texture? Loading, and displaying the texture isn't hard but how do I create the texture with the pixel data? Should I make this a separate question?  
> **username_2**: @username_0 does sound like a separate question.  
> **username_3**: @username_0 Though I have to say username_0 that they are plenty of tutorials out there on how to do that ... "How can I copy the data from the image buffer to a DirectX texture? ...".  I think it is important you also look for such tutorials before asking your questions here and only ask if you really can't find... but that's a very common topic.  

---

### Answer by username_1 on 2017-01-28. Score: 1

In QtCreator IDE (C++) any kind of image buffer - result of CPU raytracing or (what I did) frames captured from the camera can be easily rendered or painted on Widget - which is simplest part of the UI available in QtDesigner - UI designer.

You could send your ray tracing engine class to another thread and use timer which every once in a while would emit signal to send your image through signal/slot mechanism to GUI main thread and paint it on the widget. It's quite simple actually. No need of OpenGL or DirectX API.

> **Comments:**
> **username_0**: If I wrote my ray tracer as a .DLL and used P/Invoke in C# to use it, could I then use the image buffer to send the image buffer to the picturebox? This is quite similar to what you said which got me thinking if I could do this with C#.  
> **username_1**: Yeah probably. I'm not into c# but Visual Studio with c# libs is pretty robust IDE too.  
> **username_3**: @narthex: it's a solution but saying that dealing with Qt is easy is not so true if you are a beginner in programming. Yes QtCreator simplified things a lot but you already introduced to the OP a lot of complex concepts (like signal/slots), etc which will take time to digest. The OP is interested in learning graphic, and so learning a graphics API is more a priority than learning Qt;-))) He can do this later ... + plus keep in mind that Qt UI are drawn in OpenGL and DX)))  
> **username_0**: After looking online, I'm gonna write my ray tracer as a .DLL then use the data from the image buffer use `PictureBox.SetPixel(x, y, color)` I wanted to give my Ray Tracer a UI so writing the ray tracer in .DLL was inevitable. The OpenGL/DirectX method seems quite interesting and if the SetPixel method is too slow I'll just go with that.  
> **username_1**: @username_3 OP stated that he is looking for simple solution to view his image in UI application and this is in my opinion the simplest and involves the least lines of code instead of tedious graphical API. Also  making UI application as OP posted in image not only in Qt invevitably involves learning  such concepts as GUI thread and some kind of signals or events.  
> **username_3**: @Narthex: very true and I don't try to argue with you or pick up a fight)). There are strong divergence of opinion on the topic. I worked for 20 years with many engineers on developing complex software and I just point out that from my experience it is better to take the time to learn yourself the concepts your describe than just using a very complex API such as Qt that hides a lot of these things for you and yet that you have to use. I strongly disagree with the idea that these concepts are hard to learn. This is my opinion I have proven it many times in my work, but won't go on a crusade.  

---

