Javascript 如何在webgl2中使用深度纹理

当您只需要帧的颜色部分时，可以将深度部分存储在渲染缓冲区中
这在webgl1和webgl2上都适用

    const gl = canvas.getContext('webgl');
    const depthTextureExtension = gl.getExtension('WEBGL_depth_texture');
    if (!depthTextureExtension) {
        alert('Depth textures not supported');
    }

当您还需要使用深度部分时，您不能使用渲染缓冲区，您需要将其存储在纹理中 在webgl1中，您需要获得一个扩展来支持它。
这也适用于我在webgl1中使用

    const gl = canvas.getContext('webgl');
    const depthTextureExtension = gl.getExtension('WEBGL_depth_texture');
    if (!depthTextureExtension) {
        alert('Depth textures not supported');
    }

默认情况下，此功能应在webgl2中可用
但当我用以下代码替换上面的代码时：

    const gl = canvas.getContext('webgl2');

我的代码无法呈现，我找不到任何解释

    this.texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, this.texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);


    this.depth = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, this.depth);
    checkGLErrors(gl); // OK
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, width, height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
    checkGLErrors(gl); // for webgl2: 1281 INVALID_VALUE
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);


    this.framebuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.depth, 0);

---

在WebGL2

DEPTH\u组件

不是有效的内部格式。使用

DEPTH\u组件16

，

DEPTH\u组件24

或

DEPTH\u组件32f

范例

---

在WebGL2

DEPTH\u组件

不是有效的内部格式。使用

DEPTH\u组件16

，

DEPTH\u组件24

或

DEPTH\u组件32f

范例

---

你可能会发现帮助你可能会发现帮助我很惊讶看到这一点，因为到目前为止我看到的所有文档都没有提到webgl2不支持与webgl1Btw相同的所有选项。我实际上关注了你的很多工作，但我一定跳过了你的一些webgl2帖子，所以我花了时间浏览了一下，我很惊讶地看到了这一点，因为到目前为止我看到的所有文档都没有提到webgl2不支持与webgl1Btw相同的所有选项。我实际上关注了你的很多工作，但我一定跳过了你的一些webgl2帖子，所以我花了时间浏览了一下