Issue with NoesisGUI + C++ OpenGL (Frame Buffer not Cleared / Overlapping Rendering

q158772500 · 19 Aug 2025, 11:26

Hi everyone,

I am currently integrating NoesisGUI into my C++ + OpenGL 2.x fixed-function pipeline project.
Most features are working fine, and in the vast majority of cases it runs normally, but I encountered a serious rendering issue when certain UI components extend beyond the screen edges.

From my experience, this affects my original OpenGL rendering in different ways:

When rendering NoesisGUI, the previous frame is not cleared, so semi-transparent elements get stacked until they look opaque. (see screenshot Fig.1, Fig.2)

In some cases, my original OpenGL scene stops rendering and only NoesisGUI is rendered, again with the previous frame not being cleared (see Fig.3, Fig.4).

This looks like a frame buffer / scissor / clear issue, but I’m not sure whether I am missing a required call or handling the integration incorrectly.

xaml Code

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignWidth="1920"
  d:DesignHeight="1080" xmlns:b="http://schemas.microsoft.com/xaml/behaviors">
  <Page.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="ResourceDictionary.xaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Page.Resources>
  <Grid x:Name="Master">
    <Grid x:Name="MapMasterGrid">
      <Viewbox x:Name="MapViewBox">
        <Grid x:Name="MapGrid" Width="800" Height="600" ClipToBounds="True">
          <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="8*"/>
            <RowDefinition Height="1*"/>
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="8*"/>
            <ColumnDefinition Width="1*"/>
          </Grid.ColumnDefinitions>
          <Grid Grid.Column="1" Grid.RowSpan="3">
            <Grid.Background>
              <SolidColorBrush Color="#00000000"/>
            </Grid.Background>
            <Grid x:Name="MapImageGird" RenderTransformOrigin="0.5,0.5" Width="512" Height="512" HorizontalAlignment="Center" VerticalAlignment="Center">
              <Grid.RenderTransform>
                <TransformGroup>
                  <ScaleTransform ScaleX="{Binding Path=Value, ElementName=MapScaleSlider}" ScaleY="{Binding Path=Value, ElementName=MapScaleSlider}"/>
                  <SkewTransform/>
                  <RotateTransform Angle="-45"/>
                  <TranslateTransform/>
                </TransformGroup>
              </Grid.RenderTransform>
              <Grid.Background>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                  <GradientStop Color="#FF000000" Offset="0"/>
                  <GradientStop Color="#FFFFFFFF" Offset="1"/>
                </LinearGradientBrush>
              </Grid.Background>
            </Grid>
          </Grid>
          <StackPanel Grid.Column="2" Grid.Row="1">
            <RepeatButton x:Name="MapPlus" Content="+" Width="30" Height="30"/>
            <Slider x:Name="MapScaleSlider" Orientation="Vertical" Width="30" Maximum="1.5" Minimum="0.5" Value="0.75" Height="420"/>
            <RepeatButton x:Name="MapDec" Width="30" Height="30" Content="-"/>
          </StackPanel>
          <Button x:Name="MapExitBtn" Style="{DynamicResource ExitButtonStyle}" VerticalAlignment="Center" Grid.Column="2" Margin="0" HorizontalAlignment="Center" Visibility="Collapsed"/>
        </Grid>
      </Viewbox>
    </Grid>
  </Grid>
</Page>

C++ Code

enum class ViewType
{
	Upper,
	ToolTip,
	HUD,
};
struct ViewData
{
	Noesis::Ptr<Noesis::FrameworkElement> xaml;
	Noesis::Ptr<Noesis::IView> view;
	Noesis::Grid* backGrid;
	bool isVisible;
	bool isFirst;
};
std::map<ViewType, ViewData> g_views;
void NoesisGUIRender(ViewType viewType)
{
	static uint64_t startTime = Noesis::HighResTimer::Ticks();

	RECT rc;
	::GetClientRect(g_hWnd, &rc);
	uint32_t clientWidth = rc.right - rc.left;
	uint32_t clientHeight = rc.bottom - rc.top;

	uint64_t time = Noesis::HighResTimer::Ticks();

	if (g_views[viewType].view != NULL && g_views[viewType].isVisible)
	{
		g_NoesisVM->UpdateEvent(viewType);
		g_views[viewType].view->Update(Noesis::HighResTimer::Seconds(time - startTime));
		g_views[viewType].view->GetRenderer()->UpdateRenderTree();
		RenderView(g_views[viewType].view, g_context, clientWidth, clientHeight);
	}

	RestoreValues();

	if (viewType != ViewType::ToolTip && g_views[ViewType::ToolTip].isVisible)
		NoesisGUIRender(ViewType::ToolTip);
}

My environment

C++ with OpenGL 2.1 fixed pipeline (legacy project, not using shaders yet)

NoesisGUI Version 3.2.7

Windows 10

NoesisGUI Renderer: OpenGL

Questions

Do I need to explicitly clear some buffers before/after calling Noesis::GUI::Render()?

Is there a recommended way to handle clipping / scissoring when UI elements go outside the screen area?

Could this be related to my OpenGL state not being restored correctly after Noesis rendering?

Any suggestions or example code would be greatly appreciated!

Thanks in advance!

19 Aug 2025, 12:14

It is your responsibility to clear buffers and restore the state after calling Noesis.

You can find more information in the Render section of the Integration Tutorial.

Additionally, the sample IntegrationGLUT provides a minimal GL integration example.

q158772500 · 20 Aug 2025, 09:51

It is your responsibility to clear buffers and restore the state after calling Noesis.

You can find more information in the Render section of the Integration Tutorial.

Additionally, the sample IntegrationGLUT provides a minimal GL integration example.

Thanks for your reply!

I have run into a new problem:

My current project contains many different pages (XAML files). Right now, I render them all together by calling the normal update + render pipeline for each XAML. This effectively stacks multiple XAMLs on top of each other.

The problem is:

If I call glClear during each render, the entire screen background is cleared to the glClearColor, which overwrites my original OpenGL rendering.

If I skip clearing, then the XAMLs overlap incorrectly and produce visual artifacts.

So I am not sure about the correct way to manage multiple XAML pages.

Should I:

Combine all the XAMLs into a single UserControl and render only once?

Or is there a recommended structure / best practice for managing and rendering multiple XAML trees without interfering with OpenGL background rendering?

Any suggestions, examples, or references would be very helpful. Thanks!

20 Aug 2025, 15:41

I’m going to mark this topic as solved. If you could share how you fixed the issue, it would be helpful for future readers.

For your new question, please open a separate thread.

Issue with NoesisGUI + C++ OpenGL (Frame Buffer not Cleared / Overlapping Rendering Topic is solved

Issue with NoesisGUI + C++ OpenGL (Frame Buffer not Cleared / Overlapping Rendering

Re: Issue with NoesisGUI + C++ OpenGL (Frame Buffer not Cleared / Overlapping Rendering

Re: Issue with NoesisGUI + C++ OpenGL (Frame Buffer not Cleared / Overlapping Rendering

Re: Issue with NoesisGUI + C++ OpenGL (Frame Buffer not Cleared / Overlapping Rendering

Who is online