Add lightweight 2D WebGL cloud renderer as alternative to Vanta

background.html

@@ -474,9 +474,13 @@
     <script src="vendor/three.min.js"></script>
     <script src="vendor/vanta.clouds.min.js"></script>
     <script src="vendor/vanta.clouds2.min.js"></script>
+    <script src="vendor/clouds2d.js"></script>
     <script>
 var noiseDataUri = 'data:image/png;base64,PLACEHOLDER';
-var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
+var useVanta = !(window.CONFIG && window.CONFIG.renderer === 'clouds2d');
+var effect;
+if (useVanta && typeof VANTA !== 'undefined') {
+    effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
             el: "#vanta",
             mouseControls: false,
             touchControls: false,
@@ -493,6 +497,20 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
             lightColor: 0xe6dfd1,
             texturePath: noiseDataUri
         }) || { setOptions: function() {} };
+} else {
+    var c2dCanvas = document.getElementById('vanta');
+    var c2dRender = function() {
+        if (!c2dCanvas) return;
+        c2dCanvas.width = window.innerWidth;
+        c2dCanvas.height = window.innerHeight;
+        if (typeof window.clouds2dRender === 'function') {
+            window.clouds2dRender(c2dCanvas);
+        }
+    };
+    effect = { setOptions: function() {} };
+    c2dRender();
+    window.addEventListener('resize', c2dRender);
+}
 
         function hexToRgb(h) {
             return [(h >> 16) & 255, (h >> 8) & 255, h & 255];