Error when exporting to HTML5 (Black Screen)

Lcmb · December 13, 2024, 9:59pm

Hi, everybody
My problem is the persistent black screen when I create the executable for HTML5. This even happens with just one cube on the screen!
I’ve read several solutions and tested them all.

I cleared the blender and browser cache, I clicked the “Clean” button before clicking “Publish”, use “Forward Clustered” instead “Deferred Clustered”, I changed the file name, I put the blender file in a folder that doesn’t require permission … nothing worked, not even with a simple cube on the screen.
After clicking Publish, the files are created without only one Msg error in the console

I go to the created folder and then click on the “index.html” file, inside the html5 folder and what happens is a black screen.
I’ve tried changing several settings and I can’t resolve it.
Is there anything else to be done?
I don’t wanna lose all the work I had on the game I’ve been working on for several days.
Thanks for any ideas! I don’t want to give up…

lapiznegro · December 13, 2024, 10:51pm

Hi theres a blank space in your project folder. Try removing that. Armory does not like spaces in folders.

Lcmb · December 14, 2024, 10:38pm

Hi Lapiznegro,
Good to talk to you again.
It’s not easy. I made the correction you said (removing the space in the file path). The behavior didn’t change. The black screen is still there.
I reinstalled Blender but the problem is the same… is there a screenshot I can post here that could help understand the problem?

Note: Just now I made a compilation for Windows (C) and for Krom and I was surprised that, now, it didn’t work and gave the following error screen on the console. This didn’t happen before…
I’m going crazy with all this… Only a cube … brrrr!!!

lapiznegro · December 14, 2024, 10:51pm

Do you have voxels setting on? They are not working in the current version.

Lcmb · December 15, 2024, 11:11pm

It was.
I turned it off and at least I can now compile the project for Windows C and Krom again.
However, the problem remains for HTML5.
Is there anything else that could cause this problem?

lapiznegro · December 15, 2024, 11:23pm

What problem? What does the browser console says?

Lcmb · December 15, 2024, 11:33pm

The most interesting thing is that it works perfectly when I run it within Blender in the same Browser.

This is the full console screen when I export to HTML5

Armory v2024.9 ($Id: 203a158103ac9dec93f61c54d49c53654a99dc82 $)
Blender: 3.6.18, Target: html5, GAPI: webgl
Using CPU for environment render (might be slow). If possible, configure GPU rendering in Blender preferences (System > Cycles Render Devices).
Saved: ‘C:\Users\User\Documents\LuisClaudio\Informatica\Jogos\Blindado_Game_Armory\build_Cuboteste\compiled\Assets\envmaps\env_World.jpg’
Time: 00:00.11 (Saving: 00:00.01)

CMFT info: Converting latlong image to cubemap.
CMFT info: Saving spherical harmonics coefficients to C:\Users\User\Documents\LuisClaudio\Informatica\Jogos\Blindado_Game_Armory\build_Cuboteste/compiled/Assets/envmaps/env_World_irradiance.c
CMFT info: Done.
[‘C:\Users\User\Downloads\ArmorySDK2409\armsdk/lib/armory_tools/cmft/cmft.exe’, ‘–input’, ‘C:\Users\User\Documents\LuisClaudio\Informatica\Jogos\Blindado_Game_Armory\build_Cuboteste/compiled/Assets/envmaps/env_World_radiance.jpg’, ‘–filter’, ‘radiance’, ‘–dstFaceSize’, ‘128.0’, ‘–srcFaceSize’, ‘128.0’, ‘–excludeBase’, ‘false’, ‘–glossScale’, ‘8’, ‘–glossBias’, ‘3’, ‘–lightingModel’, ‘blinnbrdf’, ‘–edgeFixup’, ‘none’, ‘–numCpuProcessingThreads’, ‘6’, ‘–useOpenCL’, ‘true’, ‘–clVendor’, ‘anyGpuVendor’, ‘–deviceType’, ‘gpu’, ‘–deviceIndex’, ‘0’, ‘–generateMipChain’, ‘true’, ‘–inputGammaNumerator’, ‘1.0’, ‘–inputGammaDenominator’, ‘1.0’, ‘–outputGammaNumerator’, ‘1.0’, ‘–outputGammaDenominator’, ‘1.0’, ‘–outputNum’, ‘1’, ‘–output0’, ‘C:\Users\User\Documents\LuisClaudio\Informatica\Jogos\Blindado_Game_Armory\build_Cuboteste/compiled/Assets/envmaps/env_World_radiance’, ‘–output0params’, ‘hdr,rgbe,latlong’]
CMFT info: Converting latlong image to cubemap.
CMFT info: Resizing source image from 256x256 to 128x128.
CMFT info: Running radiance filter for:
[srcFaceSize=128]
[lightingModel=blinnbrdf]
[excludeBase=false]
[mipCount=8]
[glossScale=8]
[glossBias=3]
[dstFaceSize=128]
CMFT info: Radiance → Starting filter…
CMFT info: Radiance → Utilizing 6 CPU processing threads and NVIDIA GeForce RTX 3060 Ti.
CMFT info: Radiance → ------------------------------------
CMFT info: Radiance → Device / Face / Time / Total
CMFT info: Radiance → ------------------------------------
CMFT info: Radiance → [CPU0] | 1 | 0.001s | 0.001s
CMFT info: Radiance → [CPU1] | 1 | 0.001s | 0.002s
CMFT info: Radiance → [CPU2] | 1 | 0.001s | 0.002s
CMFT info: Radiance → [CPU3] | 1 | 0.001s | 0.002s
CMFT info: Radiance → [CPU0] | 1 | 0.001s | 0.002s
CMFT info: Radiance → [CPU4] | 1 | 0.001s | 0.002s
CMFT info: Radiance → [CPU5] | 2 | 0.002s | 0.003s
CMFT info: Radiance → [CPU1] | 2 | 0.002s | 0.003s
CMFT info: Radiance → [CPU2] | 2 | 0.002s | 0.004s
CMFT info: Radiance → [CPU0] | 2 | 0.002s | 0.004s
CMFT info: Radiance → [CPU3] | 2 | 0.002s | 0.004s
CMFT info: Radiance → [CPU4] | 2 | 0.003s | 0.005s
CMFT info: Radiance → [CPU2] | 4 | 0.005s | 0.009s
CMFT info: Radiance → [CPU1] | 4 | 0.005s | 0.009s
CMFT info: Radiance → [CPU3] | 4 | 0.005s | 0.009s
CMFT info: Radiance → [CPU5] | 4 | 0.008s | 0.011s
CMFT info: Radiance → [CPU0] | 4 | 0.008s | 0.012s
CMFT info: Radiance → [CPU4] | 4 | 0.008s | 0.014s
CMFT info: Radiance → | 128 | 0.017s | 0.019s
CMFT info: Radiance → [CPU3] | 8 | 0.013s | 0.022s
CMFT info: Radiance → [CPU2] | 8 | 0.014s | 0.022s
CMFT info: Radiance → [CPU1] | 8 | 0.013s | 0.022s
CMFT info: Radiance → [CPU0] | 8 | 0.014s | 0.026s
CMFT info: Radiance → [CPU5] | 8 | 0.015s | 0.026s
CMFT info: Radiance → | 128 | 0.009s | 0.028s
CMFT info: Radiance → | 128 | 0.004s | 0.032s
CMFT info: Radiance → [CPU4] | 8 | 0.020s | 0.034s
CMFT info: Radiance → | 128 | 0.015s | 0.047s
CMFT info: Radiance → [CPU1] | 16 | 0.028s | 0.050s
CMFT info: Radiance → [CPU2] | 16 | 0.030s | 0.053s
CMFT info: Radiance → [CPU0] | 16 | 0.029s | 0.055s
CMFT info: Radiance → | 128 | 0.010s | 0.057s
CMFT info: Radiance → [CPU5] | 16 | 0.033s | 0.059s
CMFT info: Radiance → [CPU3] | 16 | 0.038s | 0.061s
CMFT info: Radiance → | 128 | 0.010s | 0.067s
CMFT info: Radiance → [CPU4] | 16 | 0.043s | 0.077s
CMFT info: Radiance → | 64 | 0.012s | 0.081s
CMFT info: Radiance → | 64 | 0.012s | 0.092s
CMFT info: Radiance → | 64 | 0.013s | 0.105s
CMFT info: Radiance → | 64 | 0.011s | 0.116s
CMFT info: Radiance → [CPU1] | 32 | 0.067s | 0.118s
CMFT info: Radiance → [CPU0] | 32 | 0.072s | 0.128s
CMFT info: Radiance → | 64 | 0.012s | 0.128s
CMFT info: Radiance → [CPU5] | 32 | 0.070s | 0.130s
CMFT info: Radiance → [CPU2] | 32 | 0.083s | 0.136s
CMFT info: Radiance → [CPU3] | 32 | 0.088s | 0.149s
CMFT info: Radiance → [CPU4] | 32 | 0.085s | 0.163s
CMFT info: Radiance → [CPU1] | 64 | 0.129s | 0.247s
CMFT info: Radiance → ------------------------------------
CMFT info: Radiance → Total faces processed on [CPU]: 37
CMFT info: Radiance → Total faces processed on : 11
CMFT info: Radiance → Total time: 0.247 seconds.
CMFT info: Saving C:\Users\User\Documents\LuisClaudio\Informatica\Jogos\Blindado_Game_Armory\build_Cuboteste/compiled/Assets/envmaps/env_World_radiance.hdr [HDR 512x256 RGBE LatLong 1-faces 8-mips].
CMFT info: Done.
#512x256
#256x128
#128x64
#64x32
#32x16
#16x8
#8x4
#4x2
#2x1
#1x1
Exporting Scene
Exporting mesh Cube
Scene exported in 0.008s
Exported modules: audio, physics, ui
Shader flags: _Irr, _Rad, _Deferred, _ShadowMap, _CSM, _SinglePoint, _Brdf, _SMAA, _SSAO
Compositor flags: _CToneFilmic
Khafile flags: arm_radiance, arm_deferred, arm_csm, arm_brdf, rp_hdr, rp_renderer=Deferred, rp_shadowmap, rp_shadowmap_cascade=1024, rp_shadowmap_cube=512, rp_background=World, rp_render_to_texture, rp_compositornodes, rp_antialiasing=SMAA, rp_supersampling=1, rp_ssgi=SSAO
C:\Users\User\Downloads\ArmorySDK2409\armsdk/nodejs/node.exe C:\Users\User\Downloads\ArmorySDK2409\armsdk/Kha/make html5 -g webgl --shaderversion 300 --parallelAssetConversion 4 --to build_Cuboteste
Info: Publishing project, check console for details.

Using Kha (fatal: n, fatal: not a git repository: C:/Users/User/Downloads/ArmorySDK2409/armsdk/Kha/…/.git/modules/Kha) from C:\Users\User\Downloads\ArmorySDK2409\armsdk\Kha
Creating Kha project.
Exporting asset 1 of 1 (ammo.js).
Exporting asset 1 of 15 (Scene.arm).
Exporting asset 2 of 15 (env_World.jpg).
Exporting asset 3 of 15 (env_World_irradiance.arm).
Exporting asset 4 of 15 (env_World_radiance.jpg).
Exporting asset 5 of 15 (env_World_radiance_0.jpg).
Exporting asset 6 of 15 (env_World_radiance_1.jpg).
Exporting asset 7 of 15 (env_World_radiance_2.jpg).
Exporting asset 8 of 15 (env_World_radiance_3.jpg).
Exporting asset 9 of 15 (env_World_radiance_4.jpg).
Exporting asset 10 of 15 (env_World_radiance_5.jpg).
Exporting asset 11 of 15 (env_World_radiance_6.jpg).
Exporting asset 12 of 15 (env_World_radiance_7.jpg).
Exporting asset 13 of 15 (env_World_radiance_8.jpg).
Exporting asset 14 of 15 (env_World_radiance_9.jpg).
Exporting asset 15 of 15 (mesh_Cube.arm).
Exporting asset 1 of 3 (Material_data.arm).
Exporting asset 2 of 3 (shader_datas.arm).
Exporting asset 3 of 3 (World_World_data.arm).
Exporting asset 1 of 1 (brdf.png).
Exporting asset 1 of 1 (smaa_area.png).
Exporting asset 1 of 1 (smaa_search.png).
Exporting asset 1 of 1 (font_default.ttf).
Compiling shader 1 of 20 (blur_edge_pass.frag.glsl).
Compiling shader 2 of 20 (compositor_pass.frag.glsl).
Compiling shader 3 of 20 (compositor_pass.vert.glsl).
Compiling shader 4 of 20 (Material_mesh.frag.glsl).
Compiling shader 5 of 20 (deferred_light.frag.glsl).
Compiling shader 6 of 20 (Material_mesh.vert.glsl).
Compiling shader 7 of 20 (Material_shadowmap.frag.glsl).
Compiling shader 8 of 20 (Material_shadowmap.vert.glsl).
Compiling shader 9 of 20 (pass.vert.glsl).
Compiling shader 10 of 20 (pass_copy.frag.glsl).
Compiling shader 11 of 20 (pass_viewray.vert.glsl).
Compiling shader 12 of 20 (smaa_blend_weight.frag.glsl).
Compiling shader 13 of 20 (smaa_blend_weight.vert.glsl).
Compiling shader 14 of 20 (smaa_edge_detect.frag.glsl).
Compiling shader 15 of 20 (smaa_edge_detect.vert.glsl).
Compiling shader 16 of 20 (smaa_neighborhood_blend.frag.glsl).
Compiling shader 17 of 20 (smaa_neighborhood_blend.vert.glsl).
Compiling shader 18 of 20 (ssao_pass.frag.glsl).
Compiling shader 19 of 20 (World_World.frag.glsl).
Compiling shader 20 of 20 (World_World.vert.glsl).
Compiling shader 1 of 8 (painter-colored.frag.glsl).
Compiling shader 2 of 8 (painter-colored.vert.glsl).
Compiling shader 3 of 8 (painter-image.frag.glsl).
Compiling shader 4 of 8 (painter-image.vert.glsl).
Compiling shader 5 of 8 (painter-text.frag.glsl).
Compiling shader 6 of 8 (painter-text.vert.glsl).
Compiling shader 7 of 8 (painter-video.frag.glsl).
Compiling shader 8 of 8 (painter-video.vert.glsl).
Done.
Finished in 7.633s
Exported HTML5 package to C:\Users\User\Documents\LuisClaudio\Informatica\Jogos\Blindado_Game_Armory\build_Cuboteste\html5

lapiznegro · December 15, 2024, 11:54pm

well if that so you can just copy the html5 folder of the debug folder… that does the trick. Because the export does not fail.

Lcmb · December 16, 2024, 12:39am

Which Debug folder are you talking about?
Where is it? (My fault…)

lapiznegro · December 16, 2024, 12:48am

inside your build folder there is a debug folder and inside that an html5 folder that gets created when you choose the runtime browser and press play. If you copy that folder you get your exported html5, thats the trick I meant.

Since when you export to html5 the export finishes without errors I don’t know what could be the problem. Do you have a local server to test it? do you upload it to itchio or some hosting?

Lcmb · December 16, 2024, 12:59am

I think we’re getting to the problem.
This is the folder that is created. There is no Debug folder inside it…

One question: To test the created file, what I’m doing is clicking on the “Index.html” file… is it wrong to do that?? Could this be the problem??

lapiznegro · December 16, 2024, 1:14am

Those are the folders of the exported html5. Not the ones when you press play in armory.

Yes that wont work. You need a server. For example I use apache local server or itchio.

Lcmb · December 16, 2024, 2:13am

Now I understand!!
Thank you very much my friend!! You helped me a lot.
Let’s see what my next obstacle will be! I know there will be some ahead…
But there will always be people like you to help!! See you next time… lol!