RenderTarget class

Basic usage

Creation

The RenderTarget class is just a class that creates Frame Buffer Objects (FBO). You can render a plane to a render a target instead of your canvas and then use that render target either by assigning it to a ShaderPass or by grabbing its content (ie its Texture) and use it in another plane.

To create a new render target, you should use the addRenderTarget of our Curtains class.
To use it you'll have to apply it to a plane by using the setRenderTarget of our Plane class.

Using a RenderTarget texture in a plane

// "canvas" is the ID of our HTML container element
var curtains = new Curtains({
container: "canvas"
});
// create a render target
var target = curtains.addRenderTarget();
var planeElement = document.getElementById("my-plane");
// create a plane
var plane = curtains.addPlane(planeElement, {
vertexShaderID: "plane-vs",
fragmentShaderID: "plane-fs",
});
// if our plane has been successfully created
if(plane && target) {
// add our plane to our frame buffer object
plane.setRenderTarget(target);
// create a plane to display our render target result
var renderElement = document.getElementById("render-plane");
var renderPlane = curtains.addPlane(renderElement, {
vertexShaderID: "render-plane-vs",
fragmentShaderID: "render-plane-fs",
});
if(renderPlane) {
renderPlane.onReady(function() {
// create a new texture and copy the render target texture into it
// you'll be able to use it as a regular texture in your plane shader
var renderTexture = renderPlane.createTexture({
sampler: "uRenderTexture",
fromTexture: target.textures[0],
});
});
}
}

Assigning a RenderTarget to a ShaderPass

You can decide to add a ShaderPass to a defined set of plane instead of your whole scene. By combining a shader pass with a render target, you'll be able to add an additional pass to all the planes that use that render target.

// "canvas" is the ID of our HTML container element
var curtains = new Curtains({
container: "canvas"
});
// create a render target
var target = curtains.addRenderTarget();
var planeElements = document.getElementsByClassName("my-planes");
// create a bunch of planes
for(var i = 0; i < planeElements.length; i++) {
var plane = curtains.addPlane(planeElements[i], {
vertexShaderID: "plane-vs",
fragmentShaderID: "plane-fs",
});
// if our plane has been successfully created
if(plane && target) {
// add our plane to our frame buffer object
plane.setRenderTarget(target);
}
}
// now assign our render target to a shader pass
var shaderPassParams = {
vertexShaderID: "my-shader-pass-vs",
fragmentShaderID: "my-shader-pass-fs",
renderTarget: target, // this is how we assign the render target to our shader pass
uniforms: {
time: {
name: "uTime",
type: "1f",
value: 0,
},
},
};
var shaderPass = curtains.addShaderPass(shaderPassParams);

Check the Selective shader passes using render targets example to see how you can apply different shader passes to different bunch of planes.

Properties

  • index(integer): v5.0

    The index of the render target in the renderTargets array.

  • textures(array): v5.0

    An array of length 1 containing the only render target's Texture.

  • userData (object): v5.0

    An empty object to store any additional data or custom properties into your render target.