Skip to content

Instantly share code, notes, and snippets.

@doxas

doxas/minify.html

Last active August 29, 2015 14:06
Show Gist options
  • Save doxas/dafaf3939746d9416ccb to your computer and use it in GitHub Desktop.
Save doxas/dafaf3939746d9416ccb to your computer and use it in GitHub Desktop.
Download ZIP
glsl_asset_minify
Raw
minify.html
<!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>
@cx20
Copy link

cx20 commented Sep 9, 2014

やっつけですが、以下を試したところ1KBくらいまで圧縮できました。

    1. スタイルを削除
<style>
*{
  margin:0;
  padding:0;
  overflow:hidden;
}
html,body{
  height:100%
}
</style>
    1. タイトルを削除
<title>2.5k asset</title>
    1. 宣言を省略
var a,b,c,d,e,f,g,p,t,u,v,w,x,y,z;
    1. エラー処理を省略
if(!g.getProgramParameter(p,g.LINK_STATUS)){
  alert(...);
  return;
}
    1. 描画に不要な関数の削除
function k(h){
  e=(h.keyCode!==27);
}
    1. 定数をマジックナンバーに置き換え
定数 値
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
    1. 機械的にコード圧縮

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(_)

@doxas
Copy link
Author

doxas commented Sep 10, 2014

cx20 さん、さすがですね。
一応ひな形として使うソースを今考えていて、タイトルや CSS はそのまま残しておこうかなと思っていますが非常に参考になりました。

定数の数値化はやろうと思っていたので、一覧にしていただいて助かりましたｗ

@cx20
Copy link

cx20 commented Sep 10, 2014

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バイト程度まで圧縮できるようです。

@doxas
Copy link
Author

doxas commented Sep 10, 2014

これは実に使えそうな TIPS ですね！
確かに冴えたやり方だと思います。さすが Tojicode さん、考えることが素晴らしいですね。応用して組み込んでみようと思います。

cx20 さんも、わざわざ調べていただいてありがとうございます！

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment