Texture is black on HTML5 export.

[TIBI4]

Godot version:

Godot 3.2.3 (released September 17, 2020)

OS/device including version:

NVIDIA GTX960M, running a GLES2 project.

Issue description:

Weird problems loading some textures in Godot HTML5 export.
The problem isn't at the image as I far as I swap the EditCharacterMouth.png (black) with another EditCharacterBody.png (or any other), the problem persist with the new image with the name EditCharacterMouth.png.

Godot Editor:

HTML5 Export:

When I load the specific scene with that problem, this is the message I'm getting: "WebGL: INVALID_ENUM: bindTexture: invalid target"

What I have tried:

• Reimporting with different import settings.
• Deleting the image and reimporting it manually (deleting all remanent .IMPORT files).
• Reopening Godot.
• Editing the image in GIMP and exporting it with different settings. (As I said, the problem isn't in the image, as I far I swap its name with another's one, the other image stops working too).
• Redoing the nodes again with other names.
  I know I can create another image and ignore this. But AFAIK I've done everything as always and this should not happen.
  Any other way to troubleshoot it?

Steps to reproduce:
Sorry, but I don't know how to reproduce this, because when I was making the "minimal reproduction project" with the same nodes, worked perfectly. I uploaded one anyways.

Minimal reproduction project:

Project: FF ERROR PROJECT.zip
Export to HTML5: HTML.zip
The project that should be with errors: TheZip.zip
The project I'm actually getting errors: You can test it in the Itch.io I uploaded, as you can't reach that part of the project without login in. (Email: noob; Password: 1234). Login > Click bottom right "Your room" button > Click bottom t-shirt button.

[Faless]

It's really hard without a minimal reproduction project.
Plus, I'm not sure I understand.

You say:

The problem isn't at the image as I far as I swap the EditCharacterMouth.png (black) with another EditCharacterBody.png (or any other), the problem persist with the new image with the name EditCharacterMouth.png.

But then:

I know I can create another image and ignore this. But AFAIK I've done everything as always and this should not happen.

So, is the problem the image or not? Sorry, but I'm confused.

[akien-mga]

The problem is likely with the Import options for that specific file (EditCharacterMouth.png.import), if the same PNG file works under a different name.

[TIBI4]

HTLM5 export: As soon as I copy all the EditCharacterXXX.png images into COPIEDSPRITES/ using Windows Explorer (not Godot Editor) (The one in the left wasn't changed at all.):

Godot Editor: The one in the right is a duplicate of the left but with the resources taken from COPIEDSPRITES/.

As you can see, now the black image is not EditCharacterMouth.png anymore, and now it's COPIEDSPRITES/EditCharacterSkin.png.

[akien-mga]

What browser and browser version are you testing with?
Do you get the same issue in another browser?

[Faless]

@TIBI4 then as @akien-mga suggest, it's probably something in the import file.
What do you see in the import tab when you double click on the image?

[TIBI4]

I'm on Google Chrome. I think I'm in the latest version. In fact, I tested this in another computer with different specs.

[TIBI4]

All the images in there have the same import settings you can see in this image. In fact, I tested using Lossy mode, but that didn't help.

@Faless

[Faless]

And I assume you tried reimporting... Well, I don't know, it's really hard without a reproduction project.
I can see the error in the exported version, but I can't really see what's going on in the source project :(

[Faless]

Can you upload the two files:
EditorCharacterSkin.png and EditorCharacterSkin.png.import?

[akien-mga]

Note the error in the original report:

When I load the specific scene with that problem, this is the message I'm getting: "WebGL: INVALID_ENUM: bindTexture: invalid target"

The fact that the error moved from one texture to another after adding more textures hints that this is likely not due to import flags as we thought, but an actual issue in the rendering backend or the WebGL implementation of the used browser.

Yet I can reproduce it too with the itch project on Firefox Nightly, so it goes back to likely being a project-specific bug. Confusing :)

Errors from the Nightly console:

WebGL warning: bindTexture: Bad `texTarget`: 0x0000 foodfriends.js:8:267605
WebGL warning: texParameter: Bad `target`: NONE 2 foodfriends.js:8:282853
WebGL warning: drawElementsInstanced: TEXTURE_2D at unit 191 is incomplete: Non-power-of-two textures must have a wrap mode of CLAMP_TO_EDGE. 12 foodfriends.js:8:198357
WebGL: No further warnings will be reported for this WebGL context. (already reported 32 warnings) foodfriends.js:8:198357

CC @clayjohn @lawnjelly

[TIBI4]

I think that this scene .tscn is corrupted. The thing is I can do everything again and probably work (I'm not sure), but there are too many nodes. Is there a easier way to "clean" a .tscn without doing everything manually? (Maybe using Merge From Scene would do the trick? I'll try).

Edit: This didn't help. The problem persists. - I will try to make a reproducible project ASAP so you can debug it.

[lawnjelly]

Not a lot to go on. You are getting a lot of warnings about non-power of 2 textures. It could be failing to create mipmaps which can result in black texture. They may need to be imported as not wrapping as well.

You could try that as a diagnostic, just replace all your textures with e.g. red squares, 8x8, see if they come out red instead of a black one.

This could actually possibly be a bug with the wrap mode not being set during texture setup in godot (and using a left over wrapping mode, hence the random nature), and some non pot hardware being sensitive to this, I don't know much about the texture creation code. These are just wild guesses though.

It says in firefox

WebGL warning: bindTexture: Bad `texTarget`: 0x0000
WebGL warning: texParameter: Bad `target`: NONE

with glBindTexture the target parameter is usually GL_TEXTURE_1D, GL_TEXTURE_2D, GL_TEXTURE_3D, GL_TEXTURE_1D_ARRAY, GL_TEXTURE_2D_ARRAY, GL_TEXTURE_RECTANGLE, GL_TEXTURE_CUBE_MAP, GL_TEXTURE_CUBE_MAP_ARRAY, GL_TEXTURE_BUFFER, GL_TEXTURE_2D_MULTISAMPLE or GL_TEXTURE_2D_MULTISAMPLE_ARRAY ...
but I'm not clear if it means the target or the texture ID.

But that could be happening at creation or at runtime.

Most likely to be texture import settings problem but I don't seem to see any minimum reproduction project, the one you sent only seems to have 2 tscn and .import folder.

I can actually reproduce it here but I don't know offhand of whether it is possible to run graphics debugger on webgl.
Ah this program might help:
https://spector.babylonjs.com/#thirdpartydemossection

[lawnjelly]

Ah I was going to debug it with the graphics debugger but you changed it on the website. Now I can't see any black boxes, but the red boxes.

So it seems to be working, I can't get it to have problems, so maybe it was the textures were non power of 2, or the texture import options were incorrect for non power of 2.

On the plus side that webgl debugger looks cool! 😁

[TIBI4]

@lawnjelly Well, if you try it again, as soon as you open the scene we've been talking about, you will see the exact same error in the browser console "WebGL: INVALID_ENUM: bindTexture: invalid target" as you can see here:

So this may keep happening in the 8x8 red textures.

I will try to set this. (sorry for not testing it earlier):

It could be failing to create mipmaps which can result in black texture. They may need to be imported as not wrapping as well.

PS: What do you mean to import them as not wrapping? @lawnjelly

[TIBI4]

It could be failing to create mipmaps which can result in black texture. They may need to be imported as not wrapping as well.

I just noticed I had no mipmaps setting on, so this should be a problem (maybe).

[lawnjelly]

PS: What do you mean to import them as not wrapping? @lawnjelly

Ah sorry it is not an import option, the wrap is set during use. Wrapping is texture tiling. There may be somewhere where you are using a non pot texture where you are trying to use wrapping.

But this is just ideas. Really to effectively find this we will probably need a minimum reproduction project.

The graphics debugger kind of works but it doesn't show any texture details so not a lot of help in this case.

[TIBI4]

Sorry for doing it so late @lawnjelly

Here is the minimal reproduction project:
Edit: test.zip FF ERROR PROJECT.zip

PS: Thank you guys for your time. I know you have many many things to do here for Godot.

[Faless]

Interestingly, the problem disappears if the Mesh node is removed.

[TIBI4]

Interestingly, the problem disappears if the Mesh node is removed.

The problem dissappears if "3D/SkinReal/Armature/Skeleton/Mesh" surface 1 material is cleared. 😁

With & without material (respectively):

[TIBI4]

And I fixed it. This may have been a corruption.

What I did to solve this was clearing "3D/SkinReal/Armature/Skeleton/Mesh" surface 1 material's albedo texture, and setting it again.

The good thing of this, is that this may not be in the HTML5 end, but in the editor. This will probably help fixing corruption problems.

It was certainly helpful to have shared this issue on GitHub. Thanks!

[Faless]

It seems the albedo texture was set to a StreamTexture pointing directly to an image in the .import/ folder.
I wonder how did that happen. Did you manually set that? Did use git (or any other scm) for the project and had merge issues?

--- "Clothes Edit.tscn"	2020-11-27 12:37:43.652193060 +0100
+++ "FF ERROR PROJECT/Game Scenes/Clothes Edit.tscn"	2020-11-27 12:38:06.767929394 +0100
@@ -1,6 +1,7 @@
 [gd_scene load_steps=25 format=2]
 
 [ext_resource path="res://Game Scenes/Clothes Edit.gd" type="Script" id=1]
+[ext_resource path="res://Skins/images/Skin0.png" type="Texture" id=2]
 [ext_resource path="res://UI/Sprites/DoneButton.png" type="Texture" id=3]
 [ext_resource path="res://Scripts/ClothesRowSelector.gd" type="Script" id=4]
 [ext_resource path="res://Fonts/Money Font.tres" type="DynamicFont" id=5]
@@ -18,14 +19,10 @@
 [ext_resource path="res://UI/Sprites/COPIEDSPRITES/EditCharacterHead.png" type="Texture" id=19]
 [ext_resource path="res://UI/Sprites/COPIEDSPRITES/EditCharacterSkin.png" type="Texture" id=20]
 
-[sub_resource type="StreamTexture" id=1]
-flags = 7
-load_path = "res://.import/Skin0.png-757f2588c64a9f98e9e2b910b0b26ad5.s3tc.stex"
-
 [sub_resource type="SpatialMaterial" id=2]
 resource_name = "Skin0"
 flags_unshaded = true
-albedo_texture = SubResource( 1 )
+albedo_texture = ExtResource( 2 )
 
 [sub_resource type="ArrayMesh" id=3]
 surfaces/0 = {

[TIBI4]

I have not manually set that or anything in a .tscn file before, and I used the GitHub client, but never touched the scenes / had merge issues. But in some point I changed the material or the texture directory (I dont remember if it was with Windows Explorer or Godot Editor) of that mesh by hand or something I can not remember at the moment as it was many months ago.

PS: Looking at my Git commits, I found that at the very first commit that was already set:

[sub_resource type="StreamTexture" id=8]
flags = 7
load_path = "res://.import/Skin0.png-757f2588c64a9f98e9e2b910b0b26ad5.s3tc.stex"

[Clauveira]

Hello. I was having the same problem. (A random texture that didn't load in the HTML and was black.)
In my case, I had a shader in my scene.
The problem stopped when I removed the shader node from the scene.

[Calinou]

Hello. I was having the same problem. (A random texture that didn't load in the HTML and was black.) In my case, I had a shader in my scene. The problem stopped when I removed the shader node from the scene.

This is likely because you used functions or syntax in the shader that are invalid in HTML5, as WebGL is stricter than standard OpenGL ES (let alone desktop OpenGL).

Can you post the shader code here?

[Clauveira]

Hello. I was having the same problem. (A random texture that didn't load in the HTML and was black.) In my case, I had a shader in my scene. The problem stopped when I removed the shader node from the scene.

This is likely because you used functions or syntax in the shader that are invalid in HTML5, as WebGL is stricter than standard OpenGL ES (let alone desktop OpenGL).

Can you post the shader code here?

In this case, I used that one: https://godotshaders.com/shader/input-ouput/

The shader do not worked on HTML5, but note that's not the problem. The problem whas that the existence of the shader at the scene tree causes an other random texture (TextureRect with a PNG) to be black.

[SaffronStreams]

I had a similar problem, but not sure if if's connected to this.

(Windows 10, Godot 3.5.1 stable, noticeable in Windows and Linux (SteamDeck) export, not noticeable in editor debug run)

I had four instances of these errors. It's four instances where a PNG was used either as a texture, either for particles2D (woodchunk) or with Atlastexture for a sprite (cardpickup) or with the fill texture for a line2D (elevatorChain).

Important is also that all of these were a problem only when their nodes were copied, either in the same scene like with the chain or in another scene through "merge from scene". So possibly during duplication these get messed up in a certain way?

ERROR: Unable to open file: res://.import/ElevatorChain.png-5ee32fdf2d82c7df35b27585b82ea5c3.stex. at: (scene/resources/texture.cpp:470) ERROR: Unable to open file: res://.import/WoodChunk.png-7e3e57be67fea2a9010e22c628f17032.stex. at: (scene/resources/texture.cpp:470) ERROR: Unable to open file: res://.import/CardPickup.png-3250619fac7128a41e3a79761f4d9df7.stex. at: (scene/resources/texture.cpp:470)

Also important: I was able to fix this by going to each scene and each time dragging the png anew into the respective texture dropdownboxes. (No more black images in the scene and no more error messages)