Forums | NoesisGUI

Posted: **22 Feb 2019, 15:04**

Hello.
We have been using Noesis for a long time already in the desktop OpenGL application and it works fine (C++ API). Now when we have WebGL version (C++ -> JS via Emscripten) we cannot make Noesis show up in browser. It works fine in both WebGL pipeline simulated via Desktop OpenGL by our engine and in ANGLE, but not in actual WebGL in browser.

Noesis in browser seems to work in general, e.g. errors in XAML are reported. But is not rendered to the canvas. The only difference between ANGLE and Browser versions is the GL context initialization code (not Noesis RenderDevice subclass - this one is shared between Angle and Web renderers, so executed code is identical) and Noesis binaries (dll vs. bc).

I know it is hard to tell anything without seen the code... But maybe it is a known issue or there are known caveats.

Last try to make it work was done using version 2.2.0b5 (r7619). Provided examples work well.

Posted: **25 Feb 2019, 15:54**

Maybe this could be related to GL states, OpenGL is really tricky about this. I wonder if you could try the following: just remove all your drawings call from your code, leave everything untouched but all GL calls. Let's see if that way Noesis appears.

You could also try one of the profiling descibed here:

https://emscripten.org/docs/optimizing/ ... file-webgl

Please, let us know about it.

Posted: **26 Feb 2019, 16:20**

Maybe this could be related to GL states, OpenGL is really tricky about this. I wonder if you could try the following: just remove all your drawings call from your code, leave everything untouched but all GL calls. Let's see if that way Noesis appears.

You could also try one of the profiling descibed here:

https://emscripten.org/docs/optimizing/ ... file-webgl

Please, let us know about it.

Thank you for the reply.

Unfortanutely I could not bring any of those tools to work with GL context in browser. The only thing that really works is this firefox extension:
https://addons.mozilla.org/en-US/firefo ... pector-js/
Not that fancy as RenderDoc, but at least I could have a look at gl calls and state. And they are pretty much the same compared to the Angle state captured in RenderDoc, except for the viewport sizes.
I've disabled all the rendering except for Noesis and changed GLRenderDevice to clear with (0, 0, 1, 1) to be able to see if at least the very first clear call works. And I can see corresponding cleared areas after call to glClear() in the Angle capture, but not in the WebGL capture.

I've uploaded RenderDoc capture and spector.js results page (capture save didn't work :/) if you will want to have a brief look :)
https://drive.google.com/drive/folders/ ... sp=sharing

Thank you.

Posted: **01 Mar 2019, 12:40**

Thanks for these reports. Unfortunately, I am unable to figure out the problem. I would try the following (checking results on each step):

If you are using more than one view, I would simplify the code to use only one.
Use a very simple XAML, a quad for example.
Forget about the Offscreens for now. Do not call RenderOffscreen.
At this point you should only have view->Update, render->UpdateRenderTree and render->Render
Remove the render->Render call with a glClear. Clears are tricky in OpenGL, make sure you disable scissoring and enable color masks:
Code: Select all
```
V(glDisable(GL_SCISSOR_TEST));
V(glColorMask(true, true, true, true));
V(glClearColor(0, 0, 1, 1);
V(glClear(GL_COLOR_BUFFER_BIT));
```
If nothing is rendered at last point, just double check that the default framebuffer is bound.

Please, let us know about the results.

Posted: **01 Mar 2019, 15:27**

Thanks for helping! Unfortanutely still no luck.
I did all you proposed. Now our UI rendering code looks basically as follows:

m_mainView->Update(elapsedTime);
auto renderer = m_mainView->GetRenderer();
renderer->UpdateRenderTree();
renderExecutor.renderToWindow(m_windowRes); // A bit of our code to render to default FB
renderer->Render();

Played with glClear a bit to ensure render target is the default FB:

m_mainView->Update(elapsedTime);
auto renderer = m_mainView->GetRenderer();
renderer->UpdateRenderTree();
renderExecutor.renderToWindow(m_windowRes);

glColorMask(true, true, true, true);

glClearColor(0.0, 1.0, 0.0, 1.0);
glClear(GL_COLOR_BUFFER_BIT);

glEnable(GL_SCISSOR_TEST);
glScissor(20, 20, 100, 100);
glClearColor(0.0, 0.0, 1.0, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
glDisable(GL_SCISSOR_TEST);

glDisable(GL_DEPTH_TEST);
glDisable(GL_CULL_FACE);

renderer->Render();

Still works as expected in Angle, but not in browser :/
This makes me think that we are linking or using Noesis .bc files somehow wrong.
Makefile we use to build with emscripten:

SHELL = cmd.exe

CXX_FLAGS=-std=c++1z -s USE_WEBGL2=1 -lGL -Wno-nonportable-include-path -Wall -Wno-unknown-pragmas -Wno-missing-braces -Wno-overloaded-virtual -Wno-format-extra-args --closure 0
CXX_FLAGS += --bind --js-library ApplicationApi.js
CXX_FLAGS += -MMD -MP
CC = emcc

DESTINATION_DIR=..\..\Web

EXTERNAL_FILES := ... # Here our project shared sources

SRC_FILES := $(wildcard *.cpp) $(EXTERNAL_FILES)
OBJ_FILES := $(patsubst %.cpp, %.o, $(SRC_FILES))
STD_AFX := ..\Application\StdAfx.h
STD_AFX_O := $(patsubst %.h, %.h.pch, $(STD_AFX))
D_FILES := $(patsubst %.cpp, %.d, $(SRC_FILES)) $(STD_AFX:%.h=%.h.d)
INCLUDE_DIRECTORIES := -I..\ExternalLibraries\Inc -I..\Application -I..\Application.Web -I..\ExternalLibraries\Inc\Noesis
LIBS=..\ExternalLibraries\Lib\Emscripten\FreeImage.bc \
..\ExternalLibraries\Lib\Emscripten\tinyxml.bc \
..\ExternalLibraries\Lib\Emscripten\BulletDynamics.bc \
..\ExternalLibraries\Lib\Emscripten\BulletCollision.bc \
..\ExternalLibraries\Lib\Emscripten\LinearMath.bc \
..\ExternalLibraries\Lib\Emscripten\Noesis.bc \
..\ExternalLibraries\Lib\Emscripten\NoesisApp.bc \
-s USE_FREETYPE=1 -s USE_ZLIB=1
APPLICATION_JS := $(DESTINATION_DIR)\application.js

# For every cpp file, we expect a .d file with the header dependencies
-include $(D_FILES)

.PHONY: clean all release profile debug

# General dependencies
all: $(APPLICATION_JS) $(SYSTEMDATA) $(PROJECTDATA) $(STARTCFGDATA)
release: all
debug: all
profile: all

all: CXX_FLAGS += -s WASM=1 -s FORCE_FILESYSTEM=1 -s ALLOW_MEMORY_GROWTH=1 -s ABORTING_MALLOC=0 -s ERROR_ON_UNDEFINED_SYMBOLS=1 -s DISABLE_EXCEPTION_CATCHING=0 -Werror -DNS_VERSION=2.2.0b5 -DNS_APP_FRAMEWORK -DNS_STATIC_LIBRARY  

debug: CXX_FLAGS += -s ASSERTIONS=1 -O2 -D _DEBUG -g3 -DNS_CONFIG=Debug -DNS_MINIMUM_LOG_LEVEL=0
release: CXX_FLAGS += -D _RELEASE -D NDEBUG -O3 -DNS_CONFIG=Release
profile: CXX_FLAGS += -D _PROFILE -O2 -DNS_CONFIG=Profile -DNS_PROFILE -DNS_MINIMUM_LOG_LEVEL=1

# Linker step
$(APPLICATION_JS): $(OBJ_FILES)
	$(CC) $(CXX_FLAGS) $(LIBS) $(INCLUDE_DIRECTORIES) $^ -o $(APPLICATION_JS) --emrun

# source files
%.o: %.cpp $(STD_AFX_O)
	$(CC) $(CXX_FLAGS) $(INCLUDE_DIRECTORIES) -include-pch $(STD_AFX_O) -o $@ $<

# precompiled header
$(STD_AFX_O): $(STD_AFX)
	$(CC) $(CXX_FLAGS) $(INCLUDE_DIRECTORIES) -xc++-header $(STD_AFX) -o $(STD_AFX_O)

Thank you for the support.

Posted: **01 Mar 2019, 15:39**

Played with glClear a bit to ensure render target is the default FB:

So, neither the glClear works? If you remove the renderer->Render(); part, do you see the framebuffer cleared at the given color?

Posted: **01 Mar 2019, 15:46**

Played with glClear a bit to ensure render target is the default FB:
So, neither the glClear works? If you remove the renderer->Render(); part, do you see the framebuffer cleared at the given color?

Both glClears work - first clears the whole screen and the second clears small rectangle in the corner as expected. In both ANGLE and Web.

If I remove renderer->Render(); then Noesis disappears from ANGLE renderer.
So having this line removed both ANGLE and Web result in equivalent renderings - glClears() do their work and no Noesis is visible. With that line glClears do their job, ANGLE has Noesis UI, Web still does not.

Posted: **02 Mar 2019, 13:24**

If I remove renderer->Render(); then Noesis disappears from ANGLE renderer.
So having this line removed both ANGLE and Web result in equivalent renderings - glClears() do their work and no Noesis is visible. With that line glClears do their job, ANGLE has Noesis UI, Web still does not.

How easy would be at this point to comment out all the GPU interactions (all but Noesis render call) done by your application? I assume you are doing GPU calls because a unmodified Noesis sample works.

Forums | NoesisGUI

WebGL build not working in browser

WebGL build not working in browser

Re: WebGL build not working in browser

Re: WebGL build not working in browser

Re: WebGL build not working in browser

Re: WebGL build not working in browser

Re: WebGL build not working in browser

Re: WebGL build not working in browser

Re: WebGL build not working in browser