Emscripten-glfw 使用教程

1. 项目介绍

Emscripten-glfw 是一个由 CSDN 公司开发的 InsCode AI 大模型开源项目，它是一个 Emscripten 端口，将 GLFW 库移植到 Web/wasm 平台。该库使用 C++ 编写，旨在实现尽可能多的 GLFW API，使其能够在 Web 浏览器环境中运行。目前支持的 GLFW API 版本为 3.4。项目的主要目标是提供对多窗口、鼠标、键盘、游戏手柄、全屏、高 DPI、自定义光标等功能的支持，同时尽量减少 JavaScript 代码的使用，以保持代码的简洁和高效。

2. 项目快速启动

以下是快速启动 Emscripten-glfw 的步骤：

首先，确保你已经安装了 Emscripten 工具链。然后，你可以通过以下命令编译一个简单的示例程序：

emcc --use-port=contrib.glfw3 examples/example_minimal.cpp -o build/index.html

这条命令将编译 example_minimal.cpp 文件，并生成一个可在 Web 浏览器中运行的 index.html 文件。

3. 应用案例和最佳实践

示例程序

• example_minimal.cpp：最简单的示例，初始化 GLFW，创建一个窗口，然后销毁窗口并退出 GLFW。
• example_resizable_container.cpp：演示如何使画布可调整大小，由外部容器控制大小。
• example_resizable_container_with_handle.cpp：演示如何使用带有手柄的容器来调整画布大小。
• example_resizable_full_window.cpp：演示如何使画布可调整大小并占据整个窗口。
• example_pthread.cpp：演示如何在 WebAssembly 中使用 pthread。

最佳实践

• 在创建窗口时，使用 glfwWindowHint 设置窗口属性，如高 DPI 意识 (GLFW_SCALE_FRAMEBUFFER)。
• 在处理键盘和鼠标事件时，可以使用直接的 API 调用（如 glfwGetMouseButton）或回调 API（如 glfwSetMouseButtonCallback）。
• 使用 emscripten::glfw3::SetNextWindowCanvasSelector 指定窗口关联的画布。

4. 典型生态项目

Emscripten-glfw 可以与多个项目配合使用，以下是一些典型的生态项目：

• ImGui：可以配置 ImGui 使用 Emscripten-glfw，从而支持游戏手柄和剪贴板等功能。
• WebGPU Shader Toy：一个用于实验 WebGPU 片段着色器和 WebGPU 着色器语言（WGSL）的工具。