library logo

WebGL

Module: WebGL

Provides the getContext method which is a wrapper around the method that returns the native context for a 3D canvas. Also has the code to add PhiloGL.hasWebGL() that returns a boolean whether the current browser supports WebGL or not.

WebGL Function: getContext

Returns a WebGL context. Tries to get the context via experimental-webgl or just plain webgl if the first one fails.

Syntax:

var gl = PhiloGL.WebGL.getContext(canvas[, options]);

Arguments:

  1. canvas - (mixed) Can be a string with the canvas id or the canvas element itself.
  2. options - (object) An object with the following properties:

Options:

WebGL Class: WebGL.Application

The WebGL Application class has useful methods to manipulate buffers, textures and other things. Some of these methods can also be found in the Program class, but in this case these aren’t bound to any particular program. A WebGL Application is created via the PhiloGL constructor function and returned on the onLoad callback. The application carries all the state regardless of the number of programs and other buffers defined via the WebGL Application or any other Program instance. This design facilitates multiple program state and management.

Properties:

A program instance has multiple public properties.

WebGL.Application Method: setBuffer

This method is useful to set properties (and data) to a buffer and/or attributes. If the buffer does not exist it will be created. Also, for all properties set to a buffer, these properties are remembered so they’re optional for later calls.

Syntax:

app.setBuffer(name, options);

Arguments:

  1. name - (string) The name (unique id) of the buffer. If no attribute value is set in options then the buffer name will be used as attribute name.
  2. options - (object) An object with options/data described below:

Options:

Examples:

Set buffer values for the vertices of a triangle. The context of this example can be seen here.

app.setBuffer('triangle', {
  attribute: 'aVertexPosition',
  value: new Float32Array([0, 1, 0, -1, -1, 0, 1, -1, 0]),
  size: 3
});

WebGL.Application Method: setBuffers

For each key, value of the object passed in it executes setBuffer(key, value).

Syntax:

app.setBuffers(object);

Arguments:

  1. object - (object) An object with key value pairs matching a buffer name and its value respectively.

Examples:

Set buffer values for the vertices of a triangle and a square. The context of this example can be seen here.

app.setBuffers({
  'triangle': {
    attribute: 'aVertexPosition',
    value: new Float32Array([0, 1, 0, -1, -1, 0, 1, -1, 0]),
    size: 3
  },
  
  'square': {
    attribute: 'aVertexPosition',
    value: new Float32Array([1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1, 0]),
    size: 3
  }
});

WebGL.Application Method: setFrameBuffer

Creates or binds/unbinds a framebuffer. You can also use this method to bind the framebuffer to a texture and renderbuffers. If the framebuffer already exists then calling setFrameBuffer with true or false as options will bind/unbind the framebuffer. Also, for all properties set to a buffer, these properties are remembered so they’re optional for later calls.

Syntax:

app.setFrameBuffer(name[, options]);

Arguments:

  1. name - (string) The name (unique id) of the buffer.
  2. options - (mixed) Can be a boolean used to bind/unbind the framebuffer or an object with options/data described below:

Options:

Examples:

Using a frambuffer to render a scene into a texture. Taken from lesson 16.

//create framebuffer
app.setFrameBuffer('monitor', {
  width: screenWidth,
  height: screenHeight,
  bindToTexture: {      
    parameters: [{
      name: 'TEXTURE_MAG_FILTER',
      value: 'LINEAR'
    }, {
      name: 'TEXTURE_MIN_FILTER',
      value: 'LINEAR_MIPMAP_NEAREST',
      generateMipmap: false
    }]
  },
  bindToRenderBuffer: true
});

WebGL.Application Method: setFrameBuffers

For each key, value of the object passed in it executes setFrameBuffer(key, value).

Syntax:

app.setFrameBuffers(object);

Arguments:

  1. object - (object) An object with key value pairs matching a buffer name and its value respectively.

WebGL.Application Method: setRenderBuffer

Creates or binds/unbinds a renderbuffer. If the renderbuffer already exists and the second parameter is a boolean it’ll bind or unbind the renderbuffer. Also, for all properties set to a buffer, these properties are remembered so they’re optional for later calls.

Syntax:

app.setRenderBuffer(name[, options]);

Arguments:

  1. name - (string) The name (unique id) of the buffer.
  2. options - (mixed) Can be a boolean used to bind/unbind the renderbuffer or an object with options/data described below:

Options:

WebGL.Application Method: setRenderBuffers

For each key, value of the object passed in it executes setRenderBuffer(key, value).

Syntax:

app.setRenderBuffers(object);

Arguments:

  1. object - (object) An object with key value pairs matching a buffer name and its value respectively.

WebGL.Application Method: setTexture

This method is used to either bind/unbind an existing texture or also to create a new texture form an Image element or to create an empty texture with specified dimensions. Also, for all properties set to a texture, these properties are remembered so they’re optional for later calls.

Syntax:

app.setTexture(name[, options]);

Arguments:

  1. name - (string) The name (unique id) of the texture.
  2. options - (mixed) Can be a boolean or enum used to bind/unbind the texture (or set the enum as active texture) or an object with options/data described below:

Options:

Examples:

Setting a texture for a box. Adapted from lesson 6.

var img = new Image();

img.onload = function() {
  app.setTexture('nearest', {
    data: {
      value: img
    }
  });
};

img.src = 'path/to/image.png';

WebGL.Application Method: setTextures

For each key, value of the object passed in it executes setTexture(key, value).

Syntax:

app.setTextures(object);

Arguments:

  1. object - (object) An object with key value pairs matching a texture name and its value respectively.

Examples:

Set multiple type of textures from the same image. Taken from lesson 6.

//load textures from image
var img = new Image();
img.onload = function() {
  app.setTextures({
    'nearest': {
      data: {
        value: img
      }
    },

    'linear': {
      data: {
        value: img
      },
      parameters: [{
        name: gl.TEXTURE_MAG_FILTER,
        value: gl.LINEAR
      }, {
        name: gl.TEXTURE_MIN_FILTER,
        value: gl.LINEAR
      }]
    },

    'mipmap': {
      data: {
        value: img
      },
      parameters: [{
        name: gl.TEXTURE_MAG_FILTER,
        value: gl.LINEAR
      }, {
        name: gl.TEXTURE_MIN_FILTER,
        value: gl.LINEAR_MIPMAP_NEAREST,
        generateMipmap: true
      }]
    }
  });
};

img.src = 'path/to/image.png';

WebGL.Application Method: use

Calls gl.useProgram(program) with the given program.

Syntax:

app.use(program);

Arguments:

program - (object) A Program instance.

Copyright © Nicolas Garcia Belmonte.