Issues Rendering Textures in WebGL

I have not tried FreeImage (is it difficult to build using Emscripten?) but I don't see any warnings "RENDER WARNING: there is no texture bound to the unit 0" in log within a small test in OCCT sample. What is your browser and configuration?

Archived image: external image

#include <Graphic3d_Texture2Dmanual.hxx>
static Handle(Image_PixMap) myDefaultTexture;
extern "C" void onFileDataRead (void* theOpaque, void* theBuffer, int theDataLen) {
  const TCollection_AsciiString aName (theOpaque != NULL ? (const char* )theOpaque : "");
  Standard_ArrayStreamBuffer aStreamBuffer ((const char* )theBuffer, theDataLen);
  std::istream aStream (&aStreamBuffer);
  TopoDS_Shape aShape; BRep_Builder aBuilder; BRepTools::Read (aShape, aStream, aBuilder);

  Handle(AIS_Shape) aShapePrs = new AIS_Shape (aShape);
  aShapePrs->SetMaterial (Graphic3d_NOM_SILVER);
  if (!myDefaultTexture.IsNull()) {
    const Handle(Graphic3d_AspectFillArea3d)& anAspects = aShapePrs->Attributes()->ShadingAspect()->Aspect();
    anAspects->SetTextureMap (new Graphic3d_Texture2Dmanual (myDefaultTexture));
    anAspects->SetTextureMapOn (true);
  }

  aViewer.Context()->Display (aShapePrs, AIS_Shaded, 0, false);
  aViewer.View()->FitAll (0.01, false);
  aViewer.View()->Redraw();
  Message::DefaultMessenger()->Send (TCollection_AsciiString("Loaded file ") + aName, Message_Info);
}

//! File read error event.
static void onFileReadFailed (void* theOpaque) {
  const char* aName = (const char* )theOpaque;
  Message::DefaultMessenger()->Send (TCollection_AsciiString("Error: unable to load file ") + aName, Message_Fail);
}

//! Image file read event.
extern "C" void onImageRead (const char* theFilePath) {
  int aSizeX = 0, aSizeY = 0;
  char* anImgData = emscripten_get_preloaded_image_data (theFilePath, &aSizeX, &aSizeY);
  if (anImgData == nullptr) {
    Message::DefaultMessenger()->Send (TCollection_AsciiString("Error: invalid image ") + theFilePath, Message_Fail);
  }

  Message::DefaultMessenger()->Send (TCollection_AsciiString("Loaded image ") + theFilePath + "@" + aSizeX + "x" + aSizeY, Message_Info);
  /// TODO memleak: free(anImgData) should be added somehow, by subclassing Image_PixMap etc.
  Handle(Image_PixMap) anImage = new Image_PixMap();
  anImage->InitWrapper (Image_Format_RGBA, (Standard_Byte* )anImgData, aSizeX, aSizeY);
  myDefaultTexture = anImage;
}

extern "C" void onImageReadFailed (const char* theFilePath) {
  Message::DefaultMessenger()->Send (TCollection_AsciiString("Error: unable to load image ") + theFilePath, Message_Fail);
}

int main() {
  Message::DefaultMessenger()->Printers().First()->SetTraceLevel (Message_Trace);
  Handle(Message_PrinterSystemLog) aJSConsolePrinter = new Message_PrinterSystemLog ("webgl-sample", Message_Trace);
  Message::DefaultMessenger()->AddPrinter (aJSConsolePrinter); // open JavaScript console within the Browser to see this output
  Message::DefaultMessenger()->Send (TCollection_AsciiString("NbLogicalProcessors: ") + OSD_Parallel::NbLogicalProcessors(), Message_Trace);
  emscripten_set_main_loop (onMainLoop, -1, 0);
  aViewer.run();

  emscripten_async_wget_data ("samples/Ball.brep", (void* )"samples/Ball.brep", onFileDataRead, onFileReadFailed);
  emscripten_async_wget("OCC_logo.png", "/emulated/OCC_logo.png", onImageRead, onImageReadFailed);
  return 0;
}

p, li { white-space: pre-wrap; }

Which browsers have you checked? What is your configuration? 

Hey Kirill,

Using Firefox 78.0.2 and Chrome 83.0.4103.97 on Ubuntu 20, but your sample worked for me just fine so it must have been something with the FreeImage decoding. It took me a bit to figure out what classes to use in the first place so once I found Image_AlienPixMap and realized it required an image lib I got to work getting FreeImage compiled in without realizing there was an easier way! I hadn't considered getting the decoded image from the browser, and haven't use emscripten's image preload plugins before, but it's definitely a preferable approach here.

As for FreeImage, not really sure what the issue there is. I had to tweak some things (adding a few includes, adding a couple return value types that were void, and adding a couple define macros to use the right byte swapping function) to get it to compile, but it seemed to otherwise go through fine. Although they seem minor I can't rule out the tweaks didn't cause some issue, or if there's deeper incompatiblity. That said, as I originally mentioned it did return valid pixel values when querying the decoded pixmap directly, so it still seems like it was at least partly functional.

In any case, I've rewritten things to decode the image with the browser in js when it gets selected by the file input, and it works just fine. I greatly appreciate the assistance!

As a side thing, not sure if I should just create a new thread, but there's a rendering artifact I'm not quite sure how to eliminate that's unrelated to textures. Seems like it would be something simple but: all objects in the scene having a 2d light grey border around them (not the selection highlighting). One of the builds I tried when I was trying to fix the texture issue didn't have it, although I don't know what was different there. Any ideas for relating to that?

Thanks for your time.

all objects in the scene having a 2d light grey border around them (not the selection highlighting) 

Could you share some screenshots with this effect?
And it would be good registering an issue on a Bugtracker with necessary information (usage scenario / reproducing steps / browser version / graphics driver version, etc.).

As for FreeImage, not really sure what the issue there is.

Using image decoding routines provided by Emscripten itself has nice features - they rely on image decoders built-in into browser itself (most likely - native), has minimal impact on WebAssembly size
automatically handles asynchronous decoding (most likely in non-main JavaScript working thread), etc.

From the other side, this approach restricts image file format that could be opened, as well as their pixel formats (basically to 32-bit RGBA) - thus, using FreeImage or another native image library may be useful.
From performance point of view, it should be good, but might have some extra overhead - so that it would be interesting to compare.

FreeImage is not very active project - it still uses SVN repository, not very friendly environment for contributions or for sharing intermediate changes (like making a fork on github).

Still, you may try sharing your changes or contributing to FreeImage project or just sharing a build with headers so that other may try reproducing the problem and see what might be wrong.

I've attached a few screenshots illustrating the effect, which occurs on both browsers.
I'll see if I can add a ticket to the bug tracker if it appears to be a bug and not user error on my part.

And for FreeImage, yeah I got that impression taking a look at it. However I think I'll just be removing it from my OCCT build and use the existing image handling tools, since I only included it under the misconception I needed it in the first place. Perhaps I'll revisit it if I encounter other needs for the deeper image processing it seemed to provide.
 

Using Firefox 78.0.2 and Chrome 83.0.4103.97 on Ubuntu 20

Have you tried the same sample on other systems like Windows?
To check if it is specific to Linux or to something else...

I recall that I've seen such kind of actifacts somewhere (occurred suddenly), but don't recall where...

Hello!

I have same issues on Linux. Does anyone have a solution ?