Why is duplicate text being rendered onto the Z buffer of a different texture when using D3DXFont::DrawText? - text

I've been stumbling over this for a while and was wondering if anyone has run into this problem before.
The application I'm working on is divided into multiple data plots and a single timeline at the bottom of the screen. Each plot (which is actually multiple textures layered on top of each other) as well as the timeline is rendered to a separate texture. The timeline texture is rendered first, followed by each of the plot textures from the top of the screen to the bottom. I am using DXUT and DirectX9 (March 2009).
After adding time text to the timeline texture, I noticed that the text was repeated in the title bar of every data plot. Here's a screencap of a portion of the display, it shows just a single plot, but the text repeats on every plot opened:
It seems like it is tied directly to the DrawText being called in the timeline's render function. I do use relative coordinates as the rect being passed to DrawText, but since I've already set the render target to the desired texture it should only affect the current texture. Not every texture rendered afterward.
Has anyone ever run into any problems similar to this using D3DXFont?
EDIT: After some more experimentation, it looks like it has something to do with the Z buffer. By adding D3DCLEAR_ZBUFFER to the clear on each texture surface, the duplicate text is gone. While the problem seems bypassed for now, I'm still curious as to why the Z buffer for a completely separate texture was being written during my DrawText call.

The Z Buffer state is persistent.
For example,
SetDepthStencilSurface(X)
SetRenderTarget(A)
Draw()
SetRenderTarget(B)
Draw()
Both Draw calls will use the same depth buffer.
The DrawText is not changing the depth buffer that you have set. It assumes you meant to do what you did.

Related

How can I get the color of a pixel on screen with Node.js or C?

I am trying to get the color of a pixel on my screen using node.js. I want it to be returned in RGB format, e.g. (255, 0, 0). My current solution is to use screenshot-desktop to screenshot my entire screen in JPG format, decode it to get the raw pixel data, and get the color of a given pixel. However, this lags out my entire computer for 1-2 seconds as it is taking the screenshot. This is unusable as I would like to do this multiple times per second. So my question is: How can I get the color of a given pixel on the screen, without taking a full screenshot?
I am using Linux with X11. There is an X11 library for node.js, so I asssume I should use that to get the pixel color, I'm just not sure how. If you could show me how to do it in C then I can easily use node.js to do the same thing.
Thanks!
Oh my gosh I just figured it out after posting this. I was using robotjs for reading the mouse position and I totally forgot it can do screen stuff too! So, the solution would be to do
var robot = require('robotjs');
var color = robot.getPixelColor(x, y);
X11 solution using x11 node library ( I am the author ):
query windows tree with QueryTree starting at the root window
get every child geometry using GetGeometry request
if your point is not inside any child, use current window id and get 1x1 pixmap from the current image: GetImage(format, currentWindow, x, y, 1, 1, planeMask) ( 2 for format and 0xffffffff for plane mask should work ). Make sure you calculate relative x y position as you travers windows tree.
if child window covers your point query children for that window and repeat again. Note that QueryTree returns windows in bottom to top stacking order so make sure you pick last one covering your point
Once you have 1x1 pixmap from the topmost window under your point - the buffer should contain only color bytes for your image, RGB order and bit mask might depend on red_mask, green_mask, blue_mask from display.screen[0].depths[visual].
If you cache "topmost window" between requests and only start from root when no match anymore the above solution might be much more performant then the one using robotjs ( although much more low level and complicated ) Good luck!

Using tk.Scrollbar to update images in tk.canvas

I developed a small tkinter GUI to display (and export) images stored in a proprietary format. I managed to load the data into a 3D numpy uint8 array. I want to display one slice of that 3D array in a tkinter.canvas. To do so I used ImageTk.PhotoImage.
Underneath the Canvas I inserted a tk.Scrollbar. My goal is to use that scrollbar to let the user actively "scroll" though the 3D Array. Basically when the slider is moved or any of the arrows is pressed the slice corresponding to the slider position should be displayed in the canvas.
Right now I have the issue that I don't understand how to set the range of the scrollbar to my z-Dimension and then how to bind the scrollbar events to the movement or arrow actions to update the canvas.
Right now I don't have example code since this is a more conceptual problem.
Could you point me in the right direction how to solve this?
Best TMC
edit: Photo
Tkinter Gui with Canvas and Scrollbar
The solution is to use tkinter.Scale instead of tkinter.Scrollbar . As a side note, the command within:
scale = tk.Scale(yourTkFrame, from_=min, to=max, orient='horizontal', command=doSomething)
passes two values to the function doSomething.
Using the Scale allows to use the scale.get() method to retrieve the position between min and max values. Those can then be used to set the image corresponding to the selected position on the slide.

Making a drawing game using phaser

I am developing a game using Phaser where a user is rendered a triangular canvas. User can crop this canvas to any possible shape by drawing any crop pattern on the canvas. Besides this, i need to get this cropped canvas in suitable data format to be used as an image to render and also trace changes made on this canvas for undoing puspose.
Any help to get this through will be appreciated.
Thanks in advance.
Initial canvas
Canvas after crop
Cropped canvas used to create new canvas
So it's like folding a piece of paper and then cutting it so it looks like a snowflake? Interesting idea.
I think you could either use BitmapData to draw the initial cut out, then copy that bitmap 6 (or 12?) times and rotate and flip x-axis to construct the rest. Though maybe there will be seems, so like small lines, between the parts idk.
Another appproach would be to keep track of the initial cutlines like vectors. Then use math/trigonometry to calculate the result. No idea how to do this though, sorry.

How to avoid zooming text in svg

If I have several lines (blocks, polygons, whatever) spread about the canvas, and I want their stroke-width to remain the same even when I zoom in ...
for example, I have a graph of temperature vs time, and there is a little line on the time axis to mark each hour - so the distance between them increases as I zoom in, but I don't want them to get any thicker ...
Then I can provide an attribute vector-effect="non-scaling-stroke" for the t-axis object.
But suppose I have several texts ...
for example, every 24th hour has a date written beside it ...
then there seems to be no way to prevent the text from being stretched; i.e. I cannot provide an attribute text-effect="non-scaling-text" ...
In my example, I am only zooming in one dimension, and stretched-out text is ugly, and squashed-in text is unreadable.
Is there any workaround for this?
Here are more details, as requested.
I am drawing a graph on a canvas much wider than the viewing area (and which will get even wider if it gets zoomed). Sliders are provided so the viewer can pan and zoom to inspect any part of it in detail.
So there are two objects graphobj which comes from the application data and tlineobj which is the time axis, and which consists of a line the length of the canvas, with short vertical lines to mark off the hours and bigger ones to mark the start of each day. So each time the viewer alters a slider it obeys something like
tlineobj.setAttribute("transform", 'translate('+someamount+',0), 'scale('+someamount+',1)')
ans similarly for graphobj.
So I am stretching it out horizontally, but not vertically.
Now tlineobj is constructed by a Javascript routine. For simplicity, forget about names of days and months, and let us just write daynos in the proper places. So I write a function like:
Function doDate(i) {
dayno = some_model.cloneNode(false)
dayno.appendChild(document.createTextNode(i))
dayno.setAttribute("x", i*some_factor)
tlineobj.appendChild(dayno)
}
But now when the tlineobj gets zoomed, not only does the distance between the daynos get increased (which is what we want), but each dayno itself gets stretched out, because there is no way to tell the SVG zooming machanism not to do this (although there is such a mechanism to do it for vector objects).
The only way I can see to do it is to cause the whole of the tlineobj to be regenerated from scratch each time the graph is re-zoomed, and that seems a very kludgy way to so it (or I could go though all the dayno objects and change some attribute within them, but that is just as bad).

What is the proper way of drawing label in OpenGL Viewport?

I have a multiviewport OpenGL modeler application. It has three different viewports : perspective, front and top. Now I want to paint a label for each viewport and not succeeding in doing it.
What is the best way to print a label for each different perspective?
EDITED : The result
Here is the result of my attempt:
I don't understand why the perspective viewport label got scrambled like that. And, Actually I want to draw it in the upper left corner. How do I accomplished this, because I think it want 3D coordinate... is that right? Here is my code of drawing the label
glColor3f(1,0,0);
glDisable(GL_DEPTH_TEST);
glDepthMask(GL_FALSE);
glRasterPos2f(0,0);
glPushAttrib(GL_LIST_BIT); // Pushes The Display List Bits
glListBase(base - 32); // Sets The Base Character to 32
glCallLists(strlen("Perspective"), GL_UNSIGNED_BYTE, "Perspective"); // Draws The Display List Textstrlen(label)
glPopAttrib();
I use the code from here http://nehe.gamedev.net/data/lessons/lesson.asp?lesson=13
thanks
For each viewport switch into a projection that allows you to supply "viewport space" coordinates, disable depth testing (glDisable(GL_DEPTH_TEST)) and depth writes (glDepthMask(GL_FALSE)) and draw the text using one of the methods used to draw text in OpenGL (texture mapped fonts, rendering the full text into a texture drawing that one, draw glyphs as actual geometry).
Along with #datenwolf's excellent answer, I'd add just one bit of advice: rather than drawing the label in the viewport, it's usually easier (and often looks better) to draw the label just outside the viewport. This avoids the label covering anything in the viewport, and makes it easy to get nice, cleanly anti-aliased text (which you can normally do in OpenGL as well, but it's more difficult).
If you decide you need to draw the text inside the viewport anyway, I'll add just one minor detail to what #datenwolf said: since you generally do want your text anti-aliased (even if the rest of the picture isn't) you generally want to draw the label after all the other geometry of the picture itself. If you haven't turned on anti-aliasing otherwise, you generally will want to turn it on for drawing the text.

Resources