Skip to content

Getting Started with Siv3D for Web

An unofficial version of Siv3D that can generate programs that run in a web browser is available. There are several limitations and points to note for the web version, so it is intended for intermediate and advanced users who are familiar with using Siv3D. If you have any trouble using it, please ask questions in the #web channel on the Siv3D Discord server.

Usage Guide

  • Please refer to OpenSiv3D for Web .
  • In the initial build, an error message may appear, but if you build it again, it will build successfully.
  • In the web version build, all files of engine/ and example/ are included in the final output by default, making the final output file size several tens of MB even in the Release build. When you publish such an application on the web, it takes time for the users accessing it to download the files. Therefore, when you actually publish the application, you need to delete unnecessary files (see: Tutorial 60. Publishing the Application for reference).
  • By removing libraries that are not used by the program from the "additional dependency files" in the Emscripten linker settings (e.g. Siv3DScript, opencv_objdetect, opencv_photo, opencv_imgproc, turbojpeg, gif, webp, opusfile, opus, tiff), the output file size of the web version can be compacted to a minimum of a few MBs. For more details, please consult in the #web channel on the Siv3D Discord server.

Getting Started with Siv3D for Web

An unofficial version of Siv3D that can generate programs that run in a web browser is available. Due to several constraints and considerations in the Web version, it is intended for intermediate to advanced users who are familiar with using Siv3D. If you encounter any difficulties in using it, please ask questions in the #web channel of the Siv3D Discord server.

1. Setting Up the Development Environment

1.1 Common Preparations

  • Please refer to OpenSiv3D for Web . If you are using Visual Studio 2022, download and install three pieces of software.

Latest Version Provided by Volunteers

The link above provides an SDK equivalent to Siv3D v0.6.6, but a more updated SDK, which is more compliant with newer versions of Siv3D, is being developed and provided by volunteers. Replace the Siv3D SDK from the software introduced in the above installation instructions for OpenSiv3D for Web with the SDK downloadable from the link below.

2. Building a Web Project

  • The build time for the Web version of Siv3D is several times longer than for the normal version. It is recommended to develop with the normal Siv3D and perform testing on the Web version as needed.
  • In Visual Studio, red wavy lines or error messages may appear on the editor, even with correct code.
  • In Visual Studio, you can build and run with the "▶" button, but if Google Chrome is not installed, the program may not run after building.
  • The generated .html file cannot be executed by double-clicking in a local environment. Launch it via a debugger or use the Live Preview extension in VS Code.

3. Publishing the Program

  • Upload all four files generated by the build process (.html, .js, .data, .wasm) to a web server.
    • It's convenient to use free web services like GitHub Pages.
  • Manually editing the <title> tag in the .html file allows you to change the title of the web page.
  • In the Web version build, by default, everything in resource/engine/ and example/ is bundled with the final output files, resulting in a total size of several tens of MB even in the Release build. When publishing these on the web, the files can take a long time to download for users, so please exclude unnecessary bundled files when actually publishing your application (see: Tutorial 60. Publishing Apps).
  • By removing libraries not used by the program from the "Additional Dependencies" in the Emscripten linker settings (e.g., Siv3DScript, opencv_objdetect, opencv_photo, turbojpeg, gif, webp, opusfile, opus, tiff), you can further reduce the file size of the Web version output.
  • In the most compact cases, the file size can be reduced to a few MB or less.

Examples of Settings in Visual Studio

Specifying Bundled Folders

  • $(ProjectDir)\folder_name@/folder_name
    • For example, to bundle the asset folder, specify $(ProjectDir)\asset@/asset.
    • To exclude the example folder, remove $(ProjectDir)\example@/example.

Deleting Dependency Files

  • Remove libraries not used by the program from here.

4. Support for the Web Version

Although the Web version of Siv3D is unofficial, questions and reports are welcome in the #web channel on the Siv3D Discord server.