ChristianWeyer / angular-wasm

Examples of how to use WebAssembly within Angular

Home Page:https://boyan.io/angular-wasm/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Angular & WebAssembly

This project shows how WebAssembly could be used in Angular in form of components and helper services. The examples are written in C/C++ and compiled to WebAssembly using Emscripten.

You can find the following examples:

  • Fibonacci shows the "raw" communication between JavaScript and WebAssembly without using Emscripten's glue code. Inspired by devlucky, the example demonstrates the performance difference between JavaScript and WebAssembly when calculating Fibonacci series using three different implementations.
  • Console Logger binds to window click directly in the C code by using Emscripten's library. The C code uses printf, which I have overloaded to add items to the list instead of printing them to the console (default behavior).
  • Text-to-ASCII allows you to convert text to ASCII art on the fly.
  • BPM-to-ASCII allows you to convert simple bitmaps to ASCII art.
  • 3D Cube shows how you can render 3D graphics using OpenGL (which is then converted to WebGL) and manipulate it on the fly.
  • Proof of Work is a simple Proof of Work system (similar to the one used in bitcoin), which demonstrates activities that might take long time to complete.

Prerequisites

You need to download and install Emscripten. I have tested the build using Emscripten 1.39.16

Build

To build the demo, run the following in the root folder:

npm i
npm run wasm
npm start

Then you can open your browser at http://localhost:4200 to see the demo.

Pre-compiled dependencies

For some of the examples, I have pre-compiled parts of the C/C++ source into linked bitcode (.bc files) to ease the build process.

  • libSOIL - Simple OpenGL Image Library (SOIL) is a tiny C library used primarily for uploading textures into OpenGL

Questions & contribution

You can reach me on Twitter @boyanio. You can also open an issue here on GitHub or make a Pull-Request directly.

About

Examples of how to use WebAssembly within Angular

https://boyan.io/angular-wasm/

License:MIT License


Languages

Language:C 35.2%Language:TypeScript 31.5%Language:HTML 16.8%Language:C++ 10.4%Language:JavaScript 3.5%Language:CSS 2.5%