在 webgl 中渲染到纹理

Question

我正在尝试在纹理上渲染我的场景（立方体）。然后我想用这个纹理渲染同一个立方体。 （见最后的编辑） 我是 webgl 和 javascript 的新手。我用this webpage 作为开始。我还阅读并使用了this。

纹理似乎创建正确（没有错误或警告），但 the result 不是我所期望的。

第一张图片是具有“真实”纹理的立方体。第二张图片是使用创建的纹理渲染的立方体。 （两幅图像均未出现错误或警告）

由于某种原因，我无法在没有收到警告的情况下调用 gl.viewport（不显示任何内容）：

  RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'

我的问题可能与此有关，但我不知道如何解决。

代码的重要部分：

function drawScene() { 
  gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
  drawOnCube();
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  [...]
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, rttTexture);    //rttTexture is the created texure
  gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
  [...]
}

rq：除了前 3 行和使用的纹理外，绘制场景与 drawOnCube 相同。

function drawOnCube(){

  //gl.viewport(0, 0, rttFramebuffer.width, rttFramebuffer.height);  //
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  perspectiveMatrix = makePerspective(45, rttFramebuffer.width/rttFramebuffer.height, 0.1, 300.0);
  loadIdentity();
  mvTranslate([-0.0, 0.0, -6.0]);
  mvPushMatrix();
  mvRotate(cubeRotation, [1, 0, 1]);

  // Draw the cube by binding the array buffer to the cube's vertices
  // array, setting attributes, and pushing it to GL.

  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
  gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);

  // Specify the texture to map onto the faces.

  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
  gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);

  // Draw the cube.

  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
  setMatrixUniforms();
  gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
}

创建frameBuffer的函数，renderBuffer：

function initTextureFramebuffer(){
  rttFramebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
  rttFramebuffer.width = 256;
  rttFramebuffer.height = 256;

  rttTexture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, rttTexture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, rttFramebuffer.width, rttFramebuffer.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  gl.generateMipmap(gl.TEXTURE_2D);

  var renderbuffer = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
  gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, rttFramebuffer.width, rttFramebuffer.height);

  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, rttTexture, 0);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer);

  gl.bindTexture(gl.TEXTURE_2D, null);
  gl.bindRenderbuffer(gl.RENDERBUFFER, null);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}

编辑：我用硬编码值替换了 gl.viewportWidth 和 gl.viewportHeight。我仍然收到警告，但显示了多维数据集。纹理似乎一次只在一个面上使用，并且在大多数情况下（当立方体旋转时）是“不完整的”。 Pictures. 我检查了我的 TextCoordBuffer，它看起来没问题。 我试图只渲染立方体的一个面，但我仍然遇到了问题。

Answer 1

我发现了几个可能的问题。

1) cubeTexture 定义在哪里？我只看到rttTexture

2) rttTexture 需要 mip 贴图，因为将 gl.TEXTURE_MIN_FILTER 设置为 gl. LINEAR_MIPMAP_NEAREST 但在渲染到它之后，它只会在第一个 mip（级别 0）中包含立方体。您需要通过将gl.TEXTURE_MIN_FILTER 设置为gl.LINEAR 或gl.NEAREST 来关闭mips，或者您需要在渲染到rttTexture 后调用gl.generateMipmap。

3) 您需要设置视口以匹配渲染缓冲区的大小。您已将该行注释掉。

其他小问题。

4) 将属性分配给 WebGL 对象（例如 rttFramebuffer.width）如果您决定处理 WebGLContextLost 事件，则必须修复该代码，因为当上下文丢失时，gl.create 函数将返回 null并且您尝试向null 添加属性的代码将崩溃

5) 没有gl.viewportWidth 和gl.viewportHeight 这样的属性。我敢肯定它们是在某个地方设置的，但是当真实存在的时候，为什么要制造假财产呢？使用gl.drawingBufferWidth 和gl.drawinBufferHeight 或gl.canvas.width 和gl.canvas.height。那些是现场的

6) 查找制服和属性位置很慢，因此您应该只查找一次。就像现在一样，他们正在逐帧查找

 gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);