Encaja el cielo estrellado en WebGL en 1009 bytes de JavaScript

Dos cosas siempre llenan el alma de nuevas y cada vez más fuertes sorpresas y reverencias, cuanto más a menudo y más pensamos en ellas: este es el cielo estrellado sobre mí y la ley moral en mí. Immanuel Kant

JS1k es una competencia anual donde necesitas acomodar una demo, un juego o cualquier cosa, en 1024 caracteres en JavaScript. Este año, mi demo ocupó el cuarto lugar (hasta el tercero no había suficientes dos puntos). Puede ver la demostración en el sitio web JS1k . Quien no abre o no trabaja, debería verse así:

El código fuente completo y minimizado se encuentra en github . Y debajo del corte hay un análisis de cómo JavaScript se está minimizando para tales concursos.

Descargo de responsabilidad

La belleza principal de la demo es un sombreador de fragmentos de Pablo Roman Andrioli. Pablo es un artista que trabaja con fractales, y en el foro de foros fractales da algunos detalles de los cálculos. Mi tarea consistía en empaquetar un sombreador y un código WebGL de 1024 bytes.

Inicialización de WebGL

El contenedor JS1k al comienzo de la demostración proporciona un contexto WebGL en la variable global g . A pesar de esto, trabajar con WebGL es muy detallado. Por ejemplo, para agregar un sombreador de vértices a un programa, se necesitan 159 caracteres:

// Define a new program p=g.createProgram(); // Basic vertex shader s=g.createShader(VERTEX_SHADER); g.shaderSource(s,"attribute vec2 p;void main(){gl_Position=vec4(p,0,1);}"); // Compile and attach it to the program g.compileShader(s); g.attachShader(p,s); 

Para resolver este problema, todas las soluciones JS1k de los últimos años utilizan un truco con sinónimos de funciones:

 for(i in g){ g[i[0] + i[6]] = g[i]; } 

El bucle agrega un sinónimo para cada función (y para cualquier miembro) del contexto WebGL, que consta de la primera y las 7 letras. Por ejemplo, el programa P reagram se convierte en cP , s hader S ource - sS , etc. Además, enmarcando todo el código with(g) construcción with(g) (que no se puede usar en estos proyectos), obtenemos:

 with(g){ p=cP(); sS(s=cS(35633),'attribute vec2 p;void main(){gl_Position=vec4(p,1,1);}'); ce(s); aS(p,s); } 

Minificación de sombreadores

El sombreador original tiene 1100 caracteres. Las abreviaturas principales: eliminar variables innecesarias y combinar fragmentos similares. Después de todo, pasé el código a través del minificador en línea . Como resultado, quedaba un poco más de 500 bytes del sombreador.

JSCrush

JSCrush es el estándar de facto para comprimir código en tales competiciones. La utilidad convierte el código en aproximadamente la siguiente secuencia:

 _='(i a.style="widMj%;hEjvh;:left",g)g[i[0]+i[6]]=g[i];wiMO.u=g.G1f,x=y=k=g)p=cP(35633"tribute 2 p gl_Posit=4?FN"precis mediump ;G Zt,a,x,y Uf`ord.rg/64!-.f.=a;Zc=+xz,v=+yz;m2 m$cc-cc)s$vv-vv)fJf#Ur`Q,,r+`t*2.,t,-2.rJr#Zg=.1,b=Q;Ui`!Kl=Rl<2Rl++){Uo=r+f*;oQ)-mod(o,2.))Ze,n=e=!;Kd=Rd<2Rd++)oo)/dot(o,o)-3,n+o)-ee=oif(l>6)Q-max(!,.3-i+=b+g,g,g)*n*5*b;.73;g+=.1;}i=mix(i)i,.85lor=4(i*.01.lo?ug?bfO=34962,cB()eV(0vA(2,5120bDO,Tw Int8Array([|,|]35044o=,(Lt@-oa@TrHE/TrWidMx@xy@ydr(6,3requestAnimFrame(L)})(down=upk^=1},movek&&(xX,yY)};),3=funct(e){uOf?,"flo}@ce(saS?,slengM(onmouse ;void ma(){Tw De/1e5);incos(for=abs(gl_FragCo,1g*(sS(s=cS(n*n*.001at.5vecionb*=s(=e.page0,!0.#.r=s;$=m2(?(p@"EeightGunimJ.rm;K(t MthO(gQ1.R0;TneU Z `=j:100z/50!|-3';for(Y in $='|zj`ZUTRQOMKJGE@?$#! ')with(_.split($[Y]))_=join(pop());eval(_) 

El principio de JSCrush se puede ver visualmente en la herramienta para la conversión inversa de código . O leer en detalle en el artículo . En general, esto está codificando con un diccionario:

1. Encontramos un personaje que no se usa en el código
2. Encontramos fragmentos repetidos en el código que reemplazamos con el carácter del primer párrafo
3. Reemplace la cadena con un caracter
4. Repita 1-3 hasta que el resultado sea más pequeño que el código fuente.

Optimización

Después de todas las operaciones, todavía me quedaban unos 30 caracteres, que podrían usarse para optimizar el rendimiento. Al cargar la demostración, puede especificar el tamaño del lienzo: pantalla completa o tamaño fijo. El lanzamiento en pantalla completa es hermoso, pero el sombreador de fragmentos se llama para cada píxel y funciona lentamente. La solución fue pedirle al lienzo JS1k un tamaño fijo (elegí 640x640), y luego aumentarlo a pantalla completa en el código:

 a.style='width:100%;height:100vh;float:left'; 

Luego, la imagen ocupa toda la pantalla, pero el sombreador se ejecuta solo para cada píxel del tamaño del lienzo original.