JavaScript-WebGL2学习笔记五-离屏渲染

最新推荐文章于 2026-06-22 08:12:07 发布

原创

最新推荐文章于 2026-06-22 08:12:07 发布 · 1.3k 阅读

收录于

这篇博客是作者学习WebGL Lesson 16 - rendering to textures的心得，详细介绍了离屏渲染的三个步骤：创建frame buffer和关联的texture、将场景渲染到frame buffer以及如何像普通texture一样使用结果。通过示例代码展示了如何实现这一过程，表明离屏渲染并不复杂。

Author: kagula

Date: 2018-03-30

Description:

这是我《WebGL Lesson 16 – rendering to textures》的学习笔记。

源文地址：http://learningwebgl.com/blog/?p=1786

Content:

WebGL中离屏渲染有三个步骤组成：

[第一步]新建frame buffer和同frame buffer关联的texture。

[第二步]render到frame buffer，这样同frame buffer关联的texture被绘制。

[最后一步]像使用普通texture一样，使用刚才绘制好的texture.

第一步：先要建frame buffer，并同texture对象和render buffer做关联，如下

    var rttFramebuffer;
    var rttTexture;

    function initTextureFramebuffer() {
        //create frame buffer
        rttFramebuffer = gl.createFramebuffer();
        gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);