I’m trying to improve my technical skills with Web Assembly, but I’m stuck at the behavior levels between C to JS pointers.
I want to clarify that I’m not a basic C developer, just some notions.
The process is : JS send data to worker -> worker call web assembly (C) -> worker send result -> JS render
When I send my calculations made in C to JS using Web Assembly, I get the pointer, only to translate this pointer back into an array is problematic for me.
The code on the C side seems correct to me (I get the right values once compiled).
C:
#include "vector.h"
#include <stdlib.h>
#include <math.h>
void applyTransformation(Vector3D scale, Vector3D position, Vector3D rotation, Vector3D *vertex) {
// Scale
vertex->x *= scale.x;
vertex->y *= scale.y;
vertex->z *= scale.z;
// Translate
vertex->x += position.x;
vertex->y += position.y;
vertex->z += position.z;
// Rotate
double x = vertex->x;
double y = vertex->y;
double z = vertex->z;
vertex->x = x * cos(rotation.y) * cos(rotation.z) + y * (cos(rotation.y) * sin(rotation.z) * sin(rotation.x) - sin(rotation.y) * cos(rotation.x)) + z * (cos(rotation.y) * sin(rotation.z) * cos(rotation.x) + sin(rotation.y) * sin(rotation.x));
vertex->y = x * sin(rotation.y) * cos(rotation.z) + y * (sin(rotation.y) * sin(rotation.z) * sin(rotation.x) + cos(rotation.y) * cos(rotation.x)) + z * (sin(rotation.y) * sin(rotation.z) * cos(rotation.x) - cos(rotation.y) * sin(rotation.x));
vertex->z = -x * sin(rotation.z) + y * cos(rotation.z) * sin(rotation.x) + z * cos(rotation.z) * cos(rotation.x);
}
Vector3D* cube(Vector3D scale, Vector3D position, Vector3D rotation) {
Vector3D *vertices = (Vector3D *)malloc(sizeof(Vector3D) * 8);
if (vertices == NULL) {
return NULL;
}
vertices[0] = (Vector3D){-scale.x / 2, -scale.y / 2, -scale.z / 2};
vertices[1] = (Vector3D){scale.x / 2, -scale.y / 2, -scale.z / 2};
vertices[2] = (Vector3D){scale.x / 2, scale.y / 2, -scale.z / 2};
vertices[3] = (Vector3D){-scale.x / 2, scale.y / 2, -scale.z / 2};
vertices[4] = (Vector3D){-scale.x / 2, -scale.y / 2, scale.z / 2};
vertices[5] = (Vector3D){scale.x / 2, -scale.y / 2, scale.z / 2};
vertices[6] = (Vector3D){scale.x / 2, scale.y / 2, scale.z / 2};
vertices[7] = (Vector3D){-scale.x / 2, scale.y / 2, scale.z / 2};
for (int i = 0; i < 8; i++) {
applyTransformation(scale, position, rotation, &vertices[i]);
}
return vertices;
}
void freeVertices(Vector3D *vertices) {
free(vertices);
}
JS:
(async () => {
importScripts('vector.js');
const VectorModule = await VectorModuleWasm();
if (!VectorModule) {
throw new Error("Failed to load VectorModuleWasm");
}
onmessage = (event) => {
const {
id,
scale,
position,
rotation,
origin
} = event.data;
const verticesPointer = VectorModule._cube(scale, position, rotation);
const numVertices = 8;
const verticeBuffers = new Float32Array(VectorModule.HEAPF32.buffer, verticesPointer, numVertices * 3);
let vertices = [];
for (let i = 0; i < numVertices; i++) {
vertices.push({
x: verticeBuffers[i * 3],
y: verticeBuffers[i * 3 + 1],
z: verticeBuffers[i * 3 + 2]
});
}
console.log(vertices);
VectorModule._freeVertices(verticesPointer);
postMessage({
id: id,
vertices: vertices,
origin: origin
});
};
})();
And what I get in console log is an array of 8 vertices having x,y,z Infinity|-Infinity.