Cellular automaton shader not working in web

Question

In the last two days I have been coding a shader to compute a cellular automaton (well, actually, it is a partial differential equation, but for practical reasons there's no difference). Everything works perfect, but when I try to export it for web, it does not work at all.

This is how my Scene Tree looks like

 Node2D
-- Sprite
-- Viewport 
----ColorRect
----Camera2D

The setup is the following:

1. The sprite's texture is the Viewport's one. You can consider the sprite as the "renderer" for the viewport.
2. The ColorRect is configured to have a simple black color, and it has a Material with a shader, which has the main logic to compute the automaton.
3. The Shader has a uniform sampler2D texture as an argument, which is set to the Viewport's texture. It uses this as an input to compute the next state of the system.
4. For this reason, Viewport's clear mode is configured to be "Only next frame".

Basically, this creates a feedback loop between the Viewport's output and the shader, effectively simulating my automata step by step. As I said, it works pretty well locally, but on web, only a dark rectangle appears. If you have any hint on what could be wrong or what is missing please let me know. I'll happy to share also the whole project if needed, or the exported HTML5 if you want to check anything.

The project is running in GLES2, with Godot 3.3.4. My OS is Ubuntu 16, in case it matters.

Experienced

Answer 1

It's done, effectively the mail went to spam and I didn't see it. Now everything should be OK, poke me if there's anything else to be done. Thank you @Megalomaniak !

Experienced

Answer 2

I had problems with textures that are stored as VRAM coming up black on HTML5. This is easy to fix in the import settings for image files (by setting the compression to lossless or lossy), but I'm not sure how to do that for a viewport texture.

Kuhns

Answer 3

Does the shader work with GLES 3? My hunch is that when exporting with GLES2 and WebGL 1.0 are causing the issue. I would suggest making a backup of the project and then changing it to GLES3 and exporting for the web to see if it works under GLES3 with WebGL 2.0. It wouldn't be a long-term solution, but it might help narrow down what could be causing the issue.

Elixir

Answer 4

Also, if you want to share the project files I can test on my computers.

Kuhns

Answer 5

Make sure to test it in different browsers, and ideally on Windows as well. Chromium-based browsers on NVIDIA graphics cards have known rendering issues when using WebGL 2.0: https://github.com/godotengine/godot/issues/45532

Blaze

Answer 6

Thank you for all your suggestions, sorry for the late answer. I did try to change the project to GLES3 as suggested by @TwistedTwigleg, and to check VRAM export options, but no luck.

However, changing slightly the keywords I got to this issue which seems to be the solution (I have yet to try it) https://github.com/godotengine/godot-proposals/issues/2177

Apparently, WebGL has problems with the kind of feedback loop I am implementing, which is illegal. According to the issue I should add a second viewport and transfer information between them. I will tell you how it goes. If it works correctly I will upload a clean version of the project with a small tutorial on how to do this kind of stuff with Godot, because seems that it is not trivial and there's not a lot of information about this.

EDIT: effectively this solved the problem and now it runs smoothly on web. The new setup is:

-- Sprite
-- ViewportA
---- ColorRect (with shader)
-- ViewportB
----- Sprite

Where ViewportB/Sprite texture is set to ViewportA's texture, and the "last frame" shader parameter is ViewportB's texture. The top sprite acts just as a renderer, taking ViewportA texture too. Note that ViewportA clear mode is set as "next frame", as before.

I will upload code to GitHub + tutorial after cleaning and polishing the project a bit. Thank you all for your help!!

Experienced