Question

我想做一些看起来很简单的事情，但是我是webgl的新手，很难找到一个简单地做到这一点的教程。可以说我准备了两个webgl纹理与我的webgl2渲染上下文一起使用。我只想在坐标texture1上将texture2写到x, y上。设置此系统的准系统是什么？

Answer 1

从一种纹理渲染到另一种纹理需要将要写入的纹理（目标纹理）附加到帧缓冲区

shareableUrl

之后，使用纹理渲染

const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb):
const attachmentPoint = gl.COLOR_ATTACHMENT0;
const textureType = gl.TEXTURE_2D;
const mipLevel = 0;  // must be 0 on WebGL1
gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, 
                        textureType, someTexture, mipLevel);

要再次渲染到画布上，请使用

gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.viewport(0, 0, widthOfTexture, heightOfTexture);

请参见https://webglfundamentals.org/webgl/lessons/webgl-render-to-texture.html

请注意，在WebGL1中，只有一种格式的纹理可以保证可以渲染。 internalFormat = gl.RGBA，格式= gl.RGBA，类型= gl.UNSIGNED_BYTE。在WebGL2中有一个表。参见reference guide

的第5页

否则，渲染到画布与渲染到纹理之间没有区别。渲染到画布上特定位置的方法与渲染到纹理上特定位置的方法完全相同。您可以设置几何图形，属性，制服，并根据要绘制的物体的大小进行所需的数学运算，然后进行绘制。如果您不知道该怎么做，this article shows code that renders a rectangle。 This article shows how to render something at any position。 This article shows how to use matrices to be more flexible。

渲染源纹理与在画布上渲染一些带纹理的三角形/几何/等没有什么不同。您在着色器中声明一个统一采样器，将纹理绑定到纹理单元并进行绘制。 This article shows how to use textures。

This article combines all of those lessons to draw a textured quad anywhere using any portion of a texture。

如何在webGL中的特定位置将一个纹理写入另一个纹理？

1 个答案: