Skip to content

Commit 93ce2af

Browse files
opiepjopiepj
committed
Modularlization Example
1 parent 737d501 commit 93ce2af

File tree

11 files changed

+225
-34
lines changed

11 files changed

+225
-34
lines changed

‎app/counter.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import CounterWA from './wasm/counter.wasm';
2+
3+
export class Counter {
4+
counterModule;
5+
6+
constructor() {
7+
this.insertCounterGUI();
8+
this.loadCounterWasm();
9+
}
10+
11+
insertCounterGUI() {
12+
// Insert Counter & Global method for UI
13+
document.querySelector('#app').insertAdjacentHTML('afterbegin', '<button id="count">Click me</button><div>Count: <span id="counter"></span></div>');
14+
const count = document.getElementById('count');
15+
count.addEventListener('click', () => {
16+
document.getElementById('counter').innerHTML = this.counterModule.exports._count();
17+
});
18+
}
19+
20+
loadCounterWasm() {
21+
this.counterModule = new CounterWA({
22+
'env': {
23+
'memoryBase': 0,
24+
'tableBase': 0,
25+
'memory': new WebAssembly.Memory({initial: 256}),
26+
'table': new WebAssembly.Table({initial: 0, element: 'anyfunc'})
27+
}
28+
});
29+
}
30+
31+
}
32+

‎app/index.js

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,27 @@
1-
'use strict';
21
import './style.scss';
3-
import Counter from './counter.wasm';
2+
import { Counter } from './counter';
3+
import Module from './wasm/engine.js'
44

5-
// globals
6-
let COUNTER;
5+
// Get Worker Thread
6+
const WorkerThread = require('worker-loader!./worker.js');
77

88
function main() {
9-
insertCounterGUI();
10-
loadCounterWasm();
9+
addHeader();
10+
const counter = new Counter();
11+
const worker = new WorkerThread();
12+
let module = Module({wasmBinaryFile: '/wasm/engine.wasm'});
13+
handleWorkerThread(worker);
1114
}
1215

13-
function _count() {
14-
if (COUNTER) {
15-
document.getElementById('counter').innerHTML = COUNTER.exports._count();
16-
}
16+
function addHeader() {
17+
document.querySelector('#app').insertAdjacentHTML('beforebegin', '<h1>WASM Demo</h1>');
1718
}
1819

19-
function insertCounterGUI() {
20-
// Insert Counter & Global method for UI
21-
document.querySelector('#app').insertAdjacentHTML('afterbegin', '<button id="count">Click me</button><div>Count: <span id="counter"></span></div>');
22-
const count = document.getElementById('count');
23-
count.addEventListener('click', _count);
24-
}
25-
26-
function loadCounterWasm() {
27-
const wasmHelloWorld = () => {
28-
COUNTER = new Counter({
29-
'env': {
30-
'memoryBase': 0,
31-
'tableBase': 0,
32-
'memory': new WebAssembly.Memory({initial: 256}),
33-
'table': new WebAssembly.Table({initial: 0, element: 'anyfunc'})
34-
}
35-
});
36-
// console.log("count function result is : " + COUNTER.exports._count());
20+
function handleWorkerThread(worker) {
21+
worker.postMessage({a: 1});
22+
worker.onmessage = (event) => {
23+
console.log('main:', event);
3724
};
38-
window.onload = wasmHelloWorld;
3925
}
4026

41-
42-
main();
27+
window.onload = main;

‎app/opengl-demo.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import ModuleWA from './wasm/module.wasm';
2+
3+
export class OpenGLDemo {
4+
5+
module;
6+
7+
constructor() {
8+
this.loadDemoWasm();
9+
}
10+
11+
loadDemoWasm() {
12+
this.module = new ModuleWA({
13+
'env': {
14+
'memoryBase': 0,
15+
'tableBase': 0,
16+
'memory': new WebAssembly.Memory({initial: 256}),
17+
'table': new WebAssembly.Table({initial: 0, element: 'anyfunc'})
18+
}
19+
});
20+
}
21+
22+
}
23+

‎app/counter.wasm renamed to ‎app/wasm/counter.wasm

File renamed without changes.

‎app/wasm/engine.js

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/wasm/engine.wasm

13.5 KB
Binary file not shown.

‎app/wasm/module.wasm

4.72 KB
Binary file not shown.

‎app/worker.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { OpenGLDemo } from './opengl-demo';
2+
3+
// Post data to parent thread
4+
postMessage({foo: 'foo'});
5+
6+
onmessage = (event) => {
7+
console.log('worker', event);
8+
};
9+
10+
function main() {
11+
const demo = new OpenGLDemo();
12+
}
13+
14+
main();
15+

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"babel-loader": "^7.1.1",
2727
"babel-preset-es2015": "^6.24.1",
2828
"babel-preset-stage-0": "^6.24.1",
29+
"copy-webpack-plugin": "^4.0.1",
2930
"css-loader": "^0.28.4",
3031
"extract-text-webpack-plugin": "^2.1.2",
3132
"html-webpack-plugin": "^2.29.0",
@@ -34,6 +35,7 @@
3435
"style-loader": "^0.18.2",
3536
"wasm-loader": "^1.0.0",
3637
"webpack": "^3.0.0",
37-
"webpack-dev-server": "^2.5.0"
38+
"webpack-dev-server": "^2.5.0",
39+
"worker-loader": "^0.8.0"
3840
}
3941
}

‎src/engine.c

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
#include <stdlib.h>
2+
#include <stdio.h>
3+
#include <emscripten.h>
4+
#include <string.h>
5+
6+
7+
int width = 0;
8+
int height = 0;
9+
char *current;
10+
char *next;
11+
12+
EMSCRIPTEN_KEEPALIVE
13+
char *init(int w, int h) {
14+
width = w + 2;
15+
height = h + 2;
16+
current = malloc(width * height * sizeof(char));
17+
next = malloc(width * height * sizeof(char));
18+
return current;
19+
}
20+
21+
int cell_index(int i, int j) {
22+
return i * width + j;
23+
}
24+
25+
EMSCRIPTEN_KEEPALIVE
26+
char cell(int i, int j) {
27+
return current[cell_index(i, j)];
28+
}
29+
30+
EMSCRIPTEN_KEEPALIVE
31+
char cellSafe(int cellIndex) {
32+
return current[cellIndex];
33+
}
34+
35+
EMSCRIPTEN_KEEPALIVE
36+
char getNext(int i, int j) {
37+
return next[cell_index(i, j)];
38+
}
39+
40+
void loopCurrentState() {
41+
for (int j=1; j < width + 1; j++) {
42+
current[cell_index(0, j)] = current[cell_index(height - 2, j)];
43+
current[cell_index(height - 1, j)] = current[cell_index(1, j)];
44+
}
45+
for (int i=1; i < height + 1; i++) {
46+
current[cell_index(i, 0)] = current[cell_index(i, width - 2)];
47+
current[cell_index(i, width - 1)] = current[cell_index(i, 1)];
48+
}
49+
current[cell_index(0, 0)] = current[cell_index(height - 2, width - 2)];
50+
current[cell_index(0, width - 1)] = current[cell_index(height - 2, 1)];
51+
current[cell_index(height - 1, 0)] = current[cell_index(1, width - 2)];
52+
current[cell_index(height - 1, width - 1)] = current[cell_index(1, 1)];
53+
}
54+
55+
EMSCRIPTEN_KEEPALIVE
56+
void computeNextState () {
57+
loopCurrentState();
58+
59+
int neighbors = 0;
60+
int i_m1, i_p1, i_;
61+
int j_m1, j_p1;
62+
int height_limit = height - 1;
63+
int width_limit = width - 1;
64+
for (int i = 1; i < height_limit; i++) {
65+
i_m1 = (i - 1) * width;
66+
i_p1 = (i + 1) * width;
67+
i_ = i * width;
68+
for (int j = 1; j < width_limit; j++) {
69+
j_m1 = j - 1;
70+
j_p1 = j + 1;
71+
neighbors = current[i_m1 + j_m1];
72+
neighbors += current[i_m1 + j];
73+
neighbors += current[i_m1 + j_p1];
74+
neighbors += current[i_+ j_m1];
75+
neighbors += current[i_ + j_p1];
76+
neighbors += current[i_p1 + j_m1];
77+
neighbors += current[i_p1 + j];
78+
neighbors += current[i_p1 + j_p1];
79+
if (neighbors == 3) {
80+
next[i_ + j] = 1;
81+
} else if (neighbors == 2) {
82+
next[i_ + j] = current[i_ + j];
83+
} else {
84+
next[i_ + j] = 0;
85+
}
86+
}
87+
}
88+
memcpy(current, next, width * height);
89+
}
90+
91+
EMSCRIPTEN_KEEPALIVE
92+
void set (int i, int j, int value) {
93+
current[cell_index(i, j)] = value;
94+
}
95+
96+
EMSCRIPTEN_KEEPALIVE
97+
void setNext (int i,int j, int value) {
98+
next[cell_index(i, j)] = value;
99+
}
100+
101+
EMSCRIPTEN_KEEPALIVE
102+
int main() {
103+
EM_ASM(
104+
console.log("ok, run");
105+
);
106+
return 0;
107+
}

‎webpack.config.js

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const HtmlWebpackPlugin = require('html-webpack-plugin');
22
const ExtractTextPlugin = require('extract-text-webpack-plugin');
3+
const CopyWebpackPlugin = require('copy-webpack-plugin');
34

45
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
56
template: __dirname + '/app/index.html',
@@ -14,6 +15,7 @@ const entrypoint = process.env.npm_lifecycle_event === 'dev' ?
1415
'./app/index.js';
1516

1617
module.exports = {
18+
devtool: 'source-map',
1719
entry: entrypoint,
1820
output: {
1921
path: __dirname + '/dist',
@@ -40,5 +42,16 @@ module.exports = {
4042
}
4143
]
4244
},
43-
plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig]
44-
}
45+
plugins: [
46+
HtmlWebpackPluginConfig,
47+
ExtractTextPluginConfig,
48+
// Need to copy some wasm files as we import the JS file from the emcc MODULARIZE setting
49+
new CopyWebpackPlugin([{
50+
from: 'app/wasm/*.wasm',
51+
to: 'wasm/[name].wasm'
52+
}])
53+
],
54+
node: {
55+
fs: 'empty'
56+
}
57+
};

0 commit comments

Comments
 (0)