240919 2022-05-25 12:39:31 -0700 Material issues on Mac/iOS with WebGL via Metal 2022-05-31 23:48:57 -0700 1 1 1 Unclassified WebKit ANGLE Safari 15 All iOS 15 RESOLVED WORKSFORME P2 Normal --- 1 gabby webkit-unassigned dino kbr kkinnunen kpiddington oldest_to_newest 1871806 0 gabby 2022-05-25 12:39:31 -0700 We've received reports of rendering issues with materials in CesiumJS (https://github.com/CesiumGS/cesium/issues/9827), including translucent and dashed materials, on iOS devices using WebGL via Metal. These were occurring as of the latest Safari 15.5 release. Disabling order independent translucent in the engine appears to remedy the issue, so we're working on narrowing the issue down to a specific extension, though we believe it may be related to EXT_color_buffer_float. 1871850 1 kbr 2022-05-25 14:56:25 -0700 Unfortunately this doesn't reproduce on M1 hardware, so Apple engineers will have to triage it. Submitter, please tell us any specific iOS device types that demonstrate the failure. 1872720 2 kkinnunen 2022-05-30 04:17:21 -0700 I can repro on iPad Pro 4th gen https://sandcastle.cesium.com/gallery/Wall.html observe the blue translucent wall rendered as wire-frame only, no blue. 1872728 3 kkinnunen 2022-05-30 05:05:34 -0700 Gabby, if it is simple for you to do and you have the time: - It'd be of great help debugging this if there was a .zip file with one scene that reproduces this, as simple scene as possible, with all the source files that are needed. - Additionally I notice that it was worked around with disabling the order independent translucency. It would be great if the example disabled this workaround, so that the example would reproduce the issue. 1872729 4 kkinnunen 2022-05-30 05:08:15 -0700 iPad Pro 4th gen is Apple5 A12 iOS GPU Family 5 1872967 5 459888 gabby 2022-05-31 07:49:31 -0700 Created attachment 459888 Translucency issue - Cesium minimal scene Thanks! Attached is a minimal scene with the workaround disabled. It uses a CDN of the unminified CesiumJS library. If you need an example which packages the source code directly, please let me know. 1873149 6 kpiddington 2022-05-31 15:17:28 -0700 Looks like this a lack of support for GL_EXT_float_blend. Commenting this out causes M1 hardware to stop rendering the squares. 1873170 7 kpiddington 2022-05-31 16:40:21 -0700 I think I understand what's going on: We've added EXT_Color_buffer_float support to the Metal based backend for WebGL. However, Cesium doesn't consider the limitations of EXT_Color_buffer_float when performing rendering. Specifically, please note the limitations here: https://www.khronos.org/registry/OpenGL/extensions/EXT/EXT_color_buffer_float.txt By default, EXT_color_buffer_float does not require blending for R32F, RG32F, and RGBA32F textures. You also must check for GL_EXT_float_blend support. 1873171 8 kpiddington 2022-05-31 16:42:12 -0700 Contrast this with the OpenGL backend, which has no support for EXT_Color_buffer_float, so OIT.js line 28 (const extensionsSupported = context.colorBufferFloat && context.depthTexture;) returns false. _translucentMRTSupport, and _translucentMultipassSupport will both be false, so we never create a render pass that requests blending. I suggest also adding context.floatBlend to the list of extensions required for OIT. 1873239 9 kkinnunen 2022-05-31 23:48:57 -0700 Just pasting this for my personal use future use: - OpenGL ES 3.0 states floating-point textures are not color-renderable (render to floating-point texture) - EXT_color_buffer_float makes floating-point textures color-renderable - EXT_color_buffer_float requires blending to be disabled when rendering to floating-point textures. - EXT_float_blend allows blending to be enabled when rendering to floating-point textures. In WebGL, EXT_float_blend is automatically enabled when enabling EXT_color_buffer_float, but only if EXT_float_blend is supported in the first place. https://www.khronos.org/registry/webgl/extensions/EXT_color_buffer_float/ https://www.khronos.org/registry/webgl/extensions/EXT_float_blend/ https://www.khronos.org/registry/webgl/specs/latest/1.0/ https://www.khronos.org/registry/webgl/specs/2.0/ https://www.khronos.org/registry/OpenGL/specs/es/3.0/es_spec_3.0.pdf https://www.khronos.org/registry/OpenGL/extensions/EXT/EXT_float_blend.txt https://www.khronos.org/registry/OpenGL/extensions/EXT/EXT_color_buffer_float.txt Closing as working as intended. There's something to be said about Web Inspector being able to identify this, but likely it wouldn't have helped as this was failing on device and people (including me) rarely look for the errors on device... 459888 2022-05-31 07:49:31 -0700 2022-05-31 07:49:31 -0700 Translucency issue - Cesium minimal scene Cesium-Box.html.zip application/zip 1210 gabby UEsDBBQACAAIAKRVv1QAAAAAAAAAAAAAAAAPABAAQ2VzaXVtLUJveC5odG1sVVgMAAsqlmLzKZZi 9QEUAKVUTVPbMBC951csumBmEjsMMG1DlBlIODDtTDst9OMorDUWlSVXkmNCh//eteWUhB7rgyyv dt/uvn3y/GD1cXnz49MVlKHSi9G8e4EW5p4zNGwxApiXKGS3oW2FQUBeCucxcNaEYvKWQbZ7WIZQ T/BXo9acfZ/cXkyWtqpFUHcaGeTWBDQUeX3FUd7jfmy/AzCiQs7WCtvausAG69/QVslQcolrleOk /xiDMioooSc+Fxr58Rgq8aiqptoxkMueofHo+i9BlXFjY569VmIhEn3uVB2UNTsNrJxoQcCdfUzZ EBNU0LhYoldNBSus7DyLpngcUcC7nLOOJD/Lsrx3TnNbZdK2Rlsh/WB88JlDjcKjz47TdyfZZaO0 zCL8ren6KRRuDemDZ4t5FnMMCbUyP6F0WPx/vuybomkFn7XxnebeMyB/znzYaPQlYohiybZqmd9Z uRlKkWoNSnIWUy2JRKEMOuJTC+85Kxqtv6gn7Hog3z3GFqOiMXlHP/ggXGjqJBZ1BL97v0MaJR05 lYfD8xFNyAfo1IMOOBhsYaDoa29L/ili3ONYJ9FdG4k10mLCjRPG6yZHk29mEFyDo+ej89GA71Be 2kfCj4lSCiAFok+FlEkHV1uvuppn2+xLKp12wpykhbPVCu8dok8mx9M36XQMp9NuPZl2Tzo9GhME aWs2tChVhcYTnJ/tdvSCmZwOkS8YYzjbRQO6EwEd3ZKXkqy2Lv18tUpbFcoLXZcimaZng7ttAikI Y+97pj7uFcrlh4vl+87reRx5Goh5sra6sckrmsjheaQKSMKmRlsMUHDAOU2T6C8oizzcDrhVhtSa DtNfCq1REvVdXee9wytddOAvd2GeRSGSMvs/3B9QSwcINzQ3oIwCAADyBAAAUEsDBAoAAAAAALhV v1QAAAAAAAAAAAAAAAAJABAAX19NQUNPU1gvVVgMABsqlmIbKpZi9QEUAFBLAwQUAAgACACkVb9U AAAAAAAAAAAAAAAAGgAQAF9fTUFDT1NYLy5fQ2VzaXVtLUJveC5odG1sVVgMAAsqlmLzKZZi9QEU AGNgFWNnYGJg8E1MVvAPVohQgAKQGAMnEBsBcR0Qg/gbGIgCjiEhQVAmSMcCIBZAU8KIEJdKzs/V SywoyEnVy0ksLiktTk1JSSxJVQ4IBin8ozktCUS7mjdag2gAUEsHCIO45V1cAAAAsAAAAFBLAQIV AxQACAAIAKRVv1Q3NDegjAIAAPIEAAAPAAwAAAAAAAAAAECkgQAAAABDZXNpdW0tQm94Lmh0bWxV WAgACyqWYvMplmJQSwECFQMKAAAAAAC4Vb9UAAAAAAAAAAAAAAAACQAMAAAAAAAAAABA/UHZAgAA X19NQUNPU1gvVVgIABsqlmIbKpZiUEsBAhUDFAAIAAgApFW/VIO45V1cAAAAsAAAABoADAAAAAAA AAAAQKSBEAMAAF9fTUFDT1NYLy5fQ2VzaXVtLUJveC5odG1sVVgIAAsqlmLzKZZiUEsFBgAAAAAD AAMA4AAAAMQDAAAAAA==