The goal of this module is to provide utility functions for media like audio, video, or image post-processing among others things (for example other devices, camera, etc.). The API in this module will be changing with time, and right now there’s only one utility method implemented under the Image
object.
Povides utility functions for manipulating images.
Creates a temporary scene with a plane, used to post-process textures and render the job to other texture(s) or to the main screen.
Media.Image.postProcess(options);
id
to be used for rendering.id
of the framebuffer to render the scene to. The associated texture will have as id
the framebuffer id plus -texture
as suffix.true
to render the result to the screen. Default’s false.In the World Flights example we use image post-processing to create a pseudo bloom filter.
//create two framebuffers that will store an image to a texture.
app.setFrameBuffer('world', {
width: 1024,
height: 1024,
bindToTexture: {
parameters: [{
name: 'TEXTURE_MAG_FILTER',
value: 'LINEAR'
}, {
name: 'TEXTURE_MIN_FILTER',
value: 'LINEAR_MIPMAP_NEAREST',
generateMipmap: false
}]
},
bindToRenderBuffer: true
}).setFrameBuffer('world2', {
width: 1024,
height: 1024,
bindToTexture: {
parameters: [{
name: 'TEXTURE_MAG_FILTER',
value: 'LINEAR'
}, {
name: 'TEXTURE_MIN_FILTER',
value: 'LINEAR_MIPMAP_NEAREST',
generateMipmap: false
}]
},
bindToRenderBuffer: true
});
//...later, when rendering the scene...
// render to a 'world-texture'
app.setFrameBuffer('world', true);
program.earth.use();
gl.clear(clearOpt);
gl.viewport(0, 0, 1024, 1024);
program.earth.setUniform('renderType', 0);
scene.renderToTexture('world');
app.setFrameBuffer('world', false);
// render to a 'world2-texture'
app.setFrameBuffer('world2', true);
program.earth.use();
gl.clear(clearOpt);
gl.viewport(0, 0, 1024, 1024);
program.earth.setUniform('renderType', -1);
scene.renderToTexture('world2');
app.setFrameBuffer('world2', false);
// send the two textures to the shaders,
// and combine them in the shaders and print the
// result to the screen.
Media.Image.postProcess({
fromTexture: ['world-texture', 'world2-texture'],
toScreen: true,
program: 'glow',
width: 1024,
height: 1024
});
You can find other examples in the hoc
folder in the source code at GitHub.