From d1d2d711563bf49c8a7f96c3ab136ebe1bf575a5 Mon Sep 17 00:00:00 2001
From: Xavier Ho <contact@xavierho.com>
Date: Wed, 12 Apr 2017 15:28:10 +1000
Subject: [PATCH 1/2] Minimum change to glsl-sandbox to get WebGL 2.0 working

---
 static/index.html    | 79 ++++++++++++++++++++++++--------------------
 static/js/helpers.js |  3 +-
 2 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/static/index.html b/static/index.html
index 2b8f533..a563a86 100755
--- a/static/index.html
+++ b/static/index.html
@@ -63,14 +63,15 @@
 		<script src="js/codemirror.js"></script>
 		<script src="js/glsl.js"></script>
 
-		<script id="example" type="x-shader/x-fragment">precision mediump float;
-
-#extension GL_OES_standard_derivatives : enable
+		<script id="example" type="x-shader/x-fragment">#version 300 es
+precision mediump float;
 
 uniform float time;
 uniform vec2 mouse;
 uniform vec2 resolution;
 
+out vec4 fragColor;
+
 void main( void ) {
 
 	vec2 position = ( gl_FragCoord.xy / resolution.xy ) + mouse / 4.0;
@@ -81,29 +82,32 @@
 	color += sin( position.x * sin( time / 5.0 ) * 10.0 ) + sin( position.y * sin( time / 35.0 ) * 80.0 );
 	color *= sin( time / 10.0 ) * 0.5;
 
-	gl_FragColor = vec4( vec3( color, color * 0.5, sin( color + time / 3.0 ) * 0.75 ), 1.0 );
+	fragColor = vec4( vec3( color, color * 0.5, sin( color + time / 3.0 ) * 0.75 ), 1.0 );
 
-}</script>
+}
+		</script>
 
-		<script id="fragmentShader" type="x-shader/x-fragment">
+		<script id="fragmentShader" type="x-shader/x-fragment">#version 300 es
 
 			precision mediump float;
 
 			uniform vec2 resolution;
-			uniform sampler2D texture;
+			uniform sampler2D tex;
+
+			out vec4 fragColor;
 
 			void main() {
 
 				vec2 uv = gl_FragCoord.xy / resolution.xy;
-				gl_FragColor = texture2D( texture, uv );
+				fragColor = texture( tex, uv );
 
 			}
 
 		</script>
 
-		<script id="vertexShader" type="x-shader/x-vertex">
+		<script id="vertexShader" type="x-shader/x-vertex">#version 300 es
 
-			attribute vec3 position;
+			in vec3 position;
 
 			void main() {
 
@@ -113,11 +117,11 @@
 
 		</script>
 
-		<script id="surfaceVertexShader" type="x-shader/x-vertex">
+		<script id="surfaceVertexShader" type="x-shader/x-vertex">#version 300 es
 
-			attribute vec3 position;
-			attribute vec2 surfacePosAttrib;
-			varying vec2 surfacePosition;
+			in vec3 position;
+			in vec2 surfacePosAttrib;
+			out vec2 surfacePosition;
 
 			void main() {
 
@@ -286,19 +290,22 @@
 				add_server_buttons();
 
 				// Initialise WebGL
+				var contextAttributes = { preserveDrawingBuffer: true };
 
 				try {
 
-					gl = canvas.getContext( 'experimental-webgl', { preserveDrawingBuffer: true } );
+					gl  = canvas.getContext( 'webgl2', contextAttributes )
+					   || canvas.getContext( 'webgl', contextAttributes )
+					   || canvas.getContext( 'experimental-webgl', contextAttributes );
 
-				} catch( error ) { }
+				} catch ( error ) { }
 
 				if ( !gl ) {
 
 					alert("WebGL not supported, but code will be shown.");
 
 				} else {
-					
+
 					// enable dFdx, dFdy, fwidth
 					gl.getExtension('OES_standard_derivatives');
 
@@ -351,7 +358,7 @@
 						event.preventDefault();
 					}
 				}, false );
-				
+
 				if (gl) {
 
 					var surfaceMouseDown = function ( event ) {
@@ -387,7 +394,7 @@
 					canvas.addEventListener( 'contextmenu', noContextMenu, false);
 					panButton.addEventListener( 'contextmenu', noContextMenu, false);
 				}
-				
+
 				var clientXLast, clientYLast;
 
 				document.addEventListener( 'mousemove', function ( event ) {
@@ -404,10 +411,10 @@
 					stopHideUI();
 
 					var codeElement, dx, dy;
-					
+
 					parameters.mouseX = clientX / window.innerWidth;
 					parameters.mouseY = 1 - clientY / window.innerHeight;
-						
+
 					if (resizer.isResizing) {
 
 						resizer.currentWidth = Math.max(Math.min(clientX - resizer.offsetMouseX, resizer.maxWidth), resizer.minWidth);
@@ -517,9 +524,9 @@
 				if (gl) {
 
 					surface.width = surface.height * parameters.screenWidth / parameters.screenHeight;
-					
+
 					var halfWidth = surface.width * 0.5, halfHeight = surface.height * 0.5;
-					
+
 					gl.bindBuffer( gl.ARRAY_BUFFER, surface.buffer );
 					gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( [
 						surface.centerX - halfWidth, surface.centerY - halfHeight,
@@ -542,11 +549,11 @@
 			}
 
 			function compile() {
-			
+
 				if (!gl) {
-				
+
 					if (!getWebGL) {
-					
+
 						getWebGL = true;
 						compileButton.addEventListener( 'click', function ( event ) {
 
@@ -557,10 +564,10 @@
 						compileButton.style.color = '#ff0000';
 						compileButton.textContent = 'WebGL not supported!';
 						set_save_button('hidden');
-						
+
 					}
 					return;
-					
+
 				}
 
 				var program = gl.createProgram();
@@ -636,7 +643,7 @@
 			}
 
 			function compileScreenProgram() {
-			
+
 				if (!gl) { return; }
 
 				var program = gl.createProgram();
@@ -740,7 +747,7 @@
 
 
 			//
-			
+
 			function htmlEncode(str){
 
 				return String(str)
@@ -755,7 +762,7 @@
 			//
 
 			function createShader( src, type ) {
-			
+
 				var shader = gl.createShader( type );
 				var line, lineNum, lineError, index = 0, indexEnd;
 
@@ -773,7 +780,7 @@
 				if ( !gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) {
 
 					var error = gl.getShaderInfoLog( shader );
-					
+
 					// Remove trailing linefeed, for FireFox's benefit.
 					while ((error.length > 1) && (error.charCodeAt(error.length - 1) < 32)) {
 						error = error.substring(0, error.length - 1);
@@ -851,11 +858,11 @@
 				computeSurfaceCorners();
 
 				if (gl) {
-				
+
 					gl.viewport( 0, 0, canvas.width, canvas.height );
 
 					createRenderTargets();
-					
+
 				}
 			}
 
@@ -886,7 +893,7 @@
 
 				gl.bindBuffer( gl.ARRAY_BUFFER, surface.buffer );
 				gl.vertexAttribPointer( surface.positionAttribute, 2, gl.FLOAT, false, 0, 0 );
-				
+
 				gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
 				gl.vertexAttribPointer( vertexPosition, 2, gl.FLOAT, false, 0, 0 );
 
@@ -909,7 +916,7 @@
 
 				gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
 				gl.vertexAttribPointer( screenVertexPosition, 2, gl.FLOAT, false, 0, 0 );
-				
+
 				gl.activeTexture( gl.TEXTURE1 );
 				gl.bindTexture( gl.TEXTURE_2D, frontTarget.texture );
 
diff --git a/static/js/helpers.js b/static/js/helpers.js
index 6987ca8..f495873 100755
--- a/static/js/helpers.js
+++ b/static/js/helpers.js
@@ -29,7 +29,8 @@ function load_url_code() {
 
 	} else {
 
-		readURL( '5d00000100b70200000000000000381c88cdaf8125d4569ed1e6e6c09c2fe72b7d489ad9d27ce026c1d90b38e6a986e7c482f98001c7d016ca8db7da32debe67fc602659f4e96ae150d75ea26ae8e8f4056e0b845d0814a2acee3a47ec45af66fb0405385eaedd50db968497c1cbbd79f0634d5534182b2093986dae5ac7e840eb137f39f5b27efbb488f4e85faa6f4c942182673e75dca44f7ffbd8c25c5a2763cb750b9b4e14b9fd5c15ca81ed7ef88a4f77a114cd2d7f675b6a05b467bd164f4058dd3250e6fcdc9d7c195dccdc63b304e1f8c7aaccb1edb7992aa1341e96aa6e8b1ca044e70207be752de1b41e4e07843ab895b2a1995b97085afff70f5eff9d2b630a4c5e43e7ce6f977616d57c97935342e48d0ee9ad3462804ae5608b6872b9749632bf8514fea3ebf9d64b10deb3ff041395050deffbf038e3' );
+		// This is the default code to be loaded
+		readURL( '5d00000100a90200000000000000119d88a75623ed1f97decafdbca9f60d5d9aea5c15090d6b99d1bf278123255f7071406b0031147756a95f17500c89f6bb5b982f2996ce0eeec087a302f677faa8ff536d4904bd9e7deb9045d178189362a624333f49df388b60d0d4a174e5d774706548f6322bbca185d84070b143366137ea50788b60c695e83c44b476a2ca324430e11650bb06cc89bc7a19bfd7b93c1a5d382895d9db4865ff7514599a0c6ef3e5e4b232372ee947a42811132b7fa30d635c41c253def1996f6bf984204573e8dc43594c7c9446628b75e9b3ec3c79e14df44b5644785e0ec9ab4ad858a873a001868a7a49ab5d9ad3c7dd40b28e4dc1a4965078b9ce03a8ff5e2fd312cf7031476ad29a4edf64fe07de6907e00913a59f97834d305b9b8c4ffa85b049' );
 
 	}
 }

From a592e95212bc91cac61c488667e1465a83e83c82 Mon Sep 17 00:00:00 2001
From: Xavier Ho <contact@xavierho.com>
Date: Wed, 12 Apr 2017 22:49:11 +1000
Subject: [PATCH 2/2] Added WebGL 1.0 backwards support for mobile phones and
 older devices

---
 static/index.html    | 90 ++++++++++++++++++++++++++++++++++++++++----
 static/js/helpers.js |  4 +-
 2 files changed, 85 insertions(+), 9 deletions(-)

diff --git a/static/index.html b/static/index.html
index a563a86..718938b 100755
--- a/static/index.html
+++ b/static/index.html
@@ -87,7 +87,22 @@
 }
 		</script>
 
-		<script id="fragmentShader" type="x-shader/x-fragment">#version 300 es
+		<script id="fragmentShader" type="x-shader/x-fragment">
+
+			precision mediump float;
+			uniform vec2 resolution;
+			uniform sampler2D texture;
+
+			void main() {
+
+				vec2 uv = gl_FragCoord.xy / resolution.xy;
+				gl_FragColor = texture2D( texture, uv );
+
+			}
+
+		</script>
+
+		<script id="fragmentShader300es" type="x-shader/x-fragment">#version 300 es
 
 			precision mediump float;
 
@@ -105,7 +120,30 @@
 
 		</script>
 
-		<script id="vertexShader" type="x-shader/x-vertex">#version 300 es
+		<script id="vertexShader" type="x-shader/x-vertex">
+			attribute vec3 position;
+
+			void main() {
+
+				gl_Position = vec4( position, 1.0 );
+
+			}
+		</script>
+
+		<script id="surfaceVertexShader" type="x-shader/x-vertex">
+			attribute vec3 position;
+			attribute vec2 surfacePosAttrib;
+			varying vec2 surfacePosition;
+
+			void main() {
+
+				surfacePosition = surfacePosAttrib;
+				gl_Position = vec4( position, 1.0 );
+
+			}
+		</script>
+
+		<script id="vertexShader300es" type="x-shader/x-vertex">#version 300 es
 
 			in vec3 position;
 
@@ -117,7 +155,7 @@
 
 		</script>
 
-		<script id="surfaceVertexShader" type="x-shader/x-vertex">#version 300 es
+		<script id="surfaceVertexShader300es" type="x-shader/x-vertex">#version 300 es
 
 			in vec3 position;
 			in vec2 surfacePosAttrib;
@@ -134,6 +172,13 @@
 
 		<script>
 
+			var startingFragmentShader = '5d00000100b70200000000000000381c88cdaf8125d4569ed1e6e6c09c2fe72b7d489ad9d27ce026c1d90b38e6a986e7c482f98001c7d016ca8db7da32debe67fc602659f4e96ae150d75ea26ae8e8f4056e0b845d0814a2acee3a47ec45af66fb0405385eaedd50db968497c1cbbd79f0634d5534182b2093986dae5ac7e840eb137f39f5b27efbb488f4e85faa6f4c942182673e75dca44f7ffbd8c25c5a2763cb750b9b4e14b9fd5c15ca81ed7ef88a4f77a114cd2d7f675b6a05b467bd164f4058dd3250e6fcdc9d7c195dccdc63b304e1f8c7aaccb1edb7992aa1341e96aa6e8b1ca044e70207be752de1b41e4e07843ab895b2a1995b97085afff70f5eff9d2b630a4c5e43e7ce6f977616d57c97935342e48d0ee9ad3462804ae5608b6872b9749632bf8514fea3ebf9d64b10deb3ff041395050deffbf038e3';
+
+			var startingFragmentShader300es = '5d00000100a90200000000000000119d88a75623ed1f97decafdbca9f60d5d9aea5c15090d6b99d1bf278123255f7071406b0031147756a95f17500c89f6bb5b982f2996ce0eeec087a302f677faa8ff536d4904bd9e7deb9045d178189362a624333f49df388b60d0d4a174e5d774706548f6322bbca185d84070b143366137ea50788b60c695e83c44b476a2ca324430e11650bb06cc89bc7a19bfd7b93c1a5d382895d9db4865ff7514599a0c6ef3e5e4b232372ee947a42811132b7fa30d635c41c253def1996f6bf984204573e8dc43594c7c9446628b75e9b3ec3c79e14df44b5644785e0ec9ab4ad858a873a001868a7a49ab5d9ad3c7dd40b28e4dc1a4965078b9ce03a8ff5e2fd312cf7031476ad29a4edf64fe07de6907e00913a59f97834d305b9b8c4ffa85b049';
+
+			var gl;
+			var glVersion;
+
 			initialize_helper();
 
 			var compressor=initialize_compressor();
@@ -306,6 +351,15 @@
 
 				} else {
 
+					// Version string looks like "WebGL x.0 (...)"
+					var versionString = gl.getParameter(gl.VERSION).substr(0, 9);
+					console.info("Rendering using", versionString);
+					if (versionString === "WebGL 2.0") {
+						glVersion = 2.0;
+					} else { 	// go for lowest
+						glVersion = 1.0;
+					}
+
 					// enable dFdx, dFdy, fwidth
 					gl.getExtension('OES_standard_derivatives');
 
@@ -467,7 +521,18 @@
 
 				onWindowResize();
 				window.addEventListener( 'resize', onWindowResize, false );
-				load_url_code();
+
+				// Depending on the WebGL version, we load a different starting fragment
+				// shader.
+				if (glVersion >= 2.0) {
+
+					load_url_code(startingFragmentShader300es);
+
+				} else {
+
+					load_url_code(startingFragmentShader);
+
+				}
 
 				compileScreenProgram();
 
@@ -572,7 +637,12 @@
 
 				var program = gl.createProgram();
 				var fragment = code.getValue();
-				var vertex = document.getElementById( 'surfaceVertexShader' ).textContent;
+
+				if (glVersion >= 2.0) {
+					var vertex = document.getElementById( 'surfaceVertexShader300es' ).text.trim();
+				} else {
+					var vertex = document.getElementById( 'surfaceVertexShader' ).text.trim();
+				}
 
 				var vs = createShader( vertex, gl.VERTEX_SHADER );
 				var fs = createShader( fragment, gl.FRAGMENT_SHADER );
@@ -647,8 +717,14 @@
 				if (!gl) { return; }
 
 				var program = gl.createProgram();
-				var fragment = document.getElementById( 'fragmentShader' ).textContent;
-				var vertex = document.getElementById( 'vertexShader' ).textContent;
+
+				if (glVersion >= 2.0) {
+					var fragment = document.getElementById( 'fragmentShader300es' ).text.trim();
+					var vertex = document.getElementById( 'vertexShader300es' ).text.trim();
+				} else {
+					var fragment = document.getElementById( 'fragmentShader' ).text.trim();
+					var vertex = document.getElementById( 'vertexShader' ).text.trim();
+				}
 
 				var vs = createShader( vertex, gl.VERTEX_SHADER );
 				var fs = createShader( fragment, gl.FRAGMENT_SHADER );
diff --git a/static/js/helpers.js b/static/js/helpers.js
index f495873..e1225b3 100755
--- a/static/js/helpers.js
+++ b/static/js/helpers.js
@@ -7,7 +7,7 @@ function initialize_compressor() {
 function initialize_helper() {
 }
 
-function load_url_code() {
+function load_url_code( lzma_compressed_code ) {
 	if ( window.location.hash ) {
 
 		var hash = window.location.hash.substr( 1 );
@@ -30,7 +30,7 @@ function load_url_code() {
 	} else {
 
 		// This is the default code to be loaded
-		readURL( '5d00000100a90200000000000000119d88a75623ed1f97decafdbca9f60d5d9aea5c15090d6b99d1bf278123255f7071406b0031147756a95f17500c89f6bb5b982f2996ce0eeec087a302f677faa8ff536d4904bd9e7deb9045d178189362a624333f49df388b60d0d4a174e5d774706548f6322bbca185d84070b143366137ea50788b60c695e83c44b476a2ca324430e11650bb06cc89bc7a19bfd7b93c1a5d382895d9db4865ff7514599a0c6ef3e5e4b232372ee947a42811132b7fa30d635c41c253def1996f6bf984204573e8dc43594c7c9446628b75e9b3ec3c79e14df44b5644785e0ec9ab4ad858a873a001868a7a49ab5d9ad3c7dd40b28e4dc1a4965078b9ce03a8ff5e2fd312cf7031476ad29a4edf64fe07de6907e00913a59f97834d305b9b8c4ffa85b049' );
+		readURL( lzma_compressed_code );
 
 	}
 }