如何在 webGL 的特定位置将一个纹理写入另一个纹理? [英] How do I write one texture onto another at a specific location in webGL?

问题描述

我想做一些看起来很简单的事情，但我是 webgl 的新手，很难找到简单的教程来做这件事.假设我有两个 webgl 纹理准备好与我的 webgl2 渲染上下文一起使用.我只想在坐标 x, y 处将 texture1 写到 texture2 上.设置它的准系统方法是什么?

I want to do something that appears pretty simple, but Im a newbie with webgl and having a hard time finding a tutorial to simply do this. Lets say I have two webgl textures ready to go with my webgl2 rendering context. I just want to write texture1 onto texture2 at coordinates x, y. What's the barebones way of setting this up?

推荐答案

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

Rendering from one texture to another requires attaching the texture you want to write to (the destination texture) to a framebuffer

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);

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

To render to the canvas again use

gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

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

请注意，在 WebGL1 中，只有 1 种格式的纹理可以保证可以渲染.内部格式 = gl.RGBA，格式 = gl.RGBA，类型 = gl.UNSIGNED_BYTE.在 WebGL2 中有一个表格.请参阅参考指南

Note that in WebGL1 only 1 format of textures are guaranteed to be ok to render to. internalFormat = gl.RGBA, format = gl.RGBA, type = gl.UNSIGNED_BYTE. In WebGL2 there's a table. See page 5 of the reference guide

否则，渲染到画布与渲染到纹理之间没有区别.将某些内容渲染到画布上特定位置的方式与渲染到纹理上特定位置的方式完全相同.您可以设置几何图形、属性、制服，根据要绘制的对象的大小进行所需的任何数学运算，然后进行绘制.如果你不知道怎么做这篇文章展示了渲染矩形的代码.本文展示了如何在任意位置渲染内容.本文展示了如何使用矩阵更灵活.

Otherwise there is no difference between rendering to the canvas vs rendering to a texture. The same way you'd render something to a specific location on the canvas is the exact same way you'd render to a specific location on a texture. You setup geometry, attributes, uniforms, do any math required based on the size of the thing you are drawing to, and draw. If you don't know how to do that 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.

渲染源纹理与将一些带纹理的三角形/几何体/等渲染到画布上没有什么不同.您在着色器中声明一个统一采样器，将纹理绑定到纹理单元并绘制.这篇文章展示了如何使用纹理.

To render the source texture is no different than when you render some textured triangles/geometry/etc to the canvas. You declare a uniform sampler in your shader, bind a texture to a texture unit and and draw. This article shows how to use textures.

本文结合所有这些课程，使用任何纹理的一部分.

这篇关于如何在 webGL 的特定位置将一个纹理写入另一个纹理?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！