Unity webgl!

Thread here: https://2dimensions.slack.com/archives/CHMAP278R/p1709934972246289

![image](https://github.com/rive-app/rive/assets/454182/cc72ee80-4506-4e45-a65a-d994cae0a1a8)

Uses PLS when draft extensions are enabled in Chrome!
![image](https://github.com/rive-app/rive/assets/454182/fadb112f-1bff-457f-98a1-6fe524224398)

Details on how it works and how to patch Unity's emscripten here (part of this PR which will push downstream):
https://github.com/rive-app/rive/blob/unity_webgl/packages/runtime_unity/public/WEBGL.md

Diffs=
bcf6451f4 Unity webgl! (#6816)

Co-authored-by: Luigi Rosso <[email protected]>

.rive_head

@@ -1 +1 @@
-4461675b5e89a3901bf9ad325a4fb507678d622f
+bcf6451f442d7d55ed423982b58204e93c1d8791

README.md

@@ -11,15 +11,16 @@ A Unity runtime library for [Rive](https://rive.app). This is currently a **tech
 
 Currently supported platforms and backends include:
 
+- [WebGL](WEBGL.md)
 - Metal on Mac
 - Metal on iOS
 - D3D11 on Windows
 - OpenGL on Windows
+- OpenGL on Android
 
 Planned support for:
 
 - D3D12
-- WebGL
 - Vulkan
 
 ### Feature Support
@@ -63,6 +64,7 @@ [email protected]:rive-app/rive-unity.git?path=package#v0.1.69
 ```
 
 Or through HTTP:
+
 ```
 https://github.com/rive-app/rive-unity.git?path=package#v0.1.69
 ```
@@ -72,7 +74,7 @@ You can also add it manually to your projects `Packages/manifest.json` file:
 ```json
 {
   "dependencies": {
-    "app.rive.rive-unity": "[email protected]:rive-app/rive-unity.git?path=package#v0.1.69",
+    "app.rive.rive-unity": "[email protected]:rive-app/rive-unity.git?path=package#v0.1.69"
   }
 }
 ```

WEBGL.md

@@ -0,0 +1,53 @@
+# Rive Unity WebGL
+
+Rive's WebGL Renderer has two modes:
+
+## PLS
+
+Uses [an extension](https://registry.khronos.org/webgl/extensions/WEBGL_shader_pixel_local_storage/) we helped pioneer and implement into modern browsers. If the user has this enabled we'll prioritize using this extension for best performance and quality. Enable [WebGL Draft Extensions](https://www.wikihow.tech/Enable-WebGL-Draft-Extensions-in-Google-Chrome) to use this today!
+
+This is our best-in-class solution for both quality and performance, supporting all Rive features including advanced blend modes.
+
+## MSAA
+
+A fallback that will work on all modern browsers supporting WebGL 2. Anti-aliasing quality and playback performance won't be quite as high as PLS but will still be very good.
+
+All Rive features are supported, however performance will be impacted when using advanced blend modes.
+
+# ⚠️ Patching Emscripten
+
+Rive's shaders use features Unity's WebGL shader pre-processor doesn't handle. We provide a patch that must be applied once to your local Unity install in order for it to bypass the shader preprocessor when loading Rive shaders.
+
+## Locate Unity's Emscripten
+
+Unity's emscripten installation is based on the location of the installed Unity Engine. For example, on Mac version 2022.3.10f1 will be located here:
+
+```
+/Applications/Unity/Hub/Editor/2022.3.10f1/PlaybackEngines/WebGLSupport/BuildTools/Emscripten
+```
+
+## Patching library_c_processor.js
+
+Apply the patch to library_c_processor.js
+
+```
+patch -u -b /Applications/Unity/Hub/Editor/2022.3.10f1/PlaybackEngines/WebGLSupport/BuildTools/Emscripten/emscripten/src/library_c_preprocessor.js -i ./rive_unity_webgl_patch.diff
+```
+
+## Manually patching library_c_processor.js
+
+The patch may not be compatible with your version of Unity, in this case you can manually make the change.
+
+- Find library_c_processor.js in the paths provided above and open it in your code/text editor.
+
+- Find where preprocess_c_code is defined: `$preprocess_c_code: function(code, defs = {}) {`
+
+- Make it early out if it detects the shader is a Rive shader (it'll include GL_ANGLE_shader_pixel_local_storage) by returning the un-altered shader source:
+
+```
+  $preprocess_c_code: function(code, defs = {}) {
+    if(code.indexOf('GL_ANGLE_shader_pixel_local_storage') != -1) {
+      return code;
+    }
+    // ...
+```

examples/basic/Assets/New Render Texture.renderTexture

@@ -26,7 +26,7 @@ RenderTexture:
   m_UseDynamicScale: 0
   m_BindMS: 0
   m_EnableCompatibleFormat: 1
-  m_EnableRandomWrite: 1
+  m_EnableRandomWrite: 0
   m_TextureSettings:
     serializedVersion: 2
     m_FilterMode: 1

examples/basic/Assets/RiveScreen.cs

@@ -51,13 +51,10 @@ public bool update()
 
         m_pixelWidth = m_camera.pixelWidth;
         m_pixelHeight = m_camera.pixelHeight;
+
         m_renderTexture = new RenderTexture(
-            m_camera.pixelWidth,
-            m_camera.pixelHeight,
-            0,
-            RenderTextureFormat.ARGB32
+            TextureHelper.Descriptor(m_camera.pixelWidth, m_camera.pixelHeight)
         );
-        m_renderTexture.enableRandomWrite = true;
         m_renderTexture.Create();
         m_renderQueue.UpdateTexture(m_renderTexture);
         return true;
@@ -118,7 +115,7 @@ void OnGUI()
 
     void OnAudioFilterRead(float[] data, int channels)
     {
-        if(m_audioEngine == null) 
+        if (m_audioEngine == null)
         {
             return;
         }
@@ -133,7 +130,8 @@ private void Start()
             m_artboard = m_file.Artboard(0);
             m_stateMachine = m_artboard?.StateMachine();
             int channelCount = 1;
-            switch(AudioSettings.speakerMode) {
+            switch (AudioSettings.speakerMode)
+            {
                 case AudioSpeakerMode.Mono:
                     channelCount = 1;
                     break;

examples/basic/Assets/test.unity

@@ -149,12 +149,12 @@ MonoBehaviour:
   m_PrefabInstance: {fileID: 0}
   m_PrefabAsset: {fileID: 0}
   m_GameObject: {fileID: 243258138}
-  m_Enabled: 0
+  m_Enabled: 1
   m_EditorHideFlags: 0
   m_Script: {fileID: 11500000, guid: f238ee7dff7464ff08faf8b5fddf6ec1, type: 3}
   m_Name: 
   m_EditorClassIdentifier: 
-  asset: {fileID: -2913039369088064392, guid: 85b550ac637974f07b698d56b4852cdb, type: 3}
+  asset: {fileID: -4516626237390682484, guid: caef4a05b2e604822a3804834b00d35d, type: 3}
   cameraEvent: 20
   fit: 1
   material: {fileID: 0}

package/Runtime/Artboard.cs

@@ -128,7 +128,7 @@ public void SetAudioEngine(AudioEngine audioEngine)
 
         #region Native Methods
         [DllImport(NativeLibrary.name)]
-        internal static extern IntPtr unrefArtboard(IntPtr artboard);
+        internal static extern void unrefArtboard(IntPtr artboard);
 
         [DllImport(NativeLibrary.name)]
         internal static extern uint getStateMachineCount(IntPtr artboard);

package/Runtime/AudioEngine.cs

@@ -43,14 +43,14 @@ public static AudioEngine Make(int numChannels, int sampleRate)
         private static extern void unrefAudioEngine(IntPtr audioEngine);
 
         [DllImport(NativeLibrary.name)]
-        internal static extern uint readAudioEngine(
+        internal static extern void readAudioEngine(
             IntPtr audioEngine,
             float[] frames,
             uint frameCount
         );
 
         [DllImport(NativeLibrary.name)]
-        internal static extern uint sumAudioEngine(
+        internal static extern void sumAudioEngine(
             IntPtr audioEngine,
             float[] frames,
             uint frameCount

package/Runtime/Component.cs

@@ -33,7 +33,7 @@ public AABB ComputeBounds()
 
         #region Native Methods
         [DllImport(NativeLibrary.name)]
-        internal static extern IntPtr unrefArtboardComponent(IntPtr component);
+        internal static extern void unrefArtboardComponent(IntPtr component);
 
         [DllImport(NativeLibrary.name)]
         internal static extern AABB componentBounds(IntPtr component);