const depthTextures = gl => {
  const depthTexture = gl.createTexture();
  const depthTextureSize = 512;
  gl.bindTexture(gl.TEXTURE_2D, depthTexture);
  gl.texImage2D(gl.TEXTURE_2D, // target
  0, // mip level
  gl.DEPTH_COMPONENT, // internal format
  depthTextureSize, // width
  depthTextureSize, // height
  0, // border
  gl.DEPTH_COMPONENT, // format
  gl.UNSIGNED_INT, // type
  null); // data

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  const depthFramebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, depthFramebuffer);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, // target
  gl.DEPTH_ATTACHMENT, // attachment point
  gl.TEXTURE_2D, // texture target
  depthTexture, // texture
  0); // mip level
  // create a color texture of the same size as the depth texture
  // see article why this is needed_

  const unusedTexture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, unusedTexture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, depthTextureSize, depthTextureSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); // attach it to the framebuffer

  gl.framebufferTexture2D(gl.FRAMEBUFFER, // target
  gl.COLOR_ATTACHMENT0, // attachment point
  gl.TEXTURE_2D, // texture target
  unusedTexture, // texture
  0); // mip level

  return [depthFramebuffer, unusedTexture];
};

我发现

注意:此扩展仅适用于WebGL1上下文.在WebGL2中, 此扩展的功能在WebGL2上下文中可用 默认情况下.WebGL2中的常量是gl.UNSIGNED_INT_24_8.

我将DEPTH_COMPONENT更改为RGBA,但仍然没有附加的帧缓冲区...

在其他组合中,我得到:

gl.texImage2D(
    gl.TEXTURE_2D,      // target
    0,                  // mip level
    gl.RGBA, // internal format
    depthTextureSize,   // width
    depthTextureSize,   // height
    0,                  // border
    gl.RGBA, // format
    gl.UNSIGNED_INT_24_8,    // type
    null);              // data
 GL_INVALID_OPERATION: Invalid combination of format, type and internalFormat.

 GL_INVALID_OPERATION: Only array uniforms may have count > 1.

有什么建议吗?

这是源码,我想在我自己已经存在的GLARIX项目中实现…

推荐答案

深度纹理的内部格式不能是RGBA,它必须是大小内部格式之一,例如(GL_DEPTH_COMPONENT24,GL_DEPTH_COMPONENT32F).如果源格式为GL_DEPTH_COMPONENT,则源类型必须是FLOAT或无符号整数类型之一.内部格式必须是格式和类型的有效组合之一(请参阅OpenGL ES 3.0 glTexImage2D).因此,AN gl.DEPTH_ATTACHMENT的有效纹理为:

gl.texImage2D(
    gl.TEXTURE_2D, 0, 
    gl.GL_DEPTH_COMPONENT24, 
    depthTextureSize, depthTextureSize, 0,
    gl.GL_DEPTH_COMPONENT, gl.GL_UNSIGNED_INT,
    null);
gl.texImage2D(
    gl.TEXTURE_2D, 0, 
    gl.GL_DEPTH_COMPONENT32F, 
    depthTextureSize, depthTextureSize, 0,
    gl.GL_DEPTH_COMPONENT, gl.GL_FLOAT,
    null);

或者,也可以使用组合的深度和模具纹理(在本例中是gl.DEPTH_STENCIL_ATTACHMENT而不是gl.DEPTH_ATTACHMENT),例如:

gl.texImage2D(
    gl.TEXTURE_2D, 0, 
    gl.GL_DEPTH24_STENCIL8, 
    depthTextureSize, depthTextureSize, 0,
    gl.GL_DEPTH_STENCIL, gl.GL_UNSIGNED_INT_24_8,
    null);

Javascript相关问答推荐

防止用户在selectizeInput中取消 Select 选项

JQuery. show()工作,但. hide()不工作

如何使覆盖div与可水平滚动的父div相关?

在服务器上放置了Create Reaction App Build之后的空白页面

如何使onPaste事件与可拖动的HTML元素一起工作?

我怎么在JS里连续加2个骰子的和呢?

我可以使用空手道用户界面来获取网页的当前滚动位置吗?

在Reaction中的handleSubmit按钮内,useSelector值仍然为空

使用Nuxt Apollo在Piniastore 中获取产品细节

如何在.NET Core中将chtml文件链接到Java脚本文件?

如何在JAVASCRIPT中临时删除eventListener?

AddEventListner,按键事件不工作

在Odoo中如何以编程方式在POS中添加产品

无法重定向到Next.js中的动态URL

构建器模式与参数对象输入

如果NetSuite中为空,则限制筛选

未捕获的不变违规:即使在使用DndProvider之后也应使用拖放上下文

连续添加promise 时,如何在所有promise 都已结算时解除加载覆盖

Refine.dev从不同的表取多条记录

元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但GET:Object.在Reaction项目中