跳转到内容
ESEngine

渲染纹理

RenderTexture 可以将场景（或部分场景）渲染到离屏纹理而非屏幕上。适用于小地图、镜像、传送门、后处理输入，以及任何需要捕获渲染输出的效果。

创建 RenderTexture

import { RenderTexture, type RenderTextureHandle } from 'esengine';


const rt: RenderTextureHandle = RenderTexture.create({
    width: 512,
    height: 512,
    depth: true,
    filter: 'linear',
});

RenderTextureOptions

字段类型默认值说明
widthnumber—纹理宽度（像素）
heightnumber—纹理高度（像素）
depthbooleanfalse是否附加深度缓冲
filter'nearest' | 'linear''nearest'纹理过滤模式

渲染到纹理

在 begin() 和 end() 之间进行绘制调用。期间渲染的所有内容都会输出到纹理而非屏幕：

import { RenderTexture, Draw } from 'esengine';


RenderTexture.begin(rt, viewProjectionMatrix);


Draw.rect(0, 0, 100, 100, { r: 1, g: 0, b: 0, a: 1 });


RenderTexture.end();

viewProjection 参数是一个 Float32Array，包含 4x4 视图-投影矩阵，定义此离屏渲染通道的相机。

使用渲染结果

渲染完成后，rt.textureId 包含 GPU 纹理 ID。可以在任何需要纹理的地方使用：

import { Draw, Sprite } from 'esengine';


Draw.texture(rt.textureId, 0, 0, rt.width, rt.height);

也可以将其赋值给 Sprite 的 texture 用于基于实体的渲染。

深度纹理

如果创建 RenderTexture 时启用了 depth: true，可以获取深度纹理用于阴影映射等效果：

const depthTextureId = RenderTexture.getDepthTexture(rt);

生命周期

调整大小

当目标分辨率变化时（如窗口调整），调整 RenderTexture 大小：

const resized = RenderTexture.resize(rt, newWidth, newHeight);

resize() 返回新的 RenderTextureHandle，后续应使用返回的句柄。

释放资源

不再需要 RenderTexture 时释放 GPU 资源：

RenderTexture.release(rt);

API 参考

方法返回值说明
RenderTexture.create(options)RenderTextureHandle创建新的渲染纹理
RenderTexture.begin(rt, viewProjection)void开始渲染到纹理
RenderTexture.end()void结束渲染到纹理
RenderTexture.getDepthTexture(rt)number获取深度纹理 ID
RenderTexture.resize(rt, width, height)RenderTextureHandle调整渲染纹理大小
RenderTexture.release(rt)void释放 GPU 资源

RenderTextureHandle

字段类型说明
textureIdnumber颜色附件的 GPU 纹理 ID
widthnumber当前宽度（像素）
heightnumber当前高度（像素）

下一步