Project Setup

Let's create the project and configure our dependencies. We need a setup that supports both native desktop execution and WebAssembly compilation.

1. Install Prerequisites

Ensure you have Rust installed via rustup. If not, visit rustup.rs.

For WebAssembly, install the wasm32-unknown-unknown target and wasm-pack:

rustup target add wasm32-unknown-unknown
cargo install wasm-pack

2. Create Project Structure

Create a new binary project:

cargo new Unreal_Majid
cd Unreal_Majid

We need to restructure the default layout to support both a library (for WASM) and a binary (for desktop). Create the following folder structure:

mkdir -p src/core
touch src/lib.rs
touch src/core/renderer.rs
touch src/core/window.rs
touch compute_shader.wgsl
touch draw_shader.wgsl
touch index.html
touch Makefile

3. Configure Cargo.toml

Open Cargo.toml and replace its content with the following. This configuration is critical for cross-platform compatibility.

[package]
name = "particle-system"
version = "0.1.0"
edition = "2024"

# Optimization settings for WASM
[package.metadata.wasm-pack.profile.release]
wasm-opt = false

[lib]
crate-type = ["cdylib", "rlib"]

[[bin]]
name = "particle-system"
path = "src/main.rs"

[dependencies]
# Graphics & Windowing
wgpu = "24.0"
winit = { version = "0.30", features = ["rwh_06"] }

# Math & Utilities
glam = "0.29.2"
bytemuck = { version = "1.16", features = ["derive"] }
pollster = "0.4"
env_logger = "0.11"
log = "0.4"

# WASM-specific dependencies
[target.'cfg(target_arch = "wasm32")'.dependencies]
console_error_panic_hook = "0.1.7"
console_log = "1.0"
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
web-sys = { version = "0.3", features = ["Document", "Window", "Element", "HtmlCanvasElement"] }

[features]
default = []

Dependency Breakdown

• wgpu: The core graphics library. Version 24.0 is a stable, modern release.
• winit: Handles window creation and input events cross-platform.
• glam: A fast, SIMD-optimized linear algebra library for vector math (Vec3, Mat4).
• bytemuck: Helps cast data types (like structs) to raw bytes for GPU buffers.
• pollster: A minimal async executor to block on async tasks (required for wgpu setup).
• wasm-bindgen: The bridge between Rust and JavaScript.
• web-sys: Bindings to browser APIs like window and canvas.