AdvancedReadonlyadaptora reference to the adaptor that interfaces with WebGL / WebGP
Readonlydefaultthe default clear color for render targets
Readonlyona runner that lets systems know if the active render target has changed. Eg the Stencil System needs to know so it can manage the stencil buffer
Readonlyprojectionthe projection matrix that is used by the shaders based on the active render target and the viewport
A boolean that lets the dev know if the current render pass is rendering to the screen. Used by some plugins
the current active render surface that the render target is created from
the current active render target
When rendering of a scene begins, this is where the root render surface is stored
This is the root viewport for the render pass
Readonlyviewportthe current viewport that the gpu is using
Binding a render surface! This is the main function of the render target system. It will take the RenderSurface (which can be a texture, canvas, or render target) and bind it to the renderer. Once bound all draw calls will be rendered to the render surface.
If a frame is not provide and the render surface is a texture, the frame of the texture will be used.
the render surface to bind
the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111
OptionalclearColor: RgbaArraythe color to clear to
Optionalframe: Rectanglethe frame to render to
the render target that was bound
Optionaltarget: RenderSurfaceOptionalclearColor: RgbaArrayCopies a render surface to another texture.
NOTE: for sourceRenderSurfaceTexture, The render target must be something that is written too by the renderer
The following is not valid:
the render surface to copy from
the texture to copy to
the origin of the copy
the x origin of the copy
the y origin of the copy
the size of the copy
the height of the copy
the width of the copy
the destination origin (top left to paste from!)
the x origin of the paste
the y origin of the paste
const canvas = document.createElement('canvas')
canvas.width = 200;
canvas.height = 200;
const ctx = canvas2.getContext('2d')!
ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 200, 200);
const texture = RenderTexture.create({
width: 200,
height: 200,
})
const renderTarget = renderer.renderTarget.getRenderTarget(canvas2);
renderer.renderTarget.copyToTexture(renderTarget,texture, {x:0,y:0},{width:200,height:200},{x:0,y:0});
The best way to copy a canvas is to create a texture from it. Then render with that.
Parsing in a RenderTarget canvas context (with a 2d context)
nukes the render target system
ensures that we have a depth stencil buffer available to render to This is used by the mask system to make sure we have a stencil buffer.
called when dev wants to finish a render pass
Gets the render target from the provide render surface. Eg if its a texture, it will return the render target for the texture. If its a render target, it will return the same render target.
the render surface to get the render target for
the render target for the render surface
Pops the current render target from the renderer and restores the previous render target.
Push a render surface to the renderer. This will bind the render surface to the renderer,
the render surface to push
the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111
OptionalclearColor: RgbaArraythe color to clear to
Optionalframe: Rectanglethe frame to use when rendering to the render surface
called when the renderer starts to render a scene.
the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111
the color to clear to
Optionalframe?: Rectanglethe frame to render to
the render target to render to
A system that manages render targets. A render target is essentially a place where the shaders can color in the pixels. The render target system is responsible for binding the render target to the renderer, and managing the viewport. Render targets can be pushed and popped.
To make it easier, you can also bind textures and canvases too. This will automatically create a render target for you. The render target itself is a lot more powerful than just a texture or canvas, as it can have multiple textures attached to it. It will also give ou fine grain control over the stencil buffer / depth texture.
Example