Уместить звездное небо на WebGL в 1009 байт JavaScript01.08.2019 15:20

nxvcxmg7vtr9rwk4jjs_hmw2udw.jpeg?v=1
Две вещи наполняют душу всегда новым и все более сильным удивлением и благоговением, чем чаще и продолжительнее мы размышляем о них, — это звездное небо надо мной и моральный закон во мне. Иммануил Кант

JS1k — ежегодное соревнование, где надо вместить демо, игру или все что угодно, в 1024 символа на JavaScript. В этом году мое демо заняло четвертое место (до третьего не хватило каких-то два балла). Посмотреть демо можно на сайте JS1k. У кого не открывается или не работает, выглядеть должно так:


Минифицированный и полный исходный код лежит на github. А под катом разбор того, как сейчас минифицируют JavaScript для таких конкурсов.


Дискалаймер

Основная красота демо — фрагментный шейдер авторства Pablo Roman Andrioli. Pablo — художник, который работает с фракталами, и на форуме fractalforums рассказывает некоторые подробности вычислений. Моей же задачей было упаковать шейдер и WebGL код в 1024 байта.


Инициализация WebGL

Обертка JS1k при старте демо предоставляет WebGL контекст в глобальной переменной g. Несмотря на это, работа с WebGL очень многословна. Например, чтобы добавить вершинный шейдер к программе необходимо 159 символов: 

// 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);

Для решения этой проблемы во всех решениях JS1k последних нескольких лет применяется трюк с синонимами функций: 

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

Цикл добавляет для каждой функции (и для любого члена) WebGL контекста синоним, который состоит из первой и 7 буквы. Например createProgram становиться cP, shaderSource — cS, и т.д. Дополнительно обрамляя весь код конструкцией with(g) (которую использовать в настоящих проектах нельзя), получаем: 

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


Минификация шейдера

Оригинальный шейдер занимает 1100 символов. Основные сокращения: удаление лишних переменных, и объединение похожих фрагментов. После всего я пропустил код через онлайн минификатор. В результате от шейдера осталось чуть больше 500 байт.


JSCrush

JSCrush — де факто стандарт для сжатия кода в таких соревнования. Утилита превращает код, в приблизительно такую последовательность:


_='(i a.style=…
_='(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(_)

Принцип работы JSCrush можно визуально посмотреть в инструменте для обратного превращения кода. Или почитать подробно в статье. В целом, это кодирование со словарем:


  1. Находим символ, который не используется в коде
  2. Находим повторяющиеся фрагменты в коде, которые заменяем на символ из первого пункта
  3. Заменяем строку на символ
  4. Повторяем 1–3, пока результат меньше чем исходный код


Оптимизация

После всех операций у меня в запасе оставалось еще порядка 30 символов, которые можно было использовать для оптимизации производительности. При загрузки демки, можно указать размер canvas«а: на весь экран или фиксированного размера. Запускать на весь экран — красиво, но фрагментный шейдер вызывается для каждого пикселя и работает медленно. Выходом стало — запросить у JS1k canvas«а фиксированного размера (я выбрал 640×640), а потом в коде его увеличить до полноэкранного: 

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

Тогда изображение занимает весь экран, но шейдер выполняется только на каждый пиксель оригинального размера canvas.

© Habrahabr.ru