Hello all. I've been taking some wonderful tutorials on making water with OpenGL (I'm using WebGL2), but I'm a little confused about FBO's. I'm trying to get a depth texture attachment, but unfortunately getting the following warning:

"[.Offscreen-For-WebGL-0x7fcd65022600]GL ERROR :GL_INVALID_VALUE : glTexImage2D: invalid internal_format GL_FALSE"

This is what I got for gl.texImage2D:

gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT32, this.width, this.height, 0, gl.DEPTH_COMPONENT, gl.FLOAT, null);

I'm using gl.DEPTH_COMPONENT32 since that's what the tutorial is using. I'm trying to get that grayish looking image that represents the depth in my scene but not sure what format to use. There's definitely something I'm doing wrong :( 

Btw, if I comment out  "this.makeDepthTextureAttachment(gl);" I get no warnings. I've also never had trouble getting a color texture attachment, Depth  texture is what I have problem with. 

This is my FBO implementation, thank you very much in advanced:

    class FBO {
        constructor (width, height) {
            const gl = Core.getRenderer().gl;
            this._fbo = gl.createFramebuffer();

            this.bind(gl);

            this._width = width;
            this._height = height;

            this._depthTexture = false;
            this._colorTexture = false;

            this.makeDepthTextureAttachment(gl);
            this.makeColorTextureAttachment(gl);

            this.unbind(gl);
        }
        get fbo () { return this._fbo; }
        get depthTexture () { return this._depthTexture; }
        get colorTexture () { return this._colorTexture; }
        get width () { return this._width; }
        get height () { return this._height; }

        makeDepthTextureAttachment (gl) {
            this._depthTexture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, this.depthTexture);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT32, this.width, this.height, 0, gl.DEPTH_COMPONENT, gl.FLOAT, null);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.depthTexture, 0);
        }

        makeColorTextureAttachment (gl) {
            this._colorTexture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, this._colorTexture);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, this.width, this.height, 0, gl.RGB, gl.UNSIGNED_BYTE, null);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._colorTexture, 0);
        }

        bindColorTexture () {
            const gl = Core.getRenderer().gl;
            gl.bindTexture(gl.TEXTURE_2D, this._colorTexture);
        }

        bind (gl) {
            gl.bindFramebuffer(gl.FRAMEBUFFER, this.fbo);
        }
        unbind(gl) {
            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
        }
    }  

I've not used WebGL and I don't know how the standard works regarding features whether they are required to be supported or whether some features are optional.  Are you sure your system (GPU / drivers) supports this feature? Is there some way of querying the caps?

Or is the tutorial for OpenGL or WebGL? There may be differences.

Is it anything related to this?

https://github.com/mrdoob/three.js/issues/10672

2 minutes ago, lawnjelly said:

I've not used WebGL and I don't know how the standard works regarding features whether they are required to be supported or whether some features are optional.  Are you sure your system (GPU / drivers) supports this feature? Is there some way of querying the caps?

Or is the tutorial for OpenGL or WebGL? There may be differences.

Is it anything related to this?

https://github.com/mrdoob/three.js/issues/10672

Hey there lawn thanks for replying, I'm pretty sure my GPU supports this feature. The tutorial is based on OpenGL, if you're interested, you can find the tutorial here, it's very nice. As far as I know (I could be wrong), I'd have to get depth texture via an extension in webGL1, but I'm using webGL2.

Excuse my ignorance, but what do you mean when you say querying the caps? The capabilities of my video card? Thanks again!

Sorry I didn't notice this was in beginners! It is pretty advanced for a beginner.

Yup caps is short for capabilities, graphics APIs tend to have a means of querying what features are available if some of them are optional. Even if your GPU has a feature, it will only be available if the particular driver you are using also supports it, so it can be a good idea to either query caps yourself or use a 3rd party app to do this to find out what is supported. Whether this is an issue on WebGL I have no idea though, they may have a required feature set.

The github article suggests that the means of talking to the depth texture is different in WebGL1 and 2, the constants used are different between WebGL1 and WebGL2, they also link to this:

https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_depth_texture

I don't know if this is what is causing your problem, these are just wild guesses. I have never used WebGL, only OpenGL, but suspect that following a tutorial verbatim for OpenGL may not work because there may be differences in the API. Maybe someone who knows WebGL will be able to help further.

If you want to try this guys tutorials you may have more luck using the same API he is using, or else you may have to do some modification to get it working in WebGL (if you can at all).

No problem, it's okay  Maybe I should start asking my questions outside of the beginners section now. I wasn't sure what was considered beginners.

I actually found this site which tells me all the features my GPU supports, but I found your link more useful. I'll try using your link as a guide and see if I figure it out, or hopefully a WebGL user can pitch in as well. 

Thanks again for your help Lawn, hopefully I can figure it out, or somebody can also contribute with further suggestions. If I figure it out, I'll definitely share my solution here.