web: WebGL render backend (merge #520)

Initial implementation of a WebGL render backend.
Switch the web target to use WebGL by default. Put the canvas backend behind a feature flag.

Cargo.toml

@@ -10,6 +10,7 @@ members = [
     "render/canvas",
     "render/wgpu",
     "render/common_tess",
+    "render/webgl",
 ]
 
 # Don't optimize build scripts and macros.

render/webgl/Cargo.toml

@@ -0,0 +1,29 @@
+[package]
+name = "ruffle_render_webgl"
+version = "0.1.0"
+authors = ["Mike Welsh <mwelsh@gmail.com>"]
+edition = "2018"
+
+[dependencies]
+fnv = "1.0.3"
+js-sys = "0.3.25"
+log = "0.4" 
+percent-encoding = "2.1.0"
+png = "0.16.3"
+ruffle_render_common_tess = { path = "../common_tess" }
+ruffle_web_common = { path = "../../web/common" }
+wasm-bindgen = "0.2.57"
+
+[dependencies.jpeg-decoder]
+version = "0.1.18"
+default-features = false
+
+[dependencies.ruffle_core]
+path = "../../core"
+default-features = false
+
+[dependencies.web-sys]
+version = "0.3.34"
+features = ["HtmlCanvasElement", "HtmlElement", "Node", "OesVertexArrayObject", "WebGlBuffer", "WebGlFramebuffer", "WebGlProgram", 
+            "WebGlRenderbuffer", "WebGlRenderingContext", "WebGl2RenderingContext", "WebGlShader", "WebGlTexture", "WebGlUniformLocation", 
+            "WebGlVertexArrayObject"]

render/webgl/shaders/bitmap.frag

@@ -0,0 +1,25 @@
+#version 100
+precision mediump float;
+
+uniform mat4 view_matrix;
+uniform mat4 world_matrix;
+uniform vec4 mult_color;
+uniform vec4 add_color;
+uniform mat3 u_matrix;
+
+uniform sampler2D u_texture;
+
+varying vec2 frag_uv;
+
+void main() {
+    vec4 color = texture2D(u_texture, frag_uv);
+
+    // Unmultiply alpha before apply color transform.
+    if( color.a > 0.0 ) {
+        color.rgb /= color.a;
+        color = mult_color * color + add_color;
+        color.rgb *= color.a;
+    }
+
+    gl_FragColor = color;
+}

render/webgl/shaders/color.frag

@@ -0,0 +1,13 @@
+#version 100
+precision mediump float;
+
+uniform mat4 view_matrix;
+uniform mat4 world_matrix;
+uniform vec4 mult_color;
+uniform vec4 add_color;
+
+varying vec4 frag_color;
+
+void main() {
+    gl_FragColor = frag_color;
+}

render/webgl/shaders/color.vert

@@ -0,0 +1,16 @@
+#version 100
+precision mediump float;
+
+uniform mat4 view_matrix;
+uniform mat4 world_matrix;
+uniform vec4 mult_color;
+uniform vec4 add_color;
+
+attribute vec2 position;
+attribute vec4 color;
+varying vec4 frag_color;
+
+void main() {
+    frag_color = color * mult_color + add_color;
+    gl_Position = view_matrix * world_matrix * vec4(position, 0.0, 1.0);
+}

render/webgl/shaders/gradient.frag

@@ -0,0 +1,94 @@
+#version 100
+precision mediump float;
+
+uniform mat4 view_matrix;
+uniform mat4 world_matrix;
+uniform vec4 mult_color;
+uniform vec4 add_color;
+uniform mat3 u_matrix;
+
+uniform int u_gradient_type;
+uniform float u_ratios[8];
+uniform vec4 u_colors[8];
+uniform int u_num_colors;
+uniform int u_repeat_mode;
+uniform float u_focal_point;
+
+varying vec2 frag_uv;
+
+void main() {
+    float t;
+    if( u_gradient_type == 0 )
+    {
+        t = frag_uv.x;
+    }
+    else if( u_gradient_type == 1 )
+    {
+        t = length(frag_uv * 2.0 - 1.0);
+    }
+    else if( u_gradient_type == 2 )
+    {
+        vec2 uv = frag_uv * 2.0 - 1.0;
+        vec2 d = vec2(u_focal_point, 0.0) - uv;
+        float l = length(d);
+        d /= l;
+        t = l / (sqrt(1.0 -  u_focal_point*u_focal_point*d.y*d.y) + u_focal_point*d.x);
+    }
+    if( u_repeat_mode == 0 )
+    {
+        // Clamp
+        t = clamp(t, 0.0, 1.0);
+    }
+    else if( u_repeat_mode == 1 )
+    {
+        // Repeat
+        t = fract(t);
+    }
+    else
+    {
+        // Mirror
+        if( t < 0.0 )
+        {
+            t = -t;
+        }
+
+        if( int(mod(t, 2.0)) == 0 ) {
+            t = fract(t);
+        } else {
+            t = 1.0 - fract(t);
+        }
+    }
+
+    // TODO: No non-constant array access in WebGL 1, so the following is kind of painful.
+    // We'd probably be better off passing in the gradient as a texture and sampling from there.
+    vec4 color;
+    float a;
+    if( t <= u_ratios[0] ) {
+        color = u_colors[0];
+    } else if( t <= u_ratios[1] ) {    
+        a = (t - u_ratios[0]) / (u_ratios[1] - u_ratios[0]);
+        color = mix(u_colors[0], u_colors[1], a);
+    } else if( t <= u_ratios[2] ) {    
+        a = (t - u_ratios[1]) / (u_ratios[2] - u_ratios[1]);
+        color = mix(u_colors[1], u_colors[2], a);
+    } else if( t <= u_ratios[3] ) {    
+        a = (t - u_ratios[2]) / (u_ratios[3] - u_ratios[2]);
+        color = mix(u_colors[2], u_colors[3], a);
+    } else if( t <= u_ratios[4] ) {    
+        a = (t - u_ratios[3]) / (u_ratios[4] - u_ratios[3]);
+        color = mix(u_colors[3], u_colors[4], a);
+    } else if( t <= u_ratios[5] ) {    
+        a = (t - u_ratios[4]) / (u_ratios[5] - u_ratios[4]);
+        color = mix(u_colors[4], u_colors[5], a);
+    } else if( t <= u_ratios[6] ) {    
+        a = (t - u_ratios[5]) / (u_ratios[6] - u_ratios[5]);
+        color = mix(u_colors[5], u_colors[6], a);
+    } else if( t <= u_ratios[7] ) {
+        a = (t - u_ratios[6]) / (u_ratios[7] - u_ratios[6]);
+        color = mix(u_colors[6], u_colors[7], a);
+    } else {
+        color = u_colors[7];
+    }
+
+    gl_FragColor = mult_color * color + add_color;
+}

render/webgl/shaders/texture.vert

@@ -0,0 +1,18 @@
+#version 100
+precision mediump float;
+
+uniform mat4 view_matrix;
+uniform mat4 world_matrix;
+uniform vec4 mult_color;
+uniform vec4 add_color;
+uniform mat3 u_matrix;
+
+attribute vec2 position;
+attribute vec4 color;
+
+varying vec2 frag_uv;
+
+void main() {
+    frag_uv = vec2(u_matrix * vec3(position, 1.0));
+    gl_Position = view_matrix * world_matrix * vec4(position, 0.0, 1.0);
+}