Improve performance and get Windows working with new visualiser

Resources/oscilloscope/oscilloscope.js

@@ -18,7 +18,7 @@ var AudioSystem =
 
     startSound : function()
     {
-        const audioUpdated = window.__JUCE__.backend.addEventListener("audioUpdated", doScriptProcessor);
+        window.__JUCE__.backend.addEventListener("audioUpdated", doScriptProcessor);
     }
 }
 
@@ -671,67 +671,71 @@ var Render =
 var sweepPosition = -1;
 var belowTrigger = false;
 
-function doScriptProcessor(buffer) {
+function doScriptProcessor(bufferBase64) {
-    for (var i = 0; i < xSamples.length; i++) {
+	var req = new XMLHttpRequest;
-      xSamples[i] = buffer[i * 2];
+	req.open('GET', "data:application/octet;base64," + bufferBase64);
-      ySamples[i] = buffer[i * 2 + 1];
+	req.responseType = 'arraybuffer';
-    }
+	req.onload = function fileLoaded(e) {
+		var dataView = new DataView(e.target.response);
 
-    const getSettingsFn = Juce.getNativeFunction("getSettings");
+		for (var i = 0; i < xSamples.length; i++) {
-    getSettingsFn().then(settings => {
+			xSamples[i] = dataView.getFloat32(i * 4 * 2, true);
-      controls.exposureStops = settings.intensity;
+			ySamples[i] = dataView.getFloat32(i * 4 * 2 + 4, true);
-      controls.persistence = settings.persistence;
+		}
-      controls.hue = settings.hue;
-      controls.disableFilter = !settings.upsampling;
-      if (controls.grid !== settings.graticule) {
-          controls.grid = settings.graticule;
-          const image = controls.noise ? 'noise.jpg' : 'empty.jpg';
-          Render.screenTexture = Render.loadTexture(image);
-      }
-      if (controls.noise !== settings.smudges) {
-          controls.noise = settings.smudges;
-          const image = controls.noise ? 'noise.jpg' : 'empty.jpg';
-          Render.screenTexture = Render.loadTexture(image);
-      }
-    });
 
-    if (controls.sweepOn) {
+		const getSettingsFn = Juce.getNativeFunction("getSettings");
-      var gain = Math.pow(2.0,controls.mainGain);
+		getSettingsFn().then(settings => {
-      var sweepMinTime = controls.sweepMsDiv*10/1000;
+			controls.exposureStops = settings.intensity;
-      var triggerValue = controls.sweepTriggerValue;
+			controls.persistence = settings.persistence;
-      for (var i=0; i<xSamples.length; i++)
+			controls.hue = settings.hue;
-      {
+			controls.disableFilter = !settings.upsampling;
-          xSamples[i] = sweepPosition / gain;
+			if (controls.grid !== settings.graticule) {
-          sweepPosition += 2*AudioSystem.timePerSample/sweepMinTime;
+				controls.grid = settings.graticule;
-          if (sweepPosition > 1.1 && belowTrigger && ySamples[i]>=triggerValue)
+				const image = controls.noise ? 'noise.jpg' : 'empty.jpg';
-              sweepPosition =-1.3;
+				Render.screenTexture = Render.loadTexture(image);
-          belowTrigger = ySamples[i]<triggerValue;
+			}
-      }
+			if (controls.noise !== settings.smudges) {
-    }
+				controls.noise = settings.smudges;
+				const image = controls.noise ? 'noise.jpg' : 'empty.jpg';
+				Render.screenTexture = Render.loadTexture(image);
+			}
+		});
 
-    if (!controls.freezeImage)
+		if (controls.sweepOn) {
-    {
+			var gain = Math.pow(2.0, controls.mainGain);
-      if (!controls.disableFilter)
+			var sweepMinTime = controls.sweepMsDiv * 10 / 1000;
-      {
+			var triggerValue = controls.sweepTriggerValue;
-          Filter.generateSmoothedSamples(AudioSystem.oldXSamples, xSamples, AudioSystem.smoothedXSamples);
+			for (var i = 0; i < xSamples.length; i++) {
-          Filter.generateSmoothedSamples(AudioSystem.oldYSamples, ySamples, AudioSystem.smoothedYSamples);
+				xSamples[i] = sweepPosition / gain;
+				sweepPosition += 2 * AudioSystem.timePerSample / sweepMinTime;
+				if (sweepPosition > 1.1 && belowTrigger && ySamples[i] >= triggerValue)
+					sweepPosition = -1.3;
+				belowTrigger = ySamples[i] < triggerValue;
+			}
+		}
 
-          if (!controls.swapXY) Render.drawLineTexture(AudioSystem.smoothedXSamples, AudioSystem.smoothedYSamples);
+		if (!controls.freezeImage) {
-          else Render.drawLineTexture(AudioSystem.smoothedYSamples, AudioSystem.smoothedXSamples);
+			if (!controls.disableFilter) {
-      }
+				Filter.generateSmoothedSamples(AudioSystem.oldXSamples, xSamples, AudioSystem.smoothedXSamples);
-      else
+				Filter.generateSmoothedSamples(AudioSystem.oldYSamples, ySamples, AudioSystem.smoothedYSamples);
-      {
-          if (!controls.swapXY) Render.drawLineTexture(xSamples, ySamples);
-          else Render.drawLineTexture(ySamples, xSamples);
-      }
-    }
 
-    for (var i = 0; i<xSamples.length; i++) {
+				if (!controls.swapXY) Render.drawLineTexture(AudioSystem.smoothedXSamples, AudioSystem.smoothedYSamples);
-      AudioSystem.oldXSamples[i] = xSamples[i];
+				else Render.drawLineTexture(AudioSystem.smoothedYSamples, AudioSystem.smoothedXSamples);
-      AudioSystem.oldYSamples[i] = ySamples[i];
+			}
-    }
+			else {
+				if (!controls.swapXY) Render.drawLineTexture(xSamples, ySamples);
+				else Render.drawLineTexture(ySamples, xSamples);
+			}
+		}
 
-    requestAnimationFrame(drawCRTFrame);
+		for (var i = 0; i < xSamples.length; i++) {
+			AudioSystem.oldXSamples[i] = xSamples[i];
+			AudioSystem.oldYSamples[i] = ySamples[i];
+		}
+
+		requestAnimationFrame(drawCRTFrame);
+	}
+	req.send();
 }
 
 function drawCRTFrame(timeStamp) {

Source/components/VisualiserComponent.cpp

@@ -15,7 +15,7 @@ VisualiserComponent::VisualiserComponent(OscirenderAudioProcessor& p, Visualiser
     setMouseCursor(juce::MouseCursor::PointingHandCursor);
     setWantsKeyboardFocus(true);
     
-    addChildComponent(browser);
+    addAndMakeVisible(browser);
     setVisualiserType(oldVisualiser);
     
     roughness.textBox.setValue(audioProcessor.roughness);
@@ -141,11 +141,7 @@ void VisualiserComponent::run() {
         if (!oldVisualiser) {
             juce::MessageManager::callAsync([this, visualiser] () {
                 if (visualiser) {
-                    juce::Array<juce::var> data;
+                    browser.emitEventIfBrowserIsVisible("audioUpdated", juce::Base64::toBase64(buffer.data(), buffer.size() * sizeof(float)));
-                    for (int i = 0; i < buffer.size(); i++) {
-                        data.add(buffer[i]);
-                    }
-                    browser.emitEventIfBrowserIsVisible("audioUpdated", data);
                 }
             });
         }
@@ -228,12 +224,12 @@ void VisualiserComponent::setFullScreen(bool fullScreen) {}
 void VisualiserComponent::setVisualiserType(bool oldVisualiser) {
     this->oldVisualiser = oldVisualiser;
     if (oldVisualiser) {
-        browser.setVisible(false);
+        // required to hide the browser - it is buggy if we use setVisible(false) on Windows
         browser.goToURL("about:blank");
     } else {
-        browser.setVisible(true);
         browser.goToURL(juce::WebBrowserComponent::getResourceProviderRoot() + "oscilloscope.html");
     }
+    resized();
 }
 
 void VisualiserComponent::paintXY(juce::Graphics& g, juce::Rectangle<float> area) {
@@ -275,7 +271,11 @@ void VisualiserComponent::resetBuffer() {
 }
 
 void VisualiserComponent::resized() {
-    browser.setBounds(getLocalBounds());
+    if (oldVisualiser) {
+        browser.setBounds(0, 0, 0, 0);
+    } else {
+        browser.setBounds(getLocalBounds());
+    }
     auto area = getLocalBounds();
     area.removeFromBottom(5);
     auto buttonRow = area.removeFromBottom(25);

Source/components/VisualiserComponent.h

@@ -105,6 +105,8 @@ private:
         juce::WebBrowserComponent::Options()
         .withNativeIntegrationEnabled()
         .withResourceProvider(provider)
+        .withBackend(juce::WebBrowserComponent::Options::Backend::webview2)
+        .withWinWebView2Options(juce::WebBrowserComponent::Options::WinWebView2{})
         .withNativeFunction("toggleFullscreen", [this](auto& var, auto complete) {
             enableFullScreen();
         })

osci-render.jucer

@@ -631,7 +631,8 @@
     </GROUP>
   </MAINGROUP>
   <JUCEOPTIONS JUCE_STRICT_REFCOUNTEDPOINTER="1" JUCE_VST3_CAN_REPLACE_VST2="0"
-               JUCE_WIN_PER_MONITOR_DPI_AWARE="0"/>
+               JUCE_WIN_PER_MONITOR_DPI_AWARE="0" JUCE_USE_WIN_WEBVIEW2_WITH_STATIC_LINKING="1"
+               JUCE_USE_WIN_WEBVIEW2="1"/>
   <EXPORTFORMATS>
     <LINUX_MAKE targetFolder="Builds/LinuxMakefile" smallIcon="pSc1mq" bigIcon="pSc1mq">
       <CONFIGURATIONS>