Last active
August 29, 2015 14:06
-
-
Save doxas/dafaf3939746d9416ccb to your computer and use it in GitHub Desktop.
glsl_asset_minify
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html><meta charset="utf-8"><script id="fs" type="xs/fs">precision mediump float;uniform float t;uniform vec2 r; | |
| // fragment shader code | |
| </script><script id="vs" type="xs/vs">attribute vec3 position;void main(void){gl_Position=vec4(position,1.0);}</script><script>window.onload=function(){var a,b,c,d,e,f,g,p,t,u,v,w,x,y,z;b=function(s){return document.getElementById(s)};w=window;w.addEventListener('keydown',k,true);c=b('c');g=c.getContext('webgl');c.width=x=w.innerWidth;c.height=y=w.innerHeight;v=g.createShader(g.VERTEX_SHADER);g.shaderSource(v,b('vs').text);g.compileShader(v);f=g.createShader(g.FRAGMENT_SHADER);g.shaderSource(f,b('fs').text);g.compileShader(f);if(!g.getShaderParameter(v,g.COMPILE_STATUS)){alert(g.getShaderInfoLog(v));return;}if(!g.getShaderParameter(f,g.COMPILE_STATUS)){alert(g.getShaderInfoLog(f));return;}p=g.createProgram();g.attachShader(p,v);g.attachShader(p,f);g.linkProgram(p);if(!g.getProgramParameter(p,g.LINK_STATUS)){alert(g.getProgramInfoLog(p));return;}e=(p!=null);g.useProgram(p);u=[];u[0]=g.getUniformLocation(p,'t');u[1]=g.getUniformLocation(p,'r');g.bindBuffer(g.ARRAY_BUFFER,g.createBuffer());g.bufferData(g.ARRAY_BUFFER,new Float32Array([-1,1,0,-1,-1,0,1,1,0,1,-1,0]),g.STATIC_DRAW);a=g.getAttribLocation(p,'position');g.enableVertexAttribArray(a);g.vertexAttribPointer(a,3,g.FLOAT,false,0,0);g.clearColor(0,0,0,1);z=Date.now();(function(){if(!e){return;} c.width=x=w.innerWidth;c.height=y=w.innerHeight;g.viewport(0,0,x,y);d=(Date.now()-z)*0.001;g.clear(g.COLOR_BUFFER_BIT);g.uniform1f(u[0],d);g.uniform2fv(u[1],[x,y]);g.drawArrays(g.TRIANGLE_STRIP,0,4);g.flush();setTimeout(arguments.callee,16);})();function k(h){e=(h.keyCode!==27);}};</script><style>*{margin:0;padding:0;overflow:hidden;}html,body{height:100%}</style><title>2.5k asset</title><canvas id="c"></canvas> |
やっつけですが、以下を試したところ1KBくらいまで圧縮できました。
-
- スタイルを削除
<style>
*{
margin:0;
padding:0;
overflow:hidden;
}
html,body{
height:100%
}
</style>-
- タイトルを削除
<title>2.5k asset</title>-
- 宣言を省略
var a,b,c,d,e,f,g,p,t,u,v,w,x,y,z;-
- エラー処理を省略
if(!g.getProgramParameter(p,g.LINK_STATUS)){
alert(...);
return;
}-
- 描画に不要な関数の削除
function k(h){
e=(h.keyCode!==27);
}-
- 定数をマジックナンバーに置き換え
| 定数 | 値 |
|---|---|
| VERTEX_SHADER | 35633 |
| FRAGMENT_SHADER | 35632 |
| COMPILE_STATUS | 35713 |
| LINK_STATUS | 35714 |
| ARRAY_BUFFER | 34962 |
| STATIC_DRAW | 35044 |
| FLOAT | 5126 |
| COLOR_BUFFER_BIT | 16384 |
| TRIANGLE_STRIP | 5 |
-
- 機械的にコード圧縮
http://www.iteral.com/jscrush/
＜変換前＞
window.onload = function() {
b = function(s) {
return document.getElementById(s)
};
w = window;
c = b('c');
g = c.getContext('webgl');
c.width = x = w.innerWidth;
c.height = y = w.innerHeight;
v = g.createShader(35633);
g.shaderSource(v, b('vs').text);
g.compileShader(v);
f = g.createShader(35632);
g.shaderSource(f, b('fs').text);
g.compileShader(f);
g.getShaderParameter(v, 35713);
g.getShaderParameter(f, 35713);
p = g.createProgram();
g.attachShader(p, v);
g.attachShader(p, f);
g.linkProgram(p);
g.getProgramParameter(p, 35714);
g.useProgram(p);
u = [];
u[0] = g.getUniformLocation(p, 't');
u[1] = g.getUniformLocation(p, 'r');
g.bindBuffer(34962, g.createBuffer());
g.bufferData(34962, new Float32Array([-1, 1, 0, -1, -1, 0, 1, 1, 0, 1, -1, 0]), 35044);
a = g.getAttribLocation(p, 'position');
g.enableVertexAttribArray(a);
g.vertexAttribPointer(a, 3, 5126, false, 0, 0);
g.clearColor(0, 0, 0, 1);
z = Date.now();
c.width = x = w.innerWidth;
c.height = y = w.innerHeight;
g.viewport(0, 0, x, y);
d = (Date.now() - z) * 0.001;
g.clear(16384);
g.uniform1f(u[0], d);
g.uniform2fv(u[1], [x, y]);
g.drawArrays(5, 0, 4);
g.flush();
setTimeout(arguments.callee, 16);
} ＜変換結果＞
_="wM.onload!>{b!s>{r?urn docu�. E#�ById(s)};w�wM;c�:c'�g�c. Con�t('webgl'�v�3�v�:v�v�f�2�f�:f�fNv�3Nf�3�p���(�v�f�l�k�G� � p�4�use�G�u�[];J0�t'�J1�r'�b�dB���B�()�b�D&a�new Flo&32�([-+1�-+-1�+1�+-+0]),35044�a�$ ��posi�'�enab#V����(a�v���Po�t�(a�3,5126�false�0�c#@Color(0�0�1�z���$viewport(0�x�y�d�(�>- z>* 0.001;$c#@(16384�u�1f(J0]�d�u�2fv(J1]�[x�y]�draw�s(5�4�flush(�s?Timeout(@gu�s.cal#e�16�};��$��c.wK�x%WK;c.h<�y%H<;�had��, � = �]�$ U���$cre&e�Program P@am?�(�s').�t�compi#/( g?��0��tion�);��&tach/G��niform�Attrib�er��s�Source(�,3571�Array�D&e.now(�Loca�G�'���/(3563�in�tex�ment�uff��(34962�!�func�(#le$g.%�w.�n�&at+1�/S�:b('<eight>) ?et@arG(pJu[KidthM�dowN� / ";for(Y in $="NMKJG@?><:/+&%$#!������������������ � ��������")with(_.split($[Y]))_=join(pop());eval(_)
cx20 さん、さすがですね。
一応ひな形として使うソースを今考えていて、タイトルや CSS はそのまま残しておこうかなと思っていますが非常に参考になりました。
定数の数値化はやろうと思っていたので、一覧にしていただいて助かりましたｗ
js1k.com の WebGL 投稿作品とかを見ると、定数の数値化とか、シェーダ言語のJavaScript側への組み込みを行っているケースが多いようですね。
さっき「WebGL 1k」でググって見つけた記事ですが
Itty Bitty WebGL
http://blog.tojicode.com/2010/09/itty-bitty-webgl.html
で紹介されていたやり方が、なかなか冴えたやり方だと思いました。
fs と vs のシェーダ作成の処理が実際は「0」と「1」の差なので、共通部品化できるんですね。
function l(x, y) {
s = g.createShader(35633 - x);
g.shaderSource(s, y);
g.compileShader(s);
g.attachShader(p, s);
}
l(0, 'attribute vec2 p;uniform float t;void main(){float s=sin(t);float c=cos(t);gl_Position=vec4(p*mat2(c,s,-s,c),1,1);}');
l(1, 'void main(){gl_FragColor=vec4(1,0,0,1);}');http://media.tojicode.com/tiny/1kDemo2.htm
のサンプルがシェーダ込みで 800バイト程度、前回の圧縮ツールで圧縮すると、700バイト程度まで圧縮できるようです。
これは実に使えそうな TIPS ですね！
確かに冴えたやり方だと思います。さすが Tojicode さん、考えることが素晴らしいですね。応用して組み込んでみようと思います。
cx20 さんも、わざわざ調べていただいてありがとうございます！
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
スペースとか改行もできる限り消した。
約 1.8KB なので GLSL のフラグメントシェーダのコードとしておおよそ 2.2KB ほど記述できる。