- a.devaykin
- Posts: 8
- Joined:
WebGL build not working in browser
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.
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.
Re: WebGL build not working in browser
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.
You could also try one of the profiling descibed here:
https://emscripten.org/docs/optimizing/ ... file-webgl
Please, let us know about it.
- a.devaykin
- Posts: 8
- Joined:
Re: WebGL build not working in browser
Thank you for the reply.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.
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.
Re: WebGL build not working in browser
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.
- a.devaykin
- Posts: 8
- Joined:
Re: WebGL build not working in browser
Thanks for helping! Unfortanutely still no luck.
I did all you proposed. Now our UI rendering code looks basically as follows:
Played with glClear a bit to ensure render target is the default FB:
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:
Thank you for the support.
I did all you proposed. Now our UI rendering code looks basically as follows:
Code: Select all
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();
Code: Select all
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();
This makes me think that we are linking or using Noesis .bc files somehow wrong.
Makefile we use to build with emscripten:
Code: Select all
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)
Re: WebGL build not working in browser
So, neither the glClear works? If you remove the renderer->Render(); part, do you see the framebuffer cleared at the given color?Played with glClear a bit to ensure render target is the default FB:
- a.devaykin
- Posts: 8
- Joined:
Re: WebGL build not working in browser
Both glClears work - first clears the whole screen and the second clears small rectangle in the corner as expected. In both ANGLE and Web.So, neither the glClear works? If you remove the renderer->Render(); part, do you see the framebuffer cleared at the given color?Played with glClear a bit to ensure render target is the default FB:
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.
Re: WebGL build not working in browser
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.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.
Who is online
Users browsing this forum: Ahrefs [Bot], Google [Bot] and 13 guests