The Program class has very useful methods to create a Program out of shaders in different ways, methods for using buffers, textures, setting uniforms and more.
A program instance has as public properties:
All instance methods in a program (unless they return some documented value) are chainable.
Creates a new program by asynchronously fetching the source contained in the files pointed by the given urls. Ths method is very convenient because it enables you to write your shaders in separate files and keep your project organized.
PhiloGL.Program.fromShaderURIs(options);
false
.Program
instance.Create a Program from the given script files.
In shaders/fragment.glsl
#ifdef GL_ES
precision highp float;
#endif
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
In shaders/vertex.glsl
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
JavaScript code:
PhiloGL.Program.fromShaderURIs({
path: 'shaders/',
vs: 'vertex.glsl',
fs: 'fragment.glsl',
onSuccess: function(program) {
alert("Got the program!");
},
onError: function(e) {
alert("An error ocurred while fetching or compiling the shaders");
}
});
Creates a new program by fetching the source contained into the DOM scripts with ids provided in the method.
var program = PhiloGL.Program.fromShaderIds(vertexShaderId, fragmentShaderId);
Create a Program from the given script ids.
HTML code:
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>
JavaScript code:
var program = PhiloGL.Program.fromShaderIds('shader-vs', 'shader-fs');
Creates a new program by using the strings passed as arguments as source for the shaders.
var program = PhiloGL.Program.fromShaderIds(vertexShaderSource, fragmentShaderSource);
Create a Program from the given sources.
var program = PhiloGL.Program.fromShaderSources([
"attribute vec3 aVertexPosition;",
"uniform mat4 uMVMatrix;",
"uniform mat4 uPMatrix;",
"void main(void) {",
"gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);",
"}" ].join('\n'),
, [
"#ifdef GL_ES",
"precision highp float;",
"#endif",
"void main(void) {",
"gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);",
"}" ].join('\n'));
Creates a new program by using the sources taken from Shaders.Vertex and Shaders.Fragment.
var program = PhiloGL.Program.fromShaderIds(vertexDefaultShaderId, fragmentDefaultShaderId);
Default
.Default
.Extend Shaders.Fragment with a default shader and create a Program from defaults. Taken from lesson 8 example.
//Add Blend Fragment Shader
PhiloGL.Shaders.Fragment.Blend = [
"#ifdef GL_ES",
"precision highp float;",
"#endif",
"varying vec4 vColor;",
"varying vec2 vTexCoord;",
"varying vec3 lightWeighting;",
"uniform bool hasTexture1;",
"uniform sampler2D sampler1;",
"uniform float alpha;",
"void main(){",
"if (hasTexture1) {",
"gl_FragColor = vec4(texture2D(sampler1, vec2(vTexCoord.s, vTexCoord.t)).rgb * lightWeighting, alpha);",
"}",
"}"
].join("\n");
var program = PhiloGL.Program.fromDefaultShaders('Default', 'Blend');
For more information about the default shader code Default
included in the Framework take a look at the Shaders script.
Sets the value of an uniform. There’s no need to convert the array into a typed array, that’s done automatically. The name of the uniform matches the name of the uniform declared in the shader.
program.setUniform(name, value);
Set matrix information for the projection matrix and element matrix of the camera and world. The context of this example can be seen here.
program.setUniform('uMVMatrix', view);
program.setUniform('uPMatrix', camera.projection);
For each key, value
of the object passed in it executes setUniform(key, value)
.
program.setUniforms(object);
Set matrix information for the projection matrix and element matrix of the camera and world. The context of this example can be seen here.
program.setUniforms({
'uMVMatrix': view,
'uPMatrix': camera.projection
});
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.
program.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.
program.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)
.
program.setBuffers(object);
Set buffer values for the vertices of a triangle and a square. The context of this example can be seen here.
program.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.
program.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
program.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)
.
program.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.
program.setRenderBuffer(name[, options]);
gl.DEPTH_COMPONENT16
.For each key, value
of the object passed in it executes setRenderBuffer(key, value)
.
program.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.
program.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() {
program.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)
.
program.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() {
program.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(this.program)
. To set the current program as active.
program.use();