Merge #3475

3475: re-enable WebGL support r=grovesNL a=MarcAntoine-Arnaud

Mentionned in #3470
Maybe help issue #2749

PR checklist:
- [x] re-enable WebGL rendering
- [x] use published version of `spirv_cross` dependency
- [x] re-enable CI
- [x] check and update examples



Co-authored-by: Marc-Antoine Arnaud <maarnaud@media-io.com>

.github/workflows/CI.yml

@@ -66,6 +66,7 @@ jobs:
             MacOS Nightly,
             Ubuntu Stable,
             Ubuntu Nightly,
+            Web Assembly,
             Windows Stable,
             Windows Nightly,
           ]
@@ -86,6 +87,11 @@ jobs:
             name: Ubuntu Nightly
             channel: nightly
             additional_command:
+          - os: ubuntu-18.04
+            name: Web Assembly
+            channel: nightly
+            target: wasm32-unknown-unknown
+            additional_command:
           - os: windows-2019
             name: Windows Stable
             channel: stable

examples/Cargo.toml

@@ -43,7 +43,7 @@ env_logger = "0.7"
 glsl-to-spirv = "0.1.4"
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
-wasm-bindgen = "0.2.55"
+wasm-bindgen = "0.2"
 console_error_panic_hook = "0.1.6"
 console_log = "0.1.2"
 
@@ -62,6 +62,11 @@ version = "0.6"
 features = ["x11"]
 optional = true
 
+[target.'cfg(all(target_arch = "wasm32"))'.dependencies.gfx-backend-gl]
+path = "../src/backend/gl"
+version = "0.6"
+optional = true
+
 [target.'cfg(any(target_os = "macos", target_os = "ios"))'.dependencies.gfx-backend-metal]
 path = "../src/backend/metal"
 version = "0.6"

examples/quad/data/index.html

@@ -15,3 +15,4 @@
     </script>
   </body>
 </html>
+

examples/quad/main.rs

@@ -352,7 +352,7 @@ where
         };
 
         // Image
-        let img_data = include_bytes!("data/logo.png");
+        let img_data = include_bytes!("./data/logo.png");
 
         let img = image::load(Cursor::new(&img_data[..]), image::ImageFormat::Png)
             .unwrap()
@@ -634,7 +634,7 @@ where
         let pipeline = {
             let vs_module = {
                 let spirv =
-                    auxil::read_spirv(Cursor::new(&include_bytes!("data/quad.vert.spv")[..]))
+                    auxil::read_spirv(Cursor::new(&include_bytes!("./data/quad.vert.spv")[..]))
                         .unwrap();
                 unsafe { device.create_shader_module(&spirv) }.unwrap()
             };

src/backend/gl/Cargo.toml

@@ -27,13 +27,13 @@ auxil = { path = "../../auxil/auxil", version = "0.5", package = "gfx-auxil", fe
 smallvec = "1.0"
 glow = "0.6.1"
 parking_lot = "0.11"
-spirv_cross = { version = "0.22", features = ["glsl"] }
+spirv_cross = { version = "0.22", features = ["glsl"]}
 lazy_static = "1"
 raw-window-handle = "0.3"
-x11 = { version = "2", features = ["xlib"], optional = true }
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
 egl = { package = "khronos-egl", version = "2.1.0" }
+x11 = { version = "2", features = ["xlib"], optional = true }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 js-sys = "0.3.6"

src/backend/gl/src/window/web.rs

@@ -12,7 +12,7 @@ pub struct Swapchain {
     pub(crate) extent: window::Extent2D,
     pub(crate) channel: f::ChannelType,
     pub(crate) raw_format: native::TextureFormat,
-    pub(crate) fbos: ArrayVec<[native::RawFrameBuffer; 3]>,
+    pub(crate) frame_buffers: ArrayVec<[native::RawFrameBuffer; 3]>,
 }
 
 #[derive(Clone, Debug)]
@@ -50,6 +50,33 @@ impl Surface {
     fn swapchain_formats(&self) -> Vec<f::Format> {
         vec![f::Format::Rgba8Unorm, f::Format::Bgra8Unorm]
     }
+
+    pub(crate) unsafe fn present(
+        &mut self,
+        _image: native::SwapchainImage,
+        gl: &GlContainer,
+    ) -> Result<Option<window::Suboptimal>, window::PresentError> {
+        let swapchain = self.swapchain.as_ref().unwrap();
+
+        let frame_buffer = swapchain.frame_buffers.first().unwrap();
+        gl.bind_framebuffer(glow::DRAW_FRAMEBUFFER, None);
+        gl.bind_framebuffer(glow::READ_FRAMEBUFFER, Some(*frame_buffer));
+        gl.blit_framebuffer(
+            0,
+            0,
+            swapchain.extent.width as _,
+            swapchain.extent.height as _,
+            0,
+            0,
+            swapchain.extent.width as _,
+            swapchain.extent.height as _,
+            glow::COLOR_BUFFER_BIT,
+            glow::NEAREST,
+        );
+        gl.bind_framebuffer(glow::READ_FRAMEBUFFER, None);
+
+        Ok(None)
+    }
 }
 
 impl window::Surface<B> for Surface {
@@ -89,9 +116,10 @@ impl window::PresentationSurface<B> for Surface {
     ) -> Result<(), window::CreationError> {
         let gl = &device.share.context;
 
-        if let Some(old) = self.swapchain.take() {
-            for fbo in old.fbos {
-                gl.delete_framebuffer(fbo);
+        if let Some(swapchain) = self.swapchain.take() {
+            // delete all frame buffers already allocated
+            for frame_buffer in swapchain.frame_buffers {
+                gl.delete_framebuffer(frame_buffer);
             }
         }
 
@@ -108,8 +136,8 @@ impl window::PresentationSurface<B> for Surface {
             config.extent.height as i32,
         );
 
-        let fbo = gl.create_framebuffer().unwrap();
-        gl.bind_framebuffer(glow::READ_FRAMEBUFFER, Some(fbo));
+        let frame_buffer = gl.create_framebuffer().unwrap();
+        gl.bind_framebuffer(glow::READ_FRAMEBUFFER, Some(frame_buffer));
         gl.framebuffer_renderbuffer(
             glow::READ_FRAMEBUFFER,
             glow::COLOR_ATTACHMENT0,
@@ -120,21 +148,20 @@ impl window::PresentationSurface<B> for Surface {
             extent: config.extent,
             channel: config.format.base_format().1,
             raw_format: desc.tex_external,
-            fbos: iter::once(fbo).collect(),
+            frame_buffers: iter::once(frame_buffer).collect(),
         });
-
         Ok(())
     }
 
     unsafe fn unconfigure_swapchain(&mut self, device: &Device) {
         let gl = &device.share.context;
-        if let Some(old) = self.swapchain.take() {
-            for fbo in old.fbos {
-                gl.delete_framebuffer(fbo);
+        if let Some(swapchain) = self.swapchain.take() {
+            for frame_buffer in swapchain.frame_buffers {
+                gl.delete_framebuffer(frame_buffer);
             }
         }
-        if let Some(rbo) = self.renderbuffer.take() {
-            gl.delete_renderbuffer(rbo);
+        if let Some(renderbuffer) = self.renderbuffer.take() {
+            gl.delete_renderbuffer(renderbuffer);
         }
     }