spite
diff --git a/‎src/assets/star.svg
Copy file name to clipboard
+1Lines changed: 1 addition & 0 deletions b/‎src/assets/star.svg
Copy file name to clipboard
+1Lines changed: 1 addition & 0 deletions
diff --git a/‎src/glsl-optimizer.mem.js
Copy file name to clipboard
1.3 MB b/‎src/glsl-optimizer.mem.js
Copy file name to clipboard
1.3 MB
diff --git a/‎src/glsl-optimizer.min.js
Copy file name to clipboard
+30Lines changed: 30 additions & 0 deletions b/‎src/glsl-optimizer.min.js
Copy file name to clipboard
+30Lines changed: 30 additions & 0 deletions
diff --git a/‎src/panel.html
Copy file name to clipboard
+12-9Lines changed: 12 additions & 9 deletions b/‎src/panel.html
Copy file name to clipboard
+12-9Lines changed: 12 additions & 9 deletions
diff --git a/‎src/panel.js
Copy file name to clipboard
+41-2Lines changed: 41 additions & 2 deletions b/‎src/panel.js
Copy file name to clipboard
+41-2Lines changed: 41 additions & 2 deletions
@@ -8,7 +8,7 @@
 <link href="./codemirror/dialog.css" rel="stylesheet">
 <script src="./codemirror/searchcursor.js"></script>
 <script src="./codemirror/search.js"></script>
-<script src="./base64.js"></script>
+<script src="./glsl-optimizer.min.js"></script>
 <style>
 *{ box-sizing: border-box; margin: 0; padding: 0; font-size: 12px;}
 body{ background-color: #eee; -webkit-user-select: none; cursor: default; }
@@ -18,7 +18,7 @@
 #list li { padding: 5px 10px; border-bottom: 1px solid #e5e5e5; cursor: pointer; }
 #list li:hover{ background-color: rgba(56, 121, 217, 0.1); }
 #list li.active{ background-color: rgb(56, 121, 217); color: white;}
-#editorContainer{ position: absolute; left: 200px; right: 0; top: 0; bottom: 0;}
+#editorContainer{ position: absolute; left: 200px; right: 0; top: 0; bottom: 0; background-color: #eee;}
 #vs-panel, #fs-panel{ transition: background-color 150ms ease-out }
 #vs-panel{ position: absolute; left: 0; right: 50%; top: 0; bottom: 0; height: 100%; width: 50%; }
 #fs-panel{ position: absolute; left: 50%; right: 0; top: 0; bottom: 0; height: 100%; width: 50%; }
@@ -36,9 +36,10 @@
 #info button{ margin-bottom: 1em;}
 #info a{ color: #4c9ed9; }
 #info a:hover{ color: #202020;}
-.go-fullscreen{ background-image: url( assets/fs.svg ); width: 15px; height: 15px; display: block; position: absolute; top: 5px; right: 5px; background-size: 15px 15px; cursor: pointer; }
-.fullscreen .go-fullscreen{ background-image: url( assets/fs_exit.svg ); }
-.go-format{ background-image: url( assets/format.svg ); width: 15px; height: 15px; display: block; position: absolute; top: 5px; right: 25px; background-size: 15px 15px; cursor: pointer; }
+.go-fullscreen{ background-image: url(assets/fs.svg); width: 15px; height: 15px; display: block; position: absolute; top: 5px; right: 5px; background-size: 15px 15px; cursor: pointer; }
+.fullscreen .go-fullscreen{ background-image: url(assets/fs_exit.svg); }
+.go-format{ background-image: url(assets/format.svg); width: 15px; height: 15px; display: block; position: absolute; top: 5px; right: 45px; background-size: 15px 15px; cursor: pointer; }
+.go-optimise{ background-image: url(assets/star.svg); width: 15px; height: 15px; display: block; position: absolute; top: 5px; right: 25px; background-size: 15px 15px; cursor: pointer; }
 .hide{ display: none;}
 .CodeMirror{ border: 1px solid #a6a6a6; border-right: 1px solid transparent; border-top: 1px solid transparent; }
 .CodeMirror-focused{ border: 1px solid #4c9ed9; border-right: 1px solid #4c9ed9; border-top: 1px solid #4c9ed9; }
@@ -51,8 +52,10 @@
 #toolbarContainer{ position: absolute; left: 0; bottom: 0; height: 25px; width: 200px; }
 #toolbarContainer li{ width: 25px; height: 25px; float: left; }
 #toolbarContainer a{ width: 21px; height: 21px; margin: 2px; display: block; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain;}
-#settingsButton{ background-image: url( assets/gears.svg ); }
-#highlightButton{ background-image: url( assets/eye.svg ); }
+#settingsButton{ background-image: url(assets/gears.svg); }
+#highlightButton{ background-image: url(assets/eye.svg); }
+.vertical #vs-panel{ left: 0; right: 0; top: 0; bottom: auto; width: 100%; height: 50%; }
+.vertical #fs-panel{ left: 0; right: 0; bottom: 0; height: 50%; top: auto; width: 100%; }
 </style>
 </head>
 <body>
@@ -76,10 +79,10 @@ <h1>WebGL GLSL shader editor extension<br/>v1.0.14 (beta)</h1>
 	</ul>
 	<div id="editorContainer">
 		<div id="vs-panel">
-			<div id="vs-footer" class="footer" ><p>Vertex Shader | <span id="vs-count" ></span></p> <a id="vs-format" title="Pretty print" class="go-format" ></a> <a id="vs-fullscreen" title="Go fullscreen" class="go-fullscreen" ></a></div>
+			<div id="vs-footer" class="footer" ><p>Vertex Shader | <span id="vs-count" ></span></p> <a id="vs-format" title="Pretty print" class="go-format" ></a> <a id="vs-optimise" title="Optimise" class="go-optimise" ></a> <a id="vs-fullscreen" title="Go fullscreen" class="go-fullscreen" ></a></div>
 		</div>
 		<div id="fs-panel">
-			<div id="fs-footer" class="footer" ><p>Fragment Shader | <span id="fs-count" ></span></p> <a id="fs-format" title="Pretty print" class="go-format" ></a> <a id="fs-fullscreen" title="Go fullscreen" class="go-fullscreen" ></a></div>
+			<div id="fs-footer" class="footer" ><p>Fragment Shader | <span id="fs-count" ></span></p> <a id="fs-format" title="Pretty print" class="go-format" ></a> <a id="fs-optimise" title="Optimise" class="go-optimise" ></a> <a id="fs-fullscreen" title="Go fullscreen" class="go-fullscreen" ></a></div>
 		</div>
 	</div>
 </div>
 
@@ -496,6 +496,7 @@ function f() {
 		if( name === '' ) {
 
 			//#define SHADER_NAME_B64 44K344Kn44O844OA44O8
+			//#define SHADER_NAME_B64 8J+YjvCfmIE=
 
 			var re = /#define[\s]+SHADER_NAME_B64[\s]+([\S]+)(\n|$)/gi;
 			if ((m = re.exec( source)) !== null) {
@@ -621,7 +622,8 @@ function f() {
 
 		fs = fs.replace( /\s+main\s*\(/, ' ShaderEditorInternalMain(' );
 		fs += '\r\n' + 'void main() { ShaderEditorInternalMain(); gl_FragColor.rgb *= vec3(1.,0.,1.); }';
-
+//		fs += '\r\n' + 'void main() { ShaderEditorInternalMain(); float c = smoothstep( .4, .6, mod( .01 * ( gl_FragCoord.x - gl_FragCoord.y ), 1. ) ); gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * vec3( 1.,0.,1. ), c ); }';
+ 
 		onUpdateProgram( id, vs, fs );
 
 	}
@@ -935,6 +937,7 @@ backgroundPageConnection.onMessage.addListener( function( msg ) {
 			info.style.display = 'none';
 			waiting.style.display = 'none';
 			container.style.display = 'block';
+			onWindowResize();
 			var li = document.createElement( 'li' );
 			li.addEventListener( 'click', function() {
 				selectProgram( this );
@@ -1108,6 +1111,8 @@ function testShader( type, source, code ) {
 
 }
 
+var optimize_glsl = Module.cwrap('optimize_glsl', 'string', ['string', 'number', 'number']);
+
 document.getElementById( 'vs-format' ).addEventListener( 'click', function( e ) {
 
 	var source = vSEditor.getValue();
@@ -1164,6 +1169,32 @@ document.getElementById( 'fs-fullscreen' ).addEventListener( 'click', function(
 
 } );
 
+document.getElementById( 'vs-optimise' ).addEventListener( 'click', function( e ) {
+
+	logMsg( 'vs optimise' );
+	var source = vSEditor.getValue();
+
+	var res = optimize_glsl( source, 2, true );
+	vSEditor.setValue( res );
+	updateVSCode();
+
+	e.preventDefault();
+
+} );
+
+document.getElementById( 'fs-optimise' ).addEventListener( 'click', function( e ) {
+
+	logMsg( 'fs optimise' );
+	var source = fSEditor.getValue();
+
+	var res = optimize_glsl( source, 2, false );
+	fSEditor.setValue( res );
+	updateFSCode();
+
+	e.preventDefault();
+
+} );
+
 document.getElementById( 'highlightButton' ).addEventListener( 'click', function( e ) {
 
 	settings.highlight = !settings.highlight;
@@ -1175,4 +1206,12 @@ document.getElementById( 'highlightButton' ).addEventListener( 'click', function
 
 	e.preventDefault();
 
-} );
+} );
+
+window.addEventListener( 'resize', onWindowResize );
+
+function onWindowResize() {
+
+	editorContainer.classList.toggle( 'vertical', editorContainer.clientWidth < editorContainer.clientHeight );
+	
+}