Question OpenGL ES3.0 Shader Issue - Texture written by framebuffer.

Hey,

I'm having some problems playing my WebGL build.
I'm doing some outlines in URP using Renderer Fetures for creating a DepthNormals texture.
I mostly followed @alexanderameye tutorial but instead of applying it as a image effect I used it as material. It works perfectly on Windows and in the Editor, but gives me some problems in WebGL (OpenGL ES 3.0).

The working executable looks like this:

I'm pretty sure the problem is associated with the Outline file. I use it in a custom function in a shader graph. Bellow I share the console log from the browser.
I can understand the output and the problem is somehow related with multiple textures manipulating eachother in the same render pass. However, I'm not figuring out where the error occurs in the hlsl file.

If someone could help me out, it would be great!
Thanks in advance

Code (CSharp):

1. Web GL.framework.js:3353:11
2. EXT_color_buffer_float GL_EXT_color_buffer_float EXT_float_blend GL_EXT_float_blend EXT_texture_compression_bptc GL_EXT_texture_compression_bptc EXT_texture_compression_rgtc GL_EXT_texture_compression_rgtc EXT_texture_filter_anisotropic GL_EXT_texture_filter_anisotropic OES_texture_float_linear GL_OES_texture_float_linear OVR_multiview2 GL_OVR_multiview2 WEBGL_compressed_texture_s3tc GL_WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb GL_WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info GL_WEBGL_debug_renderer_info WEBGL_debug_shaders GL_WEBGL_debug_shaders WEBGL_lose_context GL_WEBGL_lose_context
3. Web GL.framework.js:3353:11
4. OPENGL LOG: Creating OpenGL ES 3.0 graphics device ; Context level  <OpenGL ES 3.0> ; Context handle 11071952
5. Web GL.framework.js:3353:11
6. UnloadTime: 0.000000 ms
7. Web GL.framework.js:3353:11
8. warning: 2 FS.syncfs operations in flight at once, probably just doing extra work Web GL.framework.js:5766:12
9. Input Manager initialize...
10. Web GL.framework.js:3353:11
11. WebGL warning: drawElementsInstanced: Texture level 0 would be read by TEXTURE_2D unit 0, but written by framebuffer attachment COLOR_ATTACHMENT0, which would be illegal feedback. 32
12. After reporting 32, no further warnings will be reported for this WebGL context.

 

It seems you have a render feedback loop, which isn't supported by WebGL (or GLES). A render feedback loop is when a render texture is used by an shader while it's rendering into the render texture. It's undefined behavior by all render api's, but some rendering APIs, like DirectX, let them through, usually treating the texture reads black while the texture is also being written to by the framebuffer. That's why it's working in the editor. Not always easy, but you'll need to find a way to break the render feedback loop by excluding the texture from being used while being rendered to.

 

@brendanduncan Thanks for your reply.

I already tried some modifications to the shader but nothing seems to work. 100% is due to my lack of expertise in this field.
I'm pretty sure it will be very easy to solve after identifying the source of the problem.
Still, it is rather difficult to pinpoint the source of the problem.
Do you know any to debug or trace the exact spot where the feedback loop is happening?

Thanks in advance!

 

@ratuspro Unfortunately we still don't have many good debugging tools for WebGL builds. There are some graphics debugging tools like spector.js, but that might be too low level and not tell you where the cycle is happening. You can try switching your editor to use GLES3, to see if the cycle failure happens in the editor without having to do the build. In the Player Settings for standalone, turn off Auto graphics api, add OpenGLES3 and move it to the top of the graphics api list. These render texture cycles are a pain. You can also submit a bug with the project as a repo, and we'll take a look at how it can be fixed and hopefully ways to improve the situation.