RenderTarget class

Basic usage

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.

Please note that render targets (and therefore shader passes) disable the WebGL context default antialiasing. If you use them, you should set the antialias Curtains property to false when initiating your context.
You might then want to add an extra antialiasing pass, like FXAA or MSAA. See the Post processing scrolling wheel with custom transform origin for an example of how to add a FXAA pass.

Creation

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 read only

    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.

  • uuid (string): v6.0read only

    The render target's unique identifier.