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.
Returns a WebGL context. Tries to get the context via experimental-webgl
or just plain webgl
if the first one fails.
var gl = PhiloGL.WebGL.getContext(canvas[, options]);
console.log
-ged and errors thrown to the console.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.
A program instance has multiple public properties.
WebGLRenderingContext
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.
app.setBuffer(name, options);
attribute
value is set in options
then the buffer name will be used as attribute name.gl.ELEMENT_ARRAY_BUFFER
, gl.ARRAY_BUFFER
. Default’s gl.ARRAY_BUFFER
.gl.FLOAT
.stride
parameter when calling gl.vertexAttribPointer
. Default’s 0.offset
parameter when calling gl.vertexAttribPointer
. Default’s 0.gl.bufferData
. Default’s gl.STATIC_DRAW
.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
});
For each key, value
of the object passed in it executes setBuffer(key, value)
.
app.setBuffers(object);
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
}
});
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.
app.setFrameBuffer(name[, options]);
setTexture
.{ attachment: gl.COLOR_ATTACHMENT0 }
.width
and height
of the renderbuffer are the same as the ones specified above.{ attachment: gl.DEPTH_ATTACHMENT }
.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
});
For each key, value
of the object passed in it executes setFrameBuffer(key, value)
.
app.setFrameBuffers(object);
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.
app.setRenderBuffer(name[, options]);
gl.DEPTH_COMPONENT16
.For each key, value
of the object passed in it executes setRenderBuffer(key, value)
.
app.setRenderBuffers(object);
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.
app.setTexture(name[, options]);
textureType - (enum, optional) The texture type used to call gl.bindTexture
with. Default’s gl.TEXTURE_2D
.
pixelStore - (array, optional) An array of objects with name, value options to be set with gl.pixelStorei
calls. Default’s [{ name: gl.UNPACK_FLIP_Y_WEBGL, value: true }]
.
parameters - (array, optional) An array of objects with nane, value options to be set with gl.texParameteri
. Default’s [{ name: gl.TEXTURE_MAG_FILTER, value: gl.NEAREST }, { name: gl.TEXTURE_MIN_FILTER, value: gl.NEAREST }]
.
data - (object, optional) An object with properties described below:
gl.texImage2D
calls. Default’s gl.RGBA
.Image
object then this image will be used to fill the texture. Default’s false. If no image is set then we might want to set the width and height of the texture.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';
For each key, value
of the object passed in it executes setTexture(key, value)
.
app.setTextures(object);
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';
Calls gl.useProgram(program)
with the given program.
app.use(program);
program - (object) A Program instance.