Skip to content

Instantly share code, notes, and snippets.

@doxas
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.
glsl_asset_minify
<!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 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