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> |
これは実に使えそうな TIPS ですね!
確かに冴えたやり方だと思います。さすが Tojicode さん、考えることが素晴らしいですね。応用して組み込んでみようと思います。
cx20 さんも、わざわざ調べていただいてありがとうございます!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
js1k.com の WebGL 投稿作品とかを見ると、定数の数値化とか、シェーダ言語のJavaScript側への組み込みを行っているケースが多いようですね。
さっき「WebGL 1k」でググって見つけた記事ですが
Itty Bitty WebGL
http://blog.tojicode.com/2010/09/itty-bitty-webgl.html
で紹介されていたやり方が、なかなか冴えたやり方だと思いました。
fs と vs のシェーダ作成の処理が実際は「0」と「1」の差なので、共通部品化できるんですね。
http://media.tojicode.com/tiny/1kDemo2.htm
のサンプルがシェーダ込みで 800バイト程度、前回の圧縮ツールで圧縮すると、700バイト程度まで圧縮できるようです。