如何使用 emscripten 使用 SDL 将纹理加载到 WebAssembly 项目中

How to load textures using SDL to a WebAssembly project using emscripten?

本文关键字：加载 WebAssembly 项目 纹理 何使用 emscripten 使用 SDL      更新时间：2023-10-16

我正在尝试使用 SDL 将纹理加载到我的应用程序中。作为本机应用程序构建时，它可以正常工作。但是当我使用 Emscripten 构建它时，无法加载纹理。

纹理图像的宽度为 64 像素，我可以通过打印出 SDL_Surface 实例的w成员来验证。但是当我尝试在 WebAssembly 应用程序中打印出相同的成员时，它会产生 5076...

当包含 emscripten 时，图像会以某种方式"损坏"吗？

下面是加载纹理的代码：

SDL_Surface *image = IMG_Load("resources/binaries/crate.jpg");
GLuint textureID;
glGenTextures(1, &textureID);
glBindTexture(GL_TEXTURE_2D, textureID);
std::cout << image->w << std::endl;
glTexImage2D(GL_TEXTURE_2D, 0, 3, 64, 64, 0, GL_RGB, GL_UNSIGNED_BYTE, image->pixels);

以下是使用 Emscripten 构建 Web 应用程序的命令

emcc --bind -s USE_SDL=2 -s USE_SDL_IMAGE=2 -o webapp.js src/webapp.cpp --preload-file resources

启动 Web 应用程序时收到浏览器的错误消息是

webapp.js：9533 WebGL：INVALID_VALUE：texImage2D：宽度或高度超出范围

这是有道理的，因为图像的分辨率太疯狂了......

事实证明，

在执行 emcc 创建预加载文件时，我必须使用 --use-preload-plugins。最后，该命令如下所示：

emcc --bind -s USE_SDL=2 -s USE_SDL_IMAGE=2 -o webapp.js src/webapp.cpp --preload-file resources --use-preload-plugins
相关文章：