Skip to content

[REQUEST] Building libprojectM for WASM/emscripten #864

Open
@D0rk23

Description

@D0rk23

Please confirm the following points:

  • This question is NOT about the Android apps in the Play Store
  • I have searched the project page to check if the question was already asked elsewhere

Topic

Development and Contributing

Your Request

Im looking to adapt this for web use
was able to get butterchurn setup
https://azmanagedit.net/product/wordpress-butterchurn-audio-visualizer/
Sounds like theres is an option to run ProjectM in a browser via WebAssembly, which makes it usable on websites.
Option 1: WebAssembly Version

  • WebAssembly enables ProjectM to run in a browser, rendering MilkDrop presets via WebGL.

What's Needed?

  • A WebAssembly-compatible build of ProjectM (projectm.js and projectm.wasm).
  • MilkDrop presets for visualization.
  • JavaScript code to handle the audio source and attach it to the visualization.

Creating a WebAssembly-compatible build of ProjectM involves compiling its C++ codebase into WebAssembly using a toolchain like Emscripten.
+===+
Imported Docker Image
image

Step 1: Clone the ProjectM Repository
Clone the ProjectM source code into the container:

git clone https://github.com/projectM-visualizer/projectm.git
Navigate to the projectm directory:

cd projectm
Step 2: Create a Build Directory
To keep the build files separate from the source files, create a build directory and navigate into it:

mkdir build
cd build

Step 3: Configure the Build
Use Emscripten’s CMake wrapper (emcmake) to configure the build for WebAssembly:
emcmake cmake ..
This command sets up the build system to use Emscripten as the toolchain.
image
it appears that CMake is encountering an issue related to the projectM-Eval package or module, which is required for the build. This issue happens because the necessary configuration files for projectM-Eval cannot be found in the expected locations.
image
The error indicates that the projectm-eval directory under /src/projectm/vendor/ is missing the necessary CMakeLists.txt file, which is required for the build process. This likely means that the submodule or dependency for projectm-eval wasn’t cloned properly.

Step 1: Initialize and Update Submodules
Navigate to the root of the ProjectM repository:
cd /src/projectm
Initialize and update all submodules:
git submodule update --init --recursive

Step 2: Verify Submodule Directory
After updating submodules, verify that the projectm-eval directory contains a CMakeLists.txt file:
ls vendor/projectm-eval
image
Step 3: Retry the Build Configuration
Once the submodule is correctly set up, rerun the emcmake cmake .. command from the build directory:
cd /src/projectm/build
emcmake cmake ..
If this completes successfully, proceed with the build:
image

Next Steps: Compile the Code
Now, you need to build the project using the emmake command. Here’s how to proceed:

Run the Build Command: In the build directory, run:
emmake make
Monitor the Output:
image

The build process may take a few minutes, depending on the complexity of the code and your system resources.
Look for any errors or warnings during the process. If you encounter errors, take note of them so we can troubleshoot.
Check the Output: After the build completes, check the build directory for the following files:

projectm.js: JavaScript glue code for WebAssembly.
projectm.wasm: The WebAssembly binary.
Any additional runtime or configuration files needed.
You can verify the files are present by running:
ls
Testing the Output
Once the build is successful, you can:
image
it seems that while the build has successfully completed, the expected output files (projectm.js and projectm.wasm) are not present in the build directory. This indicates that either:

The build configuration didn't produce the WebAssembly artifacts.
Some additional steps are needed to generate the WebAssembly files.


Copy the generated files (.js and .wasm) to your host machine using:
docker cp naughty_faraday:/src/projectm/build/projectm.js .
docker cp naughty_faraday:/src/projectm/build/projectm.wasm .
Serve these files using a simple local web server and create an HTML file to test them.

Confirm WebAssembly Support in ProjectM
Before proceeding further, check if the ProjectM repository explicitly supports WebAssembly. Inside the main source directory (/src/projectm), search for mentions of WebAssembly or Emscripten in the codebase:
grep -ri "EMSCRIPTEN" /src/projectm
image

Steps to Replicate the Workflow
Install Required Packages
Run the following commands inside your Docker container to ensure all dependencies are installed:

apt-get update
apt-get install -y libgl1-mesa-dev mesa-common-dev libsdl2-dev libglu1-mesa-dev ninja-build
Sorry to much to add here.
image
Im about to Verify that wrapper.js and wrapper.wasm

Metadata

Metadata

Assignees

No one assigned

    Labels

    emscriptenAnything related to building libprojectM for WASM/emscriptenquestion

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions