Project Overview

ACMX2 Interactive Visualizer version 2.0.0 is a powerful, web-based interactive shader visualization platform that brings real-time graphics effects directly to your browser.

What is ACMX2?

ACMX2 is a comprehensive graphics demonstration application built on top of libmx2, showcasing advanced shader effects and interactive visual programming.

Technology Stack

Built with modern web technologies:

• WebGL 2.0 - Hardware-accelerated graphics rendering
• Emscripten - C++ compiled to WebAssembly for native performance
• GLSL ES 3.0 - Modern shader language for fragment effects
• SDL2 - Cross-platform windowing and input handling
• libmx2 - Custom graphics and math libraries

Key Features

🎨 Shader Effects Library

Version 2.0.0 includes more shaders. Effects can respond to mouse movement, time, and user-adjustable uniforms.

✏️ Custom Shader Development

The integrated shader editor allows you to write and test your own fragment shaders with:

• Compile-on-demand validation and application
• Detailed compilation error messages
• Pre-built shader templates to get started quickly
• A combobox containing the complete cached shader library
• Editable cached GLSL source that can be compiled and applied
• Downloadable startup shader failure logs for troubleshooting
• Automatic conversion of compatible desktop GLSL to GLSL ES 3.0

🔗 Multipass Shader Chains

Add, arrange, remove, and enable multiple shader passes to create layered effects. Multipass controls are available on both desktop and mobile layouts.

🖼️ Content Management

• Load your own images (PNG/JPG) and apply effects to them
• Switch between pre-loaded 3D models
• Capture a still frame or stream from a selected camera
• Switch between available front and rear cameras
• Select a microphone and include its audio while recording
• Load, seek, loop, and stream a video file with optional audio
• Apply any shader to any content seamlessly

🎥 Recording & Mobile Saving

• Record visualizer output as MP4 or WebM when supported
• Select recording frame rate and quality before capture
• Convert WebM recordings to MP4 when native MP4 recording is unavailable
• Save MP4 recordings through Android Chrome's native share and save sheet
• Use phone-friendly camera controls anchored to the safe area

⚙️ Uniform Control Panel

Fine-tune effects with an elegant control panel featuring:

• Animation controls - Speed, amplitude, frequency
• Color adjustments - Brightness, contrast, saturation, hue shift
• Transform parameters - Zoom, rotation
• Camera and model controls - Camera position and three-axis rotation
• Quality settings - Performance optimization and debug mode

💾 Asset Management

The project includes compressed 3D models covering a wide range of geometry types: spheres, cubes, toruses, pyramids, ships, UFOs, fractals, and more.

Keyboard & Mouse Controls

Action	Control
Next Shader	↓ or Space
Previous Shader	↑ or Backspace
Save Screenshot	S or Button Click
Load Image	Button or file selection
Mouse Interaction	Move/click for interactive effects

Getting Started

System Requirements

Because the engine compiles over a thousand GLSL ES 3.0 fragment shaders into a WebAssembly environment upon loading, the absolute baseline is dictated by WebGL 2.0 support and sufficient system memory.

Universal Browser Requirements

• Web Browser: Recent versions of Chrome, Firefox, Edge, or Safari.
• Graphics API: WebGL 2.0 is strictly required.
• Execution Environment: WebAssembly (WASM) support enabled.

Desktop Minimums

• OS: Windows 10, macOS 11, or modern Linux distributions.
• Processor: 64-bit multi-core CPU (e.g., Intel Core i3 8th Gen or AMD Ryzen 3).
• Memory: 4GB System RAM.
• Graphics: Integrated GPUs supporting OpenGL ES 3.0 equivalents (e.g., Intel UHD Graphics 620 or AMD Radeon Vega).
• Note: While integrated graphics like those found in a Beelink SER5 Mini PC will handle baseline rendering, running complex multipass chains at 60fps requires dedicated hardware.

Mobile Minimums

• OS: Android 10 or iOS 15.
• Memory: 4GB RAM minimum to handle browser overhead, video decoding, and the pre-compiled shader cache.
• Processor: Mid-range mobile chipsets from 2020 or newer (e.g., Snapdragon 700 series or Apple A13 Bionic).

Recommended Specifications for 60fps Multipass Rendering

• Desktop Graphics: Dedicated GPU (NVIDIA RTX 2070 or equivalent) for zero-latency shader modulation and rendering.
• Mobile Hardware: High-end modern devices (Google Pixel 9 Pro or equivalent) with 8GB or more of RAM for stable real-time video manipulation.

Checking WebGL 2.0 Support

If you are unsure whether your current device or browser supports the necessary graphics API, you can quickly verify it before launching the visualizer:

• Visit a diagnostic tool like WebGL Report directly in your web browser.
• Look for the confirmation text stating "This browser supports WebGL 2".
• If your browser fails the check, ensure that hardware acceleration is enabled in your browser settings or try updating your browser to the latest version.

Web Version

The demo runs directly in modern browsers (Chrome, Firefox, Edge). Simply open index.html in a local web server:

python3 server.py 3000 # Navigate to http://localhost:3000

Building from Source

Requires libmx2 compiled for WASM installed compile with Emscripten:
Find the Repository here: https://github.com/lostjared/MX2.Graphics.Demo

make -f Makefile.em

Performance

• Targets 60 FPS on modern hardware
• Real-time shader compilation
• Preconverted shader caching for faster startup
• Unsupported audio, FFT, and texture-cache shaders are skipped safely
• Supports up to 4K image resolution
• Optimized WebGL 2.0 rendering pipeline

What's Included

• More shaders with editable source code
• 3D models in compressed format
• Complete shader editor with cached-shader browsing, templates, and examples
• Multipass editor for building shader chains
• Camera, microphone, and video-file input for live source effects
• Video and screenshot export with mobile-friendly saving
• Responsive UI optimized for desktop, tablet, and phone
• Documentation and examples for custom shader development

Version 2.0.0 Highlights

Open Source

ACMX2 is released under the GPL v3 license. The full source code, including all shaders and the web interface, is available for learning, modification, and distribution in accordance with the license terms.

Looking Forward

This release marks the beginning of an exciting journey. Whether you're interested in learning shader programming, creating stunning visual effects, or integrating advanced graphics into your own projects, ACMX2 provides a solid foundation.