WORK IN PROGRESS
Pex is a javascript 3d library / engine allowing for seamless development between Plask and WebGL in the browser.
Pex (plask extentions) is a collection of JavaScript modules the combination of which becomes a powerful 3D graphics library for the desktop and the web.
There are a few main points you need to understand to grok what Pex is all about:
-
Pex is originally based on Plask. Plask is a JavaScript multimedia programming environment for the desktop. Plask is a magical bridge between your favourite JavaScript world and a collection of C++ libraries for 3D graphics, audio and video playback and others. But Plask, essentially, is a node.js program - meaing...
-
Pex is node.js code, too. You download the modules from npm, require them and you write 3D code. Naturally, you can use any other module from the enormous npm ecosystem in your program.
-
As aforementioned Plask runs as a desktop application. Pex extends it to the web using by abstracting application window and WebGL context creation. In other words, you can run your Pex program as a standalone desktop application or directly in a browser that supports WebGL. No changes in the code whatsoever. To top the cake, you can run it on iOS below version 8.0 using Ejecta.
-
And finally, to answer your question - yes, Pex could be considered an alternative to Three.js. We are big fans of Three but we believe that every software or library should have an alternative. If you want to write WebGL, it should not mean you must use Three. Variety in every ecosystem is vital. We will expand on the technical differences later.
This seems like a lot of text but don't be scared! I'ts really easy, especially if you have Node.js and npm installed.
-
As you already know, Pex uses Plask to run as a desktop application. To do this you will need to download Plask from here: http://www.plask.org/. Plask is an awesome project so be sure to check out the source: https://github.com/deanm/plask.
-
You will need to install Node.js and npm. If you already have them - skip to the next step. Otherwise go to http://nodejs.org/ for further instructions on how to install Node.js on your machine.
-
There are a few ways to get pex up and running. All of the pex modules are on npm so you could for example install them one by one or put them in your package.json. You could also do:
$ npm install pex
which installs everything neceserry to run pex, generate new projects and documentation files.
The next step would be to run:
$ pex init --help
to list all options so you choose and run what you want or just:
$ pex init exampleApp $ cd exampleApp $ npm install
Now all you have to do is either run:
$ npm run watch
which launches a new browser tab with the example app and watches for changes in main.js (where your pex program is) or you run main.js in Plask. You can open the index.html document manually and while that would work just fine since your Pex source code needs to be browserified changing main.js and saving wouldn't change what you see.
You can usually use a gulp or grunt script instead of a npm script to watch and build main.js by adding the
-g --grunt
or-u --gulp
flag when creating a new app withpex init
. For more info check out: Pex command line reference. -
Play around with the example! If you made it this far all you need to do now is dive into the amazing world of 3D graphics. The example app is a basic cube. But Pex comes with a lot more awesome examples so try them all out, copy pasta some code to make some neat stuff and dive into the docs.
ThreeJS is focusing on simplifying your experience with WebGL by hiding the hard parts and exposing an API that's easy to start with. It has better community support, better tools import/export support and it's well tested, solid code that you can confortably use for your production projects.
Pex has different goals in mind. It's simplifying coding but there is more boilerplate code to be written with aim to give you more controll over what and when is happening. While ThreeJS is targetting browsers, Pex primary target is Plask. It is written in a way that works in any WebGL capable browser out of the box and even on iOS with Ejecta. Pex is written in a modular way with CommonJS module format (the same as used in node.js libraries), ThreeJS is namespacing everything inside global Three object.
- We love github issues! http://github.com/vorg/pex/issues
- Follow @marcinignac on twitter
- We are on #pex on freenode.
Marcin Ignac - main library code
Nick Nikolov - big part of v3 node modules rewrite, geom library contributions
Szymon Kaliski - various build scripts improvements, examples contributor
Dean McNamee - author of Plask and core math code in pex
Fibers - data driven artwork
Flora - generative educational app
Digital Type Wall - generative typograpy installation
And more:
http://variable.io/ (All WebGL projects)
http://marcinignac.com/experiments/technology/webgl/
http://marcinignac.com/projects/technology/webgl/
http://www.flickr.com/photos/marcinignac/sets/72157629801608107/
Node: Plask is currently available only for OSX. If you are on Windows or Linux please jump to the next section How to use Pex in a web browser?
-
Download Plask.
-
Unpack .DMG and move PlaskLauncher.app to your
Applications
folder -
Install node.js.
-
Run the following commands in the terminal to install pex.
npm install -g pex
-
Create your pex project.
cd path/to/your/workspace/folder/ pex init myFirstProject
-
Install dependencies.
cd myFirstProject npm install
-
Open PlaskLauncher.app, click
File->Open
and choose generatedmyFirstProject/main.js
file. -
You should see a colorful cube. Drag your mouse to rotate it.
-
Install node.js.
-
Run the following commands in the terminal to install pex.
npm install -g pex
-
Create your pex project.
cd path/to/your/workspace/folder/ pex init myFirstProject
-
Install dependencies.
cd myFirstProject npm install
-
Start compilation.
npm run watch
-
The
watch
command should open a browser window and reload every time you make changes tomain.js
if not, clickmyFirstProject/index.html
-
You should see a colorful cube. Drag your mouse to rotate it.
var sys = require('pex-sys');
var glu = require('pex-glu');
var materials = require('pex-materials');
var color = require('pex-color');
var gen = require('pex-gen');
var Cube = gen.Cube;
var Mesh = glu.Mesh;
var ShowNormals = materials.ShowNormals;
var PerspectiveCamera = glu.PerspectiveCamera;
var Arcball = glu.Arcball;
var Color = color.Color;
var Platform = sys.Platform;
sys.Window.create({
settings: {
width: 1280,
height: 720,
type: '3d',
fullscreen: Platform.isBrowser ? true : false
},
init: function() {
var cube = new Cube();
this.mesh = new Mesh(cube, new ShowNormals());
this.camera = new PerspectiveCamera(60, this.width / this.height);
this.arcball = new Arcball(this, this.camera);
},
draw: function() {
glu.clearColorAndDepth(Color.Red);
glu.enableDepthReadAndWrite(true);
this.mesh.draw(this.camera);
}
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pex example</title>
<script type="text/javascript" src="main.web.js"></script>
</head>
<body>
</body>
</html>
Opening and relaunching with Plask / PlaskLauncher is tedious so learn how to add custom build systems for Plask in ST3.
First install the script using npm:
npm install -g pex
If that fails then your permissions might not be enough so try:
sudo npm install -g pex
You will be asked to enter your password and things should go smoothly after that.
pex init projectName [options]
-h, --help output usage information
-V, --version output the version number
-g, --grunt add grunt build script
-u, --gulp add gulp build script
-d, --docs generate docs
-f, --force force on non-empty directory