Exporting a project with GDExtension to the web

[past urchin]

I am trying to use this project: https://github.com/matt-s-clark/godot-gdextension-opencv and exporting it to the web. Feel free to try it out yourself since it's a pretty good example of using external libraries (OpenCV) in Godot 4.3

My question is how can I export it to the web? I have:

1. Enabled "Extensions Support" in the export settings
2. I heard that I'm supposed to build my own export templates from here, so I have gotten the web_dlink_debug.zip and web_dlink_release.zip files and put them in the "Custom Template" section of the export settings.
3. Ensured that the project runs normally in testing (the play button)

I am getting No suitable library found for GDExtension: res://bin/opencv.gdextension. Possible feature flags for your platform: web, s3tc, etc2, nothreads, wasm32, template, debug, template_debug, single upon exporting the project in the Godot editor output.

I am also getting this in the browser console: USER ERROR: No GDExtension library found for current OS and architecture (web.wasm32) in configuration file: res://bin/opencv.gdextension

So this is probably because the Web could not find a compatible library. How do I fix this?

[quaint wind]

I don't know what is offered by that extension, but you need a version of it that has been compiled for the web. It may be in those zip files. Have you extracted the files inside?

[past urchin]

Oh the web_dlink_debug.zip and web_dlink_release.zip files? There's a godot.wasm inside

The Extension offers support for C++ OpenCV inside Godot

And these zip files come straight from the Godot source code branch 4.3 without any changes

[quaint wind]

Ah, sorry, i misunderstood what those zip files were

Can you show me inside the bin folder?

[past urchin]

Sure thing

.                                           libopencv_dnn.so.410              libopencv_hfs.so.4.10.0                  libopencv_objdetect.so.4.10.0         libopencv_shape.so                    libopencv_videoio.so
..                                          libopencv_dnn.so.4.10.0           libopencv_highgui.so                     libopencv_optflow.so                  libopencv_shape.so.410                libopencv_videoio.so.410
libgdopencv.linux.template_debug.x86_64.so  libopencv_dnn_superres.so         libopencv_highgui.so.410                 libopencv_optflow.so.410              libopencv_shape.so.4.10.0             libopencv_videoio.so.4.10.0
libopencv_aruco.so                          libopencv_dnn_superres.so.410     libopencv_highgui.so.4.10.0              libopencv_optflow.so.4.10.0           libopencv_signal.so                   libopencv_video.so
libopencv_aruco.so.410                      libopencv_dnn_superres.so.4.10.0  libopencv_imgcodecs.so                   libopencv_phase_unwrapping.so         libopencv_signal.so.410               libopencv_video.so.410
libopencv_aruco.so.4.10.0                   libopencv_dpm.so                  libopencv_imgcodecs.so.410               libopencv_phase_unwrapping.so.410     libopencv_signal.so.4.10.0            libopencv_video.so.4.10.0
libopencv_bgsegm.so                         libopencv_dpm.so.410              libopencv_imgcodecs.so.4.10.0            libopencv_phase_unwrapping.so.4.10.0  libopencv_stereo.so                   libopencv_videostab.so

libopencv_calib3d.so                        libopencv_features2d.so.410       libopencv_imgproc.so.4.10.0              libopencv_plot.so.4.10.0              libopencv_structured_light.so         libopencv_xfeatures2d.so
libopencv_calib3d.so.410                    libopencv_features2d.so.4.10.0    libopencv_intensity_transform.so         libopencv_quality.so                  libopencv_structured_light.so.410     libopencv_xfeatures2d.so.410
libopencv_calib3d.so.4.10.0                 libopencv_flann.so                libopencv_intensity_transform.so.410     libopencv_quality.so.410              libopencv_structured_light.so.4.10.0  libopencv_xfeatures2d.so.4.10.0
libopencv_ccalib.so                         libopencv_flann.so.410            libopencv_intensity_transform.so.4.10.0  libopencv_quality.so.4.10.0           libopencv_superres.so                 libopencv_ximgproc.so
libopencv_ccalib.so.410                     libopencv_flann.so.4.10.0         libopencv_java4100.so                    libopencv_rapid.so                    libopencv_superres.so.410             libopencv_ximgproc.so.410
libopencv_ccalib.so.4.10.0                  libopencv_freetype.so             libopencv_line_descriptor.so             libopencv_rapid.so.410                libopencv_superres.so.4.10.0          libopencv_ximgproc.so.4.10.0
libopencv_core.so                           libopencv_freetype.so.410         libopencv_line_descriptor.so.410         libopencv_rapid.so.4.10.0             libopencv_surface_matching.so         libopencv_xobjdetect.so

libopencv_core.so.410                       libopencv_freetype.so.4.10.0      libopencv_line_descriptor.so.4.10.0      libopencv_reg.so                      libopencv_surface_matching.so.410     libopencv_xobjdetect.so.410
libopencv_core.so.4.10.0                    libopencv_fuzzy.so                libopencv_mcc.so                         libopencv_reg.so.410                  libopencv_surface_matching.so.4.10.0  libopencv_xobjdetect.so.4.10.0
libopencv_datasets.so                       libopencv_fuzzy.so.410            libopencv_mcc.so.410                     libopencv_reg.so.4.10.0               libopencv_text.so                     libopencv_xphoto.so
libopencv_datasets.so.410                   libopencv_fuzzy.so.4.10.0         libopencv_mcc.so.4.10.0                  libopencv_rgbd.so                     libopencv_text.so.410                 libopencv_xphoto.so.410
libopencv_datasets.so.4.10.0                libopencv_gapi.so                 libopencv_ml.so                          libopencv_rgbd.so.410                 libopencv_text.so.4.10.0              libopencv_xphoto.so.4.10.0
libopencv_dnn_objdetect.so                  libopencv_gapi.so.410             libopencv_ml.so.410                      libopencv_rgbd.so.4.10.0              libopencv_tracking.so                 opencv.gdextension
libopencv_dnn_objdetect.so.410              libopencv_gapi.so.4.10.0          libopencv_ml.so.4.10.0                   libopencv_saliency.so                 libopencv_tracking.so.410
libopencv_dnn_objdetect.so.4.10.0           libopencv_hfs.so                  libopencv_objdetect.so                   libopencv_saliency.so.410             libopencv_tracking.so.4.10.0
libopencv_dnn.so                            libopencv_hfs.so.410              libopencv_objdetect.so.410               libopencv_saliency.so.4.10.0          libopencv_ts.a

[quaint wind]

Oh wow, that's a lot

Are you on Linux?

[past urchin]

Yup, an Ubuntu 22.04 system

That's why I had to use all these .so library files

[quaint wind]

I'm seeing a "linux_template_debug" which is the usual naming convention for the main file that Godot links to

But that's only for Linux. You'll need the same thing for web if you want to export for web, i believe

[past urchin]

Yes, I've been seeing some projects with a .wasm file, but have no idea how to get them

[quaint wind]

When you export, it won't automatically recompile a GDExtension library for your target platform. You first have to compile the library, then export

If this is an well-maintained extension, you might be able to find the necessary files available for download

[past urchin]

I was thinking that Scons had the ability to convert whatever files and dependencies we're using for a project in C++, into the target platform's compiled library, like as single libgdopencv.linux.template_debug.x86_64.so with Linux, and perhaps a .wasm file for web

[past urchin]

A contributor of the repository @quartz crystal is mentioning about making a link, but they're focussing on native platforms and not the web

[quaint wind]

Yeah, i believe it can (though you need the correct compiler installed on your computer). Have you run Scons with web as the target platform?

[past urchin]

Yes, but there are some issues

So the opencv.gdextension had no web library, so I added these lines as per the docs:

web.debug.wasm32 = "res://bin/libgdopencv.linux.template_debug.x86_64.so"
web.release.wasm32 = "res://bin/libgdopencv.linux.template_release.x86_64.so"

So now the .gdextension looks like:

[configuration]

entry_symbol = "opencv_library_init"
compatibility_minimum = "4.1"

[libraries]

macos.debug = "res://bin/libgdopencv.macos.template_debug.framework"
macos.release = "res://bin/libgdopencv.macos.template_release.framework"
windows.debug.x86_32 = "res://bin/libgdopencv.windows.template_debug.x86_32.dll"
windows.release.x86_32 = "res://bin/libgdopencv.windows.template_release.x86_32.dll"
windows.debug.x86_64 = "res://bin/libgdopencv.windows.template_debug.x86_64.dll"
windows.release.x86_64 = "res://bin/libgdopencv.windows.template_release.x86_64.dll"
linux.debug.x86_64 = "res://bin/libgdopencv.linux.template_debug.x86_64.so"
linux.release.x86_64 = "res://bin/libgdopencv.linux.template_release.x86_64.so"
linux.debug.arm64 = "res://bin/libgdopencv.linux.template_debug.arm64.so"
linux.release.arm64 = "res://bin/libgdopencv.linux.template_release.arm64.so"
linux.debug.rv64 = "res://bin/libgdopencv.linux.template_debug.rv64.so"
linux.release.rv64 = "res://bin/libgdopencv.linux.template_release.rv64.so"
android.debug.x86_64 = "res://bin/libgdopencv.android.template_debug.x86_64.so"
android.release.x86_64 = "res://bin/libgdopencv.android.template_release.x86_64.so"
android.debug.arm64 = "res://bin/libgdopencv.android.template_debug.arm64.so"
android.release.arm64 = "res://bin/libgdopencv.android.template_release.arm64.so"
web.debug.wasm32 = "res://bin/libgdopencv.linux.template_debug.x86_64.so"
web.release.wasm32 = "res://bin/libgdopencv.linux.template_release.x86_64.so"

Notice that I put the linux .so file as a placeholder, because I have no clue on how to get the .wasm file

[quaint wind]

Okay, yeah, i was gonna say i don't think you can use the Linux libraries for web

You have access to the C++ source code?

[past urchin]

So ideally I would put:

web.debug.wasm32 = "res://bin/libgdopencv.web.template_debug.wasm32.wasm"
web.release.wasm32 = "res://bin/libgdopencv.web.template_release.wasm32.wasm"

[past urchin]

Yup, right here

[quaint wind]

If they don't offer the wasm libraries, you could try compiling it yourself from the source code (which you said you've already attempted, right?)

[past urchin]

Well maybe I've been doing it wrongly

This is the SConstruct file:

opencv_library_path = [
    'src/opencv2/x64/vc16/lib',
    '../build_opencv/lib',
    '/opt/homebrew/Cellar/opencv/4.9.0_12/lib',
    '/usr/local/lib'
]

# tweak this if you want to use different folders, or more folders, to store your source code in.

opencv_header_files = [
    "src/",
    "src/opencv2/include",
    "../opencv-4.9.0/modules/core/include",
    "../opencv-4.9.0/modules/imgcodecs/include",
    "../opencv-4.9.0/modules/imgproc/include",
    "../opencv-4.9.0/modules/videoio/include",
    "../opencv-4.9.0/modules/objdetect/include",
    "../opencv-4.9.0/modules/video/include",
    "../build_opencv",
    "/opt/homebrew/Cellar/opencv/4.9.0_12/include/opencv4",
    "/usr/local/include/opencv4"
]

opencv_library_files = {
    'windows': [
        'opencv_world490',
        'opencv_world490d'
    ],
    'macos': [
        'libopencv_core.dylib',
        'libopencv_imgcodecs.dylib',
        'libopencv_imgproc.dylib',
        'libopencv_videoio.dylib',
        'libopencv_objdetect.dylib',
        'libopencv_video.dylib',
        'libopencv_tracking.dylib'
    ],
    'linux': [
        'libopencv_core.so',
        'libopencv_imgcodecs.so',
        'libopencv_imgproc.so',
        'libopencv_videoio.so',
        'libopencv_objdetect.so',
        'libopencv_video.so',
        'libopencv_tracking.so'
    ],
    'web': [
        'libopencv_core.so',
        'libopencv_imgcodecs.so',
        'libopencv_imgproc.so',
        'libopencv_videoio.so',
        'libopencv_objdetect.so',
        'libopencv_video.so',
        'libopencv_tracking.so'
    ]
}

env.Append(CPPPATH=opencv_header_files)
env.Append(LIBPATH=opencv_library_path)
env.Append(LIBS=opencv_library_files[env["platform"]])

[quaint wind]

I think you'll need Emscripten to compile to wasm

[past urchin]

sources = Glob("src/*.cpp")


# Create SharedLibrary

if env["platform"] == "macos":
    library = env.SharedLibrary(
        "demo/bin/libgdopencv.{}.{}.framework/libgdopencv.{}.{}".format(
            env["platform"], env["target"], env["platform"], env["target"]
        ),
        source=sources,
    )
else:
    library = env.SharedLibrary(
        "demo/bin/libgdopencv{}{}".format(env["suffix"], env["SHLIBSUFFIX"]),
        source=sources,
    )

Default(library)


# Copy gdextension file

def copy_extension(target, source, env):
    print(f"Copying {source[0]} to {target[0]}")
    shutil.copy(str(source[0]), str(target[0]))


source_path = 'opencv.gdextension'
target_path = 'demo/bin/opencv.gdextension'

env.Command(target=target_path, source=source_path, action=copy_extension)

Default(target_path)

[past urchin]

Got it installed and in my .bashrc alr

[quaint wind]

But beyond that, i don't know anything (have only ever compiled for Windows myself)

[past urchin]

So here I included for the platform "web", but have no clue what libraries I am supposed to put in here

[past urchin]

Do you happen to know anyone who has experience with web compiles? Thanks for your help though

[quaint wind]

I don't personally. I see you're already asking on the C++ channel. I think someone should know there, if anywhere

Regarding the file type suffix, you could just search something like "what is the wasm equivalent of dll"