Native Client Acceleration Modules
90% Web App
Native Performance Where You Need It
Native Client (NaCl) Acceleration Modules (AM) are a new way of using Native Client. In a nutshell they allow you to expose a JavaScript API to C/C++ code. The C/C++ code runs at native speed inside the NaCl sandbox. The application logic runs inside JavaScript.
For low level details on how this works check out my GDL talk here.
To help show this technology off I've created a demo that shows the Bullet Physics engine simulating 400 rigid bodies in real time. On my machine simulation takes only 2 milliseconds. The time it takes to transfer the data from NaCl to JavaScript is negligible. All drawing is done using Three.js.
What's really fun about the demo is that you can create your own scenes and watch them run. Grab your text editor and paste this into it:
{
"shapes": [
{
"name": "box",
"type": "cube",
"wx": 1,
"wy": 1,
"wz": 1
}
],
"bodies": [
{
"shape": "box",
"position": {
"x": 0.0,
"y": 1.0,
"z": 0.0
},
"rotation": {
"x": 0.0,
"y": 0.0,
"z": 0.0
},
"mass": 1.0,
"friction": 0.5
}
]
}
First let's discuss the "shapes" array. It contains an array of shape objects. Each shape object must have a name and a type. There are four shape types:
- cube
- cylinder
- sphere
- convex
The "cube" shape type has the following parameters:
- wx
- wy
- wz
The three together specify the width, height, and depth of the cube.
The "cylinder" shape type has the following parameters:
- radius
- height
The radius specifies how thick the cylinder is and the height how tall it is.
The "sphere" shape type has the following parameters:
- radius
Which sets the radius of the sphere.
The final shape type "convex" has the following parameters:
- points
Which is an array of points like the following:
points: [
[0.0, 0.0, 0.0],
[0.0, 1.0, 0.0],
[0.0, 0.0, 1.0],
[0.0, 0.0, 1.0],
[2.0, 5.0, 1.0],
[1.0, 1.0, 1.0]
]
A convex hull is created out of these points, allowing for any convex shape to be created.
After specifying the shapes, the bodies array specifies the actual physical bodies in the scene:
{
"shape": "box",
"position": {
"x": 0.0,
"y": 1.0,
"z": 0.0
},
"rotation": {
"x": 0.0,
"y": 0.0,
"z": 0.0
},
"mass": 1.0,
"friction": 0.5
}
Each body specifies the shape name. Position has x,y,z specifying where the origin of the shape is. The rotation is euler angles of yaw, pitch, and roll. Mass and friction specify how the object will move around in the world.
Once you've created your JSON scene description, pick the "Choose File" demo and load it. If you want to replay it, pick the 'Reload Scene' button.
"shape": "box",
"position": {
"x": 0.0,
"y": 1.0,
"z": 0.0
},
"rotation": {
"x": 0.0,
"y": 0.0,
"z": 0.0
},
"mass": 1.0,
"friction": 0.5
}
Each body specifies the shape name. Position has x,y,z specifying where the origin of the shape is. The rotation is euler angles of yaw, pitch, and roll. Mass and friction specify how the object will move around in the world.
Once you've created your JSON scene description, pick the "Choose File" demo and load it. If you want to replay it, pick the 'Reload Scene' button.
