Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Nightre/Rapid.js/llms.txt

Use this file to discover all available pages before exploring further.

RenderTexture extends Texture and wraps a WebGL framebuffer together with a stencil renderbuffer. You can draw anything into it using rapid.drawToRenderTexture(), and then use the RenderTexture itself as the texture argument of any subsequent draw call — exactly like any other Texture. This makes RenderTexture the foundation for post-processing effects, off-screen compositing, dynamic shadows, and render-to-texture workflows.
RenderTexture sets flipY = true automatically, compensating for WebGL’s bottom-left framebuffer origin so the image appears right-side-up when drawn back to the screen.

​
Creating a RenderTexture

Use rapid.texture.createRenderTexture() rather than constructing the class directly. 
const rt = rapid.texture.createRenderTexture({
  width: 512,
  height: 512,
  clearColor: Color.Transparent,
});

​
IRenderTextureOptions

​
width
number
required
Logical width of the render target in pixels. Must be at least 1. The value is rounded to the nearest integer.
​
height
number
required
Logical height of the render target in pixels. Must be at least 1. The value is rounded to the nearest integer.
​
clearColor
Color
default:"Color.Black"
Color used by activate(true) and clear() when no explicit color is passed. Set to Color.Transparent (or a Color with a = 0) to clear to fully transparent.
​
textureFilter
TextureFilterMode
Minification / magnification filter for the backing texture.
ValueDescription
TextureFilterMode.NEARESTPixel-perfect, no blending. Default.
TextureFilterMode.LINEARBilinear interpolation — smoother at scale.
​
wrap
TextureWrapMode
UV wrap mode for the backing texture. Defaults to CLAMP.
​
premultipliedAlpha
boolean
Whether the texture is treated as premultiplied-alpha. Passed through to the underlying ITextureOptions.

​
Public Properties

​
flipY
boolean
default:"true"
Always true on RenderTexture. Instructs the renderer to flip UV coordinates vertically when drawing this texture, compensating for WebGL’s bottom-left framebuffer origin so content appears right-side-up on screen.
​
clearColor
Color | undefined
The default clear color used by activate(true) and clear() when no explicit color argument is passed. Initialized from IRenderTextureOptions.clearColor and defaults to Color.Black if omitted.

​
Methods

​
resize(width, height, force?)

Updates the logical dimensions of the render target. GPU memory is allocated using a grow-only strategy: the framebuffer is only reallocated when the requested size exceeds the current GPU allocation. Shrinking simply updates the logical size and UV sub-region — no GPU work is performed. This makes it safe to call resize() frequently (even every frame) with varying sizes without causing GPU allocation churn. 
// Grow to match the window on resize
rt.resize(window.innerWidth, window.innerHeight);
Parameters
​
width
number
required
New logical width in pixels.
​
height
number
required
New logical height in pixels.
​
force
boolean
default:"false"
When true, forces a full GPU reallocation regardless of whether the current allocation is already large enough.
Returns: void

​
activate(clear?)

Binds this RenderTexture as the current WebGL framebuffer and sets the viewport to the logical dimensions. All subsequent draw calls will target this texture until deactivate() is called. 
rt.activate(true); // bind + clear in one step
rapid.drawSprite({ texture: backgroundTex, x: 0, y: 0 });
rt.deactivate();
Parameters
​
clear
boolean
default:"false"
When true, immediately clears the framebuffer using the clearColor configured at construction time.
Returns: void

​
clear(clearColor?)

Clears the currently bound framebuffer. The framebuffer must already be bound (e.g. after calling activate()) before calling this method. 
rt.activate();
rt.clear(new Color(0, 0, 0, 0)); // clear to transparent
Parameters
​
clearColor
Color
Override color for this clear operation. Falls back to the clearColor set at construction if omitted.
Returns: void

​
deactivate()

Unbinds the framebuffer, returning subsequent draw calls to the default (screen) framebuffer. 
rt.deactivate();
Returns: void

​
GetPixels(x?, y?, width?, height?)

Reads raw RGBA pixel data from the render texture back to the CPU. The region uses a top-left origin coordinate system, matching the logical draw space rather than WebGL’s bottom-left convention (the conversion is handled internally).
GetPixels causes a GPU pipeline flush and a CPU stall while the GPU finishes rendering. Avoid calling it frequently in performance-sensitive code paths (e.g. every frame).
const pixels = rt.GetPixels(0, 0, 64, 64);
// pixels[0], pixels[1], pixels[2], pixels[3] = R, G, B, A of pixel (0, 0)
Parameters
​
x
number
default:"0"
Left edge of the read region in logical pixels (top-left origin).
​
y
number
default:"0"
Top edge of the read region in logical pixels (top-left origin).
​
width
number
default:"rawWidth"
Width of the read region in pixels. Clamped to the available texture area.
​
height
number
default:"rawHeight"
Height of the read region in pixels. Clamped to the available texture area.
Returns: Uint8Array — Flat RGBA byte array of length width × height × 4. Returns an empty array if the coordinates are out of bounds or the framebuffer is unavailable.

​
GetColorAt(x, y)

Convenience wrapper around GetPixels that reads a single pixel and returns it as a Color object. 
const color = rt.GetColorAt(mouseX, mouseY);
if (color.a > 0) {
  console.log("Hit!", color.r, color.g, color.b);
}
Parameters
​
x
number
required
X coordinate in logical pixel space (top-left origin).
​
y
number
required
Y coordinate in logical pixel space (top-left origin).
Returns: Color — Returns Color(0, 0, 0, 0) if out of bounds.

​
destroy()

Deletes the WebGL framebuffer, renderbuffer, and the underlying BaseTexture GPU resource. After calling destroy(), the RenderTexture must not be used. 
rt.destroy();
Returns: void

​
Using a RenderTexture as a Drawable Texture

Once you have rendered content into a RenderTexture, pass it as the texture argument to any Rapid.js draw call just like a regular Texture. 
// Render the scene into the render texture
rapid.drawToRenderTexture(rt, () => {
  rapid.drawSprite({ texture: backgroundTex, x: 0, y: 0 });
  rapid.drawSprite({ texture: characterTex, x: 100, y: 200 });
});

// Draw the composited result onto the screen
rapid.drawSprite({ texture: rt, x: 0, y: 0 });
rapid.drawToRenderTexture() handles activate() and deactivate() for you. Use the manual activate() / deactivate() API only when you need fine-grained control over multiple render targets in a single frame.

​
flipY and Coordinate Convention

WebGL framebuffers store pixels with the origin at the bottom-left, opposite to the top-left origin that Rapid.js uses for its logical coordinate space. RenderTexture compensates by setting flipY = true on the Texture base class, which instructs the renderer to flip the UV coordinates vertically when the render texture is drawn back to any target. The result is that rendered content appears right-side-up. The same correction applies to GetPixels and GetColorAt — they translate from top-left logical space to WebGL’s bottom-left space before calling gl.readPixels, so you always work in the same coordinate system regardless of the underlying GPU convention.

Build docs developers (and LLMs) love

Get started for freeTalk to us