WebAssembly Project Examples

1. Game Engine: Running Unity or Unreal Games in Browsers

Overview

WebAssembly is commonly used to run high-performance game engines like Unity and Unreal Engine directly in the browser, eliminating the need for installation.

Project Example: Unity WebGL Game

• Description: Create a lightweight 3D game using Unity and export it to WebAssembly for browser-based deployment.
• Implementation:
  1. Develop the game in Unity.
  2. Export it to WebGL, which internally uses WebAssembly.
  3. Host the exported files on a server.
• Advantages:
  • Instant loading for users.
  • Cross-platform compatibility.
  • High performance with optimized rendering.
• Code Integration: Unity handles the WebAssembly export process; no manual coding is required.

2. Video Editing Tool

Overview

Building browser-based video editors becomes feasible with WebAssembly due to its capability to handle CPU-intensive tasks efficiently.

Project Example: Wasm-based Video Cropper

• Description: A video cropping tool that runs entirely in the browser using WebAssembly.
• Implementation:
  • Use FFmpeg.wasm, a Wasm-compiled version of FFmpeg, to manipulate video files.
  • Build a simple UI for users to upload and crop videos.
• Code Snippet:

const ffmpeg = require('@ffmpeg/ffmpeg');
const { createFFmpeg, fetchFile } = ffmpeg;

const ffmpegInstance = createFFmpeg({ log: true });

async function cropVideo(inputFile, outputFile) {
    await ffmpegInstance.load();
    ffmpegInstance.FS('writeFile', inputFile.name, await fetchFile(inputFile));
    await ffmpegInstance.run('-i', inputFile.name, '-vf', 'crop=1920:1080', outputFile);
    const output = ffmpegInstance.FS('readFile', outputFile);
    return new Blob([output.buffer], { type: 'video/mp4' });
}

• Advantages:
  • No need for backend processing.
  • Data privacy is maintained as videos are processed locally.

3. Markdown to HTML Converter

Overview

WebAssembly can be used to parse and convert markdown into HTML efficiently within the browser.

Project Example: Wasm Markdown Renderer

• Description: A browser-based markdown editor that converts markdown input to HTML in real time.
• Implementation:
  • Use a Rust-based markdown parser, compile it to WebAssembly, and integrate it into a frontend framework.
• Code Snippet:

use pulldown_cmark::{Parser, Options, html};

#[wasm_bindgen]
pub fn render_markdown(markdown_input: &str) -> String {
    let parser = Parser::new_ext(markdown_input, Options::all());
    let mut html_output = String::new();
    html::push_html(&mut html_output, parser);
    html_output
}

• Compile the above Rust code to WebAssembly using wasm-pack and load it in the browser.
• Advantages:
  • High performance for large markdown files.
  • Fully client-side operation.

4. Cryptographic Operations

Overview

WebAssembly is widely used for cryptographic tasks, such as hashing and encryption, due to its high speed and security.

Project Example: Wasm-based SHA-256 Hasher

• Description: Create a hashing tool that generates SHA-256 hashes of user-input data.
• Implementation:
  • Compile a C/C++ library for SHA-256 to WebAssembly.
  • Integrate the WebAssembly binary with a JavaScript frontend.
• Code Snippet (JavaScript Integration):

fetch('sha256.wasm').then(response =>
    response.arrayBuffer()
).then(bytes =>
    WebAssembly.instantiate(bytes)
).then(results => {
    const sha256 = results.instance.exports.sha256;
    const hash = sha256("Hello, WebAssembly!");
    console.log(`Hash: ${hash}`);
});

• Advantages:
  • Fast and secure hashing.
  • No need for server-side processing.

5. Machine Learning in the Browser

Overview

WebAssembly enables running lightweight machine learning models directly in the browser without backend dependencies.

Project Example: Image Recognition with TensorFlow.js

• Description: Build a browser-based image recognition tool that uses WebAssembly-accelerated TensorFlow.js.
• Implementation:
  • Load a pre-trained TensorFlow model.
  • Process user-uploaded images and display predictions.
• Code Snippet:

import * as tf from '@tensorflow/tfjs';

async function loadModel() {
    const model = await tf.loadGraphModel('model/model.json');
    const image = tf.browser.fromPixels(document.getElementById('inputImage'));
    const predictions = model.predict(image);
    console.log(predictions);
}

• Advantages:
  • Real-time processing without server calls.
  • Privacy-focused approach.

6. PDF Viewer

Overview

WebAssembly can power interactive PDF viewers, allowing users to view and manipulate PDF files directly in their browsers.

Project Example: Wasm PDF Viewer

• Description: A PDF viewer that runs entirely in the browser using WebAssembly.
• Implementation:
  • Use PDF.js (a Wasm-powered library) to parse and render PDF files.
  • Build a simple UI with navigation controls.
• Code Snippet:

const pdfjsLib = require('pdfjs-dist/webpack');

async function loadPDF(url) {
    const pdf = await pdfjsLib.getDocument(url).promise;
    const page = await pdf.getPage(1);
    const viewport = page.getViewport({ scale: 1.5 });
    const canvas = document.getElementById('pdfCanvas');
    const context = canvas.getContext('2d');
    await page.render({ canvasContext: context, viewport }).promise;
}

• Advantages:
  • Fast rendering even for large PDFs.
  • Offline functionality.

7. Interactive Code Editor

Overview

WebAssembly allows developers to build interactive coding environments with real-time code execution directly in the browser.

Project Example: Wasm Playground

• Description: An in-browser code editor and runtime for languages like C++, Python, or Rust.
• Implementation:
  • Use Emscripten or wasm-pack to compile compilers/interpreters into WebAssembly.
  • Build a UI for writing, compiling, and running code snippets.
• Advantages:
  • Instant feedback for learners.
  • No installations required.