Install

You can get it on Bower.

$ bower install pocket.gl --save

If you are not into package management, just download a ZIP file.

Setup

First, include the script located on the dist folder or load it from a third-party CDN provider.

// load it from the dist folder
<script src="dist/pocket.gl.min.js"></script>

// or load it from RawGit
<script src="rawgit-url"></script>

Now, you need to create a <div> container for the pocket.gl sandbox.

<div id="myContainer"></div>

Finally, you need to instantiate it by passing an HTML DOM Element ID or an HTML DOM Element Object.

new PocketGL("myContainer");

If you want to make sure that everything in your page has already been loaded before creating the sandbox, just wrap the init code inside a window load event listener.

window.addEventListener("load", function () { 
  new PocketGL("myContainer"); 
});

As a result, you will get a default sandbox with a Utah Teapot and a basic Blinn-Phong shader.

You can start playing with this Hello World sandbox to create your own shaders. Then you can copy and paste the vertex and fragment shader code into the config-object parameter of the PocketGL constructor.

new PocketGL("myContainer", {
	vertexShader: [
		"here goes your vertex shader code",
		"...",
		"..."
	].join("\n"),

	fragmentShader: [
		"here goes your fragment shader code",
		"...",
		"..."
	].join("\n")
});

Or you can put your shader code into text files and upload them to your server, then write their URLs into the config-object.

new PocketGL("myContainer", {
	vertexShaderFile:   "path/to/your/vertexShaderFile",
	fragmentShaderFile: "path/to/your/fragmentShaderFile"
});

You can also specify a base URL for all the URLs in the config-object.

new PocketGL("myContainer", {
	vertexShaderFile:   "relative/path/to/your/vertexShaderFile",
	fragmentShaderFile: "relative/path/to/your/fragmentShaderFile"
}, "your/base/URL");

WordPress Embedding

Embedding a pocket.gl sandbox into a WordPress post or page is very easy; you only need to add a few lines of javascript/HTML to the page with the editor in text mode.

• Switch your WordPress editor into text mode by clicking on the Text tab.
• Add a <div> container for the sandbox.
• Include the library before using it (you can include it at the top of the page, if you want).
• Instantiate the sandbox by passing to the constructor the ID of your container <div> and the URL to the config file.
• Then you can switch the editor back to visual mode and continue writing your article in a WYSIWYG way.

Here is an example:

And here is the result page:

More

Read the complete Documentation and the Tutorials to find out all the parameters to customize the appearance, to load textures and skyboxes, to resize and rotate meshes, to create fragment-only shaders and to use pocket.gl as a 3D model viewer.