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

Question

我正在尝试使用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: 宽度或高度超出范围

这很有道理，因为图像的分辨率太高了...

- birgersp

Answer 1

原来我在执行emcc创建preload文件时需要使用--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

- birgersp