Skip to content

Commit

Permalink
added glsl-optimiser
Browse files Browse the repository at this point in the history
  • Loading branch information
@spite
spite committed Jul 2, 2015
1 parent 3de7962 commit cd6c59a
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 11 deletions.
1 change: 1 addition & 0 deletions src/assets/star.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/glsl-optimizer.mem.js
View file
Binary file not shown.
30 changes: 30 additions & 0 deletions src/glsl-optimizer.min.js
View file

Large diffs are not rendered by default.

21 changes: 12 additions & 9 deletions src/panel.html
View file
Expand Up @@ -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; }
Expand All @@ -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%; }
Expand All @@ -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; }
Expand All @@ -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>
Expand All @@ -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>
Expand Down
43 changes: 41 additions & 2 deletions src/panel.js
View file
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 );

}
Expand Down Expand Up @@ -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 );
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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;
Expand All @@ -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 );

}

0 comments on commit cd6c59a

Please sign in to comment.