Skip to content

Commit cd6c59a

Browse files
spitespite
committed
added glsl-optimiser
1 parent 3de7962 commit cd6c59a

File tree

5 files changed

+84
-11
lines changed

5 files changed

+84
-11
lines changed

‎src/assets/star.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/glsl-optimizer.mem.js‎

1.3 MB
Binary file not shown.

‎src/glsl-optimizer.min.js‎

Lines changed: 30 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/panel.html‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link href="./codemirror/dialog.css" rel="stylesheet">
99
<script src="./codemirror/searchcursor.js"></script>
1010
<script src="./codemirror/search.js"></script>
11-
<script src="./base64.js"></script>
11+
<script src="./glsl-optimizer.min.js"></script>
1212
<style>
1313
*{ box-sizing: border-box; margin: 0; padding: 0; font-size: 12px;}
1414
body{ background-color: #eee; -webkit-user-select: none; cursor: default; }
@@ -18,7 +18,7 @@
1818
#list li { padding: 5px 10px; border-bottom: 1px solid #e5e5e5; cursor: pointer; }
1919
#list li:hover{ background-color: rgba(56, 121, 217, 0.1); }
2020
#list li.active{ background-color: rgb(56, 121, 217); color: white;}
21-
#editorContainer{ position: absolute; left: 200px; right: 0; top: 0; bottom: 0;}
21+
#editorContainer{ position: absolute; left: 200px; right: 0; top: 0; bottom: 0; background-color: #eee;}
2222
#vs-panel, #fs-panel{ transition: background-color 150ms ease-out }
2323
#vs-panel{ position: absolute; left: 0; right: 50%; top: 0; bottom: 0; height: 100%; width: 50%; }
2424
#fs-panel{ position: absolute; left: 50%; right: 0; top: 0; bottom: 0; height: 100%; width: 50%; }
@@ -36,9 +36,10 @@
3636
#info button{ margin-bottom: 1em;}
3737
#info a{ color: #4c9ed9; }
3838
#info a:hover{ color: #202020;}
39-
.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; }
40-
.fullscreen .go-fullscreen{ background-image: url( assets/fs_exit.svg ); }
41-
.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; }
39+
.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; }
40+
.fullscreen .go-fullscreen{ background-image: url(assets/fs_exit.svg); }
41+
.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; }
42+
.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; }
4243
.hide{ display: none;}
4344
.CodeMirror{ border: 1px solid #a6a6a6; border-right: 1px solid transparent; border-top: 1px solid transparent; }
4445
.CodeMirror-focused{ border: 1px solid #4c9ed9; border-right: 1px solid #4c9ed9; border-top: 1px solid #4c9ed9; }
@@ -51,8 +52,10 @@
5152
#toolbarContainer{ position: absolute; left: 0; bottom: 0; height: 25px; width: 200px; }
5253
#toolbarContainer li{ width: 25px; height: 25px; float: left; }
5354
#toolbarContainer a{ width: 21px; height: 21px; margin: 2px; display: block; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain;}
54-
#settingsButton{ background-image: url( assets/gears.svg ); }
55-
#highlightButton{ background-image: url( assets/eye.svg ); }
55+
#settingsButton{ background-image: url(assets/gears.svg); }
56+
#highlightButton{ background-image: url(assets/eye.svg); }
57+
.vertical #vs-panel{ left: 0; right: 0; top: 0; bottom: auto; width: 100%; height: 50%; }
58+
.vertical #fs-panel{ left: 0; right: 0; bottom: 0; height: 50%; top: auto; width: 100%; }
5659
</style>
5760
</head>
5861
<body>
@@ -76,10 +79,10 @@ <h1>WebGL GLSL shader editor extension<br/>v1.0.14 (beta)</h1>
7679
</ul>
7780
<div id="editorContainer">
7881
<div id="vs-panel">
79-
<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>
82+
<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>
8083
</div>
8184
<div id="fs-panel">
82-
<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>
85+
<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>
8386
</div>
8487
</div>
8588
</div>

‎src/panel.js‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -496,6 +496,7 @@ function f() {
496496
if( name === '' ) {
497497

498498
//#define SHADER_NAME_B64 44K344Kn44O844OA44O8
499+
//#define SHADER_NAME_B64 8J+YjvCfmIE=
499500

500501
var re = /#define[\s]+SHADER_NAME_B64[\s]+([\S]+)(\n|$)/gi;
501502
if ((m = re.exec( source)) !== null) {
@@ -621,7 +622,8 @@ function f() {
621622

622623
fs = fs.replace( /\s+main\s*\(/, ' ShaderEditorInternalMain(' );
623624
fs += '\r\n' + 'void main() { ShaderEditorInternalMain(); gl_FragColor.rgb *= vec3(1.,0.,1.); }';
624-
625+
// 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 ); }';
626+
625627
onUpdateProgram( id, vs, fs );
626628

627629
}
@@ -935,6 +937,7 @@ backgroundPageConnection.onMessage.addListener( function( msg ) {
935937
info.style.display = 'none';
936938
waiting.style.display = 'none';
937939
container.style.display = 'block';
940+
onWindowResize();
938941
var li = document.createElement( 'li' );
939942
li.addEventListener( 'click', function() {
940943
selectProgram( this );
@@ -1108,6 +1111,8 @@ function testShader( type, source, code ) {
11081111

11091112
}
11101113

1114+
var optimize_glsl = Module.cwrap('optimize_glsl', 'string', ['string', 'number', 'number']);
1115+
11111116
document.getElementById( 'vs-format' ).addEventListener( 'click', function( e ) {
11121117

11131118
var source = vSEditor.getValue();
@@ -1164,6 +1169,32 @@ document.getElementById( 'fs-fullscreen' ).addEventListener( 'click', function(
11641169

11651170
} );
11661171

1172+
document.getElementById( 'vs-optimise' ).addEventListener( 'click', function( e ) {
1173+
1174+
logMsg( 'vs optimise' );
1175+
var source = vSEditor.getValue();
1176+
1177+
var res = optimize_glsl( source, 2, true );
1178+
vSEditor.setValue( res );
1179+
updateVSCode();
1180+
1181+
e.preventDefault();
1182+
1183+
} );
1184+
1185+
document.getElementById( 'fs-optimise' ).addEventListener( 'click', function( e ) {
1186+
1187+
logMsg( 'fs optimise' );
1188+
var source = fSEditor.getValue();
1189+
1190+
var res = optimize_glsl( source, 2, false );
1191+
fSEditor.setValue( res );
1192+
updateFSCode();
1193+
1194+
e.preventDefault();
1195+
1196+
} );
1197+
11671198
document.getElementById( 'highlightButton' ).addEventListener( 'click', function( e ) {
11681199

11691200
settings.highlight = !settings.highlight;
@@ -1175,4 +1206,12 @@ document.getElementById( 'highlightButton' ).addEventListener( 'click', function
11751206

11761207
e.preventDefault();
11771208

1178-
} );
1209+
} );
1210+
1211+
window.addEventListener( 'resize', onWindowResize );
1212+
1213+
function onWindowResize() {
1214+
1215+
editorContainer.classList.toggle( 'vertical', editorContainer.clientWidth < editorContainer.clientHeight );
1216+
1217+
}

0 commit comments

Comments
 (0)