-
-
Notifications
You must be signed in to change notification settings - Fork 382
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[REQUEST] Building libprojectM for WASM/emscripten #864
Comments
There is some support for WebAssembly, yes! |
Sweet I'll keep my notes here if that's cool. |
I will update my notes soon. This is what i have so far not even sure what to say AI is crazy. What Does This Mean? |
That's a long post, some of it basically documenting your journey to properly check out and build libprojectM with emscripten (e.g. checking out the projectm-eval submodule). What I can't see in the screenshots and textual information is how you did wrap the projectM library and provide the functionality via WASM. My guess is that you didn't do that, e.g. you just compiled libprojectM to wasm. This is fine, but will not work in its own, e.g. provide a working JS-to-WASM interface, as libprojectM only provides a C API. That said, it doesn't provide any render, initialize or There are two ways this would work:
Depending on your use case, both options can be viable. The first is easier to intergrate, as everything happen inside WASM and you don't need to bother too much about glueing the C/C++ code to JS. The second option would be the better one if you prefer to control everything from JS, including providing audio data and controlling projectM settings. We currently only provide a minimalistic emscripten example which implements option 1, but there is no WASM glue/shim for libprojectM yet that makes the library API available to JS. If you're interested in writing one, that'd be great! I hope this helps to clear some of the confusion. |
Yeah I see that my example emscripten app is now 10 years old, which is crazy https://github.com/projectM-visualizer/examples-emscripten/tree/master Another option is to build it with rust instead of C++ if that suits you. Rust goes pretty well with wasm. I made a basic rust frontend using SDL3 which you can find on our github. |
Oh, wow Revmischa cool link man had no idea thank you! 💡 Shoutout: ❤️ ProjectM Love: 🙋 Looking for connections: 🛠️ Future Plans: Thanks for being part of this exciting journey—more updates coming soon! |
Cool, join the projectm discord |
ok i will tomorrow got some more done check it out |
As a word of caution regarding AI/LLMs: Take whatever it tells you with a huge grain of salt, as it's only as "intelligent" as the data it has been fed with. It's still just a language model (a huge database with weighed word relations) which reassembles knows texts into a new one depending on a query, so there's absolutely no guarantee that the result is correct and will work as intended. It's nice to use if you have a very simple problem/question which was already asked hundreds of times, as then the LLM will have a good set of correct answers, but on the other hand, the LLM will certainly also contain all the bad suggestions or even the code posted in the question, e.g. if StackOverflow pages were used. This will end up as a mix of correct and incorrect answers in the LLM, as it it not an "intelligence" which can distinguish between good and bad data. I'd suggest asking only easy questions to the LLM and use the answer to research a proper how-to, tutorial or find the required reference. If in doubt, better ask real people like us, as experience and real humand minds are (still) a lot better than those wannabe AIs. |
Thanks, Kblaschke—ProjectM is truly a masterpiece, and I genuinely appreciate your insights. I’ve always loved tinkering and learning new things, and AI has enabled me to tackle complex tasks I never thought I’d be capable of handling. It’s been an incredible journey! Honestly, I wasn’t familiar with the term “LLMs” until now, but I’ll definitely dive deeper into researching them—thank you for bringing them up. It’s fascinating to think about how AI might evaluate human-made projects. I feel like it works both ways—it not only helps create but also offers insights that might otherwise be overlooked. Recently, I’ve worked on some exciting projects for DotNetNuke and developed around 40 WordPress plugins, all without formal programming knowledge. AI has opened up a world of possibilities, and I’m excited to see just how far I can push this project. Thanks again, man. I’ll hop on Discord soon to chat more—thank you both for being so welcoming! You all are incredibly kind here. Before this, I was trying to implement FFT functionality in Blender, but it didn’t seem feasible. That led me to explore Touch Designer, and eventually, I found myself here after creating the Burn Churn WordPress plugin. Funny how these projects take you on such unexpected journeys! |
Oh cool what wordpress plugins did you make? |
Hi Revmischa https://azmanagedit.net/product/wordpress-butterchurn-audio-visualizer/ this is a custom visualizer; now that i step back for a sec im like dam butterchurns looking pretty good - |
Please confirm the following points:
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
What's Needed?
Creating a WebAssembly-compatible build of ProjectM involves compiling its C++ codebase into WebAssembly using a toolchain like Emscripten.
+===+
Imported Docker 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.
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.
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
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:
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:
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:
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
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.
Im about to Verify that wrapper.js and wrapper.wasm
The text was updated successfully, but these errors were encountered: