search

google / filament

Filament is a real-time physically based rendering engine for Android, iOS, Windows, Linux, macOS, and WebGL2
https://google.github.io/filament/
Apache License 2.0
17.82k stars 1.89k forks source link

WebGL samples no longer work on Windows #3308

Closed cx20 closed 3 years ago

cx20 commented 3 years ago

Describe the bug I tried to view a sample of Filament tutorial_triangle in Chrome 87. However, an error appeared in the console and no triangles were displayed on the screen.

To Reproduce Steps to reproduce the behavior:

  1. Launch Chrome 87.
  2. Go to the following page https://google.github.io/filament/webgl/tutorial_triangle.html
  3. Check the console.

The following error is output to the console and the triangle is not displayed on the screen.

GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete.
GL_INVALID_FRAMEBUFFER_OPERATION: Draw framebuffer is incomplete.

Expected behavior

The assumed result is a triangle on the screen and no error output to the console.

Screenshots If applicable, add screenshots to help explain your problem.

Chrome 87.0 Firefox 82.0
image image

Desktop (please complete the following information):

romainguy commented 3 years ago

I cannot reproduce. The samples work for me on Chrome 87 (macOS).

prideout commented 3 years ago

Most samples work, but the triangle demo does not, which is a dup of #3128.

romainguy commented 3 years ago

The triangle works for me :)

cx20 commented 3 years ago

I cannot reproduce. The samples work for me on Chrome 87 (macOS).

Yes. The problem seems to occur only in the Windows version of Chrome 87. I also confirmed that the triangle appears in the case of Chrome 87 on macOS.

Most samples work, but the triangle demo does not, which is a dup of #3128.

Hmm. I presented the triangle sample as a representative example, but neither the other samples nor gltf-test worked in my Windows environment with Chrome 87.

I have three Windows 10 environments and all have had similar events. The environments I've tried are as follows.

cx20 commented 3 years ago

This problem seems to be specific to the Windows version of Chrome 87. Should I report a bug to bugs.chromium.org?

cx20 commented 3 years ago

I tried it out by embedding the debug output code into the following function in filament.js

The embedded code is as follows:

console.log(_emscripten_glCheckFramebufferStatus(36160)); // 36160 is gl.FRAMEBUFFER

The results, traced in Spector.js, are as follows:

# WebGL2 API Chrome 87 (Windows) Firefox 83 (Windows)
1 clearBufferfv(DEPTH) FRAMEBUFFER_INCOMPLETE_ATTACHMENT FRAMEBUFFER_COMPLETE
2 drawElements FRAMEBUFFER_INCOMPLETE_ATTACHMENT FRAMEBUFFER_COMPLETE
3 drawElements FRAMEBUFFER_INCOMPLETE_ATTACHMENT FRAMEBUFFER_COMPLETE
4 drawElements FRAMEBUFFER_COMPLETE FRAMEBUFFER_COMPLETE
5 clearBufferfv(COLOR) FRAMEBUFFER_COMPLETE FRAMEBUFFER_COMPLETE
6 clearBufferfv(DEPTH) FRAMEBUFFER_COMPLETE FRAMEBUFFER_COMPLETE
7 drawElements FRAMEBUFFER_COMPLETE FRAMEBUFFER_COMPLETE
cx20 commented 3 years ago

I've embedded the trace output code in the sample below to see where the problem is happening. https://cx20.github.io/webgl-test/examples/filament/square/index.html

Upon investigation, I found that the problem occurred at the point of the call to framebufferTexture2D(). Perhaps some parameter inconsistency was detected by the browser version upgrade, but the specific combination of parameters is not known. The following case seems to cause problems when specifying RGB16F in internalFormat, but as far as I can see from the webglreport, the EXT_color_buffer_half_float extension seems to be supported.

internalFormat Chrome 87 (Windows) Firefox 83 (Windows)
RGB16F/RGBA16F image image
RGBA8 image image

Edit BTW, I noticed that in Firefox it is RGBA16F instead of RGB16F.

prideout commented 3 years ago

Thanks @cx20, I have a tentative fix that I'm going to push momentarily. Would be great if you could test it out for us.

cx20 commented 3 years ago

@prideout Thanks! I have confirmed that the latest version of Filament can now view glTF files again.

Filament v1.9.10rc + Duck.gltf result: image

cx20 commented 3 years ago

I tried tracing again on Chrome 87 and Firefox 83 just to be sure. In both cases, RGBA16F was set and it was confirmed that the error was resolved.

internalFormat Chrome 87 (Windows) Firefox 83 (Windows)
RGBA16F image image
cx20 commented 3 years ago

@prideout Previously, the Filament 1.9.10rc(Nightly Build) temporarily addressed this issue, but the release version is no longer working. Is there a version that works somewhere?

prideout commented 3 years ago

@cx20 It is known that MSAA does not work on WebGL with certain Chrome backends (#3128), we are working on a fix, this was never temporarily fixed (not intentionally anyway). The triangle demo is the only demo that enables MSAA, so all our other web samples should work. If the other samples do not work, please file a new bug.

cx20 commented 3 years ago

@prideout Hmm. Currently, none of the Filament 1.9.10 samples in gltf-test work. Is it a usage problem?

Filament v1.9.10rc + Duck.gltf result: image

Filament v1.9.10 + Duck.gltf result: image

The following sample seems to have the same error. https://google.github.io/filament/webgl/tutorial_redball.html https://google.github.io/filament/webgl/tutorial_suzanne.html https://google.github.io/filament/webgl/parquet.html https://google.github.io/filament/webgl/suzanne.html https://google.github.io/filament/webgl/helmet.html

The environment is MacBookAir + Windows 10(BootCamp) + Chrome88.0.4324.146.

prideout commented 3 years ago

Ah, right, apologies. Indeed, we did not merge the RGB16F fix (#3334) into our 1.9.10 release candidate, as it was not considered critical fix for an internal upgrade at Google. However the fix will definitely be included in our release next week. Thank you for being patient with us. :-)

emackey commented 3 years ago

Oh man. VSCode has updated itself to use the version of Chrome that exhibits this behavior, causing the whole Filament preview window for glTF to go dark and report these errors. I'll be looking forward to next week's release.

amarav commented 3 years ago

Can someone tell me how to compile filament sample to wasm in Windows? The guide describes only for macos and linux

cx20 commented 3 years ago

@amarav See below for more information. https://github.com/google/filament/discussions/3518#discussioncomment-343701

cx20 commented 3 years ago

@emackey I have confirmed the same problem. The Filament sample seems to fail due to the VS Code chrome version being updated from 83 to 87. I have confirmed that updating the version of Filament to 1.9.11rc of Nightly Build in my local environment resolves the error.

image

I too am looking forward to the next release.