From caf08ee32d901495df1e4d8563d12828f458a563 Mon Sep 17 00:00:00 2001
From: HF <pixelplanetdev@gmail.com>
Date: Wed, 22 Jan 2020 15:34:46 +0100
Subject: [PATCH] Add 3d voxel canvas Add Canvas Selection Menu Improve
 Rendering Move ChunkRGB into seperate file

---
 public/preview0.png                           |  Bin 0 -> 26306 bytes
 public/preview1.png                           |  Bin 0 -> 24651 bytes
 public/preview2.png                           |  Bin 0 -> 12581 bytes
 public/voxeltest.html                         |   21 -
 src/actions/index.js                          |  111 +-
 src/actions/types.js                          |    3 +-
 src/canvases.json                             |   55 +-
 src/client.js                                 |  241 +-
 src/components/App.jsx                        |   38 +-
 src/components/CanvasItem.jsx                 |  105 +
 src/components/CanvasSelectModal.jsx          |   53 +
 src/components/CanvasSwitchButton.jsx         |   21 +-
 src/components/CoordinatesBox.jsx             |   18 +-
 src/components/Menu.jsx                       |    2 -
 src/components/ModalRoot.jsx                  |    2 +
 src/components/NotifyBox.jsx                  |   11 +-
 src/components/UI.jsx                         |   42 +
 src/components/VoxelButton.jsx                |   24 -
 src/controls/OrbitControls.js                 | 1164 ---------
 src/controls/PixelPainterControls.js          |  210 ++
 src/controls/VoxelPainterControls.js          | 2200 ++++++++---------
 src/controls/keypress.js                      |   37 +
 src/core/Image.js                             |   25 +-
 src/core/constants.js                         |    3 +
 src/core/draw.js                              |   44 +-
 src/core/mail.js                              |    2 +-
 src/core/tilesBackup.js                       |   10 +-
 src/core/tileserver.js                        |   28 +-
 src/core/utils.js                             |   81 +-
 src/data/models/RedisCanvas.js                |   21 +-
 src/reducers/canvas.js                        |  153 +-
 src/reducers/modal.js                         |    1 +
 src/routes/admintools.js                      |    5 +
 src/routes/api/pixel.js                       |   35 +-
 src/routes/tiles.js                           |   26 +-
 src/socket/APISocketServer.js                 |   24 +-
 src/socket/packets/PixelUpdate.js             |    7 +-
 src/store/audio.js                            |   65 +-
 src/store/notifications.js                    |    1 +
 src/store/promise.js                          |    1 +
 src/store/rendererHook.js                     |   34 +-
 src/store/title.js                            |   21 +-
 src/ui/ChunkLoader2D.js                       |  201 ++
 src/ui/ChunkRGB.js                            |   29 +-
 src/ui/PixelNotify.js                         |   11 +-
 src/ui/{Renderer.js => Renderer2D.js}         |  192 +-
 src/ui/Renderer3D.js                          |  279 +++
 src/ui/ads.js                                 |    3 +-
 src/ui/keypress.js                            |   69 -
 src/ui/loadImage.js                           |    8 +-
 ...{renderelements.js => render2Delements.js} |    6 +-
 src/ui/renderer.js                            |   39 +
 src/voxel.js                                  |  204 --
 src/voxelSA.js                                |  199 --
 54 files changed, 2499 insertions(+), 3686 deletions(-)
 create mode 100644 public/preview0.png
 create mode 100644 public/preview1.png
 create mode 100644 public/preview2.png
 delete mode 100644 public/voxeltest.html
 create mode 100644 src/components/CanvasItem.jsx
 create mode 100644 src/components/CanvasSelectModal.jsx
 create mode 100644 src/components/UI.jsx
 delete mode 100644 src/components/VoxelButton.jsx
 delete mode 100644 src/controls/OrbitControls.js
 create mode 100644 src/controls/PixelPainterControls.js
 create mode 100644 src/controls/keypress.js
 create mode 100644 src/ui/ChunkLoader2D.js
 rename src/ui/{Renderer.js => Renderer2D.js} (79%)
 create mode 100644 src/ui/Renderer3D.js
 delete mode 100644 src/ui/keypress.js
 rename src/ui/{renderelements.js => render2Delements.js} (91%)
 create mode 100644 src/ui/renderer.js
 delete mode 100644 src/voxel.js
 delete mode 100644 src/voxelSA.js

diff --git a/public/preview0.png b/public/preview0.png
new file mode 100644
index 0000000000000000000000000000000000000000..493617797d8bee60a5181ce7dee628ff1ad222d3
GIT binary patch
literal 26306
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
JPDHLkV1m=3s3QOX

literal 0
HcmV?d00001

diff --git a/public/preview1.png b/public/preview1.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2c1e7821e221fe8554a02c4430729018992f285
GIT binary patch
literal 24651
zcmV*HKxn^-P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0004nX+uL$Nkc;*
zaB^>EX>4Tx04R}tkvmAkP!xv$riu?LB6d)5$WWauh>AFB6^c+H)C#RSnB4RQO&XFE
z7e~Rh;NWAi>fqw6tAnc`2tGiZ9Gw(hq{MTRLW>v=T<*tz&;N7pxqwhBG0kcl2Q=L_
zlku3C&a8?ZuLxie0{YM;Gs~Ehqy&8H>z=x)?xH-)zwgiLQL`2U0wVD&GfbO!gLrz=
zHaPDShgm^ZiO-40Ou8WPBi9v=-#F)87I<dZOeN=u!^C2~g_Ra&1yduQB95q<PWeLG
zW0mt3XRTCWjeGJJhO+v~GS_JhBaTHZL4pVc6%<i|jVSFpDHf7+9`o@JxqgXU3b~44
z<XAu%8f4cG{s+HjYvm><yrfVJXn%2>j}f3_7pPYq=lj@k>L)<(8MxA${&EeN`6RvC
z)FMYf?>2C8-PDvl;Bp5Tcrs*DcBLRKA(sQ*&*+;nK>sb!z2?oWagNgmAVsrE+yDoM
zz-XSb*L~jI**dp>dm8im0r56+bM6OT{{R3024YJ`L;(K){{a7>y{D4^000SaNLh0L
z04^f{04^f|c%?sf001BWNkl<Zc-p+ZS*&Dhme=?DhCRl3=9AOSykpg^9^74Y)7{rp
zLmOzLqAgxP0uM;|&HaFo{b0$)AY0fnG8Whm$dUyZgKQyL7+Wojs@-Z#q3%|To~W*(
zZuK29Z_X#r5a-0Shi~x19%4tFb29T*l^s%KL`Lirv170Gt>M4^YkfjWi4X$k9N)_=
z2m%1S_gHK3-nZ{5rEt!zy#^qJxb)iRy>&mk^I7kNL2z?C8h=Fx$|))Skk-lzK`Mp%
ziVzYdJm4vf#aM^;Af+UZ<FDsMzQ7}d5dZZ4!$(pF!PmWWPs+0Vs5$S=+xPlgq?9j}
zfs_)Z6lGan`TpIzce%K@;Oy+|bA7MSS|g=wKloKA(%gEz9(kT)i~%4FLjbha<av&@
z_LZNJrs<W(3L%K&m@La)dQt254%0aKNh#%5`n}$dBE-*xK|ma7(j+2`6grULA<GR}
zW+_XHa}HN4P4gX<U<FbNl#)m(kwPG)B+D{NV^Bi<^4VnaTRXeEUw`YJw}0&yfAJTe
z2_Xo>kg_blYbEF^P!I%2DarHvwg3M8_uuFA^pxk%pMT!(6|a3_-J90>(n{~H$mVZf
zrc5teH9-(yj9Gi%dry+466Zfi;`mQ0t^Syj>K&z&3bZ1PLiR>u`f-XWEwkm47qbgW
zSDmMGt~wt9Qd9z7{d`eBzj}2mDWE=I?>vFl1S+sEj*mZ@&Zqw*EAs!%So<r0d(}04
z9cv(jxONc*LC`90vrw)(wmFyUuJbDuAPhr{F|X|+x~up5;achw4|c}mFB|9nQW%CG
z1VJ#CqPj>zRNpD3BnmW2N{n$>=dkUM_E@`8N+~5$iYtYEr3whZLq`>9K3X79Lg0-<
z2qw$r@>h-~C;vrWmcI#<&G!i*P)Y%OPnM!lkmm2T)@utzYt3LVU^1EDy?>=^x>f<S
z)`Ve*bB;XEU;BicAKN^?&S$;MiZp_cqVVlFivO%u`sd>~+N}gG>eaehv73+0ty%FN
zj}(;;l~QzkxVT#ALLi#eQy*LFz)JYu<Ll?X`UfQyqcA}rDa+#cbawtXA0I#epN+L2
z_j)~k@CSd8qA2**x4uPD6#Rd2Q%aGhDYMz^wPbd!0>p7lk|fM#vzH37Ys!TXBuT<@
zxooY6wYH5DUPl4aBtdKaGg8X`B#z@hETt4-pixR<jKw)R0vC<E>a|!2sR|0Kz^)Q{
z<;y$vo^@SW3At4=v0C=NeXL&AQW5Kb5=T*%)%Q7HDTuF>Ee#@)ASN$ze{}NVmmZ(J
z_^$^2{x5&&OJCx{4?pDm{QP?kfVI{{QN(;cf2C{PjP08Li`7M3|D(!G%4=8X>-hCo
z`Jc@dzqhmfN43`fsrTX!N+pp(5(WyXB-T2d^H;9;m8_bet`bxwc)7NUHzdEN1EQl;
zjWFBiZ7d*3;*i7Mm~oWybbijs^nzts)K+0-5dZ=e&<hh>X~@g$|M~32)Bkchpa0_L
zjT0Kh>;|pl@tE;=%!3CHE?r}-b(@hXr5FqbYf9Ja^;j;K-+c`5vTWgXGl@p<K@j}x
zcr^NpTI;Wf*1UJjyb!f;E}MEG+H2jKeel)FuZ1sOBJ}R+Z-m_{aN`c@piyf@62~M-
z1l}`DQwAzw9QS#A^nyocFPN4Y;1NKm0wNh;y+vt>6dG$`wwQhW<42$T6=Ut!u1hJq
z3#S`Lw1MnvWLVZ(@;tv37j$L%QUy>-arf?BCX)$gXJ>0#c3p7M2<}xU>Ah!nYxJ&h
z{EaXSzp9l2A&?yt+^)!Wb*@C!y%0hOgcMYPA&5?ZxF+B$O#W3tKx09akSHmM!w?*l
z)*u6otCW`8hr1+6#A2Q?o6I=W+ng<CJeWVDum*uZ3x)HpzFrQ8pr4G9&hqr=$v=Md
z;^|)iey=NsO$BJI@pZ2B^WM7Y_bV-cQmRd%zF)VU@jwS*^jEzXe?bT-MID$4UcTy^
zfU8M)8Vuu-uwPg3wX#VeNaKiMk`n6xfj}yW5(44Cl$QBoi4=l`G&m_J$`Y*<yE|jz
zFhB^wY_ecrW0tPq)XbR7rfv4oxQ8Z2*iOfUN-<r`+~d>df8%s|{vVs7G}l?wm38}k
znZi|zv}>W25Tea1uUo0F8v|UWOub&OjU&AG?C);<oYLVhAmkqxQi^KjuA6+ZA$+J5
z(Ap}Z*IKv2m)*=@BOqM&`K#B25TtR;!S*(9?d<c`&H=mWkW_^PN->UlNDI<c=N5(m
zE*6*&v{po6Pz8fpvCJ|~&d!-F76e+eo%ArubCJ#0<EQ5LHA3*7o5_e#l8UXt_@|7u
z|IWo?_K9=uJDb<>WisgZ`zWO@S%+>=-URhm1@ofuFPqvG$1z1wyb_*#8DP<(S^}al
z&`FZ~w^FJ<?>x1CUbzghk=k|hZRZ?P3bd+Me0^+{h_U9cuL|}yeZBw!rO{FoX-%LN
zxi<uXW_vim8%I`_<Yh@=3`JRDjKw&+!UGx<aV_wy5X3e2*nQXtDn~)W-Tn@V4#=G0
z>BTAEdG_ePKbxKZN9GmwUTaMd1Z|3boq{x$pb6+-D-CQwi$;UB)(9akY0&FHmfm~z
zwnuk`)L)ZIzbB{^PKgfGDw>sCJyuclYBejR2xJu_IPYtCR#3X?2RZMt-eJAHI=Fk8
zGIUnurHd$5V9ymu#kz2>z!Us+$95DU2~+NF-6Q~d&N9hneDnF^?|k~~;m<nf9wbS!
zhQl;+8IQ+|Mk5|PcyLK>pC?vO*Tn$cm9Lb#a-~;h*}hcx`@7qJF3{mGDH-erQlX_L
zRGL6)w5)RUHa{0&tid{q5e|#T36JrP!W#-#DWF!W!t8~_c!%?jSce2k<MFuG=)YX}
z*P?zc4p7}=6`-W7g1L@EX@k|yojPb`^-$TIHke&~z5uK<jDwJyqdrTiNrhl5PIpwC
z{`u*0@o<?ff4eKAAP8D;?&9KNO=-2(t>yln6<|}4pEn5f-gCIW``4t<e^m-4+B61_
z^%jG}c!%{4SBtDP20S?FS3=lu3l4{Iwo1#SBGw^N$l3xpLKP6J0EEEeFUJF7Js!9u
zcq%jAPm{JN6iLli)Msw;j??M<*~WdP0fIz_-0F>qRDcw+vRYk5z;jV7xjpFd1N#v=
zbYz7?2_=Hw@J~4WV7{1rt+B%0)xBx4oO7-4H|46ezEr1)q6pP!)aS*b8<g*=+wB{>
z>7dvDCA|F86?jsmLcRf9x<Q^0C?WCABRrr)Cym=c`szmy7%Zi?IPcL?p@c+BN$D+x
zD~VJ<tSaU3IQ(_1zO#yZY0Mw`*T2la`=`FjSO3Td+`D~9nnuJ?$WSI|FIn26QY;}h
zrGBMSSUfj-TkIwSZuGYpg$ZZ*yi)l(y>;I6czS^&V7C_$$bz{OT;v%^()&Ol{_u1@
z{Rcvb^78;k-CL3*1VPX$NFzhl1PNMe4i66rf}n+RyG4iBu?T}SMk=+PCdn^YE53pd
zXeq0r%$nd=!jyFyW=cb-16(IC+=O}Ac+CUWTMB3Dyj>AWO`;;KuQ20Sh4g}$NQQXt
zkV2qD6;rergAnX)kN6M%{XfMY`GY^f;r<S1XBYgd@7(8;2hXv~h&#a+JK=z(DVUpO
z8ykquYG1!s*JM8#Vx47S3U2kbxX~N4pH!cdThqEL=RHrSQyxtVWH4YH8jOmW<~eE7
zyBp~6r<eKS|8UMNznj$CIkyJrdG9I965U<Jp9k{YJoeVX4q+I)BZT~w#nS9m{zbNe
z5F5Zw6M!kH$jbsH6+%iR?owvZq<RwB{@-t4_p(+d5M-{XO2BxQHYX5@NCku{SViqn
zWdSN6Qkr+)yT{(n7XSEb{~YH$PoE$2+rRrUqv0)*q{mcx-rwHiettn%F35_-_0_`$
z3lwmY&-udWfOoeJIhtQ!z2gUV?(l;<clgH1Lw@zyN95KZ>g##2obt`5OZNH$;xJ**
z+hVquu)BNkl`ssy{qV_y51ex!eO?8qL7(em0OuTw#iCvPR|&bP4sPBK_qIvm=xr(V
zuVzcL=kNqFsC=l<1WFM!!Ji6<R6rmD0;MRe#W+JC6>$(&@2Q{)5|vuZ7KG?T)`B|V
z^H}FF-jaJmZi`kyY%OT#9fdO#-cUM=@wT!AQUZcRN6gHEBno--<Qc#Hjqk9(x6QMo
z3FF}*QU@$-PElq|qm<G9ZG=$d`2z3VOWlCOb6zajPX_$HgEx71d`K^d7(_952D^-d
zgx{My$FT|=op;Q#C9^!MG9#(zB_sO1aZd>UXBNxZKLpOYNZ~6=zONSqzRCi0@qz}3
z>7^0l(cm3{`qkyK+%q-osbuBLTNA`8RcnGjDFnvZ3L+Jizbt*_+e>FK-nPdZ@32%g
zep^TW7GJS?@Oa@{tI%)-ocC*}pAw2e5YrFRDxmUJZtwA&&ZZ3d3A1^|pqKLG*$Yl4
z=R{$T-f)aa63*)5ah5b4G8!MCkmUJtg&%j!KOOV_Vmamg?VIexgO-aRg<wA&u^$h3
zG&?1;W-UN;&Qg>a)|Nz3N)iu9l3ov2{+a1)_P=}YPhYk$zb{!p*B^Jkq<QV;!S1$q
z;<t+2?v;LJzAMI^$9Gn(@0flqC9W3W3h!>revJ<x&{CnLB9M|mR@S7#=+z1{*Z_f4
zjV(Cu+V>)<=>;)`Gt5m!;mS%OapcYrXw7V%vB+}Xx_g^jhx;fcm@m%B@&&VtX9U8r
zw{wWZlV>xs#k4A}1Tkfq<J&Z`6ARS0(pf&5JYzfVF^+mI!$=CjZaU<PTQ@08!Slrw
zFZ`+yRbR(EpQDr}iTlKHuctA8X0}}XE$7_wb?A4S@P5lPe3b$;>D#7t@ZNLp_Cacl
z|An%2?_2MQR7j{QT-*u2=JS=1ZSJo{RZrKVat(o0L|PN7fKX~89n?Ns6R1k)qAv7!
zPi+BK%EMZqSY5bKX^giZ1brP7seoy@tX}IJ*MxCV7}4(~ym9M*hmVhl(}*aFxckN}
zZXRwEMls{9AzRxiyL$r;54Q;-!E$-Qd@;q8#U((foAU$Y&Jaq?oxx69b7)q490a^Q
zKBTWgKAj%p*i-^XmQ@OuBm<H-?Fo~AP<r<d%2yFKHWu`7IK&uJS?X6Qz;!UA_ns(B
ze#u$?6%Pn0uyy9Gm8^u*sj+LRvEJfp09Oi0;Z19XjkA=_Qr3RDaE79O%&nnxhO%}C
z4FoJUg<oGVSy%ClcZ5<i3{%dE*=4~CkV-Nd4Y~WqP5!`7{0LwEkuUKB?|*?iw{LSX
zFL7SteI){G4Aa?^<KttLQoQx%o4o)2``o*Gm+hS$0<BqQ8P=LjM4(lKXNz+JA=yd#
zL`q{Cjv|%YywTs{MmpxRi(_(U*0LXfyj+s!bHXTP5clqiBKzsH`SkC+F2A6G{>!p#
zxB}{PGgG|x9PI7=HQ~jd_O)sEb#7d()XKa!t3Qxc3DwsMp`@%ZejL{n=`Yc~U_}OL
zOzdU+e`N(ir7_O39SxY7thEM>;Dr!qtx1!V{k>fd4-a_f?Kk=27vAHie)<pa#;qG1
z>~HhQr}x1XI9n1&lI3E-WHRBCPw(^5?|sDc=g$#BaOch)e(cA7j9a&E@$Bg{vL=`o
z>x$rk2eT7CyEq}UC51H%!vrl=E1<2o&)vZe52vThZN9GPqCyYzY>p6u?Oy-xAdCht
zE+${Qs-)bYgIxfr%SlwPiXfX0OOm9m4UC4vKc}Vot6r=#X+&*$t+(y#vIcr8g{Xc+
zAT_2H{$+mO8X<%(!>C1)*8k>`8xTY)z<9?v>T^*pYUKkVCF9|MFbwGrh8!Fm@a{Wr
z^Kbn02i(2;279|ZeE99}aDINqe0t8==^6br;f>n|Xr=km7vJIwZ{OwV^J6ZibEeZN
zPo6&IJ0E_?H^2E!N@GaVl<92NUi7QDg|Q0QPX^o@?J)@B)*Uoef<c&Yd$7&fa>k@s
zR<)3J8B_~SI!kU#b_T-_`f>c((fOo>jl0ZYYb{|IURm^0uWL4xQiMUkpx?V2DE&)9
zNa2NF6PA*SKxrH+GDWCYzFY}OsH$U{EI>7dp^fUGM6MG|JN~+&bc;3NSIS0P+=;Zt
zc}G7;n3=3{4N`Krx661m#5&mB+2P>efVbbgOB_c$e)5D*KfO;c)_nZw13r8Blv_9U
zn9k<Bb?-Jm_2WOxd+*$1xy+eNraV15X=@oCFlEVXK4)udiy#P?O{Z;~vT3d6rr`eU
zguafs)!#x1$&=X`pG}YX*6CwZoym-%lpDP<xB6SWH$KEV%e2gJwFQ+@Qs5W`@xOJk
znEzel-T5X^w?>KoZfXGl#u%a~(psut(^Btx{04Qa!o6Lc7dK|w`6@?mOs}u2fsG$m
zHE&NzK~P8hx{mgn3_y!oN$LWSmWoj6_O6@YvR1%Yha@^=81`7&g4~q|A=ud(bK_u-
zEHCNx`fP1&;k@VM<dm{lvY1_vL;>SrkGppc34)NaG<XC*_iz3*yE|L-`zgyj=XbyT
zF-ON|YjmxqZ$N9!-u^y$mUUdgWhL;y@p4LT4ZF#JKq@{yKjQwyG2S~eQ}TP~&rm}0
zg{_;sw{?Rz2D=z%Ia*%eYQwDqjZ{huRP@!8#q58uEeqx4fqbg~O||bO%>#Jv=_l!5
zS4w>qQThF@@B^ukQc*Zl8K~Bk*I-PY!#k>SZdJ<lbt>qpM>_TO&U4qKl=u|{+Xj18
zsu)V$W+8#B3MZ+KxhNMHZ;7Ia+qVwsr74B6BuPq9mb`dz#C&>AS>z}MMPBgq*%3(`
zGwApD&2M~&wU#&U-ezZK3#B!Ke#+ygM|}F(Q#_(VFgr~q&N=oE4%ixxIXgRBmC>(=
zTXJV8t>L|`L$>2SnJt)?Io3PAy#FSdDfrUPEgnx#xzQVQme2W}7oV{(MSI<(2N5X7
zNxI_;J3gIH|4DaYzfu9T)-MHu>R{>T0<Hf$DJ8Bk$!n`WsxkR$wW``BD4{AdFKaYV
zY7!kW3{nPR!XQW)Mk%A9#~@7U1qrE+NrRYP5YrD5dO=L8BN82vsEAa@B&tFUtIt<R
zp;~aIIww_C+R7zD3bwb#?CtE(@AWB-BP$9{j*mG%KPS|h#WKS=i&j;YObEg6eDgyd
zJvriVZ;LN};Z3%7wh=){7zOm=h~M~~Z&MT{4THI@c-DUR-rc*zNzCcVX<In!valN^
zn3Xx7T^w_#zs<rFOo~NSYIlygDcDbje0p)roxwKWK7GPBP99Z&R8vy+o-~ROk!CAO
zf8yEc$!}QizVkYaBGn~uUWX_R`h6{g{Dn{j+pA!z_Q|pe@_ITZltGQHS8Uj@uE+(d
z%K00=X1pbLB@0uqusL&+GdCI2a>=61nA?oG$yk&b(=uajmdwhGS-E6dE}0e!rsa~k
z$ynNg%ob#>U}<wQSCYBv|8twQz{mF1n62@MIEu;hoa2)d7K=qye)gX2tua6HgI^>`
zQ{H{+9&g^e%|H8<-(<1O_|kiC@`bnWv79gX=%f22y@XqD+~U^ZF2D1;-=QpR+keoe
zSw%rvmhA8C<D6qQo2{<xh7tfwP0q)YXWSd^@x`s1-0W`=>wsImEe2ssF9_-Bh+lj5
z5y#oA1-TkmVvS`y8X!W&;b`k8?%lZYHy^$@a#0k$G{{$*sl%oM)U@sYMk)2j+o-=~
z->!h3+?7?%?n-i7lDmq)k=c^m6_u&$VDYBr0W^S4W8fP|cZD3Ta(5{zb1T|L0Dp<x
zxgv>H3M!>UYt6y_E^!<qrDQsrGhZxFN--Rb7>~vr-Z<p<|M-vc&fD+s13&Ns+<WUS
zPS2(|UzJi%P9`jtIUjxUh_kZ`4i0v4#<8<K;<vx?VTEKWg;J_&*odR5R^c3j!2n|n
z%cj}2=Id>yiA!5@|KgZoknsM_EyhtwFNn}eF$@!yrr@`ZKCP+etf8Q;;?6M`4@lEw
z`+Pp@KYI53Yu;BB`7RgWS_Qc3fPSz4u2Smn3n4}0ciYv!#)RQo8uul$x7pZnMX6V8
z_{`=}%9>JER}Z`7D<M|?SW3Bit|Y_ZfL@xmFlb(u^!rsHcyMsQ?OV6FbNdzt2L}ip
zvUBqdO5?b5=MBF2#dmQif*>RaLf(7pF8}vG{dJxnoiG^m_||tm#o0=km98v7paarg
zN)*QxgIH^fDKVvKO>(282pEScUl<+o)3?6JJL5xQRUw7VBJkexn@9Kg#>pdG%P*^z
zO_TW)rDb<KB#Z*2kUtUY;D3E_c6RDFx}aY>3#htJqrWGme6P9io00z}xkFqj@arB|
zoVzZFbEN`w0iasYx?XKs2Q4?S+ay_?a~0%fS%EROT@A)K;y9+)?=u|qxqa&fU;g3u
zxpm_JYaPZ^ok)|(1>0LA2E!pjX`a29a4}u--aGer``#N2M`O;;F1VP^Te_AIas@9B
z`V0p{thG4jF=dIZyOp=29zS{bHebE_ukpdn_xRzxyBze!#5$<?4!$+<xh?tn;}1E>
zXKQV6-mf5I50uLSmsi6LhJ)VQpFDi@zcgJ!o1I@m2=vQRzkaXxvqFfkHs=0X3d~hi
zadGvdxQc}LvX5Ku-Re-gJEp%@24f7?+V&pEpw1Lj8w-p^!%88F5)f#m2*S!wK7Vn>
zc=raQ@faC|^s@ohIZn=I9PV#(u(!iI@4idYtAHdSLCBClAtGM<?Z3}ru|Nj_Wl>aw
z3uCax5)Wf;-MWQT3TG=8(~<?}WyZ6`IX`vd9eP3BVHv~m@`8W);xm5#;oBrS<Sd)>
zWHDL4Y;7BxZ^7_ckrSX1nP7XT|J7T2dp~=TWnatl{1P3^T6?_(sC&=<j+E-Il&>)T
zS6YFqJ9n=%_t(6)DweFHe@(SeNYR>msTzXmDm0Kv5d;BBYXYs2O0u`RLlP$xrUW5L
z;uxhB!{G?614iQ!-do~iz-W7md@<wpjXmDDcaJC?kPNm6q8On9gw!Ae#yF<uXDsua
zpyu8+E3;AxO_C(^d;OYW4W=}tQuBvyz0ZC+LUno)j}{mFpCA7QzjgeOvuwt_;XaRM
zr~K~8qfH|G8YR6^1|<Z&Ai^3)KZ);s{OIA|*<Ah2RF!KLpx^8NQ7PqLlyzOd?cUii
z{hL&;%l`lR7Vhg}g4Um3Vg6;u1<1D7zYf0Ye!!+wB&8$>1A-tV3PZFG7>`B_20f%w
z6h(;+G-=u+O%j$_0p4=&&LJOu_z`81^ZfY{d0t|T!ImX)IzUK)DY6QAl!`oCpu8ar
z1I{MXOF{Lr286u#tulJ=xs#4@))7d}tjvgY$is^h{^7^}f`_wHJn&+9!7xlJ&ZCeV
z=d*Qa+;>{Y>g#EoqaQ?g>(N5om7ZTYTg*P$Obf3q2d7Dbl;Up-A@7MAcD>H`|No`{
zT|VKO@MVoNRQ>-t&~<t$TZM?@m>>uUf`Bj#+1=TumsEg|6p}Cu5K`5hzX9W|9ds14
zyLZ6W_BI#iQ;aEDW(%G@dCZeX4|(|61B#;H<i#=1pFZRG_?S2fI60kA8q=bkQdB*C
z&U>;ftLg(a_Hwki;KBI|{?+MY^0MUq`4RuugMY~+U#z*s2h$TqVa(m(E}u<LDXdv@
zi%rX1bN!t6n7W$ky(bBSHy)oJ|4&lNOIH3$1qg!hXQY&Wxe1~~r)gs?4eS(eUTOM2
zhXQm350@3MD|{)d_Hn5cN-F|gnS7-bLES<YgaKLyL}5rA$LwrxGa8MEq7We!K^TJf
zjK@Q6-8f)ApYi71dt}QQ<E<^iDCG2Pg7uQSZ@t6b!438gZ_*!(7>!5lA09HB&oOz%
z%^TaiI60>%>+ahoKywc3ETu7+vaEU_jKzA#qR4qTJK?k0X$A1qro8#rddo$TF^W<?
zIX`NdPM15HSB);lI|89F6-aci#Qihl-2F}Rh`Oo|EegZ`QA+vNik>YmA%CCS_g^Xa
zSEPQI{C@`v=%jm<3y^IN9!4Qy5E6u8YjUGFA`C*}Bqa<(ZX6!4wKYa4MK4WB(iHDu
z(ChPKKmMaAtvEZM^Q~`vn}fp}j7KB(cE=1yW8x$wiXy^5qqRZ@0p652>)6>IqNHRx
zU6Dpr)2Qhx!I{p`3~Nobg4>~0uC0K!oCgoPai3TPJeg0b)UeY`(``O&YZ7%V5GxJd
zvo+}7`t-?@zxT>CFin!TrIdeN2q~^i{kTd2Uf=Y;)B;>mfYqoL(X~W!g$Kxv`EL{;
z2m+!wCJIBsFeHj&;wUDJqUyaUCQeg!wzqlX_AQb$C5aQp<1t|v(d!L3Jv$>#5)Kab
zxqttD#U~tXW6Hdph<0*v!qM|12EByEV$S63g2gfiB<It4bzB_>sJb`Lc?Z5CvNqX*
zF=o|kxG@x~t>Jsid9kcWBAs@&#ss*Hp&U(G+|vObM=y!rOq1mAznDzc=E&(w9i>wK
zSs|L1L2+$*Cb$ki_&k#@JeL@hSGH=c{v$ek{FOxzYoL#kRX`X<QH2vIMHEH&I=-nU
zkXg>BGvc(z&dv_bRTH<uD8dWLjhnZ5{`@(;G~tJS_=l@`f~H_N-loWN!Z@ickCa@T
zPdGoDAeH2Bf1jt%j)|g>`FxIdt_{xGkvSNAho9ddgHkC}9i6YZl~rG1W=+iy5|{cB
z{T0`;A){IxffP9BL>vTv)_eb#8?J!0799jZTdnG)X&?|kzZ%5!IYyX#Pm1t5pDxz>
z>el-5)`P+(CeTU|M^P=<iVzV5A!(YTv?hvT5Y@5c@sK1*NPE4ii$-hSeES__jU2|n
zay}!^GXh;*KploS=b6oxy!rMWK6~(#G)>sv8ZsRAna$>uWr?WMuA=4*iW=l`^S<e`
z001BWNkl<ZooKvC8`rwEg+TZ&QDilzs6)42n<OGOlw)3&q*~#Mj9#4ld>BQ4#aY{O
z2;~O+`(+`-?)s304n+&`8nX3V?wS2wh40sJp*0t=78f*~#<CjpSjPp8u>1W1<I#v-
zuSc3D6>d;Z_ln|}Uawch1GOb+gx|Kzr@cDpRNx)Xl-#&=ll>bvuxMuUB}xTs?`+dc
zk}4JnL&7=(QL+Mpj4?Rt)_eWBvy~dRyJm6Q*5bB%x`lY1TS4v{7pnA*+*{_hAPUv)
zm*0K&%MDNlAe$%km;a?}=jm`|-}Cq9=3il1{N<**O|oTU30iQdp^n#<Kq*ya0ZAq3
zIEqnPSF?0#f83N{8)dqR7ZFBLy`nu)6cfe?VH|UMd`?kXq>?ymLC7i)ZG^9NdvEXo
zYfbySOKNR<47wEaZt2fAk$;zqxsgS&N(r6!$k4HLON8@(X$=%=gTFYILWmEpHsONr
z)xv+bIwJ%O5{<v40he2|Wvc{oEkKk?wo0ItZaZbQQh2C9qKzpjuja`L!Z@x1w4$Ii
zhT(9)$?1&K$qXqg6jBGeooG^>!zy5HR<T<fSIe3^*rb!K`+QmesOhP=vMtPkcQDU0
zqA>WND|gws(jNfh6*2Q_d0%&7URS{0Uq0Hu<U^c?S#B@=v`cN-VuciL!o;ecL(p7!
zsZ?c}tM1s^Jg-<i-nm!CKTXvSAc_<2zWFBO@tD$7k-pZeLY3-Rq2^p#7Exz#rT4yd
z4c`0pSm(OPsFNYJEqp4Vr(?8GRodwsCYQ{X7Vq8o_r3kz2UlbP;!ke=>X(*${M85e
zH4=Bnnq76ge?3d$Jv3cr>q&v=@ch?@Jhm8y6qm}xO~4ogK}(10n%M7VfTI+GI88V?
zKIY_fLQz^&v+DIq@uXT=rmHX(1gij0tY6P+ar)K`NGY+-wSi?Cgba1cFzit}gF^Dz
z?1;I^5MGk1kY!Pj1mT|q{&`ystYO4ICgAeGWO4mCweN@P?;1A$lH~G|vTXJdbXLh~
zz{lm{Rkx<mScP_euvldfubTpS@A1~wTm?nZblh~TO|$Bo@6bvSY7Ie%GZxczXH-3m
zqbTBRIinxN^mWu`4#HP$X47KHC`>t8OvtSvR+={kyBx$j94#h%wm3y0iB-tlEb(}D
z(uCYtOkw|6lWOW3{5b^Pd2Q*6?~ll@e(e>C@Un_AT$&0-hbqoy-(HuM(}lA?XO2Rx
zL}?PY=Dn>~T#>D$LCj$|#Ka}bDC1;y&e8M?TW19QAZ9NavM4f2XE@6Z2g!)@d_n0f
z5-I|zDTsB5agH15HV5$z52r^wnjf>YMaN$YO6Ra10xgN9eg`=8-al(xz)uQMJB)7r
zFTPtD`<gbq=@2?5UHH%S1zudOI+sF+HpcMn(*{;u8{@h$<!ke`&jn{Whfs<j3@$6s
z#{8hFCm=)Oz&Iw^oLGn49q#jRa>U%hR@@_15&Ov&S&@^wg579LDih{qMkE!13OI4+
z+#4Sdh>%oA6xQ%~aYAMbSWDikK(lm?Bvjy0Kk>!)fAZHq{PsW6bs+PV&n53mvfC8+
z_sKYP-?(fjRyk1z3vW+nZKC)3-T8WoxT{z{t}fJAS8pU?9a6pKPpREX^<1@4{n~do
z>ez`bZufTBk^@eI3xshPn{zwbMSD+SN)j1!99)p7fXB0A-Wne8>Ewv5s7ELj#(9qO
z34xUKgP2Kv&PAS++mavJxy`aHc#%!{eS7!#=E)--&nFbd5(W|}9Nzh_0RO1L0e<xJ
zrgDCL2-=lFyuUI7xcVS}WlG>LEpOi?L9PjUl~OfD73X~=;7(_Ztp`q8XED}Rb$)BH
zrn(zrFxFJL{3|X-1HyRcxR^|kQZn8ex8LPlbspZiHfL{?@GP6M6ZQFQ`kagMf;WZ-
zL{c*^mz9|paGGE6?a2f7lMx=r(iR*o&QMa(3t}XanaK#G;-iaaJYAfirKBGw?587s
z{NOE~FD^Jt$0#AmjU!D%WFQ#!dq3*EZ_~h^dA;1uzgE8Yaz*fK%HTIt$Zu%HYOdZ2
z{b&N1iW=RlG}l?>_4xK?m0R16v}^CC627qpV@gU>QW{e|mQ~5tTZg@RdMh4}DXI?J
z*>qax^^PdiSlcL-!PgeXHzVb12G6vp0<%O#l+qKY2}uw#%@(*?SrQ#F2oefwxhNLg
zNVhpmcX&EKt2>J=r`e1^D&8L4;_l!8>pim~<CBXc-WeT&_bhEetTlzT)%oC<FPA?9
zAk!pydGP1g4DA)~`RhHi-!#{oR=~gVdp9kNUu$#_9XQmlJ#ROQ@E&6=Wl^+3F~+P3
zyDUn|qNFHtilU&%bMhJ)RDr%WH!X{z;vpJKk|uxw97R#0lv*3(T9n0_>zS5ItTWsl
z9CDEE^4q5mC~Zk;OT2SrHfJXqai@34tjw4f3zU#NTD;(_n6_>=vjx^0PL~%vU7S?o
zaBNAe0<3quvvpVlJ_6$$7xN{~*=pqd&dxg;xVb6+CU@UV(^?+dW}Lnj>uvtwt0VvR
z`#PAxrJ%0~E?d{IT1~!Vj$P+&ZDr=ey8WyXyfGzZSqnWVDr8XWDo+=(RV*E70zA6j
z5p5F|F3N&pmb1IRkHq4v;rX){b>F?DANN@-7i4+HV!o)|PsP$%lm*sXX2qOee*D`w
z=lEdsHkq^RtAI&9C-5N)JL6VwyLJV;^(@3{_(dpnwJC+I#^U99NhlT5BIAwWF1an)
zONTs|p0u!VURb;bjo|H@H*e}D0A#b!vle?@A;gWB8l~7&j;r&4b-{C~@%eJm(<7?n
zqPaJLpLZ*N@7<cOZ$_h)Wr<b|FTbQHN&;O_=oKui<Z4W<F$R|;cwjUd;%ofA{c<U*
zen)HB+TO;y66Y<SefEf>7boO-hCr|s8D&usMV8AY2rA&FKG#K=5y^nkloUllIW&lR
zddiDsP7)-XF6P`$_sL92s1)bfoZOYXJG{Y8JYo<=l+Lgf4~Vqp!SsmZe8vs8#jMCU
z=#5Bq&~_5#rK`r%U<t$UE4nHuzB=fBZSb!7`+CJT<;>Lz7S~#qm$?BURw}lh!chfV
zYY~0r_l>pay82ccgDwrFF409nu5|_Hu5Bq(Pu!}}wO+s1;{9vLBQQHZ<NW-B>BR-T
zUd(hh<D-x6SKG^#CCkN<WtK6SoN;=3S_PfPkmvQzBF;0-7f2KuNdXkD<c+~TN+{-K
z&S6}Q%rVZ;4^oz<U@so??ej;xSe`SE2IRJ+a3#V^mZqezmfRZ7^95NlZ09VsbCsRP
z*{WGLR?4X$2>vsKc>5~Srxce-nQT74G~hvW5XAN8*Ut36qH$!C54c7ay>wpzFIN#p
zo5sy93@p3IU~`_HDi!n|=PWqKXf#Afwbng#c6`j!r_U+Ng58}Fqfx@Y`qoEWOs8a7
zPL^fuJ<qCmqR6XWLFa6>{f)I8MkBD2qs1AsVgcT<6%IIE&Un5!C6J0~v1DN~PL@+n
zvI}Nr$wjeXZgPw_e0u&ADFq9YalE|1<H>A6C^fsufStI{X*T2I4wtaG^45E+ua3mJ
zE4AzUuij(lDo)__?&M`4K*tUE=CjsEFKy=ZtEj(g{;Qn6*|16}MQKV@*}>!+#IBB6
znjs3-T1;s$Wz{GfJ$}sI{vJvPNF_Ob{+zSZ3G?}kJGTzNTb?|6PL^k6%dXHX!CPx<
zc2Y$nbG9CpXAHl4@_<MLoMux5g5zw4@K5lrnq2mHam<tH32zSeIWOlp=Xhsy$n9j0
zr;8H~lM!3NpdB%@6E1OBe*Ne}&hj~nGRHVuSw!EU5t7nYE@+%2UIXcMkSv!1z13??
zXRz2<^(!mjuTg|1dcO>}UkV26Xt3)BIy~rA#4kKfc47eQs+?Y$x*V*Kr9#QFB6M^&
zsi-fDt9g3HT1rz9X7+ctIXgQe)T-Jv!a2@PPB=W+=4^7t+1WYEWyW}zaC$ajxm>QT
z{3e?)*4FK2ruq(JFxGNsxWkqjaj3TlkUX3o@$TS|C-XC`vz%vhthc;9yos@%Svli&
zZ=b?A`e8z5=j66Ph=kIWJYAfkWOcPNYq%(uyjV`jR|KG%o>rxTLXcKL;47o{)z)c^
z@O{U>`);@EE71JQ1)vJ&72;|uP+6Ll(lo;-R;ZpwG(e9PIAO6;Agx5!7C>$^jJ7VU
z{x;`prD@`YGQc~}(Tihtw#MKKqCjD-=Z#xC%ojPc>5R$QIX4crFlEksK4-bi$n(6K
z43cN$bz0f9ikD?sV-FT*Ez@ky?cqNE;_TZTBt70599E*K<Cyb&&M-*m2NC<ph)6<d
z9p5~=&mf4f-V%raB?QKK5*6?wo3!cqv|M7Gt8s-DqjJ<&cpSMYzM|JmzQ4K%c4<Z+
z9vnF7kWF#L*J2aYim_n<{O7X*Yn*5=T4kv$M5TaTN|YA@Cq>2Ru?{IL!kBd$c}q24
z{f>5ij;&XJSrP;RgI>aNx!^mer=(9}MuR>#4tB`$lDsH5J)5w*J;pi9{f8$k=2f~^
z<VB?f^}Q%^in3AwQ)3Vf7_}(!mIhwfYE+)8C#YQH3+83cP$z&V)iEd88O}RiEGK+?
zv0y(Q@b35yQV0rLa-+9HKTNqOKc+N>Nw#1&>64pk!wE?>dnt*))=Xl3l^5>1-NvQ+
z4n*syA;d}#+Gb7f>nL5UNBWIobYb6DrG#x#*#QJZhfq>+={;UJoEHf15KbUOwUQfB
zh>-$OuGibU%@of0IzKlA##9t8t$Fg)aQDt_wnxLNwJR?;dU1kv4scvdFE}|pMJvg8
zG$05BXJ^X_8^{ZaqNswuqM$6Q^s`lf+7-;p4DTK9jc$>b1^@E+Q+{asb_Ma)Na4M~
zE-w~yLa9h~HR4ta#a=ul(Gj6kRVR>lIGgj)#Ulz^g0BWq&C9$RMolxUQ?V=@ajd~~
z2_b7$ymb>Ty3#|ezuwtbS9E&WTTDP)0RnX_#Cm0L-7>7l0vm&(Yb)TKN8oTmAaDp_
z+ucppTiC<~j?XG^v=(a(rZkj6fYypU&$;g&a<IRHl8TQ$xlbI0Y;TPzijvuEhB1~f
z(CluF2$W>GTvC=*PG6KIWvu{3ZT?GB*6~1fZxrCu^QZjo>3xLvygS@SA=;r>p$u7=
z46j0B6(Q@XtG9aFjKV%jNKDNsltQu-_p#P-l2^X}qscQCWsZkxj+2leJW^?_@mIBn
zU)}-dwdr0RPjfZ5_v$?3>N4?Fu|PL4^z8&s=RLwz1E;Y9fyD}esEHa~R*R^=s3{Pw
zFav|p23?kIYgv|OoSvPLrU|1#pD+x0essj-d`f9btaZ$srI*Ca=JOT<XzoQ>Qsj9Z
zSemL8tP=w)T>;Lc>nfu6p2C(W5fbZw_eSp^1U#M|6G*{9vV%mhmyD4JmL^As2|+!6
zM<Lmdx9F=r=O-UwoZ(xikJ~<qL69;nmnaL?c}!`$3h*+B$G;l*X#&4CQ1@$_H2Y2Q
zcP!0S{D5^U(5)kMwsH0jkTnu0ptc6KR)kBO2EXc<ab4)xTC~xW+H}a9t5k75pEH@9
zlO!?I>8wKY+RCEkY%*ckPjJpuN>KOzmGv+PQ+8ZHEqv=71trEAbp0EAy*Xu|BHkPv
zkjjL@E(v77!pxCEu(TO>`}<fd_b-mBRz4MSUMvv4qQwt`9*6N3j~B<x$^waCHySbw
zQjVABjG~Aj@)XO>&LCd4p}M~|JA^tTpqlYR+pq5F>6oQ0SM83z>nf^=nYk-BIE0s7
z!U{a<GIvEM9&q(Iy5>MzZ`pF$N;Q?k7BjFKZFI}wlMOUnPyZ4^Fdhv_;*g`GW!vJ_
z>}B})@l(Xj1IEKXlgR}|T_h@vsftj}Res-?wo>S<B~T%mDXXz|UZ7>Q&(WgH2?%+y
zJg0O8OH++@eUY8Bv^nS5f~6^#nI*j-W*8<c%AC_|#(p|tX>$(KZH7V0c{xWS>FbzB
zvlsQS?5aTKz1Ro>{d%z0ML@5jgSE_=+8@Iz1E@Rn2~|L%BTn;ay`R^*khh}&7v+Mb
z&D$wrhshR^3fl>y&z7g;&Y<f$_(^`TRyMBY4*QDx>{sBnxq^+{rjM>d`<$(IFgMDg
zjiFR>jl<WZjao~3Y22=G-@zQ_&SFf-;r<S9+}h{Sljoc+79DPZtEYvS7NBy@k@=Eu
z9DmBm@`6#A(9;ngo;@ZvC0a<H&L>sK?IBemrjDs5#f+sXn&!@`&{fY}wBB)&T_Bhe
zimC>X*@ENcgjrbymU(FqO5mMB17BZZ0o`cMul3`3UJ=H(mVFfmR6fnHmy9?}xA|;(
z#I#(rjf`QvWy^qsyZr;U;sH`rvxH?QfV<V-YdLkN`2{=Ckc)D`+-59nj&~lUr)qL)
zDu%XI0#7p&cZD1_^#iLM$|{tym}cd7hfLK}t|SU6%L0LGhdp#FkITi9i|LfToh|lu
zwkV67<FoS`Tj&r^8g7Dflz8SQBMl;A6)-E7OtLwnFs)Z;I}VCo7+0HQxM~9Wf=U4v
zWx=A%DXhVH$MND~MRTj6Yu}l|M!gYdQF;Oqd|d;J%kWJTV6Dec4KHIeqH91QFII7Y
zuYrMu$ynNit!TiH?7qX(`3cXLXY52ncH$wC3i)jI94#fYa>+1A*LeeCoeG}nm`C$t
zzO;3ZP-&Jn=i%%H&+|ze*sWR~?7H#ys<Zkl3!tpRDTP(CZT1vWu5U{#1lIH@@`By%
zA*W{(%F?XG5w_lP=j?34)@aDy&Nfk~`RLO}^{Vd>Q)=p293(7?9P2En%V|6Kp;<V-
zQxQ8}UaZRB9k$fM<QrL%U6F0PUvs_95!E?(v~>#=1i`-tyuI0m)D(cE>`v?uYeYvn
zZQ^Uki1l2c^cJKbk^#f8$1q3<q#|=AS}OWM!bvt|6!tjD&ymQsJiAr^sw-QO4ES*J
z8C%hSL71|iZn2+?iDbasEV<p=WiJ}B8;ux+J$gE#aF$SLN@rFVrc(oOYb$ysuqJIY
z){w?AVW3HqfM-W19Y&FD1H950E~YaUizTO%bFwV2KFis<5@*}*Tb4N&#gbW(Rr>}s
znLv%-cLnR$gzPVov-~wrx)@%)g#*2QRrFFO_(TOka0mFqt7>N_WfI+ef5aN+W5uq%
zTp2t_w(2Prwg!b9{UGKr-Jx)0y-SF0$EXypq_8E=YQEe3*)t~jl%9&wO0B97^>-vX
zVifjyJU`~i{Fq_bBUIJK5QDH+=fqX!@py5}!sKj)eL|(#iG~b<1Ob$`+LP!~L8%s)
zt(C!9OHr02aaiU4p+*SD>Dfgq_*H;c-RFx1SzfffgqES?s{M|<TeXCFf4RiXhQPgF
zuaP&7R@Ow1O{V602bNz8;eya(okv;yw{*8XtjWzA!iDfx;{sRt{l*30VOA~}M+0u?
z9SUby*o?dVLjtK$f#f`&@o@T_SVxS49u~*L`3tOfoE8^=U}175#f(HnY)1ob^mge7
zNww3Lhg3(rHN441G3T?{5et)(yOPqIYGAcsZJ@-$<TTUHw9@RvL*DG|Q+msb?3_he
ztY!^}&7m08XPr&X*&2-~%97pfF^k2L$4`$}uArM*zUnpaR!pWf7V(Dgy}z^val83+
zm=ei=qin)%G-PQDE{erv-sKvDT2Pj?D==QFAP5BT=h*B{g?0+Zs#d@59#-R9)<?P(
z-jLZ6B?UY2h@E)E(&Q{`#>^}+&JxLx+!j1u98=aCIkDkBocEO8a9%EWvN)l%hEN8C
zHA6>IZ49v$_6cQx^PX6R93)$81%0&841$Er79=X9to^F<j)lp2kxlT<bC7HkNlj)d
z(55Amx{f8VmMqIjlNj$EWoZ}=6V4_VWO-f{lNyV$vFcqDban}=on6N_h3`Ad_&VW(
zXP}d62$i$dUQJXu!BwljB{K<ukPe9?7SVq$DpDxFCu^Eh`^Da)ly0{}UvmwcbNklj
z`K=y%I_B-+O%^6+7^M{65(gn?*_6^6PO^)7L+CEjxAC0yQ8H2}-s&F`)tf**&nA@4
zv~zJXR}iU?!(<DGCk<lm&z`T&ePifV^Z(s=L>j~#=NI+V^Q(6x>Gx80x3}u(+VK3v
zDa&QP(Rbi4GnBhsz`oNj(60Wj@GlGd5}DS+LA-^>@gh5K7fr+b>Bc$Tct=YRfh8tj
zev!Q^>eetHMIlmEd-xVbiF2;)YZDz-5M6(~VFkK=S_;9NgBxtcgStLl@NoWuLRgfL
zl(wt`oz;rhQnhh}@#Y%#(AA1@`8-xbCGYn4dAdAnH;i1Lc_`cCw3Hks+f2$iOIuu_
z0PDb*_ZzEt^G=7cOqayk5&GuiOM|_2y8PYVK8cR_bo!Lc7He^W?=-o#=i)q}7C3F`
z5%bMYJ{1Ze2!cNt$I+W<KW04a<D4fiicT}-<q08Os@7Fj;2;^Z9S__7xKIU*qq=xe
zZw}dUO9%v`pobEY%$A+v(mJh73V{}~jf|T;gZnxmR26<O&<St!_At(p*@A`1+VN{^
zSVk*2TB7E(T(TAR@!pe}vh~@k)X{eW#TBMdS%li$U!tmWrJuiK@~;W@uKRzgVwN`N
zqL{b4hpbtVjwNXRu-We+^6HmgOeTL<*VD6q%X{}T)H`|h(uDb9fpg7C3#!;_z1Y)5
z^t!BIjbb|*Ru@0dR|6BBVd;v_o`Mj|kiu7^(x&B-?RbEeinC(Ye!dhEiR4yqmvPjm
zAH-Y~6`+*6l2k|RCL@$kcs!G0#*_ImXZft6Z(BpGLIy#?q@1@9si?O;=>~gFc%IBp
z_`>K8_h-*4cd&to`wnSgO^8>R^{(J)yMtaP?3b_lu8@!O^R>-4yPxSddNJAtwWe$@
z_$?s>x&}_Z?!5aCJ&w#;22n~JMa&n=`p2%%qg|DMuP)!FI&Qagmk3^D=S+%OwR4!P
zcM?&uHoJ=LU`VJmGqa?yC0V`yuk%&s%v*ySJkQQJFJ|28?GmYw{UmB*g~A!miwg68
zFnh+NoL3dXcJ59^lq_7yUOcLH6?MM0TplkjkFopc{1NXBZ}Y9mXLP7gorciOK<&C9
z?y}&o7WUPG7M)s1iwM;JFI;(Ls^~8XzWMmN{wf6u`E{*zTMPI#hqq2Rg#e31>D4|n
z!mkFGul0S@d_B?a2KItcgXRH|4!P6cV^s9`Y<^VZ+7ZL3$I|A!k?!;H`D3hiBs$_C
z*=AN&ZP17+YE5)RAT*&4$Zc8g3Kq76ltr2GVD_9zQLXq<*sBF@@OTEg$J8uPB47}t
zd^&yB`s9Z1zo`J3E4Y90jDu**)8)x}GAwv?u=dix?t1gy=-5`+$2dz|*F+K>@_2qs
z*7Eya<vRS@^JZ`)kwjapa^lzO%_I~>QOv?1__w1Z*tOmh1fnh$RO3vqoa1|q|5s9S
zBi%+d-RAZ2fz++mCMx2rn4)U)Ty?ty^|mvbRLA75<oWW9RL3omVOB1AI6op*A%!(u
z6muR-pYrkS8JR8EiG~~`)fQ}nAZ0Heb5_jic4@)A{y|+)D>`*dzfmk&`OVyxbsAZf
zb=wu#xW+YsdUnDgx6@s6TU6aTvf3VR6r}9ORfA^f41Jvts}P4{9Q4_X$Am(&6%E*q
z2E;OCJF4m;yYUd~97-q_CR=UFb&c?^Q#O1xu~Y;SZTY=#e){Qu?Y*yRB=zv5cY;X&
zqyqx22!cA$aut=i8~Lx{0d(PDL8>CQ;=$Tb2J0+O7pJ_)&oSPzG}XL3gJWTHBB^<6
zc(VdqifP;Gl&GjqT@?H27Q69~t#Cl$3{Mv)9Ay(cp1zK`H@Lx8)TbXL9H!f(|8H&I
z7GhbJruD7szMWg#vNE%?@}gZi$oSHNwq4Bh*fciHpg0e{jM6q}(+~Qfpihb-4*D?6
zFwzf$FZ$4+GSDEt3{6Wr4h1!W*fTH)T2onFm0gv$$a5mjIs3kDKCHF(+2_QG$jGXi
z165fS8F3<FueJX5|KI=p-^XM8zvW{nYd}Itnyb>cP<ez0qnj|!fP?wDIcF~3o6bQH
z20=JVQ*USY*d9~5m%V|5cm(1IG9DviF@A1(7t1!sL}n0#;ZAmf+O+udhYyhJ${S^g
z6z6S@iAXV#DV~-K+)5Aew45X3F;bD>XZa~+GQ;zF(;d7j3T$nHK?D$jfeQ+z$$wld
zmp|+^g2FHL18wX-Bp|TH$5w4E;zXcr)XsgsA^LX>pzh-=K*ugv#cE^ltXg>QUb0~n
z_u9D>Sm_FDRU)DS&H<Haa63E3sx3eX#Wc!bti^e=#?9;q5feB`X2?~AS(JsG!RHg_
zO^y%O&rq2bmG-$rOeJC}FmKl&0PbctQ0WHB7#u_+JgpYn#Mcfq2f@5v;qK@S%$w!#
z!xwlml5qjFA4}j^Yq4y7{!yqJcd`?#RfXH>Q4ef!!mw&foHc74$q5YcyoH2E$dy+F
zA;Dd>4SkE+G@%n{F2M%e#RkyM{ZAYaCjyiaxZ3_;OC-uU2UY8L(=pBg%&fKmBQVZw
zj0}1;>H$e(XYt`YGS{6F;~ZX8XIM0AzxYEIP{+s(5B1UdDURd_6OmySkHH8<$|GbV
zL8TkCRv{HJTBERNR=ANIVk{E?1Tm9%R-WOL@)U(``sgI7K*}Rjrp3!<1x_et(HP1a
ze3ZXH%%z_Nv>FkWXsrsrmq!^p&q5spmo#iI(uf_FWUahwnRXVV&acoKoJ137W3Xt~
zxRo-*Ok&yO;DjO96;AjJQ|aYiUQ}mZJD^#i(F!Z;-@`bIXXWA*i@&E2;5HZlB?MXn
zt~TdM-oAT5C9E~AwQ%nekYCo;B26Ti(mvZIe)qC4p9hD%5y1uKX&&e4NdN#ILP<nH
zR9F5Ky2iX+2XP~^%@%Uo>>=w63f<sVdIUx&&Kp1X?wp^KPZ7hxZzupEIuJ}`hSTaC
z?=3&>aRGoJW8N};sY)1U!3f2}=^Z32!t?43##tQ5?(_pE@dQu9ds}C598JBAooS$r
z-vIvp-LDejn^76os(_>dG39t#&i#LLiNr`eUOz{~1YXuFXy>iu3+>IJ6DCn<zky!X
zt6t`1)%s^#5A&8w!~US$+erioC1`4kh~V8no<Ff&MaMeRNJ0pbQSt}`-?8u(@U8NK
z0;<s=Q>I&fJ-c}UA;4Iqh?(%VsLc|!ZgD|-Xs5;7p$m;su+D{3TZhxCdnU{K%a8H2
zTmTNZJvst~PpTfRpY)LOM5MTr9z!yLO1I#Y!Z?F_qu{%%E1cHLKB`qAV#G{htx6n4
z6R+VPqK*rtsCLFf&X*7)SFO)48l!O5tWoL)f^y88HJ+4nSm#g%KSWNvyqkqX!Xzl6
zSg8^wgzqjNaUuG+!1UQ#_<`=i*5VKDeGEqD8RH<7LK5<=`D*z|9|1Z71!D|KnV$&B
zURt>0s`cQE(Pn^U`;+AFLf6x?yYdij<Myqc!MZK`(?6t~_d-mL_+Dg}OAvw=Vff+A
z(G36&g{ttRoMWx3kZ&M>Gyc>qn*xPuaDQ|YC+V!Gk`dyaww{+~C{2U2W{vYU$D7#=
zD64T4O)zg(p0~*2{$b7Q6)YSkB1L5ySZA<o3vWXo{QC9^M^Xx74JzA!Q?Ed}Xx7Mh
zggT&g-TG;4@cNZ1_hJAfFs6JSu)}KH7Xhv){|ErWI2g!FN8L}her^EBvJ7|c-o=xj
zJ+ZUH(Fh>Fq>c4OwsFv{-lFPW76Cx~Ns76rFP$~(?MdOid;_vW*>^tdT3;=Em_PUQ
z=>ZzY2*Hiy0E7_C>m}eE-bfEn=>`dpuxd*`QCqK&iP#TgT7!%yeT8A2_v)#Q!cjEA
z%f<^b`G>A>AV;3LYyEUl$|I~*b%EmE{pi{nG}f22U8L}QJheAsL{tPW!sRS%89b0p
zFNFheP`r^&kgIxs?eDg80AKzwP$@xSe&hX*KK${PuQ1@9tv>wlLl68I_kGEz>q<P4
z@SYXaNuoKo;fD?DW;kzE;$VAt((V3mgFm}g>9EhxjW3<nOZ==j#Z+XN@N|1;hcRyF
z9E>%XMPocE=b#{XR?hLqix2Q8%a3s*Ilxgo#r^Ru{JDd>IF6?P9PW;8;KBGN3SA?n
z0=cT7twv)s8sihe#we6wq{^4Fb|63Jw$zRG|KH{xO17Iv6a+ti^aXIjb{2hG^`z7u
zPv}v^fV6gH^aZiZEy<pNi<sab#5&^K_jd<%XkP^c&wytizkK8zejIZSA-oM+oJCu6
zf;Ny9_u<W@uKO<E@K=kd2&U5X;wA{%yj?`-VB|4RknjkVX&?yeAAiOpA7-8J6Bui7
z-sE_H^$DJq3phBR#I+@?v&dD6Ra>Ig4IYedVJb32Od_Hj$MMwX7!FXu?iO(1p`1;a
z?6Z0|Ed2*$4oO+hncVk}By5W!XPm<yo_-V}#qc0qAh2&1J}jxS7E4tPOf#_6pxcG4
z2_c}I0mlCL(c_OEUAVd~><CIBv*_bUuy1otK^#Chg{ssR%sKQ58n$UI97a5WptOf$
z2?35{&(AxKry=nnTVu<dG6?2X!Ea~Bu+HKj8e!3_5Oawe@d0=cYB-Q%j6?zphh<yf
z<MPxqXL$nU3^-wUGrNHg^JkFM8&`i)oMNp?-;{D5VilC*Ml!>)EzsB&W1f1atsv%z
zz(I^zgi<#!&Rk$d#Z2HYo;&~nuxjhQBQ)BX3$l7$WQiCD1?dw&fOzM1LI>W!fDEm9
z+sVW4*ziQ*y0C6Q?R5@P3Wzj@t=sP`*Xs{2Yyi$Vrqe0v+9x<tO2|Zh$SC<5qx3!r
zqsIgUx;5KFBm=tCFw2jbcMkWNwD0RTrbQeU-b<G%Ok~=#ery;zC4_)D2W34I=p>#(
z5RTfmn8^{0b4a)Zqs&vPd4w1B5^uya%w!hmQB&MV4<HD`d&`gUygoyz8&m<JEp#0=
z07J@SD5J4bCH~Ch78cEFORP>=gRw|_WZSv034oJ$jQi6QRJy^-CLeU>uJ<y|`V1ey
z-Ruze$49s~ImV4-jEqa1w`JdLwS#BQDeWtTZop<!rfz8AGLkT@`hDH%f4MI5i^*$G
z6CU{6*F}wN9Dky%{T3Y1YKti1(2ZxdZasvaGKMYjh)g7ql%X{m+IiWPQu{I}Wf4*l
zV;W_sjq0)aE<tRp?nC>X>=@_m8rmA%%8rmQiPmbIw>hRV3;pmCQ<-5RGZ<&lT7`*7
z5e0hKOlDw|Vj@!CLr?|I+Z;#n1aZjHV=5ph$D+x-a8p?L)@mG2W`HE9>gK`&Tq`f%
z@;F~yWAQI4CQ=aGN@ln{nxVBC+F8_Ep->+EJ8!Ek_`S=wto5j?4O337HDNd==m0tE
zK|JT6mHzIN7tcS~TfG3l&`YixBv_vpAH?J2>jdPUHWrQmX)K`{y#<?YsN|c9z`|lA
z5=bgA5=oeUZ{Y{4ed6aq5Kq)lVKi*Gkzy|KU~&_jGOU^s${7@Gg^A2S3B^bxShj_i
zMv2DAb?qBR%!lk{TOeWrm2P01!$~s3VLZlhGQ~`euxQpeYjPY#6U=0Wl*fJOmz1M6
zExwQ*Bi9uo2)tOIU21bYY%X;XFk*ZQHz4q|cs<CE#v;ODlm&`-i%dkA*Eyb7D=bxw
zrK$%kEDs~=;62<+-nv0zIv}<<=kpk6?K_`5fA-HWbBMjvI+jt2c$|D<o%<FEB7;IO
zaL%9_bwM+47y%qSIa4x!FQq(!pd5v+fY5k}m;fUTvuG4bDAkAFm`OYs-$cq|RJ!qZ
zv{6{=3ahq2#uI2~k#Gr47{)TgEE+*sgN(;$Obf{biV$%m<#=A6VcFzcSo^$LVJ0(Z
z>t$G<mU9n5i`aMVM1tdZiciXyuNB(0wP>xmaN3RAEdD{1;{N0WKg$<5iai7Aak1Fg
z!ja7^WXC7eL1S>sFKCb`x*eLi@i6jt%c{DN{AHPUOS{}W8bG-!AH}2OFM;4KUwZkD
z5&&pr_HTj^4Ybuk&(<HChzSVFd}$THoUup{bBSDe1Pufj^AvZ-Z(tgYP?`oHK0%zx
zk>?B&g0(7ry&fiMx=}Jgx!<@<BBCM)C<u&YimA*nmMKymLo)xdWt*c7zCDci(sR|8
zXpF+$@f&E3$02m!CcKuQc7Vk>Wt*xgJlHQ}GsH~dqxBrOvl-THh3EBZ!*dLLgN}mM
zO)~+&&2)-Nx8am;OZV6T)jULj-#wkre{FY-2_bm!-~qn$r7!s;@G^%CLI|QH`d`M_
zf6xK{7Jv{uz{3|mzY7G$dC`K1$^LGSLgH2F1_T60@dUL|zS9=Kkz1j2#whJeK<gYb
z5#zkc5i^N|N#9@saNg$70TZyW!8NRtf@6r7=$*tk@f+x@SwT{cRa>Ic4PqvHD%ps~
zIEtn?jK*lJ>c7vY6+pLco6&m|WgvuL*;YuH2ZLVJ`IeO4u*AHXOnX3T%%cFbi7@44
z`lv!W^GJt|iEJI*UyI^+p_JNM<MDXx=NYRCtn;k9>{S=_LI^Q++J2?;s3X*8>PFi=
zn`YB5XsvH}h@idRZ3q+YDD4cEZ4Tu;Q+Og$Oyvm5dO(H~ipsV)j;Bz8Z*QE%K{Q6G
z8mx8ctA)0}%Vvdny~0_&##yuONuV^q!o%u%Uaw%n)a+6hs7>4Jp4=VXz(^#BS%jDM
z5^G&vK>e;9lzD~V#&I&nlj0o88XU$WJS&%d3%#%Y1B-aXBmCUKEi9W72T=+^IaX~2
zK^Y=0P^cOvd~Ub+c0)t|t;PA-f8MgD3ojuA*6TH1ym$fjDt{cWNyGoUv+i$OYY%N}
zpqmZXecv+~f*zG=k&4()^aLS^Wm|;A384nIIEtsek4_W*ju4L}$RKq};U{~XLtkFr
z8@~Zc2y$KdfemX=8-;UK;IuyXwLd&7xjS8zY5MO`=o(XzB4!e|vtyjr=SX=3>nuLZ
zpKsmUpXNow^<tgF&2)-Fc~;N;$qCMy0$<1ua4VZ(9!kjJ-L9;`yjq8RB=%RHb0}1U
z^QMHhc1wc3LrJZ(j~wtTP1D%j#V3TI4MNzL0zns4!K|~4vkw6Lt)XQ5Wh&ac2_c-<
zr(ppPShhvKYnAhi-II9gAGY(Swl*zVqadijNBQ$Uhv+(hr_~ZM6QH12t8!zhzB5$P
zSl^v1RE4of(U=w=7pGV%->A~gAYl={ke%SX$+1!;VkYsjUg2C7d(Jw!_QKyEA0y=w
znTT*Zn+0QsqQ45pGVbsGm<l9Zcs-v1jIOPLG6u`mtA^D^L0NNg_FzCoCve|BU#|Y|
zwel1xC59crJ9qA&D2o1Lgb+k=gt9E(6PzCc`0^`*UZBnl5veZo&sEhkcw8u%4x$kR
z<C~_6Y5hqt8maKjox;>us}l2Ojdfds5`x;Oo<fEoo+OFDK{Uol#2E1uW07FYJ!)9!
z1~RyT8fTE}+H>%je+Kh*6><WBIxvc^8}S8YxDk(WBc0$R9^=mF0H@U&&#D#Hs>XTa
zH{7jkhFO$CJB!Ep0<}?SjqVXa&x>S8xWq&zkd%iR3SVAtH+?Q{07~(_`PupR$Tdx`
z$kEXe7K_E!{m_Mtjw{gN^>Gw&0RIQT!)v|yz>O<n0-Q2TWQNvi2+DiRUpWm<ISBE{
zThUgKl%p{U(<nn}8Z^+D$_!<g-&0`#w5zd?qA}h`4-qjj$U{gU4J<646$=Q)&{~Z}
zv+i@0jC=CPqFF;(gM>?1=jB?5@YcT9OeUB{o&)i;I7hCVos!Yl?-Q9I<^nJ4Jjk?=
zEe%E+qF)E@n4ljxkugRhhOrhe%9T%e2jhFg4G?qko}lFCAHP`W>t0d(>}<<TycbFo
zLZB>5BuRoc*qj?<G-K==06rK_6<-wzjP)Rrr51%&poC&9(?0XgRR!$~MuMU1w;iR^
zevq@(8W9s{we~`aLFTN50|Uc|$DYi><DPkpz(?FswnJ+ao>mJS#}lM10vs?2_rEt)
z^331eli%wg5rUNaN+xCkMbP3s4dM>knSOeS2G-L-<ogSiZm|l=on3t|0&BS2B%Cow
z>Pf0DTqBikaayjtqDbHd_>AB55V04EB6cLjH`Z09UnfW5Tc{o({i*MhxT@OV*4CnF
z+mF&D`3`{paJ^c{!8(IVS<s*Y5;NbRF@a^nDeotXIvN;f95W_itwE`3jCq2HN>sK*
z?OM!420?xEXxZlBG-g2P%<Xy<G(l9!IiG~aOyV$}KvE84O|WD0B2ByXZ5IJ1BF63P
z0LmJax`AXIoOr5O5+WR<6g+f2bJc{+<Pb3q={TtHGl(M|fl`V^od;f`clyY+0;3F5
znc!u$LZ#Y)>IvzQT7PBJkjMd9#J=<1C(l13gdmRNUX=3HSjFJ3=-RQJ$-=%9O$dQf
z>W_pFV*qcz;ttsMyd6x)O2+#{&@*T}beXFf+L?ZHuwVk+YER@yMU1J;zzM~oS!1m#
z*pMtGVIrv)O9``jl=yiCKcepO{7fW>0{(B|OTx<3S126<wN*H+*H|<;a^)Sma^;&$
z${O5Er%0JZYYbYW(O4BSbzmf8&yrF#YOPS|){k?m2Br21F9pF^`X0(zU7}KrH?QbS
zCaf8#rh6U*CBQi5zxlzFm%q*!+tMx?zT!B>WHNy<22m9C&LyljGR8(OW$#X5tlwE-
z6Z}XB@pS<AUbP8^%?!YcAr@hw6CU-YAn6n`2}R1HFlfTi8ilhqM{5*P5g`qL$XIxR
z1VNY&>pVuGYAoBL@9lHKgAEM8DaW!cV4U@6VE~nk^Ftt8q5qN`id>?hY@Nety~b&^
z!m=$xxHp)}1ZPcwO1DUO<cD9i*X~=j6(Y(Z8Arr8rqVa77Ip5sgvM;Sn=;CRY8m>E
zC7izV`1$--$-sVoUxntJ!^w#k+bYYl&l}jSTetA=;X@EYkmvc8s9;wj`fQVebN)L3
zzIwe)fPNIayI2Kb!RFm3J{=fC;mbf}HLP{ul=^0nu8@a*0!V1wFoBeN+LxpvAb<X0
zWjx+uDVMrIscUe;kT75C$6TV&bx#7t6%pW772vMNQAc$3?Oq4v435HZs~3h2It5{z
zeNpGgRSgRlCXvu{Aht9TC=EZOc}Fnv&Ae(=cls||J3>fMH22qFnx;@n`3>;aTW=xH
zbIj-SOW(vfhdX!f;N;{4i^T$j5XdM}&bj{z;O_#+UbzXvpPVxAFz!VO@mhL;`APz*
zM1;IRG7bU)6GpwQ^V39>_!$H^-)At+H*_2v1Y=O4rA))b^Yiiy=WUJyIrh#V!F;K;
z+C!?=Y+(r(7nk6AqM92-ult>PSlBu&+X}g=`@EuShgZ7Y5_jkh*)W1q5O5a6p^ZAF
zAiwZpv0QP^F`La0#{4c%$jt^n=-^?}g_wQ!#_;4DV-UyQ8@DXW-XIyyK?w0h0Pg}g
zdDR)|xctg$RN9L}CQJtFcTX3i)DJ^;pU<dY(0Q}&v+;vyjH7sh^Crhwq>#+Fm%ZO!
zj6ziq)Vpgfnl(%Sd~PO(pwxp$oUq`%t8v~GSn2Z81>d?)nGf5meJo*jv3eN3UsuD^
zp6t2#<l)D<@|kqfw$}O{i&r8$g|%;2P5r*s{+dYB6vmjXr2X1ez*X5IAp}X1pa^2f
zL%g6%6q&W}Q%b)A;190e1RJhR*X$vLKr#t!&DJm57#+eNh1+edI)}!zP{ttTk)JPQ
z0;A9-Rz~$`qNjcXBc9+e9zz7fMdyH2_+gW?Chy4<TR-XLURGYm&$&KebdjqAg-kEd
zxcz%?a)$6V-6n9JE7&WnJ8TrpI=tUY)1EqKzhbR@<Og>>PLt>Pr-G{4s}LjS+}^M<
zEJutnV3eK_LjDUO<X1tiz77Oqm?bGjJnH3Kc;LJ-y2%L&U8Awe4|iCL#%?MTWpyt&
zB?ebYZ5qtOi8s!oF$%0x)27T*tpVh^!pnMziAa&F5^bP#V{ZX?vEM%=c8E~LIOp%|
z2a^*ht5IvU*D}!!n8h?qS9O(&3*uZta4<$TE~ma3cIupa+gSUk?G#)F$=~k5{aiM{
zwYhD^0M0GA6#rf(@!K+%_keD)c>C2FjYcc55c0Z*X`BlPp>K6IRv~5)VjjVUacxP3
zAH?h|<KQV&%K7&6sx8r)7L@wUV1ja3%3~;NdKA!48vzrUqEIy|(_DVzlUMWl+(43L
z*%T;4nKup+uiJV(gCVZaT}@(%qoWkJZ)P|-N|0q74ish8LTLjB_YNF>p|0ys+O|cS
zrag!ART2EEjxXzE;4b^(*LhjzV2!QPH2s}8jlU|SxF;eBt+r`oLGBBcQ9YA&qekq4
zrI8=n^r)K*9X$?7xu5;(sNrysO!RhdE;N9;F*6VZ)=&xpg0p7r1(m`wjD>gHDs;V>
z{(W8M$8PfHHnjIPh+%b(;zNTC0Lan^Zyb+sd?+BLg)s_e=OyN6H5Q8kt=52Z?*RB_
zUKFbiW>(7k7AvJdDaHN!_wn%IL)3MBArH8!<IArq9Y&+km8Id<8*$!~OBXNarM32}
zlj-C)oOAy;N+W1xpaQ8<NRDhafemA4lu>^vwhmSYL@><dYh$o-MPU0dXlMQXZ@mFR
zC!7Ef7~5bLjgWBJPt{hs?b$=#nOkqo)sdjIIn>o1N~*lhUf7j-=>#GBm_o^pwX#E1
zHF(n0V3eR$2F7eRcL4n6I?w;fP>y$ZJt(EPbLS2oK75Gt^K;DS^Usz8bT#EJljK#6
zA2-nD5kjCUs~-t29_v>9buKw!oCS)Lf2!5GKvOknYtMk?nFKh6Ri+>M=q6_U9c}vZ
zur<Dl=<0rD4Gc`5Or|^r0;Eg`aNgvoZQCP#F%vkBJvA$D%YYE>EcmC50(+$CL5Ag+
z?XQK-&c0Q4TZPPLhkq|GieKL-vRt006-9w3PoCh}vuArz+$+}Y;v1)F+M6EiZj52_
zccBMPDY7g>(=<I|sI^9xW%q;>KjM*i$QXlGp4gzZfo|GOHcbddhf^>|fYOg-H^$%Z
zof4*Z&1gUg^Gzfk_W}(((9m0}djKT~oWr5?oS@u~oXHFz4vTt?l`8s;`I%n>QK-&W
zVAJ*Ua<MxMnk_>t0Phh(zEPCrN8REJAug@)Kg(+?0z^^dy>jY$ix1Ex5^0)V2^VwD
zapT5~o^RGg1R=#TPLqG<tea`2zHF_xUgv^C3>-B9K-CSXps<{vZu}^<g`Y~6l*2d^
zbcIY9+|WJW5P>OVo$E)tE7SJG&xrbljS1AUE_?4j$H9F*PjyH6%S-LJ{>q`04n(*w
ze9!Lz_#4)_v*E19@GkG5`_Fv?bfG^<l780?zxj|#bX7R2>w0U}Kq-Z~s%?=MKaAq&
ze>-cx%osZ~TKBW-*4TbHPAdZ@xOe}w1~HZWa0vwsDWWgG#v;LpCxPBoq126M%yg4R
zAffw~Kr(?iK*xeIM4=7rzh-v>ki9UkyXMfx<|+soz?KO0Kxk_tIra!3-!7}_d)gQ~
ze10A1);;?qNv=GId%>$X9_AJMH$dlRLCAL7arX|Qlp;xz-kxn2GuT&_bkL@=?mZ#I
zZ#(Bk1mw$vQsSHg<IIC2gm`sM<NM~GCqsJc6XQ(iA9!`phzfxCUVk?P(k)mL=KnZl
zC<D8g1$2!P>PyX_OX#I(FJF9zSGlLTOLKt>Y2wiM!8r>;ehZZTO4Br#(zu3;?M<k!
zxA>j;RhDJFW692B*QQ1sHhZo@1)HXUloH06Yu!sx6v0~CCntnbSYt36jou=Z{9DfX
zFL%?e);g%h^Wqri;DSRd4Wo2Fh16Ni__ng>ZBl!y6apkH!dNCKR0HL7Kc(Z7RP68v
zuPFM-E7$qLU%2gmU65`aB#FNZ;2)J$^(UVNkKsW*eP8l7nN0jF#d^Iz0$jIV91=!4
zU%YO2U9}qtA&^pTz@nZwN?@H`)K&eTWEA}Y=j=X!dxJ>f-8HlUWei+;F>69;Us^HB
zQ0q3FVB5cM$HeVOp*ldS8*!^k0z7#=!uNKV-@gIeR#Mn6{yPA^TUOPtS?3m?^&Y2z
zO+8!(#u%iOD9aK}(_D3^$!mYJE+h^A`*mK!TGnq6fx2#RczpC%jnV%MAisowforY%
zg+;gvdE~o*rcq!)mc|YWY!SdB+o^gHpt-;r-oN;-^E8IGTHW0qN;q89@o@m~`vCrR
zSylfnNs_JJ%IBWl2mZz|AKNX}Kh*}{oFk6oPu+aD49oz4IEfI&F}M(4bI$!!Lde&x
zwM2(#LkK}r*51Wyl!7vfYBgXm2MD**3GU@+0%W|q1NKtA_uK$(&&o4KF`bN%CNXHx
zKVGiZIA7(y?YbTNe+=N?0QkMCuDv-W=hxl<UB~va`aVgL3-rD2>pGI}?%jW71h{O0
zuKV|&Wn&28hd@-TaD4OR&r(YNj#m2bJ8O@-Ys9n~TneO<3{_sDt(w>UPFI}xOLBmr
zD5MlPJeVSmB-*C+29Zi*T@>g#bO2rg_-z2+FRSVi4TjpE<|U;>9LHF#R(qfSZkf2d
z30{%ckqdXpRV7AO5nRR{*bOnS6SC4YMOl{pZl#pK7>k3$nE)Yw!CCt+oO5qG=Vkx_
zmjb#~J+SmSY{6F?|Bx&PbaCSe&_9dwz>D}-0De+dm3r0a-KV|tDW%sUeeQ0g-K3rL
zr*1$9`LsW9xA3n*4EMdVEW?{`zKO?=AEPYG3-2389A(ww<akDnb#DXsn-2J<R_2Sw
zSoT>rKqrdTA$Vjkb3lWXowgUgharT#@0|M~fFA&Ox2!7b+u5Iggxr^mf7Yv)T-8(l
z(+>Ijs)cTcUKV9KBP%Hwin76Yl-@KJe;LmGB7iRe_}aB^0kSbtia3Md6jiGs1clat
zxkLT$u1qh~_<I2U5WqVi<bM`L@hnRcw8~q<k4Aphzaw6Do4aY6tx|2s;QiBh2_gEt
zfpdOo9&qg>unRjvhzrTar`;fzeVq^jobzkZoBYP{ox-B5x?aW?;oNNizX-2(_*X*w
zPQ%C0YZ~p0usPrzLP!aKP(uC(p^O4}$2mM%ub1!pq$}?IfOqfWTeoh3Qi`WfpY{*@
z;NSptT_ejf%;)nyLvNbq+NW3u(StzOxlZrhyN4)>@YA3E6j2nRX_~!B=l=(q0=RF|
S#jlM30000<MNUMnLSTX(3k)^@

literal 0
HcmV?d00001

diff --git a/public/preview2.png b/public/preview2.png
new file mode 100644
index 0000000000000000000000000000000000000000..40be716f03d607d61ab737518689325150af51a7
GIT binary patch
literal 12581
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

literal 0
HcmV?d00001

diff --git a/public/voxeltest.html b/public/voxeltest.html
deleted file mode 100644
index e98022e..0000000
--- a/public/voxeltest.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - interactive - voxel painter</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-   <script src="assets/voxel.js"></script>
-		<style>
-			body {
-				background-color: #f0f0f0;
-				color: #444;
-			}
-			a {
-				color: #08f;
-			}
-		</style>
-	</head>
-	<body>
-	</body>
-</html>
diff --git a/src/actions/index.js b/src/actions/index.js
index d053f11..227c2ed 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -8,12 +8,6 @@ import type {
 import type { Cell } from '../core/Cell';
 import type { ColorIndex } from '../core/Palette';
 
-import { loadImage } from '../ui/loadImage';
-import {
-  getColorIndexOfPixel,
-} from '../core/utils';
-
-
 export function sweetAlert(
   title: string,
   text: string,
@@ -228,7 +222,6 @@ export function requestPlacePixel(
       y,
       clr: color,
       token,
-      a: x + y + 8,
     });
 
     dispatch(setPlaceAllowed(false));
@@ -295,9 +288,7 @@ export function tryPlacePixel(
       ? state.gui.selectedColor
       : color;
 
-    if (getColorIndexOfPixel(getState(), coordinates) !== selectedColor) {
-      dispatch(requestPlacePixel(canvasId, coordinates, selectedColor));
-    }
+    dispatch(requestPlacePixel(canvasId, coordinates, selectedColor));
   };
 }
 
@@ -376,37 +367,23 @@ export function zoomOut(zoompoint): ThunkAction {
   };
 }
 
-function requestBigChunk(center: Cell): Action {
+export function requestBigChunk(center: Cell): Action {
   return {
     type: 'REQUEST_BIG_CHUNK',
     center,
   };
 }
 
-function receiveBigChunk(
+export function receiveBigChunk(
   center: Cell,
-  arrayBuffer: ArrayBuffer,
 ): Action {
   return {
     type: 'RECEIVE_BIG_CHUNK',
     center,
-    arrayBuffer,
   };
 }
 
-function receiveImageTile(
-  center: Cell,
-  tile: Image,
-): Action {
-  return {
-    type: 'RECEIVE_IMAGE_TILE',
-    center,
-    tile,
-  };
-}
-
-
-function receiveBigChunkFailure(center: Cell, error: Error): Action {
+export function receiveBigChunkFailure(center: Cell, error: Error): Action {
   return {
     type: 'RECEIVE_BIG_CHUNK_FAILURE',
     center,
@@ -414,74 +391,6 @@ function receiveBigChunkFailure(center: Cell, error: Error): Action {
   };
 }
 
-export function fetchTile(canvasId, center: Cell): PromiseAction {
-  const [cz, cx, cy] = center;
-
-  return async (dispatch) => {
-    dispatch(requestBigChunk(center));
-    try {
-      const url = `/tiles/${canvasId}/${cz}/${cx}/${cy}.png`;
-      const img = await loadImage(url);
-      dispatch(receiveImageTile(center, img));
-    } catch (error) {
-      dispatch(receiveBigChunkFailure(center, error));
-    }
-  };
-}
-
-export function fetchHistoricalChunk(
-  canvasId: number,
-  center: Cell,
-  historicalDate: string,
-  historicalTime: string,
-): PromiseAction {
-  const [cx, cy] = center;
-
-  return async (dispatch) => {
-    let url = `${window.backupurl}/${historicalDate}/`;
-    let zkey;
-    if (historicalTime) {
-      // incremential tiles
-      zkey = `${historicalDate}${historicalTime}`;
-      url += `${canvasId}/${historicalTime}/${cx}/${cy}.png`;
-    } else {
-      // full tiles
-      zkey = historicalDate;
-      url += `${canvasId}/tiles/${cx}/${cy}.png`;
-    }
-    const keyValues = [zkey, cx, cy];
-    dispatch(requestBigChunk(keyValues));
-    try {
-      const img = await loadImage(url);
-      dispatch(receiveImageTile(keyValues, img));
-    } catch (error) {
-      dispatch(receiveBigChunkFailure(keyValues, error));
-    }
-  };
-}
-
-export function fetchChunk(canvasId, center: Cell): PromiseAction {
-  const [, cx, cy] = center;
-
-  return async (dispatch) => {
-    dispatch(requestBigChunk(center));
-    try {
-      const url = `/chunks/${canvasId}/${cx}/${cy}.bmp`;
-      const response = await fetch(url);
-      if (response.ok) {
-        const arrayBuffer = await response.arrayBuffer();
-        dispatch(receiveBigChunk(center, arrayBuffer));
-      } else {
-        const error = new Error('Network response was not ok.');
-        dispatch(receiveBigChunkFailure(center, error));
-      }
-    } catch (error) {
-      dispatch(receiveBigChunkFailure(center, error));
-    }
-  };
-}
-
-
 export function receiveCoolDown(
   waitSeconds: number,
 ): Action {
@@ -491,7 +400,6 @@ export function receiveCoolDown(
   };
 }
 
-
 export function receivePixelUpdate(
   i: number,
   j: number,
@@ -678,6 +586,10 @@ export function showHelpModal(): Action {
   return showModal('HELP');
 }
 
+export function showCanvasSelectionModal(): Action {
+  return showModal('CANVAS_SELECTION');
+}
+
 export function showChatModal(): Action {
   if (window.innerWidth > 604) { return toggleChatBox(); }
   return showModal('CHAT');
@@ -714,10 +626,3 @@ export function urlChange(): PromiseAction {
     dispatch(reloadUrl());
   };
 }
-
-export function switchCanvas(canvasId: number): PromiseAction {
-  return async (dispatch) => {
-    await dispatch(selectCanvas(canvasId));
-    dispatch(onViewFinishChange());
-  };
-}
diff --git a/src/actions/types.js b/src/actions/types.js
index 42341a1..f361427 100644
--- a/src/actions/types.js
+++ b/src/actions/types.js
@@ -41,8 +41,7 @@ export type Action =
   | { type: 'SET_VIEW_COORDINATES', view: Cell }
   | { type: 'SET_SCALE', scale: number, zoompoint: Cell }
   | { type: 'REQUEST_BIG_CHUNK', center: Cell }
-  | { type: 'RECEIVE_BIG_CHUNK', center: Cell, arrayBuffer: ArrayBuffer }
-  | { type: 'RECEIVE_IMAGE_TILE', center: Cell, tile: Image }
+  | { type: 'RECEIVE_BIG_CHUNK', center: Cell }
   | { type: 'RECEIVE_BIG_CHUNK_FAILURE', center: Cell, error: Error }
   | { type: 'RECEIVE_COOLDOWN', waitSeconds: number }
   | { type: 'RECEIVE_PIXEL_UPDATE',
diff --git a/src/canvases.json b/src/canvases.json
index 1ddf9b8..c6a3cf6 100644
--- a/src/canvases.json
+++ b/src/canvases.json
@@ -1,6 +1,7 @@
 {
   "0": {
     "ident":"d",
+    "title": "Earth",
     "colors": [
       [ 202, 227, 255 ],
       [ 255, 255, 255 ],
@@ -41,10 +42,12 @@
     "pcd" : 7000,
     "cds": 60000,
     "req": -1,
-    "sd": "2020-01-08"
+    "sd": "2020-01-08",
+    "desc": "Our main canvas, a huge map of the world. Place everywhere you like"
   },
   "1": {
     "ident": "m",
+    "title": "Moon",
     "colors" : [
       [ 49,	46,	47 ],
       [ 99,	92,	90 ],
@@ -85,6 +88,54 @@
     "pcd": 15000,
     "cds": 900000,
     "req": 8000,
-    "sd": "2020-01-08"
+    "sd": "2020-01-08",
+    "desc": "Moon canvas with a pastel tone palette and black background"
+  },
+  "2": {
+    "ident":"v",
+    "title": "3D Canvas",
+    "colors": [
+      [ 202, 227, 255 ],
+      [ 255, 255, 255 ],
+      [ 255, 255, 255 ],
+      [ 228, 228, 228 ],
+      [ 196, 196, 196 ],
+      [ 136, 136, 136 ],
+      [ 78, 78, 78 ],
+      [ 0, 0, 0 ],
+      [ 244, 179, 174 ],
+      [ 255, 167, 209 ],
+      [ 255, 84, 178 ],
+      [ 255, 101, 101 ],
+      [ 229, 0, 0 ],
+      [ 154, 0, 0 ],
+      [ 254, 164, 96 ],
+      [ 229, 149, 0 ],
+      [ 160, 106, 66 ],
+      [ 96, 64, 40 ],
+      [ 245, 223, 176 ],
+      [ 255, 248, 137 ],
+      [ 229, 217, 0 ],
+      [ 148, 224, 68 ],
+      [ 2, 190, 1 ],
+      [ 104, 131, 56 ],
+      [ 0, 101, 19 ],
+      [ 202, 227, 255 ],
+      [ 0, 211, 221 ],
+      [ 0, 131, 199 ],
+      [ 0, 0, 234 ],
+      [ 25, 25, 115 ],
+      [ 207, 110, 228 ],
+      [ 130, 0, 128 ]
+    ],
+    "alpha": 0,
+    "size": 1024,
+    "v": true,
+    "bcd": 2000,
+    "pcd" : 2000,
+    "cds": 60000,
+    "req": 0,
+    "sd": "2020-01-08",
+    "desc": "Test 3D canvas. Changes are not saved."
   }
 }
diff --git a/src/client.js b/src/client.js
index 4fd8bb0..483497b 100644
--- a/src/client.js
+++ b/src/client.js
@@ -4,208 +4,39 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import fetch from 'isomorphic-fetch'; // TODO put in the beggining with webpack!
-import Hammer from 'hammerjs';
 
 import './components/font.css';
 
+// import initAds, { requestAds } from './ui/ads';
+import onKeyPress from './controls/keypress';
 import {
-  screenToWorld,
-  getColorIndexOfPixel,
-} from './core/utils';
-
-import type { State } from './reducers';
-import initAds, { requestAds } from './ui/ads';
-import {
-  tryPlacePixel,
-  setHover,
-  unsetHover,
-  setViewCoordinates,
-  setScale,
-  zoomIn,
-  zoomOut,
   receivePixelUpdate,
   receiveCoolDown,
   fetchMe,
   fetchStats,
   initTimer,
   urlChange,
-  onViewFinishChange,
   receiveOnline,
   receiveChatMessage,
   receiveChatHistory,
-  selectColor,
 } from './actions';
 import store from './ui/store';
 
-import onKeyPress from './ui/keypress';
 
 import App from './components/App';
 
-import renderer from './ui/Renderer';
+import { initRenderer, getRenderer } from './ui/renderer';
 import ProtocolClient from './socket/ProtocolClient';
 
-window.addEventListener('keydown', onKeyPress, false);
-
-
-function initViewport() {
-  const canvas = document.getElementById('gameWindow');
-
-  const viewport = canvas;
-  viewport.width = window.innerWidth;
-  viewport.height = window.innerHeight;
-
-  // track hover
-  viewport.onmousemove = ({ clientX, clientY }: MouseEvent) => {
-    store.dispatch(setHover([clientX, clientY]));
-  };
-  viewport.onmouseout = () => {
-    store.dispatch(unsetHover());
-  };
-  viewport.onwheel = ({ deltaY }: WheelEvent) => {
-    const state = store.getState();
-    const { hover } = state.gui;
-    let zoompoint = null;
-    if (hover) {
-      zoompoint = screenToWorld(state, viewport, hover);
-    }
-    if (deltaY < 0) {
-      store.dispatch(zoomIn(zoompoint));
-    }
-    if (deltaY > 0) {
-      store.dispatch(zoomOut(zoompoint));
-    }
-    store.dispatch(onViewFinishChange());
-  };
-  viewport.onauxclick = ({ which, clientX, clientY }: MouseEvent) => {
-    // middle mouse button
-    if (which !== 2) {
-      return;
-    }
-    const state = store.getState();
-    if (state.canvas.scale < 3) {
-      return;
-    }
-    const coords = screenToWorld(state, viewport, [clientX, clientY]);
-    const clrIndex = getColorIndexOfPixel(state, coords);
-    if (clrIndex === null) {
-      return;
-    }
-    store.dispatch(selectColor(clrIndex));
-  };
-
-  // fingers controls on touch
-  const hammertime = new Hammer(viewport);
-  hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
-  hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
-  // Zoom-in Zoom-out in touch devices
-  hammertime.get('pinch').set({ enable: true });
-
-  hammertime.on('tap', ({ center }) => {
-    const state = store.getState();
-    const { autoZoomIn } = state.gui;
-    const { placeAllowed } = state.user;
-
-    const {
-      scale,
-      isHistoricalView,
-    } = state.canvas;
-    if (isHistoricalView) return;
-
-    const { x, y } = center;
-    const cell = screenToWorld(state, viewport, [x, y]);
-
-    if (autoZoomIn && scale < 8) {
-      store.dispatch(setViewCoordinates(cell));
-      store.dispatch(setScale(12));
-      return;
-    }
-
-    // don't allow placing of pixel just on low zoomlevels
-    if (scale < 3) return;
-
-    if (!placeAllowed) return;
-
-    // dirty trick: to fetch only before multiple 3 AND on user action
-    // if (pixelsPlaced % 3 === 0) requestAds();
-
-    // TODO assert only one finger
-    store.dispatch(tryPlacePixel(cell));
-  });
-
-  const initialState: State = store.getState();
-  [window.lastPosX, window.lastPosY] = initialState.canvas.view;
-  let lastScale = initialState.canvas.scale;
-  hammertime.on(
-    'panstart pinchstart pan pinch panend pinchend',
-    ({
-      type, deltaX, deltaY, scale,
-    }) => {
-      viewport.style.cursor = 'move'; // like google maps
-      const { scale: viewportScale } = store.getState().canvas;
-
-      // pinch start
-      if (type === 'pinchstart') {
-        store.dispatch(unsetHover());
-        lastScale = viewportScale;
-      }
-
-      // panstart
-      if (type === 'panstart') {
-        store.dispatch(unsetHover());
-        const { view: initView } = store.getState().canvas;
-        [window.lastPosX, window.lastPosY] = initView;
-      }
-
-      // pinch
-      if (type === 'pinch') {
-        store.dispatch(setScale(lastScale * scale));
-      }
-
-      // pan
-      store.dispatch(setViewCoordinates([
-        window.lastPosX - (deltaX / viewportScale),
-        window.lastPosY - (deltaY / viewportScale),
-      ]));
-
-      // pinch end
-      if (type === 'pinchend') {
-        lastScale = viewportScale;
-      }
-
-      // panend
-      if (type === 'panend') {
-        store.dispatch(onViewFinishChange());
-        const { view } = store.getState().canvas;
-        [window.lastPosX, window.lastPosY] = view;
-        viewport.style.cursor = 'auto';
-      }
-    },
-  );
-
-  return viewport;
-}
-
-
-document.addEventListener('DOMContentLoaded', () => {
-  ReactDOM.render(
-    <Provider store={store}>
-      <App />
-    </Provider>,
-    document.getElementById('app'),
-  );
-
-  const viewport = initViewport();
-  renderer.setViewport(viewport, store);
+function init() {
+  initRenderer(store, false);
 
   ProtocolClient.on('pixelUpdate', ({
     i, j, offset, color,
   }) => {
     store.dispatch(receivePixelUpdate(i, j, offset, color));
-    // render updated pixel
-    renderer.renderPixel(i, j, offset, color);
   });
   ProtocolClient.on('cooldownPacket', (waitSeconds) => {
-    console.log(`Received CoolDown ${waitSeconds}`);
     store.dispatch(receiveCoolDown(waitSeconds));
   });
   ProtocolClient.on('onlineCounter', ({ online }) => {
@@ -221,55 +52,53 @@ document.addEventListener('DOMContentLoaded', () => {
     store.dispatch(fetchMe());
   });
 
-  window.addEventListener('resize', () => {
-    viewport.width = window.innerWidth;
-    viewport.height = window.innerHeight;
-    renderer.forceNextRender = true;
-  });
   window.addEventListener('hashchange', () => {
     store.dispatch(urlChange());
   });
 
-  store.subscribe(() => {
-    // const state: State = store.getState();
-    // this gets executed when store changes
-  });
-
   store.dispatch(initTimer());
 
-  window.animationLoop = function animationLoop() {
-    renderer.render(viewport);
-    window.requestAnimationFrame(window.animationLoop);
-  }
-  window.animationLoop();
-  window.store = store;
-
   store.dispatch(fetchMe());
   ProtocolClient.connect();
 
   store.dispatch(fetchStats());
   setInterval(() => { store.dispatch(fetchStats()); }, 300000);
+}
+init();
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(
+    <Provider store={store}>
+      <App />
+    </Provider>,
+    document.getElementById('app'),
+  );
+
+  document.addEventListener('keydown', onKeyPress, false);
 
   // garbage collection
   function runGC() {
-    const state: State = store.getState();
-    const { chunks } = state.canvas;
+    const renderer = getRenderer();
 
-    const curTime = Date.now();
-    let cnt = 0;
-    chunks.forEach((value, key) => {
-      if (curTime > value.timestamp + 300000) {
-        cnt++;
-        const [z, i, j] = value.cell;
-        if (!renderer.isChunkInView(z, i, j)) {
-          if (value.isBasechunk) {
-            ProtocolClient.deRegisterChunk([i, j]);
+    const chunks = renderer.getAllChunks();
+    if (chunks) {
+      const curTime = Date.now();
+      let cnt = 0;
+      chunks.forEach((value, key) => {
+        if (curTime > value.timestamp + 300000) {
+          cnt++;
+          const [z, i, j] = value.cell;
+          if (!renderer.isChunkInView(z, i, j)) {
+            if (value.isBasechunk) {
+              ProtocolClient.deRegisterChunk([i, j]);
+            }
+            chunks.delete(key);
           }
-          chunks.delete(key);
         }
-      }
-    });
-    console.log('Garbage collection cleaned', cnt, 'chunks');
+      });
+      // eslint-disable-next-line no-console
+      console.log('Garbage collection cleaned', cnt, 'chunks');
+    }
   }
   setInterval(runGC, 300000);
 });
diff --git a/src/components/App.jsx b/src/components/App.jsx
index c069e76..c391f15 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -4,32 +4,25 @@
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
 import { IconContext } from 'react-icons';
 
-import type { State } from '../reducers';
-import CoolDownBox from './CoolDownBox';
-import NotifyBox from './NotifyBox';
 import CoordinatesBox from './CoordinatesBox';
-import GlobeButton from './GlobeButton';
 import CanvasSwitchButton from './CanvasSwitchButton';
 import OnlineBox from './OnlineBox';
-import PalselButton from './PalselButton';
 import ChatButton from './ChatButton';
-import Palette from './Palette';
 import ChatBox from './ChatBox';
 import Menu from './Menu';
+import UI from './UI';
 import ReCaptcha from './ReCaptcha';
 import ExpandMenuButton from './ExpandMenuButton';
 import ModalRoot from './ModalRoot';
-import HistorySelect from './HistorySelect';
 
 import baseCss from './base.tcss';
 
-const App = ({ isHistoricalView }) => (
+const App = () => (
   <div>
+    {/* eslint-disable-next-line react/no-danger */}
     <style dangerouslySetInnerHTML={{ __html: baseCss }} />
-    <canvas id="gameWindow" />
     <div id="outstreamContainer" />
     <ReCaptcha />
     <IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
@@ -40,31 +33,10 @@ const App = ({ isHistoricalView }) => (
       <OnlineBox />
       <CoordinatesBox />
       <ExpandMenuButton />
-      {
-        (isHistoricalView)
-          ? <HistorySelect />
-          : (
-            <div>
-              <PalselButton />
-              <Palette />
-              <GlobeButton />
-              <CoolDownBox />
-              <NotifyBox />
-            </div>
-          )
-      }
+      <UI />
       <ModalRoot />
     </IconContext.Provider>
   </div>
 );
 
-function mapStateToProps(state: State) {
-  const {
-    isHistoricalView,
-  } = state.canvas;
-  return {
-    isHistoricalView,
-  };
-}
-
-export default connect(mapStateToProps)(App);
+export default App;
diff --git a/src/components/CanvasItem.jsx b/src/components/CanvasItem.jsx
new file mode 100644
index 0000000..118f86f
--- /dev/null
+++ b/src/components/CanvasItem.jsx
@@ -0,0 +1,105 @@
+/**
+ *
+ * @flow
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { THREE_CANVAS_HEIGHT } from '../core/constants';
+import { selectCanvas } from '../actions';
+
+
+const textStyle = {
+  color: 'hsla(218, 5%, 47%, .6)',
+  fontSize: 14,
+  fontWeight: 500,
+  position: 'relative',
+  textAlign: 'inherit',
+  float: 'none',
+  margin: 2,
+  padding: 0,
+  overflow: 'auto',
+};
+
+const infoStyle = {
+  color: '#4f545c',
+  fontSize: 15,
+  fontWeight: 500,
+  position: 'relative',
+  textAlign: 'inherit',
+  float: 'none',
+  margin: 0,
+  padding: 0,
+};
+
+const titleStyle = {
+  color: '#4f545c',
+  marginLeft: 0,
+  marginRight: 10,
+  overflow: 'hidden',
+  wordWrap: 'break-word',
+  lineHeight: '24px',
+  fontSize: 16,
+  marginTop: 5,
+  marginBottom: 0,
+  fontWeight: 'bold',
+};
+
+const buttonStyle = {
+  marginTop: 10,
+  marginBottom: 10,
+  border: '#c5c5c5',
+  borderStyle: 'solid',
+  cursor: 'pointer',
+};
+
+const CanvasItem = ({ canvasId, canvas, changeCanvas }) => (
+  <div
+    style={buttonStyle}
+    onClick={() => { changeCanvas(canvasId); }}
+    role="button"
+    tabIndex={0}
+  >
+    <p style={textStyle}>
+      <img
+        style={{
+          float: 'left', maxWidth: '20%', margin: 5, opacity: 0.5,
+        }}
+        alt="preview"
+        src={`/preview${canvasId}.png`}
+      />
+      <span style={titleStyle}>{canvas.title}</span><br />
+      <span style={infoStyle}>{canvas.desc}</span><br />
+      Cooldown:
+      <span style={infoStyle}>
+        {(canvas.bcd !== canvas.pcd)
+          ? <span> {canvas.bcd / 1000}s / {canvas.pcd / 1000}s</span>
+          : <span> {canvas.bcd / 1000}s</span>}
+      </span><br />
+      Stacking till
+      <span style={infoStyle}> {canvas.cds / 1000}s</span><br />
+      {(canvas.req !== -1) ? <span>Requirements:<br /></span> : null}
+      <span style={infoStyle}>
+        {(canvas.req !== -1) ? <span>User Account </span> : null}
+        {(canvas.req > 0) ? <span> and {canvas.req} Pixels set</span> : null}
+      </span><br />
+      Dimensions:
+      <span style={infoStyle}> {canvas.size} x {canvas.size}
+        {(canvas.v)
+          ? <span> x {THREE_CANVAS_HEIGHT} Voxels</span>
+          : <span> Pixels</span>}
+      </span>
+    </p>
+  </div>
+);
+
+function mapDispatchToProps(dispatch) {
+  return {
+    changeCanvas(canvasId) {
+      dispatch(selectCanvas(canvasId));
+    },
+  };
+}
+
+export default connect(null, mapDispatchToProps)(CanvasItem);
diff --git a/src/components/CanvasSelectModal.jsx b/src/components/CanvasSelectModal.jsx
new file mode 100644
index 0000000..13c640b
--- /dev/null
+++ b/src/components/CanvasSelectModal.jsx
@@ -0,0 +1,53 @@
+/**
+ *
+ * @flow
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+// import FaFacebook from 'react-icons/lib/fa/facebook';
+// import FaTwitter from 'react-icons/lib/fa/twitter';
+// import FaRedditAlien from 'react-icons/lib/fa/reddit-alien';
+
+import Modal from './Modal';
+import CanvasItem from './CanvasItem';
+
+import type { State } from '../reducers';
+
+
+const textStyle = {
+  color: 'hsla(218, 5%, 47%, .6)',
+  fontSize: 14,
+  fontWeight: 500,
+  position: 'relative',
+  textAlign: 'inherit',
+  float: 'none',
+  margin: 0,
+  padding: 0,
+  lineHeight: 'normal',
+};
+
+
+const CanvasSelectModal = ({ canvases }) => (
+  <Modal title="Canvas Selection">
+    <p style={{ textAlign: 'center' }}>
+      <p style={textStyle}>
+        Select the canvas you want to use.
+        Every canvas is unique and has different palettes,
+        cooldown and requirements.
+      </p>
+      {
+        Object.keys(canvases).map((canvasId) => (
+          <CanvasItem canvasId={canvasId} canvas={canvases[canvasId]} />
+        ))
+      }
+    </p>
+  </Modal>
+);
+
+function mapStateToProps(state: State) {
+  const { canvases } = state.canvas;
+  return { canvases };
+}
+
+export default connect(mapStateToProps)(CanvasSelectModal);
diff --git a/src/components/CanvasSwitchButton.jsx b/src/components/CanvasSwitchButton.jsx
index 4c09dcf..180375b 100644
--- a/src/components/CanvasSwitchButton.jsx
+++ b/src/components/CanvasSwitchButton.jsx
@@ -5,16 +5,20 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { FaGlobe, FaGlobeAfrica } from 'react-icons/fa';
+import { FaGlobe } from 'react-icons/fa';
 
-import { switchCanvas } from '../actions';
+import { showCanvasSelectionModal } from '../actions';
 
 import type { State } from '../reducers';
 
 
-const CanvasSwitchButton = ({ canvasId, changeCanvas }) => (
-  <div id="canvasbutton" className="actionbuttons" onClick={() => changeCanvas(canvasId)}>
-    {(canvasId == 0) ? <FaGlobe /> : <FaGlobeAfrica />}
+const CanvasSwitchButton = ({ open }) => (
+  <div
+    id="canvasbutton"
+    className="actionbuttons"
+    onClick={open}
+  >
+    <FaGlobe />
   </div>
 );
 
@@ -25,12 +29,11 @@ function mapStateToProps(state: State) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    changeCanvas(canvasId) {
-      const newCanvasId = (canvasId == 0) ? 1 : 0;
-      dispatch(switchCanvas(newCanvasId));
+    open() {
+      dispatch(showCanvasSelectionModal());
     },
   };
 }
 
-export default connect(mapStateToProps,
+export default connect(null,
   mapDispatchToProps)(CanvasSwitchButton);
diff --git a/src/components/CoordinatesBox.jsx b/src/components/CoordinatesBox.jsx
index 1b1ddd6..0e8fbb8 100644
--- a/src/components/CoordinatesBox.jsx
+++ b/src/components/CoordinatesBox.jsx
@@ -6,26 +6,24 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { screenToWorld } from '../core/utils';
 import type { State } from '../reducers';
 
 
-function renderCoordinates([x, y]: Cell): string {
-  return `(${x}, ${y})`;
+function renderCoordinates(cell): string {
+  return `(${cell.join(', ')})`;
 }
 
-// TODO vaya chapuza, arreglalo un poco...
-// TODO create viewport state
-const CoordinatesBox = ({ state, view, hover }) => (
-  <div className="coorbox">{renderCoordinates(hover
-    ? screenToWorld(state, document.getElementById('gameWindow'), hover)
-    : view.map(Math.round))}</div>
+const CoordinatesBox = ({ view, hover }) => (
+  <div className="coorbox">{
+    renderCoordinates(hover
+    || view.map(Math.round))
+  }</div>
 );
 
 function mapStateToProps(state: State) {
   const { view } = state.canvas;
   const { hover } = state.gui;
-  return { view, state, hover };
+  return { view, hover };
 }
 
 export default connect(mapStateToProps)(CoordinatesBox);
diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
index bb1c2bc..64bc672 100644
--- a/src/components/Menu.jsx
+++ b/src/components/Menu.jsx
@@ -11,7 +11,6 @@ import LogInButton from './LogInButton';
 import DownloadButton from './DownloadButton';
 import MinecraftTPButton from './MinecraftTPButton';
 import MinecraftButton from './MinecraftButton';
-import VoxelButton from './VoxelButton';
 
 const Menu = ({
   menuOpen, minecraftname, messages, canvasId,
@@ -22,7 +21,6 @@ const Menu = ({
     {(menuOpen) ? <DownloadButton /> : null}
     {(menuOpen) ? <MinecraftButton /> : null}
     {(menuOpen) ? <HelpButton /> : null}
-    {(menuOpen) ? <VoxelButton /> : null}
     {(minecraftname && !messages.includes('not_mc_verified') && canvasId == 0) ? <MinecraftTPButton /> : null}
   </div>
 );
diff --git a/src/components/ModalRoot.jsx b/src/components/ModalRoot.jsx
index 46f1b5a..fbef484 100644
--- a/src/components/ModalRoot.jsx
+++ b/src/components/ModalRoot.jsx
@@ -12,6 +12,7 @@ import HelpModal from './HelpModal';
 import SettingsModal from './SettingsModal';
 import UserAreaModal from './UserAreaModal';
 import RegisterModal from './RegisterModal';
+import CanvasSelectModal from './CanvasSelectModal';
 import ChatModal from './ChatModal';
 import ForgotPasswordModal from './ForgotPasswordModal';
 import MinecraftModal from './MinecraftModal';
@@ -25,6 +26,7 @@ const MODAL_COMPONENTS = {
   FORGOT_PASSWORD: ForgotPasswordModal,
   CHAT: ChatModal,
   MINECRAFT: MinecraftModal,
+  CANVAS_SELECTION: CanvasSelectModal,
   /* other modals */
 };
 
diff --git a/src/components/NotifyBox.jsx b/src/components/NotifyBox.jsx
index 133e095..e52ef6d 100644
--- a/src/components/NotifyBox.jsx
+++ b/src/components/NotifyBox.jsx
@@ -10,12 +10,19 @@ import type { State } from '../reducers';
 
 let style = {};
 function getStyle(notification) {
-  if (notification) style = { backgroundColor: (notification >= 0) ? '#a9ffb0cc' : '#ffa9a9cc' };
+  if (notification) {
+    style = {
+      backgroundColor: (notification >= 0) ? '#a9ffb0cc' : '#ffa9a9cc',
+    };
+  }
   return style;
 }
 
 const NotifyBox = ({ notification }) => (
-  <div className={(notification) ? 'notifyboxvis' : 'notifyboxhid'} style={getStyle(notification)}>
+  <div
+    className={(notification) ? 'notifyboxvis' : 'notifyboxhid'}
+    style={getStyle(notification)}
+  >
     {notification}
   </div>
 );
diff --git a/src/components/UI.jsx b/src/components/UI.jsx
new file mode 100644
index 0000000..653790c
--- /dev/null
+++ b/src/components/UI.jsx
@@ -0,0 +1,42 @@
+/**
+ *
+ * @flow
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import type { State } from '../reducers';
+import CoolDownBox from './CoolDownBox';
+import NotifyBox from './NotifyBox';
+import GlobeButton from './GlobeButton';
+import PalselButton from './PalselButton';
+import Palette from './Palette';
+import HistorySelect from './HistorySelect';
+
+
+const UI = ({ isHistoricalView }) => {
+  if (isHistoricalView) {
+    return <HistorySelect />;
+  }
+  return (
+    <div>
+      <PalselButton />
+      <Palette />
+      <GlobeButton />
+      <CoolDownBox />
+      <NotifyBox />
+    </div>
+  );
+};
+
+function mapStateToProps(state: State) {
+  const {
+    isHistoricalView,
+  } = state.canvas;
+  return {
+    isHistoricalView,
+  };
+}
+
+export default connect(mapStateToProps)(UI);
diff --git a/src/components/VoxelButton.jsx b/src/components/VoxelButton.jsx
deleted file mode 100644
index a27182e..0000000
--- a/src/components/VoxelButton.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- *
- * @flow
- */
-
-import React from 'react';
-import { connect } from 'react-redux';
-import type { State } from '../reducers';
-
-async function switchVoxel() {
-  await import(/* webpackChunkName: "voxel" */ '../voxel');
-  console.log("Chunk voxel loaded");
-}
-
-
-const VoxelButton = ({
-  canvasId, canvasIdent, canvasSize, view,
-}) => (
-  <div id="voxelbutton" className="actionbuttons" onClick={switchVoxel}>
-  ♠
-  </div>
-);
-
-export default VoxelButton;
diff --git a/src/controls/OrbitControls.js b/src/controls/OrbitControls.js
deleted file mode 100644
index 0892af1..0000000
--- a/src/controls/OrbitControls.js
+++ /dev/null
@@ -1,1164 +0,0 @@
-/**
- * @author qiao / https://github.com/qiao
- * @author mrdoob / http://mrdoob.com
- * @author alteredq / http://alteredqualia.com/
- * @author WestLangley / http://github.com/WestLangley
- * @author erich666 / http://erichaines.com
- * @author ScieCode / http://github.com/sciecode
- */
-
-import {
-	EventDispatcher,
-	MOUSE,
-	Quaternion,
-	Spherical,
-	TOUCH,
-	Vector2,
-	Vector3
-} from "three";
-
-// This set of controls performs orbiting, dollying (zooming), and panning.
-// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
-//
-//    Orbit - left mouse / touch: one-finger move
-//    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
-//    Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
-
-var OrbitControls = function ( object, domElement ) {
-
-	if ( domElement === undefined ) console.warn( 'THREE.OrbitControls: The second parameter "domElement" is now mandatory.' );
-	if ( domElement === document ) console.error( 'THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
-
-	this.object = object;
-	this.domElement = domElement;
-
-	// Set to false to disable this control
-	this.enabled = true;
-
-	// "target" sets the location of focus, where the object orbits around
-	this.target = new Vector3();
-
-	// How far you can dolly in and out ( PerspectiveCamera only )
-	this.minDistance = 0;
-	this.maxDistance = Infinity;
-
-	// How far you can zoom in and out ( OrthographicCamera only )
-	this.minZoom = 0;
-	this.maxZoom = Infinity;
-
-	// How far you can orbit vertically, upper and lower limits.
-	// Range is 0 to Math.PI radians.
-	this.minPolarAngle = 0; // radians
-	this.maxPolarAngle = Math.PI; // radians
-
-	// How far you can orbit horizontally, upper and lower limits.
-	// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
-	this.minAzimuthAngle = - Infinity; // radians
-	this.maxAzimuthAngle = Infinity; // radians
-
-	// Set to true to enable damping (inertia)
-	// If damping is enabled, you must call controls.update() in your animation loop
-	this.enableDamping = false;
-	this.dampingFactor = 0.05;
-
-	// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
-	// Set to false to disable zooming
-	this.enableZoom = true;
-	this.zoomSpeed = 1.0;
-
-	// Set to false to disable rotating
-	this.enableRotate = true;
-	this.rotateSpeed = 1.0;
-
-	// Set to false to disable panning
-	this.enablePan = true;
-	this.panSpeed = 1.0;
-	this.screenSpacePanning = true; // if true, pan in screen-space
-	this.keyPanSpeed = 20.0;	// pixels moved per arrow key push
-
-	// Set to true to automatically rotate around the target
-	// If auto-rotate is enabled, you must call controls.update() in your animation loop
-	this.autoRotate = false;
-	this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
-
-	// Set to false to disable use of the keys
-	this.enableKeys = true;
-
-	// The four arrow keys
-	this.keys = { LEFT: 65, FORWARD: 87, RIGHT: 68, BACKWARD: 83 };
-
-	// Mouse buttons
-	this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
-
-	// Touch fingers
-	this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
-
-	// for reset
-	this.target0 = this.target.clone();
-	this.position0 = this.object.position.clone();
-	this.zoom0 = this.object.zoom;
-
-	//
-	// public methods
-	//
-
-	this.getPolarAngle = function () {
-
-		return spherical.phi;
-
-	};
-
-	this.getAzimuthalAngle = function () {
-
-		return spherical.theta;
-
-	};
-
-	this.saveState = function () {
-
-		scope.target0.copy( scope.target );
-		scope.position0.copy( scope.object.position );
-		scope.zoom0 = scope.object.zoom;
-
-	};
-
-	this.reset = function () {
-
-		scope.target.copy( scope.target0 );
-		scope.object.position.copy( scope.position0 );
-		scope.object.zoom = scope.zoom0;
-
-		scope.object.updateProjectionMatrix();
-		scope.dispatchEvent( changeEvent );
-
-		scope.update();
-
-		state = STATE.NONE;
-
-	};
-
-	// this method is exposed, but perhaps it would be better if we can make it private...
-	this.update = function () {
-
-		var offset = new Vector3();
-
-		// so camera.up is the orbit axis
-		var quat = new Quaternion().setFromUnitVectors( object.up, new Vector3( 0, 1, 0 ) );
-		var quatInverse = quat.clone().inverse();
-
-		var lastPosition = new Vector3();
-		var lastQuaternion = new Quaternion();
-
-		return function update() {
-
-			var position = scope.object.position;
-
-			offset.copy( position ).sub( scope.target );
-
-			// rotate offset to "y-axis-is-up" space
-			offset.applyQuaternion( quat );
-
-			// angle from z-axis around y-axis
-			spherical.setFromVector3( offset );
-
-			if ( scope.autoRotate && state === STATE.NONE ) {
-
-				rotateLeft( getAutoRotationAngle() );
-
-			}
-
-			if ( scope.enableDamping ) {
-
-				spherical.theta += sphericalDelta.theta * scope.dampingFactor;
-				spherical.phi += sphericalDelta.phi * scope.dampingFactor;
-
-			} else {
-
-				spherical.theta += sphericalDelta.theta;
-				spherical.phi += sphericalDelta.phi;
-
-			}
-
-			// restrict theta to be between desired limits
-			spherical.theta = Math.max( scope.minAzimuthAngle, Math.min( scope.maxAzimuthAngle, spherical.theta ) );
-
-			// restrict phi to be between desired limits
-			spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
-
-			spherical.makeSafe();
-
-
-			spherical.radius *= scale;
-
-			// restrict radius to be between desired limits
-			spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
-
-			// move target to panned location
-
-			if ( scope.enableDamping === true ) {
-
-				scope.target.addScaledVector( panOffset, scope.dampingFactor );
-
-			} else {
-
-				scope.target.add( panOffset );
-
-			}
-
-			offset.setFromSpherical( spherical );
-
-			// rotate offset back to "camera-up-vector-is-up" space
-			offset.applyQuaternion( quatInverse );
-
-			position.copy( scope.target ).add( offset );
-
-			scope.object.lookAt( scope.target );
-
-			if ( scope.enableDamping === true ) {
-
-				sphericalDelta.theta *= ( 1 - scope.dampingFactor );
-				sphericalDelta.phi *= ( 1 - scope.dampingFactor );
-
-				panOffset.multiplyScalar( 1 - scope.dampingFactor );
-
-			} else {
-
-				sphericalDelta.set( 0, 0, 0 );
-
-				panOffset.set( 0, 0, 0 );
-
-			}
-
-			scale = 1;
-
-			// update condition is:
-			// min(camera displacement, camera rotation in radians)^2 > EPS
-			// using small-angle approximation cos(x/2) = 1 - x^2 / 8
-
-			if ( zoomChanged ||
-				lastPosition.distanceToSquared( scope.object.position ) > EPS ||
-				8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
-
-				scope.dispatchEvent( changeEvent );
-
-				lastPosition.copy( scope.object.position );
-				lastQuaternion.copy( scope.object.quaternion );
-				zoomChanged = false;
-
-				return true;
-
-			}
-
-			return false;
-
-		};
-
-	}();
-
-	this.dispose = function () {
-
-		scope.domElement.removeEventListener( 'contextmenu', onContextMenu, false );
-		scope.domElement.removeEventListener( 'mousedown', onMouseDown, false );
-		scope.domElement.removeEventListener( 'wheel', onMouseWheel, false );
-
-		scope.domElement.removeEventListener( 'touchstart', onTouchStart, false );
-		scope.domElement.removeEventListener( 'touchend', onTouchEnd, false );
-		scope.domElement.removeEventListener( 'touchmove', onTouchMove, false );
-
-		document.removeEventListener( 'mousemove', onMouseMove, false );
-		document.removeEventListener( 'mouseup', onMouseUp, false );
-
-		scope.domElement.removeEventListener( 'keydown', onKeyDown, false );
-
-		//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
-
-	};
-
-	//
-	// internals
-	//
-
-	var scope = this;
-
-	var changeEvent = { type: 'change' };
-	var startEvent = { type: 'start' };
-	var endEvent = { type: 'end' };
-
-	var STATE = {
-		NONE: - 1,
-		ROTATE: 0,
-		DOLLY: 1,
-		PAN: 2,
-		TOUCH_ROTATE: 3,
-		TOUCH_PAN: 4,
-		TOUCH_DOLLY_PAN: 5,
-		TOUCH_DOLLY_ROTATE: 6
-	};
-
-	var state = STATE.NONE;
-
-	var EPS = 0.000001;
-
-	// current position in spherical coordinates
-	var spherical = new Spherical();
-	var sphericalDelta = new Spherical();
-
-	var scale = 1;
-	var panOffset = new Vector3();
-	var zoomChanged = false;
-
-	var rotateStart = new Vector2();
-	var rotateEnd = new Vector2();
-	var rotateDelta = new Vector2();
-
-	var panStart = new Vector2();
-	var panEnd = new Vector2();
-	var panDelta = new Vector2();
-
-	var dollyStart = new Vector2();
-	var dollyEnd = new Vector2();
-	var dollyDelta = new Vector2();
-
-	function getAutoRotationAngle() {
-
-		return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
-
-	}
-
-	function getZoomScale() {
-
-		return Math.pow( 0.95, scope.zoomSpeed );
-
-	}
-
-	function rotateLeft( angle ) {
-
-		sphericalDelta.theta -= angle;
-
-	}
-
-	function rotateUp( angle ) {
-
-		sphericalDelta.phi -= angle;
-
-	}
-
-	var panLeft = function () {
-
-		var v = new Vector3();
-
-		return function panLeft( distance, objectMatrix ) {
-
-			v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
-			v.multiplyScalar( - distance );
-
-			panOffset.add( v );
-
-		};
-
-	}();
-
-	var panUp = function () {
-
-		var v = new Vector3();
-
-		return function panUp( distance, objectMatrix ) {
-
-			if ( scope.screenSpacePanning === true ) {
-
-				v.setFromMatrixColumn( objectMatrix, 1 );
-
-			} else {
-
-				v.setFromMatrixColumn( objectMatrix, 0 );
-				v.crossVectors( scope.object.up, v );
-
-			}
-
-			v.multiplyScalar( distance );
-
-			//panOffset.add( v );
-      scope.object.z += 50;
-
-		};
-
-	}();
-
-	// deltaX and deltaY are in pixels; right and down are positive
-	var pan = function () {
-
-		var offset = new Vector3();
-
-		return function pan( deltaX, deltaY ) {
-
-			var element = scope.domElement;
-
-			if ( scope.object.isPerspectiveCamera ) {
-
-				// perspective
-				var position = scope.object.position;
-				offset.copy( position ).sub( scope.target );
-				var targetDistance = offset.length();
-
-				// half of the fov is center to top of screen
-				targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
-
-				// we use only clientHeight here so aspect ratio does not distort speed
-				panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
-				panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
-
-			} else if ( scope.object.isOrthographicCamera ) {
-
-				// orthographic
-				panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
-				panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
-
-			} else {
-
-				// camera neither orthographic nor perspective
-				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
-				scope.enablePan = false;
-
-			}
-
-		};
-
-	}();
-
-	function dollyIn( dollyScale ) {
-
-		if ( scope.object.isPerspectiveCamera ) {
-
-			scale /= dollyScale;
-
-		} else if ( scope.object.isOrthographicCamera ) {
-
-			scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) );
-			scope.object.updateProjectionMatrix();
-			zoomChanged = true;
-
-		} else {
-
-			console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
-			scope.enableZoom = false;
-
-		}
-
-	}
-
-	function dollyOut( dollyScale ) {
-
-		if ( scope.object.isPerspectiveCamera ) {
-
-			scale *= dollyScale;
-
-		} else if ( scope.object.isOrthographicCamera ) {
-
-			scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) );
-			scope.object.updateProjectionMatrix();
-			zoomChanged = true;
-
-		} else {
-
-			console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
-			scope.enableZoom = false;
-
-		}
-
-	}
-
-	//
-	// event callbacks - update the object state
-	//
-
-	function handleMouseDownRotate( event ) {
-
-		rotateStart.set( event.clientX, event.clientY );
-
-	}
-
-	function handleMouseDownDolly( event ) {
-
-		dollyStart.set( event.clientX, event.clientY );
-
-	}
-
-	function handleMouseDownPan( event ) {
-
-		panStart.set( event.clientX, event.clientY );
-
-	}
-
-	function handleMouseMoveRotate( event ) {
-
-		rotateEnd.set( event.clientX, event.clientY );
-
-		rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
-
-		var element = scope.domElement;
-
-		rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
-
-		rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
-
-		rotateStart.copy( rotateEnd );
-
-		scope.update();
-
-	}
-
-	function handleMouseMoveDolly( event ) {
-
-		dollyEnd.set( event.clientX, event.clientY );
-
-		dollyDelta.subVectors( dollyEnd, dollyStart );
-
-		if ( dollyDelta.y > 0 ) {
-
-			dollyIn( getZoomScale() );
-
-		} else if ( dollyDelta.y < 0 ) {
-
-			dollyOut( getZoomScale() );
-
-		}
-
-		dollyStart.copy( dollyEnd );
-
-		scope.update();
-
-	}
-
-	function handleMouseMovePan( event ) {
-
-		panEnd.set( event.clientX, event.clientY );
-
-		panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
-
-		pan( panDelta.x, panDelta.y );
-
-		panStart.copy( panEnd );
-
-		scope.update();
-
-	}
-
-	function handleMouseUp( /*event*/ ) {
-
-		// no-op
-
-	}
-
-	function handleMouseWheel( event ) {
-
-		if ( event.deltaY < 0 ) {
-
-			dollyOut( getZoomScale() );
-
-		} else if ( event.deltaY > 0 ) {
-
-			dollyIn( getZoomScale() );
-
-		}
-
-		scope.update();
-
-	}
-
-	function handleKeyDown( event ) {
-
-		var needsUpdate = false;
-    console.log(event.keyCode);
-
-		switch ( event.keyCode ) {
-
-			case scope.keys.FORWARD:
-				pan( 0, scope.keyPanSpeed );
-				needsUpdate = true;
-				break;
-
-			case scope.keys.BACKWARD:
-				pan( 0, - scope.keyPanSpeed );
-				needsUpdate = true;
-				break;
-
-			case scope.keys.LEFT:
-				pan( scope.keyPanSpeed, 0 );
-				needsUpdate = true;
-				break;
-
-			case scope.keys.RIGHT:
-				pan( - scope.keyPanSpeed, 0 );
-				needsUpdate = true;
-				break;
-
-		}
-
-		if ( needsUpdate ) {
-
-			// prevent the browser from scrolling on cursor keys
-			event.preventDefault();
-
-			scope.update();
-
-		}
-
-
-	}
-
-	function handleTouchStartRotate( event ) {
-
-		if ( event.touches.length == 1 ) {
-
-			rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
-
-		} else {
-
-			var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
-			var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
-
-			rotateStart.set( x, y );
-
-		}
-
-	}
-
-	function handleTouchStartPan( event ) {
-
-		if ( event.touches.length == 1 ) {
-
-			panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
-
-		} else {
-
-			var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
-			var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
-
-			panStart.set( x, y );
-
-		}
-
-	}
-
-	function handleTouchStartDolly( event ) {
-
-		var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
-		var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
-
-		var distance = Math.sqrt( dx * dx + dy * dy );
-
-		dollyStart.set( 0, distance );
-
-	}
-
-	function handleTouchStartDollyPan( event ) {
-
-		if ( scope.enableZoom ) handleTouchStartDolly( event );
-
-		if ( scope.enablePan ) handleTouchStartPan( event );
-
-	}
-
-	function handleTouchStartDollyRotate( event ) {
-
-		if ( scope.enableZoom ) handleTouchStartDolly( event );
-
-		if ( scope.enableRotate ) handleTouchStartRotate( event );
-
-	}
-
-	function handleTouchMoveRotate( event ) {
-
-		if ( event.touches.length == 1 ) {
-
-			rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
-
-		} else {
-
-			var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
-			var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
-
-			rotateEnd.set( x, y );
-
-		}
-
-		rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
-
-		var element = scope.domElement;
-
-		rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
-
-		rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
-
-		rotateStart.copy( rotateEnd );
-
-	}
-
-	function handleTouchMovePan( event ) {
-
-		if ( event.touches.length == 1 ) {
-
-			panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
-
-		} else {
-
-			var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
-			var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
-
-			panEnd.set( x, y );
-
-		}
-
-		panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
-
-		pan( panDelta.x, panDelta.y );
-
-		panStart.copy( panEnd );
-
-	}
-
-	function handleTouchMoveDolly( event ) {
-
-		var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
-		var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
-
-		var distance = Math.sqrt( dx * dx + dy * dy );
-
-		dollyEnd.set( 0, distance );
-
-		dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
-
-		dollyIn( dollyDelta.y );
-
-		dollyStart.copy( dollyEnd );
-
-	}
-
-	function handleTouchMoveDollyPan( event ) {
-
-		if ( scope.enableZoom ) handleTouchMoveDolly( event );
-
-		if ( scope.enablePan ) handleTouchMovePan( event );
-
-	}
-
-	function handleTouchMoveDollyRotate( event ) {
-
-		if ( scope.enableZoom ) handleTouchMoveDolly( event );
-
-		if ( scope.enableRotate ) handleTouchMoveRotate( event );
-
-	}
-
-	function handleTouchEnd( /*event*/ ) {
-
-		// no-op
-
-	}
-
-	//
-	// event handlers - FSM: listen for events and reset state
-	//
-
-	function onMouseDown( event ) {
-
-		if ( scope.enabled === false ) return;
-
-		// Prevent the browser from scrolling.
-		event.preventDefault();
-
-		// Manually set the focus since calling preventDefault above
-		// prevents the browser from setting it automatically.
-
-		scope.domElement.focus ? scope.domElement.focus() : window.focus();
-
-		var mouseAction;
-
-		switch ( event.button ) {
-
-			case 0:
-
-				mouseAction = scope.mouseButtons.LEFT;
-				break;
-
-			case 1:
-
-				mouseAction = scope.mouseButtons.MIDDLE;
-				break;
-
-			case 2:
-
-				mouseAction = scope.mouseButtons.RIGHT;
-				break;
-
-			default:
-
-				mouseAction = - 1;
-
-		}
-
-		switch ( mouseAction ) {
-
-			case MOUSE.DOLLY:
-
-				if ( scope.enableZoom === false ) return;
-
-				handleMouseDownDolly( event );
-
-				state = STATE.DOLLY;
-
-				break;
-
-			case MOUSE.ROTATE:
-
-				if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-					if ( scope.enablePan === false ) return;
-
-					handleMouseDownPan( event );
-
-					state = STATE.PAN;
-
-				} else {
-
-					if ( scope.enableRotate === false ) return;
-
-					handleMouseDownRotate( event );
-
-					state = STATE.ROTATE;
-
-				}
-
-				break;
-
-			case MOUSE.PAN:
-
-				if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-					if ( scope.enableRotate === false ) return;
-
-					handleMouseDownRotate( event );
-
-					state = STATE.ROTATE;
-
-				} else {
-
-					if ( scope.enablePan === false ) return;
-
-					handleMouseDownPan( event );
-
-					state = STATE.PAN;
-
-				}
-
-				break;
-
-			default:
-
-				state = STATE.NONE;
-
-		}
-
-		if ( state !== STATE.NONE ) {
-
-			document.addEventListener( 'mousemove', onMouseMove, false );
-			document.addEventListener( 'mouseup', onMouseUp, false );
-
-			scope.dispatchEvent( startEvent );
-
-		}
-
-	}
-
-	function onMouseMove( event ) {
-
-		if ( scope.enabled === false ) return;
-
-		event.preventDefault();
-
-		switch ( state ) {
-
-			case STATE.ROTATE:
-
-				if ( scope.enableRotate === false ) return;
-
-				handleMouseMoveRotate( event );
-
-				break;
-
-			case STATE.DOLLY:
-
-				if ( scope.enableZoom === false ) return;
-
-				handleMouseMoveDolly( event );
-
-				break;
-
-			case STATE.PAN:
-
-				if ( scope.enablePan === false ) return;
-
-				handleMouseMovePan( event );
-
-				break;
-
-		}
-
-	}
-
-	function onMouseUp( event ) {
-
-		if ( scope.enabled === false ) return;
-
-		handleMouseUp( event );
-
-		document.removeEventListener( 'mousemove', onMouseMove, false );
-		document.removeEventListener( 'mouseup', onMouseUp, false );
-
-		scope.dispatchEvent( endEvent );
-
-		state = STATE.NONE;
-
-	}
-
-	function onMouseWheel( event ) {
-
-		if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return;
-
-		event.preventDefault();
-		event.stopPropagation();
-
-		scope.dispatchEvent( startEvent );
-
-		handleMouseWheel( event );
-
-		scope.dispatchEvent( endEvent );
-
-	}
-
-	function onKeyDown( event ) {
-
-		if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return;
-
-		handleKeyDown( event );
-
-	}
-
-	function onTouchStart( event ) {
-
-		if ( scope.enabled === false ) return;
-
-		event.preventDefault();
-
-		switch ( event.touches.length ) {
-
-			case 1:
-
-				switch ( scope.touches.ONE ) {
-
-					case TOUCH.ROTATE:
-
-						if ( scope.enableRotate === false ) return;
-
-						handleTouchStartRotate( event );
-
-						state = STATE.TOUCH_ROTATE;
-
-						break;
-
-					case TOUCH.PAN:
-
-						if ( scope.enablePan === false ) return;
-
-						handleTouchStartPan( event );
-
-						state = STATE.TOUCH_PAN;
-
-						break;
-
-					default:
-
-						state = STATE.NONE;
-
-				}
-
-				break;
-
-			case 2:
-
-				switch ( scope.touches.TWO ) {
-
-					case TOUCH.DOLLY_PAN:
-
-						if ( scope.enableZoom === false && scope.enablePan === false ) return;
-
-						handleTouchStartDollyPan( event );
-
-						state = STATE.TOUCH_DOLLY_PAN;
-
-						break;
-
-					case TOUCH.DOLLY_ROTATE:
-
-						if ( scope.enableZoom === false && scope.enableRotate === false ) return;
-
-						handleTouchStartDollyRotate( event );
-
-						state = STATE.TOUCH_DOLLY_ROTATE;
-
-						break;
-
-					default:
-
-						state = STATE.NONE;
-
-				}
-
-				break;
-
-			default:
-
-				state = STATE.NONE;
-
-		}
-
-		if ( state !== STATE.NONE ) {
-
-			scope.dispatchEvent( startEvent );
-
-		}
-
-	}
-
-	function onTouchMove( event ) {
-
-		if ( scope.enabled === false ) return;
-
-		event.preventDefault();
-		event.stopPropagation();
-
-		switch ( state ) {
-
-			case STATE.TOUCH_ROTATE:
-
-				if ( scope.enableRotate === false ) return;
-
-				handleTouchMoveRotate( event );
-
-				scope.update();
-
-				break;
-
-			case STATE.TOUCH_PAN:
-
-				if ( scope.enablePan === false ) return;
-
-				handleTouchMovePan( event );
-
-				scope.update();
-
-				break;
-
-			case STATE.TOUCH_DOLLY_PAN:
-
-				if ( scope.enableZoom === false && scope.enablePan === false ) return;
-
-				handleTouchMoveDollyPan( event );
-
-				scope.update();
-
-				break;
-
-			case STATE.TOUCH_DOLLY_ROTATE:
-
-				if ( scope.enableZoom === false && scope.enableRotate === false ) return;
-
-				handleTouchMoveDollyRotate( event );
-
-				scope.update();
-
-				break;
-
-			default:
-
-				state = STATE.NONE;
-
-		}
-
-	}
-
-	function onTouchEnd( event ) {
-
-		if ( scope.enabled === false ) return;
-
-		handleTouchEnd( event );
-
-		scope.dispatchEvent( endEvent );
-
-		state = STATE.NONE;
-
-	}
-
-	function onContextMenu( event ) {
-
-		if ( scope.enabled === false ) return;
-
-		event.preventDefault();
-
-	}
-
-	//
-
-	scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );
-
-	scope.domElement.addEventListener( 'mousedown', onMouseDown, false );
-	scope.domElement.addEventListener( 'wheel', onMouseWheel, false );
-
-	scope.domElement.addEventListener( 'touchstart', onTouchStart, false );
-	scope.domElement.addEventListener( 'touchend', onTouchEnd, false );
-	scope.domElement.addEventListener( 'touchmove', onTouchMove, false );
-
-	scope.domElement.addEventListener( 'keydown', onKeyDown, false );
-
-	// make sure element can receive keys.
-
-	if ( scope.domElement.tabIndex === - 1 ) {
-
-		scope.domElement.tabIndex = 0;
-
-	}
-
-	// force an update at start
-
-	this.update();
-
-};
-
-OrbitControls.prototype = Object.create( EventDispatcher.prototype );
-OrbitControls.prototype.constructor = OrbitControls;
-
-
-// This set of controls performs orbiting, dollying (zooming), and panning.
-// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
-// This is very similar to OrbitControls, another set of touch behavior
-//
-//    Orbit - right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate
-//    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
-//    Pan - left mouse, or arrow keys / touch: one-finger move
-
-var MapControls = function ( object, domElement ) {
-
-	OrbitControls.call( this, object, domElement );
-
-	this.mouseButtons.LEFT = MOUSE.PAN;
-	this.mouseButtons.RIGHT = MOUSE.ROTATE;
-
-	this.touches.ONE = TOUCH.PAN;
-	this.touches.TWO = TOUCH.DOLLY_ROTATE;
-
-};
-
-MapControls.prototype = Object.create( EventDispatcher.prototype );
-MapControls.prototype.constructor = MapControls;
-
-export { OrbitControls, MapControls };
diff --git a/src/controls/PixelPainterControls.js b/src/controls/PixelPainterControls.js
new file mode 100644
index 0000000..8616f67
--- /dev/null
+++ b/src/controls/PixelPainterControls.js
@@ -0,0 +1,210 @@
+/*
+ * Creates Viewport for 2D Canvas
+ *
+ * @flow
+ */
+
+import Hammer from 'hammerjs';
+import keycode from 'keycode';
+
+import {
+  tryPlacePixel,
+  setHover,
+  unsetHover,
+  setViewCoordinates,
+  setScale,
+  zoomIn,
+  zoomOut,
+  selectColor,
+  moveNorth,
+  moveWest,
+  moveSouth,
+  moveEast,
+  onViewFinishChange,
+} from '../actions';
+import {
+  screenToWorld,
+} from '../core/utils';
+
+let store = null;
+
+function onKeyPress(event: KeyboardEvent) {
+  // ignore key presses if modal is open or chat is used
+  if (event.target.nodeName === 'INPUT'
+    || event.target.nodeName === 'TEXTAREA'
+  ) {
+    return;
+  }
+
+  switch (keycode(event)) {
+    case 'up':
+    case 'w':
+      store.dispatch(moveNorth());
+      break;
+    case 'left':
+    case 'a':
+      store.dispatch(moveWest());
+      break;
+    case 'down':
+    case 's':
+      store.dispatch(moveSouth());
+      break;
+    case 'right':
+    case 'd':
+      store.dispatch(moveEast());
+      break;
+    /*
+    case 'space':
+      if ($viewport) $viewport.click();
+      return;
+    */
+    case '+':
+    case 'e':
+      store.dispatch(zoomIn());
+      break;
+    case '-':
+    case 'q':
+      store.dispatch(zoomOut());
+      break;
+    default:
+  }
+}
+
+export function initControls(renderer, viewport: HTMLCanvasElement, curStore) {
+  store = curStore;
+  viewport.onmousemove = ({ clientX, clientY }: MouseEvent) => {
+    const state = store.getState();
+    const screenCoor = screenToWorld(state, viewport, [clientX, clientY]);
+    store.dispatch(setHover(screenCoor));
+  };
+  viewport.onmouseout = () => {
+    store.dispatch(unsetHover());
+  };
+  viewport.onwheel = ({ deltaY }: WheelEvent) => {
+    const state = store.getState();
+    const { hover } = state.gui;
+    let zoompoint = null;
+    if (hover) {
+      zoompoint = hover;
+    }
+    if (deltaY < 0) {
+      store.dispatch(zoomIn(zoompoint));
+    }
+    if (deltaY > 0) {
+      store.dispatch(zoomOut(zoompoint));
+    }
+    store.dispatch(onViewFinishChange());
+  };
+  viewport.onauxclick = ({ which, clientX, clientY }: MouseEvent) => {
+    // middle mouse button
+    if (which !== 2) {
+      return;
+    }
+    const state = store.getState();
+    if (state.canvas.scale < 3) {
+      return;
+    }
+    const coords = screenToWorld(state, viewport, [clientX, clientY]);
+    const clrIndex = renderer.getColorIndexOfPixel(...coords);
+    if (clrIndex === null) {
+      return;
+    }
+    store.dispatch(selectColor(clrIndex));
+  };
+
+  // fingers controls on touch
+  const hammertime = new Hammer(viewport);
+  hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
+  hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
+  // Zoom-in Zoom-out in touch devices
+  hammertime.get('pinch').set({ enable: true });
+
+  hammertime.on('tap', ({ center }) => {
+    const state = store.getState();
+    const { autoZoomIn, selectedColor } = state.gui;
+    const { placeAllowed } = state.user;
+
+    const {
+      scale,
+      isHistoricalView,
+    } = state.canvas;
+    if (isHistoricalView) return;
+
+    const { x, y } = center;
+    const cell = screenToWorld(state, viewport, [x, y]);
+
+    if (autoZoomIn && scale < 8) {
+      store.dispatch(setViewCoordinates(cell));
+      store.dispatch(setScale(12));
+      return;
+    }
+
+    // don't allow placing of pixel just on low zoomlevels
+    if (scale < 3) return;
+
+    if (!placeAllowed) return;
+
+    // dirty trick: to fetch only before multiple 3 AND on user action
+    // if (pixelsPlaced % 3 === 0) requestAds();
+
+    if (selectedColor !== renderer.getColorIndexOfPixel(...cell)) {
+      store.dispatch(tryPlacePixel(cell));
+    }
+  });
+
+  const initialState: State = store.getState();
+  [window.lastPosX, window.lastPosY] = initialState.canvas.view;
+  let lastScale = initialState.canvas.scale;
+  hammertime.on(
+    'panstart pinchstart pan pinch panend pinchend',
+    ({
+      type, deltaX, deltaY, scale,
+    }) => {
+      viewport.style.cursor = 'move'; // like google maps
+      const { scale: viewportScale } = store.getState().canvas;
+
+      // pinch start
+      if (type === 'pinchstart') {
+        store.dispatch(unsetHover());
+        lastScale = viewportScale;
+      }
+
+      // panstart
+      if (type === 'panstart') {
+        store.dispatch(unsetHover());
+        const { view: initView } = store.getState().canvas;
+        [window.lastPosX, window.lastPosY] = initView;
+      }
+
+      // pinch
+      if (type === 'pinch') {
+        store.dispatch(setScale(lastScale * scale));
+      }
+
+      // pan
+      store.dispatch(setViewCoordinates([
+        window.lastPosX - (deltaX / viewportScale),
+        window.lastPosY - (deltaY / viewportScale),
+      ]));
+
+      // pinch end
+      if (type === 'pinchend') {
+        lastScale = viewportScale;
+      }
+
+      // panend
+      if (type === 'panend') {
+        store.dispatch(onViewFinishChange());
+        const { view } = store.getState().canvas;
+        [window.lastPosX, window.lastPosY] = view;
+        viewport.style.cursor = 'auto';
+      }
+    },
+  );
+
+  document.addEventListener('keydown', onKeyPress, false);
+}
+
+export function removeControls() {
+  document.removeEventListener('keydown', onKeyPress, false);
+}
diff --git a/src/controls/VoxelPainterControls.js b/src/controls/VoxelPainterControls.js
index f127961..ee7f189 100644
--- a/src/controls/VoxelPainterControls.js
+++ b/src/controls/VoxelPainterControls.js
@@ -1,1249 +1,991 @@
 /**
+ * Original from OrbitControl of the three.js package from
+ *
  * @author qiao / https://github.com/qiao
  * @author mrdoob / http://mrdoob.com
  * @author alteredq / http://alteredqualia.com/
  * @author WestLangley / http://github.com/WestLangley
  * @author erich666 / http://erichaines.com
  * @author ScieCode / http://github.com/sciecode
+ *
+ * Changes for smooth key movement from
+ *
+ * @author hf / http://github.com/pixelplanetdev
  */
 
-import {
-	EventDispatcher,
-	MOUSE,
-	Quaternion,
-	Spherical,
-	TOUCH,
-	Vector2,
-	Vector3,
-} from "three";
+/* eslint-disable no-console */
 
-// This set of controls performs orbiting, dollying (zooming), and panning.
-// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
+import {
+  EventDispatcher,
+  MOUSE,
+  Quaternion,
+  Spherical,
+  TOUCH,
+  Vector2,
+  Vector3,
+} from 'three';
+
+// This set of controls performs orbiting, dollying (zooming),
+// and panning and smooth moving by keys.
 //
 //    Orbit - left mouse / touch: one-finger move
 //    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
-//    Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
-
-var VoxelPainterControls = function ( object, domElement ) {
-
-	if ( domElement === undefined ) console.warn( 'THREE.VoxelPainterControls: The second parameter "domElement" is now mandatory.' );
-	if ( domElement === document ) console.error( 'THREE.VoxelPainterControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
-
-	this.object = object;
-	this.domElement = domElement;
-
-	// Set to false to disable this control
-	this.enabled = true;
-
-	// "target" sets the location of focus, where the object orbits around
-	this.target = new Vector3();
-
-	// How far you can dolly in and out ( PerspectiveCamera only )
-	this.minDistance = 0;
-	this.maxDistance = Infinity;
-
-	// How far you can zoom in and out ( OrthographicCamera only )
-	this.minZoom = 0;
-	this.maxZoom = Infinity;
-
-	// How far you can orbit vertically, upper and lower limits.
-	// Range is 0 to Math.PI radians.
-	this.minPolarAngle = 0; // radians
-	this.maxPolarAngle = Math.PI; // radians
-
-	// How far you can orbit horizontally, upper and lower limits.
-	// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
-	this.minAzimuthAngle = - Infinity; // radians
-	this.maxAzimuthAngle = Infinity; // radians
-
-	// Set to true to enable damping (inertia)
-	// If damping is enabled, you must call controls.update() in your animation loop
-	this.enableDamping = false;
-	this.dampingFactor = 0.05;
-
-	// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
-	// Set to false to disable zooming
-	this.enableZoom = true;
-	this.zoomSpeed = 1.0;
-
-	// Set to false to disable rotating
-	this.enableRotate = true;
-	this.rotateSpeed = 1.0;
-
-	// Set to false to disable panning
-	this.enablePan = true;
-	this.panSpeed = 1.0;
-	this.screenSpacePanning = true; // if true, pan in screen-space
-	this.keyPanSpeed = 20.0;	// pixels moved per arrow key push
-
-	// Set to true to automatically rotate around the target
-	// If auto-rotate is enabled, you must call controls.update() in your animation loop
-	this.autoRotate = false;
-	this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
-
-	// Mouse buttons
-	this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
-
-	// Touch fingers
-	this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
-
-	// for reset
-	this.target0 = this.target.clone();
-	this.position0 = this.object.position.clone();
-	this.zoom0 = this.object.zoom;
-
-	//
-	// public methods
-	//
-
-	this.getPolarAngle = function () {
-
-		return spherical.phi;
-
-	};
-
-	this.getAzimuthalAngle = function () {
-
-		return spherical.theta;
-
-	};
-
-	this.saveState = function () {
-
-		scope.target0.copy( scope.target );
-		scope.position0.copy( scope.object.position );
-		scope.zoom0 = scope.object.zoom;
-
-	};
-
-	this.reset = function () {
-
-		scope.target.copy( scope.target0 );
-		scope.object.position.copy( scope.position0 );
-		scope.object.zoom = scope.zoom0;
-
-		scope.object.updateProjectionMatrix();
-		scope.dispatchEvent( changeEvent );
-
-		scope.update();
-
-		state = STATE.NONE;
-
-	};
-
-	// this method is exposed, but perhaps it would be better if we can make it private...
-	this.update = function () {
-
-		var offset = new Vector3();
-
-		// so camera.up is the orbit axis
-		var quat = new Quaternion().setFromUnitVectors( object.up, new Vector3( 0, 1, 0 ) );
-		var quatInverse = quat.clone().inverse();
-
-		var lastPosition = new Vector3();
-		var lastQuaternion = new Quaternion();
-
-    var direction = new Vector3();
-    var velocity = new Vector3();
-    var prevTime = Date.now();
-    var logTime = Date.now();
-    var vec = new Vector3();
-
-		return function update() {
-      var time = Date.now();
-
-      var log = false;
-      if (time - logTime > 2000) {
-        logTime = time;
-        log = true;
-      }
-
-      var delta = ( time - prevTime ) / 1000.0;
-      velocity.x -= velocity.x * 50.0 * delta;
-      velocity.y -= velocity.y * 50.0 * delta;
-      velocity.z -= velocity.z * 50.0 * delta;
-      const length = velocity.length();
-      if (length < 1 || length > 10) {
-        velocity.set(0, 0, 0);
-      }
-
-      direction.x = Number( moveRight ) - Number( moveLeft );
-      direction.y = Number( moveUp ) - Number( moveDown );
-      direction.z = Number( moveForward ) - Number( moveBackward );
-      direction.normalize();
-
-      if ( moveLeft || moveRight ) velocity.x -= direction.x * 5000.0 * delta;
-      if ( moveUp || moveDown ) velocity.y -= direction.y * 5000.0 * delta;
-      if ( moveForward || moveBackward ) velocity.z -= direction.z * 2500.0 * delta;
-
-      // controls.moveRight( -velocity.x * delta);
-      // controls.moveUp( -velocity.y * delta);
-      // forward
-      if (log) {
-        console.log(vec.x, vec.y, vec.z, delta);
-      }
-      vec.setFromMatrixColumn( scope.object.matrix, 0 );
-      vec.crossVectors( scope.object.up, vec);
-			vec.multiplyScalar( -velocity.z * delta );
-			vec.y += -velocity.y * delta;
-			panOffset.add( vec );
-      vec.setFromMatrixColumn( scope.object.matrix, 0 );
-			vec.multiplyScalar( -velocity.x * delta );
-			panOffset.add( vec );
-
-      prevTime = time;
-
-
-			var position = scope.object.position;
-
-			offset.copy( position ).sub( scope.target );
-
-			// rotate offset to "y-axis-is-up" space
-			offset.applyQuaternion( quat );
-
-			// angle from z-axis around y-axis
-			spherical.setFromVector3( offset );
-
-			if ( scope.autoRotate && state === STATE.NONE ) {
-
-				rotateLeft( getAutoRotationAngle() );
-
-			}
-
-			if ( scope.enableDamping ) {
-
-				spherical.theta += sphericalDelta.theta * scope.dampingFactor;
-				spherical.phi += sphericalDelta.phi * scope.dampingFactor;
-
-			} else {
-
-				spherical.theta += sphericalDelta.theta;
-				spherical.phi += sphericalDelta.phi;
-
-			}
-
-			// restrict theta to be between desired limits
-			spherical.theta = Math.max( scope.minAzimuthAngle, Math.min( scope.maxAzimuthAngle, spherical.theta ) );
-
-			// restrict phi to be between desired limits
-			spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
-
-			spherical.makeSafe();
-
-
-			spherical.radius *= scale;
-
-			// restrict radius to be between desired limits
-			spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
-
-			// move target to panned location
-
-      if (panOffset.length() > 10000) {
-        panOffset.set(0, 0, 0);
-      }
-			if ( scope.enableDamping === true ) {
-				scope.target.addScaledVector( panOffset, scope.dampingFactor );
-			} else {
-				scope.target.add( panOffset );
-			}
-      if (scope.target.y < 10.0) {
-        scope.target.y = 10.0;
-      }
-
-
-			offset.setFromSpherical( spherical );
-
-			// rotate offset back to "camera-up-vector-is-up" space
-			offset.applyQuaternion( quatInverse );
-
-			position.copy( scope.target ).add( offset );
-
-			scope.object.lookAt( scope.target );
-
-			if ( scope.enableDamping === true ) {
-
-				sphericalDelta.theta *= ( 1 - scope.dampingFactor );
-				sphericalDelta.phi *= ( 1 - scope.dampingFactor );
-
-				panOffset.multiplyScalar( 1 - scope.dampingFactor );
-
-			} else {
-
-				sphericalDelta.set( 0, 0, 0 );
-
-				panOffset.set( 0, 0, 0 );
-
-			}
-
-			scale = 1;
-
-			// update condition is:
-			// min(camera displacement, camera rotation in radians)^2 > EPS
-			// using small-angle approximation cos(x/2) = 1 - x^2 / 8
-
-			if ( zoomChanged ||
-				lastPosition.distanceToSquared( scope.object.position ) > EPS ||
-				8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
-
-				scope.dispatchEvent( changeEvent );
-
-				lastPosition.copy( scope.object.position );
-				lastQuaternion.copy( scope.object.quaternion );
-				zoomChanged = false;
-
-				return true;
-
-			}
-
-			return false;
-
-		};
-
-	}();
-
-	this.dispose = function () {
-
-		scope.domElement.removeEventListener( 'contextmenu', onContextMenu, false );
-		scope.domElement.removeEventListener( 'mousedown', onMouseDown, false );
-		scope.domElement.removeEventListener( 'wheel', onMouseWheel, false );
-
-		scope.domElement.removeEventListener( 'touchstart', onTouchStart, false );
-		scope.domElement.removeEventListener( 'touchend', onTouchEnd, false );
-		scope.domElement.removeEventListener( 'touchmove', onTouchMove, false );
-
-		document.removeEventListener( 'mousemove', onMouseMove, false );
-		document.removeEventListener( 'mouseup', onMouseUp, false );
-    document.removeEventListener( 'keydown', onDocumentKeyDown, false );
-    document.removeEventListener( 'keyup', onDocumentKeyUp, false );
-
-		//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
-
-	};
-
-  var vec = new Vector3();
-
-  this.moveForward = ( distance ) => {
-    console.log("forward");
-    return;
-    vec.setFromMatrixColumn( scope.object.matrix, 0 );
-    vec.crossVectors( scope.object.up, vec);
-    scope.object.position.addScaledVector( vec, distance );
-  };
-  this.moveRight = ( distance ) => {
-    console.log("down");
-    return;
-    vec.setFromMatrixColumn( scope.object.matrix, 0 );
-    scope.object.position.addScaledVector( vec, distance );
-  };
-  this.moveUp = ( distance ) => {
-    console.log("up");
-    return;
-    scope.object.position.y += distance;
-  };
-
-	//
-	// internals
-	//
-
-	var scope = this;
-
-	var changeEvent = { type: 'change' };
-	var startEvent = { type: 'start' };
-	var endEvent = { type: 'end' };
-
-	var STATE = {
-		NONE: - 1,
-		ROTATE: 0,
-		DOLLY: 1,
-		PAN: 2,
-		TOUCH_ROTATE: 3,
-		TOUCH_PAN: 4,
-		TOUCH_DOLLY_PAN: 5,
-		TOUCH_DOLLY_ROTATE: 6
-	};
-
-	var state = STATE.NONE;
-
-	var EPS = 0.000001;
-
-	// current position in spherical coordinates
-	var spherical = new Spherical();
-	var sphericalDelta = new Spherical();
-
-  var moveLeft = false;
-  var moveRight = false;
-  var moveForward = false;
-  var moveBackward = false;
-  var moveUp = false;
-  var moveDown = false;
-
-	var scale = 1;
-	var panOffset = new Vector3();
-	var zoomChanged = false;
-
-	var rotateStart = new Vector2();
-	var rotateEnd = new Vector2();
-	var rotateDelta = new Vector2();
-
-	var panStart = new Vector2();
-	var panEnd = new Vector2();
-	var panDelta = new Vector2();
-
-	var dollyStart = new Vector2();
-	var dollyEnd = new Vector2();
-	var dollyDelta = new Vector2();
-
-	function getAutoRotationAngle() {
-
-		return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
-
-	}
-
-	function getZoomScale() {
-
-		return Math.pow( 0.95, scope.zoomSpeed );
-
-	}
-
-	function rotateLeft( angle ) {
-
-		sphericalDelta.theta -= angle;
-
-	}
-
-	function rotateUp( angle ) {
-
-		sphericalDelta.phi -= angle;
-
-	}
-
-	var panLeft = function () {
-
-		var v = new Vector3();
-
-		return function panLeft( distance, objectMatrix ) {
-
-			v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
-			v.multiplyScalar( - distance );
-
-			panOffset.add( v );
-
-		};
-
-	}();
-
-	var panUp = function () {
-
-		var v = new Vector3();
-
-		return function panUp( distance, objectMatrix ) {
-
-			if ( scope.screenSpacePanning === true ) {
-				v.setFromMatrixColumn( objectMatrix, 1 );
-			} else {
-				v.setFromMatrixColumn( objectMatrix, 0 );
-				v.crossVectors( scope.object.up, v );
-			}
-
-			v.multiplyScalar( distance );
-
-			panOffset.add( v );
-		};
-
-	}();
-
-	// deltaX and deltaY are in pixels; right and down are positive
-	var pan = function () {
-
-		var offset = new Vector3();
-
-		return function pan( deltaX, deltaY ) {
-
-			var element = scope.domElement;
-
-			if ( scope.object.isPerspectiveCamera ) {
-
-				// perspective
-				var position = scope.object.position;
-				offset.copy( position ).sub( scope.target );
-				var targetDistance = offset.length();
-
-				// half of the fov is center to top of screen
-				targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
-
-				// we use only clientHeight here so aspect ratio does not distort speed
-				panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
-				panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
-
-			} else if ( scope.object.isOrthographicCamera ) {
-
-				// orthographic
-				panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
-				panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
-
-			} else {
-
-				// camera neither orthographic nor perspective
-				console.warn( 'WARNING: VoxelPainterControls.js encountered an unknown camera type - pan disabled.' );
-				scope.enablePan = false;
-
-			}
-
-		};
-
-	}();
-
-	function dollyIn( dollyScale ) {
-
-		if ( scope.object.isPerspectiveCamera ) {
-
-			scale /= dollyScale;
-
-		} else if ( scope.object.isOrthographicCamera ) {
-
-			scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) );
-			scope.object.updateProjectionMatrix();
-			zoomChanged = true;
-
-		} else {
-
-			console.warn( 'WARNING: VoxelPainterControls.js encountered an unknown camera type - dolly/zoom disabled.' );
-			scope.enableZoom = false;
-
-		}
-
-	}
-
-	function dollyOut( dollyScale ) {
-
-		if ( scope.object.isPerspectiveCamera ) {
-
-			scale *= dollyScale;
-
-		} else if ( scope.object.isOrthographicCamera ) {
-
-			scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) );
-			scope.object.updateProjectionMatrix();
-			zoomChanged = true;
-
-		} else {
-
-			console.warn( 'WARNING: VoxelPainterControls.js encountered an unknown camera type - dolly/zoom disabled.' );
-			scope.enableZoom = false;
-
-		}
-
-	}
-
-	//
-	// event callbacks - update the object state
-	//
-
-	function handleMouseDownRotate( event ) {
-
-		rotateStart.set( event.clientX, event.clientY );
-
-	}
-
-	function handleMouseDownDolly( event ) {
-
-		dollyStart.set( event.clientX, event.clientY );
-
-	}
-
-	function handleMouseDownPan( event ) {
-
-		panStart.set( event.clientX, event.clientY );
-
-	}
-
-	function handleMouseMoveRotate( event ) {
-
-		rotateEnd.set( event.clientX, event.clientY );
-
-		rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
-
-		var element = scope.domElement;
-
-		rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
-
-		rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
-
-		rotateStart.copy( rotateEnd );
-
-		scope.update();
-
-	}
-
-	function handleMouseMoveDolly( event ) {
-
-		dollyEnd.set( event.clientX, event.clientY );
-
-		dollyDelta.subVectors( dollyEnd, dollyStart );
-
-		if ( dollyDelta.y > 0 ) {
-
-			dollyIn( getZoomScale() );
-
-		} else if ( dollyDelta.y < 0 ) {
-
-			dollyOut( getZoomScale() );
-
-		}
-
-		dollyStart.copy( dollyEnd );
-
-		scope.update();
-
-	}
-
-	function handleMouseMovePan( event ) {
-
-		panEnd.set( event.clientX, event.clientY );
-
-		panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
-
-		pan( panDelta.x, panDelta.y );
-
-		panStart.copy( panEnd );
-
-		scope.update();
-
-	}
-
-	function handleMouseUp( /*event*/ ) {
-
-		// no-op
-
-	}
-
-	function handleMouseWheel( event ) {
-
-		if ( event.deltaY < 0 ) {
-
-			dollyOut( getZoomScale() );
-
-		} else if ( event.deltaY > 0 ) {
-
-			dollyIn( getZoomScale() );
-
-		}
-
-		scope.update();
-
-	}
-
-	function handleTouchStartRotate( event ) {
-
-		if ( event.touches.length == 1 ) {
-
-			rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
-
-		} else {
-
-			var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
-			var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
-
-			rotateStart.set( x, y );
-
-		}
-
-	}
-
-	function handleTouchStartPan( event ) {
-
-		if ( event.touches.length == 1 ) {
-
-			panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
-
-		} else {
-
-			var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
-			var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
-
-			panStart.set( x, y );
-
-		}
-
-	}
-
-	function handleTouchStartDolly( event ) {
-
-		var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
-		var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
-
-		var distance = Math.sqrt( dx * dx + dy * dy );
-
-		dollyStart.set( 0, distance );
-
-	}
-
-	function handleTouchStartDollyPan( event ) {
-
-		if ( scope.enableZoom ) handleTouchStartDolly( event );
-
-		if ( scope.enablePan ) handleTouchStartPan( event );
-
-	}
-
-	function handleTouchStartDollyRotate( event ) {
-
-		if ( scope.enableZoom ) handleTouchStartDolly( event );
-
-		if ( scope.enableRotate ) handleTouchStartRotate( event );
-
-	}
-
-	function handleTouchMoveRotate( event ) {
-
-		if ( event.touches.length == 1 ) {
-
-			rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
-
-		} else {
-
-			var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
-			var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
-
-			rotateEnd.set( x, y );
-
-		}
-
-		rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
-
-		var element = scope.domElement;
-
-		rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
-
-		rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
-
-		rotateStart.copy( rotateEnd );
-
-	}
-
-	function handleTouchMovePan( event ) {
-
-		if ( event.touches.length == 1 ) {
-
-			panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
-
-		} else {
-
-			var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
-			var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
-
-			panEnd.set( x, y );
-
-		}
-
-		panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
-
-		pan( panDelta.x, panDelta.y );
-
-		panStart.copy( panEnd );
-
-	}
-
-	function handleTouchMoveDolly( event ) {
-
-		var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
-		var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
-
-		var distance = Math.sqrt( dx * dx + dy * dy );
-
-		dollyEnd.set( 0, distance );
-
-		dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
-
-		dollyIn( dollyDelta.y );
-
-		dollyStart.copy( dollyEnd );
-
-	}
-
-	function handleTouchMoveDollyPan( event ) {
-
-		if ( scope.enableZoom ) handleTouchMoveDolly( event );
-
-		if ( scope.enablePan ) handleTouchMovePan( event );
-
-	}
-
-	function handleTouchMoveDollyRotate( event ) {
-
-		if ( scope.enableZoom ) handleTouchMoveDolly( event );
-
-		if ( scope.enableRotate ) handleTouchMoveRotate( event );
-
-	}
-
-	function handleTouchEnd( /*event*/ ) {
-
-		// no-op
-
-	}
-
-	//
-	// event handlers - FSM: listen for events and reset state
-	//
-
-	function onMouseDown( event ) {
-
-		if ( scope.enabled === false ) return;
-
-		// Prevent the browser from scrolling.
-		event.preventDefault();
-
-		// Manually set the focus since calling preventDefault above
-		// prevents the browser from setting it automatically.
-
-		scope.domElement.focus ? scope.domElement.focus() : window.focus();
-
-		var mouseAction;
-
-		switch ( event.button ) {
-
-			case 0:
-
-				mouseAction = scope.mouseButtons.LEFT;
-				break;
-
-			case 1:
-
-				mouseAction = scope.mouseButtons.MIDDLE;
-				break;
-
-			case 2:
-
-				mouseAction = scope.mouseButtons.RIGHT;
-				break;
-
-			default:
-
-				mouseAction = - 1;
-
-		}
-
-		switch ( mouseAction ) {
-
-			case MOUSE.DOLLY:
-
-				if ( scope.enableZoom === false ) return;
-
-				handleMouseDownDolly( event );
-
-				state = STATE.DOLLY;
-
-				break;
-
-			case MOUSE.ROTATE:
-
-				if ( event.ctrlKey || event.metaKey ) {
-
-					if ( scope.enablePan === false ) return;
-
-					handleMouseDownPan( event );
-
-					state = STATE.PAN;
-
-				} else {
-
-					if ( scope.enableRotate === false ) return;
-
-					handleMouseDownRotate( event );
-
-					state = STATE.ROTATE;
-
-				}
-
-				break;
-
-			case MOUSE.PAN:
-
-				if ( event.ctrlKey || event.metaKey ) {
-
-					if ( scope.enableRotate === false ) return;
-
-					handleMouseDownRotate( event );
-
-					state = STATE.ROTATE;
-
-				} else {
-
-					if ( scope.enablePan === false ) return;
-
-					handleMouseDownPan( event );
-
-					state = STATE.PAN;
-
-				}
-
-				break;
-
-			default:
-
-				state = STATE.NONE;
-
-		}
-
-		if ( state !== STATE.NONE ) {
-
-			document.addEventListener( 'mousemove', onMouseMove, false );
-			document.addEventListener( 'mouseup', onMouseUp, false );
-
-			scope.dispatchEvent( startEvent );
-
-		}
-
-	}
-
-  function onDocumentKeyDown( event ) {
-    switch ( event.keyCode ) {
-      case 38: // up
-      case 87: // w
-        moveForward = true;
-        break;
-
-      case 37: // left
-      case 65: // a
-        moveLeft = true;
-        break;
-
-      case 40: // down
-      case 83: // s
-        moveBackward = true;
-        break;
-
-      case 39: // right
-      case 68: // d
-        moveRight = true;
-        break;
-
-      case 32: // space
-        moveUp = true;
-        break;
-
-      case 16: //shift
-        moveDown = true;
-        break;
+//    Pan - right mouse, or left mouse + ctrl/meta/shiftKey,
+//          or arrow keys / touch: two-finger move
+
+class VoxelPainterControls extends EventDispatcher {
+  constructor(object, domElement) {
+    super();
+    // eslint-disable-next-line max-len
+    if (domElement === undefined) console.warn('THREE.VoxelPainterControls: The second parameter "domElement" is now mandatory.');
+    // eslint-disable-next-line max-len
+    if (domElement === document) console.error('THREE.VoxelPainterControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.');
+
+    this.object = object;
+    this.domElement = domElement;
+
+    // Set to false to disable this control
+    this.enabled = true;
+
+    // "target" sets the location of focus, where the object orbits around
+    this.target = new Vector3();
+
+    // How far you can dolly in and out ( PerspectiveCamera only )
+    this.minDistance = 0;
+    this.maxDistance = Infinity;
+
+    // How far you can zoom in and out ( OrthographicCamera only )
+    this.minZoom = 0;
+    this.maxZoom = Infinity;
+
+    // How far you can orbit vertically, upper and lower limits.
+    // Range is 0 to Math.PI radians.
+    this.minPolarAngle = 0; // radians
+    this.maxPolarAngle = Math.PI; // radians
+
+    // How far you can orbit horizontally, upper and lower limits.
+    // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
+    this.minAzimuthAngle = -Infinity; // radians
+    this.maxAzimuthAngle = Infinity; // radians
+
+    // Set to true to enable damping (inertia)
+    // If damping is enabled, you must call controls.update() in your animation loop
+    this.enableDamping = false;
+    this.dampingFactor = 0.05;
+
+    // This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
+    // Set to false to disable zooming
+    this.enableZoom = true;
+    this.zoomSpeed = 1.0;
+
+    // Set to false to disable rotating
+    this.enableRotate = true;
+    this.rotateSpeed = 1.0;
+
+    // Set to false to disable panning
+    this.enablePan = true;
+    this.panSpeed = 1.0;
+    this.screenSpacePanning = true; // if true, pan in screen-space
+    this.keyPanSpeed = 20.0; // pixels moved per arrow key push
+
+    // Set to true to automatically rotate around the target
+    // If auto-rotate is enabled, you must call controls.update() in your animation loop
+    this.autoRotate = false;
+    this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
+
+    // Mouse buttons
+    this.mouseButtons = {
+      LEFT: MOUSE.ROTATE,
+      MIDDLE: MOUSE.DOLLY,
+      RIGHT: MOUSE.PAN,
+    };
+
+    // Touch fingers
+    this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
+
+    // for reset
+    this.target0 = this.target.clone();
+    this.position0 = this.object.position.clone();
+    this.zoom0 = this.object.zoom;
+
+
+    //
+    // internals
+    //
+
+    const scope = this;
+
+    const changeEvent = { type: 'change' };
+    const startEvent = { type: 'start' };
+    const endEvent = { type: 'end' };
+
+    const STATE = {
+      NONE: -1,
+      ROTATE: 0,
+      DOLLY: 1,
+      PAN: 2,
+      TOUCH_ROTATE: 3,
+      TOUCH_PAN: 4,
+      TOUCH_DOLLY_PAN: 5,
+      TOUCH_DOLLY_ROTATE: 6,
+    };
+
+    let state = STATE.NONE;
+
+    const EPS = 0.000001;
+
+    // current position in spherical coordinates
+    const spherical = new Spherical();
+    const sphericalDelta = new Spherical();
+
+    let moveLeft = false;
+    let moveRight = false;
+    let moveForward = false;
+    let moveBackward = false;
+    let moveUp = false;
+    let moveDown = false;
+
+    let scale = 1;
+    const panOffset = new Vector3();
+    let zoomChanged = false;
+
+    const rotateStart = new Vector2();
+    const rotateEnd = new Vector2();
+    const rotateDelta = new Vector2();
+
+    const panStart = new Vector2();
+    const panEnd = new Vector2();
+    const panDelta = new Vector2();
+
+    const dollyStart = new Vector2();
+    const dollyEnd = new Vector2();
+    const dollyDelta = new Vector2();
+
+    function getAutoRotationAngle() {
+      return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
     }
-  }
 
-  function onDocumentKeyUp( event ) {
-    switch ( event.keyCode ) {
-      case 38: // up
-      case 87: // w
-        moveForward = false;
-        break;
-
-      case 37: // left
-      case 65: // a
-        moveLeft = false;
-        break;
-
-      case 40: // down
-      case 83: // s
-        moveBackward = false;
-        break;
-
-      case 39: // right
-      case 68: // d
-        moveRight = false;
-        break;
-
-      case 32: // space
-        moveUp = false;
-        break;
-
-      case 16: //shift
-        moveDown = false;
-        break;
+    function getZoomScale() {
+      return 0.95 ** scope.zoomSpeed;
     }
+
+    function rotateLeft(angle) {
+      sphericalDelta.theta -= angle;
+    }
+
+    function rotateUp(angle) {
+      sphericalDelta.phi -= angle;
+    }
+
+    const v = new Vector3();
+    const panLeft = (distance, objectMatrix) => {
+      v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix
+      v.multiplyScalar(-distance);
+
+      panOffset.add(v);
+    };
+
+
+    const panUp = (distance, objectMatrix) => {
+      if (scope.screenSpacePanning === true) {
+        v.setFromMatrixColumn(objectMatrix, 1);
+      } else {
+        v.setFromMatrixColumn(objectMatrix, 0);
+        v.crossVectors(scope.object.up, v);
+      }
+
+      v.multiplyScalar(distance);
+
+      panOffset.add(v);
+    };
+
+    // deltaX and deltaY are in pixels; right and down are positive
+    const pan = (deltaX, deltaY) => {
+      const element = scope.domElement;
+
+      if (scope.object.isPerspectiveCamera) {
+        // perspective
+        const { position } = scope.object;
+        v.copy(position).sub(scope.target);
+        let targetDistance = v.length();
+
+        // half of the fov is center to top of screen
+        targetDistance *= Math.tan((scope.object.fov / 2) * Math.PI / 180.0);
+
+        // we use only clientHeight here so aspect ratio does not distort speed
+        panLeft(
+          2 * deltaX * targetDistance / element.clientHeight,
+          scope.object.matrix,
+        );
+        panUp(
+          2 * deltaY * targetDistance / element.clientHeight,
+          scope.object.matrix,
+        );
+      } else if (scope.object.isOrthographicCamera) {
+        // orthographic
+        panLeft(
+          // eslint-disable-next-line max-len
+          deltaX * (scope.object.right - scope.object.left) / scope.object.zoom / element.clientWidth,
+          scope.object.matrix,
+        );
+        panUp(
+          // eslint-disable-next-line max-len
+          deltaY * (scope.object.top - scope.object.bottom) / scope.object.zoom / element.clientHeight,
+          scope.object.matrix,
+        );
+      } else {
+        // camera neither orthographic nor perspective
+        // eslint-disable-next-line max-len
+        console.warn('WARNING: VoxelPainterControls.js encountered an unknown camera type - pan disabled.');
+        scope.enablePan = false;
+      }
+    };
+
+    function dollyIn(dollyScale) {
+      if (scope.object.isPerspectiveCamera) {
+        scale /= dollyScale;
+      } else if (scope.object.isOrthographicCamera) {
+        scope.object.zoom = Math.max(
+          scope.minZoom,
+          Math.min(scope.maxZoom, scope.object.zoom * dollyScale),
+        );
+        scope.object.updateProjectionMatrix();
+        zoomChanged = true;
+      } else {
+        // eslint-disable-next-line max-len
+        console.warn('WARNING: VoxelPainterControls.js encountered an unknown camera type - dolly/zoom disabled.');
+        scope.enableZoom = false;
+      }
+    }
+
+    function dollyOut(dollyScale) {
+      if (scope.object.isPerspectiveCamera) {
+        scale *= dollyScale;
+      } else if (scope.object.isOrthographicCamera) {
+        scope.object.zoom = Math.max(
+          scope.minZoom,
+          Math.min(scope.maxZoom, scope.object.zoom / dollyScale),
+        );
+        scope.object.updateProjectionMatrix();
+        zoomChanged = true;
+      } else {
+        // eslint-disable-next-line max-len
+        console.warn('WARNING: VoxelPainterControls.js encountered an unknown camera type - dolly/zoom disabled.');
+        scope.enableZoom = false;
+      }
+    }
+
+    //
+    // event callbacks - update the object state
+    //
+
+    function handleMouseDownRotate(event) {
+      rotateStart.set(event.clientX, event.clientY);
+    }
+
+    function handleMouseDownDolly(event) {
+      dollyStart.set(event.clientX, event.clientY);
+    }
+
+    function handleMouseDownPan(event) {
+      panStart.set(event.clientX, event.clientY);
+    }
+
+    function handleMouseMoveRotate(event) {
+      rotateEnd.set(event.clientX, event.clientY);
+
+      rotateDelta
+        .subVectors(rotateEnd, rotateStart)
+        .multiplyScalar(scope.rotateSpeed);
+      const element = scope.domElement;
+      rotateLeft(2 * Math.PI * rotateDelta.x / element.clientHeight); // yes, height
+      rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight);
+      rotateStart.copy(rotateEnd);
+      scope.update();
+    }
+
+    function handleMouseMoveDolly(event) {
+      dollyEnd.set(event.clientX, event.clientY);
+
+      dollyDelta.subVectors(dollyEnd, dollyStart);
+      if (dollyDelta.y > 0) {
+        dollyIn(getZoomScale());
+      } else if (dollyDelta.y < 0) {
+        dollyOut(getZoomScale());
+      }
+      dollyStart.copy(dollyEnd);
+      scope.update();
+    }
+
+    function handleMouseMovePan(event) {
+      panEnd.set(event.clientX, event.clientY);
+
+      panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed);
+      pan(panDelta.x, panDelta.y);
+      panStart.copy(panEnd);
+      scope.update();
+    }
+
+    function handleMouseUp(/* event */) {
+      // no-op
+    }
+
+    function handleMouseWheel(event) {
+      if (event.deltaY < 0) {
+        dollyOut(getZoomScale());
+      } else if (event.deltaY > 0) {
+        dollyIn(getZoomScale());
+      }
+      scope.update();
+    }
+
+    function handleTouchStartRotate(event) {
+      if (event.touches.length === 1) {
+        rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);
+      } else {
+        const x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);
+        const y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);
+        rotateStart.set(x, y);
+      }
+    }
+
+    function handleTouchStartPan(event) {
+      if (event.touches.length === 1) {
+        panStart.set(event.touches[0].pageX, event.touches[0].pageY);
+      } else {
+        const x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);
+        const y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);
+
+        panStart.set(x, y);
+      }
+    }
+
+    function handleTouchStartDolly(event) {
+      const dx = event.touches[0].pageX - event.touches[1].pageX;
+      const dy = event.touches[0].pageY - event.touches[1].pageY;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      dollyStart.set(0, distance);
+    }
+
+    function handleTouchStartDollyPan(event) {
+      if (scope.enableZoom) handleTouchStartDolly(event);
+      if (scope.enablePan) handleTouchStartPan(event);
+    }
+
+    function handleTouchStartDollyRotate(event) {
+      if (scope.enableZoom) handleTouchStartDolly(event);
+      if (scope.enableRotate) handleTouchStartRotate(event);
+    }
+
+    function handleTouchMoveRotate(event) {
+      if (event.touches.length === 1) {
+        rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);
+      } else {
+        const x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);
+        const y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);
+
+        rotateEnd.set(x, y);
+      }
+
+      rotateDelta.subVectors(rotateEnd, rotateStart)
+        .multiplyScalar(scope.rotateSpeed);
+      const element = scope.domElement;
+      rotateLeft(2 * Math.PI * rotateDelta.x / element.clientHeight);
+      rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight);
+      rotateStart.copy(rotateEnd);
+    }
+
+    function handleTouchMovePan(event) {
+      if (event.touches.length === 1) {
+        panEnd.set(event.touches[0].pageX, event.touches[0].pageY);
+      } else {
+        const x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);
+        const y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);
+        panEnd.set(x, y);
+      }
+      panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed);
+      pan(panDelta.x, panDelta.y);
+      panStart.copy(panEnd);
+    }
+
+    function handleTouchMoveDolly(event) {
+      const dx = event.touches[0].pageX - event.touches[1].pageX;
+      const dy = event.touches[0].pageY - event.touches[1].pageY;
+
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      dollyEnd.set(0, distance);
+      dollyDelta.set(0, (dollyEnd.y / dollyStart.y) ** scope.zoomSpeed);
+      dollyIn(dollyDelta.y);
+      dollyStart.copy(dollyEnd);
+    }
+
+    function handleTouchMoveDollyPan(event) {
+      if (scope.enableZoom) handleTouchMoveDolly(event);
+      if (scope.enablePan) handleTouchMovePan(event);
+    }
+
+    function handleTouchMoveDollyRotate(event) {
+      if (scope.enableZoom) handleTouchMoveDolly(event);
+      if (scope.enableRotate) handleTouchMoveRotate(event);
+    }
+
+    function handleTouchEnd(/* event */) {
+      // no-op
+    }
+
+    //
+    // event handlers - FSM: listen for events and reset state
+    //
+    //
+    function onDocumentKeyDown(event) {
+      if (scope.enabled === false) return;
+
+      switch (event.keyCode) {
+        case 38: // up
+        case 87: // w
+          moveForward = true;
+          break;
+
+        case 37: // left
+        case 65: // a
+          moveLeft = true;
+          break;
+
+        case 40: // down
+        case 83: // s
+          moveBackward = true;
+          break;
+
+        case 39: // right
+        case 68: // d
+          moveRight = true;
+          break;
+
+        case 32: // space
+          moveUp = true;
+          break;
+
+        case 16: // shift
+          moveDown = true;
+          break;
+        default:
+          break;
+      }
+    }
+
+    function onDocumentKeyUp(event) {
+      if (scope.enabled === false) return;
+
+      switch (event.keyCode) {
+        case 38: // up
+        case 87: // w
+          moveForward = false;
+          break;
+
+        case 37: // left
+        case 65: // a
+          moveLeft = false;
+          break;
+
+        case 40: // down
+        case 83: // s
+          moveBackward = false;
+          break;
+
+        case 39: // right
+        case 68: // d
+          moveRight = false;
+          break;
+
+        case 32: // space
+          moveUp = false;
+          break;
+
+        case 16: // shift
+          moveDown = false;
+          break;
+        default:
+          break;
+      }
+    }
+
+
+    function onMouseMove(event) {
+      if (scope.enabled === false) return;
+
+      event.preventDefault();
+
+      switch (state) {
+        case STATE.ROTATE:
+          handleMouseMoveRotate(event);
+          break;
+        case STATE.DOLLY:
+          handleMouseMoveDolly(event);
+          break;
+        case STATE.PAN:
+          handleMouseMovePan(event);
+          break;
+        default:
+          break;
+      }
+    }
+
+    function onMouseUp(event) {
+      if (scope.enabled === false) return;
+
+      handleMouseUp(event);
+      document.removeEventListener('mousemove', onMouseMove, false);
+      document.removeEventListener('mouseup', onMouseUp, false);
+      scope.dispatchEvent(endEvent);
+      state = STATE.NONE;
+    }
+
+    function onMouseWheel(event) {
+      if (scope.enabled === false
+        || scope.enableZoom === false
+        || (state !== STATE.NONE
+          && state !== STATE.ROTATE)
+      ) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      scope.dispatchEvent(startEvent);
+      handleMouseWheel(event);
+      scope.dispatchEvent(endEvent);
+    }
+
+    function onTouchStart(event) {
+      if (scope.enabled === false) return;
+
+      event.preventDefault();
+
+      switch (event.touches.length) {
+        case 1:
+
+          switch (scope.touches.ONE) {
+            case TOUCH.ROTATE:
+              if (scope.enableRotate === false) return;
+
+              handleTouchStartRotate(event);
+              state = STATE.TOUCH_ROTATE;
+              break;
+
+            case TOUCH.PAN:
+              if (scope.enablePan === false) return;
+
+              handleTouchStartPan(event);
+              state = STATE.TOUCH_PAN;
+              break;
+
+            default:
+              state = STATE.NONE;
+          }
+
+          break;
+
+        case 2:
+
+          switch (scope.touches.TWO) {
+            case TOUCH.DOLLY_PAN:
+              if (scope.enableZoom === false
+                && scope.enablePan === false
+              ) return;
+
+              handleTouchStartDollyPan(event);
+              state = STATE.TOUCH_DOLLY_PAN;
+              break;
+
+            case TOUCH.DOLLY_ROTATE:
+              if (scope.enableZoom === false
+                && scope.enableRotate === false
+              ) return;
+
+              handleTouchStartDollyRotate(event);
+              state = STATE.TOUCH_DOLLY_ROTATE;
+              break;
+
+            default:
+              state = STATE.NONE;
+          }
+
+          break;
+
+        default:
+
+          state = STATE.NONE;
+      }
+
+      if (state !== STATE.NONE) {
+        scope.dispatchEvent(startEvent);
+      }
+    }
+
+    function onTouchMove(event) {
+      if (scope.enabled === false) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      switch (state) {
+        case STATE.TOUCH_ROTATE:
+          if (scope.enableRotate === false) return;
+
+          handleTouchMoveRotate(event);
+          scope.update();
+          break;
+
+        case STATE.TOUCH_PAN:
+          if (scope.enablePan === false) return;
+
+          handleTouchMovePan(event);
+          scope.update();
+          break;
+
+        case STATE.TOUCH_DOLLY_PAN:
+          if (scope.enableZoom === false && scope.enablePan === false) return;
+
+          handleTouchMoveDollyPan(event);
+          scope.update();
+          break;
+
+        case STATE.TOUCH_DOLLY_ROTATE:
+          if (scope.enableZoom === false
+            && scope.enableRotate === false) return;
+
+          handleTouchMoveDollyRotate(event);
+          scope.update();
+          break;
+
+        default:
+          state = STATE.NONE;
+      }
+    }
+
+    function onTouchEnd(event) {
+      if (scope.enabled === false) return;
+
+      handleTouchEnd(event);
+      scope.dispatchEvent(endEvent);
+      state = STATE.NONE;
+    }
+
+    function onContextMenu(event) {
+      if (scope.enabled === false) return;
+
+      event.preventDefault();
+    }
+
+    function onMouseDown(event) {
+      if (scope.enabled === false) return;
+
+      // Prevent the browser from scrolling.
+      event.preventDefault();
+
+      // Manually set the focus since calling preventDefault above
+      // prevents the browser from setting it automatically.
+      if (scope.domElement.focus) {
+        scope.domElement.focus();
+      } else {
+        window.focus();
+      }
+
+      let mouseAction;
+
+      switch (event.button) {
+        case 0:
+          mouseAction = scope.mouseButtons.LEFT;
+          break;
+
+        case 1:
+          mouseAction = scope.mouseButtons.MIDDLE;
+          break;
+
+        case 2:
+          mouseAction = scope.mouseButtons.RIGHT;
+          break;
+
+        default:
+          mouseAction = -1;
+      }
+
+      switch (mouseAction) {
+        case MOUSE.DOLLY:
+          handleMouseDownDolly(event);
+          state = STATE.DOLLY;
+          break;
+
+        case MOUSE.ROTATE:
+          if (event.ctrlKey || event.metaKey) {
+            handleMouseDownPan(event);
+            state = STATE.PAN;
+          } else {
+            handleMouseDownRotate(event);
+            state = STATE.ROTATE;
+          }
+          break;
+
+        case MOUSE.PAN:
+          if (event.ctrlKey || event.metaKey) {
+            handleMouseDownRotate(event);
+            state = STATE.ROTATE;
+          } else {
+            handleMouseDownPan(event);
+            state = STATE.PAN;
+          }
+          break;
+
+        default:
+          state = STATE.NONE;
+      }
+
+      if (state !== STATE.NONE) {
+        document.addEventListener('mousemove', onMouseMove, false);
+        document.addEventListener('mouseup', onMouseUp, false);
+
+        scope.dispatchEvent(startEvent);
+      }
+    }
+
+
+    scope.domElement.addEventListener('contextmenu', onContextMenu, false);
+
+    scope.domElement.addEventListener('mousedown', onMouseDown, false);
+    scope.domElement.addEventListener('wheel', onMouseWheel, false);
+
+    scope.domElement.addEventListener('keydown', onDocumentKeyDown, false);
+    scope.domElement.addEventListener('keyup', onDocumentKeyUp, false);
+
+    scope.domElement.addEventListener('touchstart', onTouchStart, false);
+    scope.domElement.addEventListener('touchend', onTouchEnd, false);
+    scope.domElement.addEventListener('touchmove', onTouchMove, false);
+
+    // make sure element can receive keys.
+
+    if (scope.domElement.tabIndex === -1) {
+      scope.domElement.tabIndex = 0;
+    }
+
+    //
+    // public methods
+    //
+
+    this.getPolarAngle = () => spherical.phi;
+
+    this.getAzimuthalAngle = () => spherical.theta;
+
+    this.saveState = () => {
+      scope.target0.copy(scope.target);
+      scope.position0.copy(scope.object.position);
+      scope.zoom0 = scope.object.zoom;
+    };
+
+    this.reset = () => {
+      scope.target.copy(scope.target0);
+      scope.object.position.copy(scope.position0);
+      scope.object.zoom = scope.zoom0;
+
+      scope.object.updateProjectionMatrix();
+      scope.dispatchEvent(changeEvent);
+
+      scope.update();
+
+      state = STATE.NONE;
+    };
+
+    // this method is exposed, but perhaps it would be better if we can make it private...
+    this.update = (() => {
+      const offset = new Vector3();
+
+      // so camera.up is the orbit axis
+      const quat = new Quaternion()
+        .setFromUnitVectors(object.up, new Vector3(0, 1, 0));
+      const quatInverse = quat.clone().inverse();
+
+      const lastPosition = new Vector3();
+      const lastQuaternion = new Quaternion();
+
+      const direction = new Vector3();
+      const velocity = new Vector3();
+      let prevTime = Date.now();
+      let logTime = Date.now();
+      const vec = new Vector3();
+
+      return function update() {
+        const time = Date.now();
+
+        let log = false;
+        if (time - logTime > 2000) {
+          logTime = time;
+          log = true;
+        }
+
+        const delta = (time - prevTime) / 1000.0;
+        velocity.x -= velocity.x * 50.0 * delta;
+        velocity.y -= velocity.y * 50.0 * delta;
+        velocity.z -= velocity.z * 50.0 * delta;
+        const length = velocity.length();
+        if (length < 1 || length > 10) {
+          velocity.set(0, 0, 0);
+        }
+
+        direction.x = Number(moveRight) - Number(moveLeft);
+        direction.y = Number(moveUp) - Number(moveDown);
+        direction.z = Number(moveForward) - Number(moveBackward);
+        direction.normalize();
+
+        if (moveLeft || moveRight) {
+          velocity.x -= direction.x * 5000.0 * delta;
+        }
+        if (moveUp || moveDown) {
+          velocity.y -= direction.y * 5000.0 * delta;
+        }
+        if (moveForward || moveBackward) {
+          velocity.z -= direction.z * 2500.0 * delta;
+        }
+
+        // controls.moveRight( -velocity.x * delta);
+        // controls.moveUp( -velocity.y * delta);
+        // forward
+        if (log) {
+          console.log(vec.x, vec.y, vec.z, delta);
+        }
+        vec.setFromMatrixColumn(scope.object.matrix, 0);
+        vec.crossVectors(scope.object.up, vec);
+        vec.multiplyScalar(-velocity.z * delta);
+        vec.y += -velocity.y * delta;
+        panOffset.add(vec);
+        vec.setFromMatrixColumn(scope.object.matrix, 0);
+        vec.multiplyScalar(-velocity.x * delta);
+        panOffset.add(vec);
+
+        prevTime = time;
+
+
+        const { position } = scope.object;
+
+        offset.copy(position).sub(scope.target);
+
+        // rotate offset to "y-axis-is-up" space
+        offset.applyQuaternion(quat);
+
+        // angle from z-axis around y-axis
+        spherical.setFromVector3(offset);
+
+        if (scope.autoRotate && state === STATE.NONE) {
+          rotateLeft(getAutoRotationAngle());
+        }
+
+        if (scope.enableDamping) {
+          spherical.theta += sphericalDelta.theta * scope.dampingFactor;
+          spherical.phi += sphericalDelta.phi * scope.dampingFactor;
+        } else {
+          spherical.theta += sphericalDelta.theta;
+          spherical.phi += sphericalDelta.phi;
+        }
+
+        // restrict theta to be between desired limits
+        spherical.theta = Math.max(
+          scope.minAzimuthAngle,
+          Math.min(scope.maxAzimuthAngle, spherical.theta),
+        );
+
+        // restrict phi to be between desired limits
+        spherical.phi = Math.max(
+          scope.minPolarAngle,
+          Math.min(scope.maxPolarAngle, spherical.phi),
+        );
+        spherical.makeSafe();
+
+        spherical.radius *= scale;
+
+        // restrict radius to be between desired limits
+        spherical.radius = Math.max(
+          scope.minDistance,
+          Math.min(scope.maxDistance, spherical.radius),
+        );
+
+        // move target to panned location
+
+        if (panOffset.length() > 10000) {
+          panOffset.set(0, 0, 0);
+        }
+        if (scope.enableDamping === true) {
+          scope.target.addScaledVector(panOffset, scope.dampingFactor);
+        } else {
+          scope.target.add(panOffset);
+        }
+        if (scope.target.y < 10.0) {
+          scope.target.y = 10.0;
+        }
+
+
+        offset.setFromSpherical(spherical);
+
+        // rotate offset back to "camera-up-vector-is-up" space
+        offset.applyQuaternion(quatInverse);
+
+        position.copy(scope.target).add(offset);
+
+        scope.object.lookAt(scope.target);
+
+        if (scope.enableDamping === true) {
+          sphericalDelta.theta *= (1 - scope.dampingFactor);
+          sphericalDelta.phi *= (1 - scope.dampingFactor);
+
+          panOffset.multiplyScalar(1 - scope.dampingFactor);
+        } else {
+          sphericalDelta.set(0, 0, 0);
+
+          panOffset.set(0, 0, 0);
+        }
+
+        scale = 1;
+
+        // update condition is:
+        // min(camera displacement, camera rotation in radians)^2 > EPS
+        // using small-angle approximation cos(x/2) = 1 - x^2 / 8
+
+        if (zoomChanged
+          || lastPosition.distanceToSquared(scope.object.position) > EPS
+          || 8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS) {
+          scope.dispatchEvent(changeEvent);
+
+          lastPosition.copy(scope.object.position);
+          lastQuaternion.copy(scope.object.quaternion);
+          zoomChanged = false;
+
+          return true;
+        }
+
+        return false;
+      };
+    })();
+
+    this.dispose = () => {
+      scope.domElement.removeEventListener('contextmenu', onContextMenu, false);
+      scope.domElement.removeEventListener('mousedown', onMouseDown, false);
+      scope.domElement.removeEventListener('wheel', onMouseWheel, false);
+
+      scope.domElement.removeEventListener('touchstart', onTouchStart, false);
+      scope.domElement.removeEventListener('touchend', onTouchEnd, false);
+      scope.domElement.removeEventListener('touchmove', onTouchMove, false);
+
+      document.removeEventListener('mousemove', onMouseMove, false);
+      document.removeEventListener('mouseup', onMouseUp, false);
+      document.removeEventListener('keydown', onDocumentKeyDown, false);
+      document.removeEventListener('keyup', onDocumentKeyUp, false);
+
+      // scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
+    };
+
+    this.update();
   }
+}
 
+// VoxelPainterControls.prototype = Object.create(EventDispatcher.prototype);
+// VoxelPainterControls.prototype.constructor = VoxelPainterControls;
 
-	function onMouseMove( event ) {
 
-		if ( scope.enabled === false ) return;
-
-		event.preventDefault();
-
-		switch ( state ) {
-
-			case STATE.ROTATE:
-
-				if ( scope.enableRotate === false ) return;
-
-				handleMouseMoveRotate( event );
-
-				break;
-
-			case STATE.DOLLY:
-
-				if ( scope.enableZoom === false ) return;
-
-				handleMouseMoveDolly( event );
-
-				break;
-
-			case STATE.PAN:
-
-				if ( scope.enablePan === false ) return;
-
-				handleMouseMovePan( event );
-
-				break;
-
-		}
-
-	}
-
-	function onMouseUp( event ) {
-
-		if ( scope.enabled === false ) return;
-
-		handleMouseUp( event );
-
-		document.removeEventListener( 'mousemove', onMouseMove, false );
-		document.removeEventListener( 'mouseup', onMouseUp, false );
-
-		scope.dispatchEvent( endEvent );
-
-		state = STATE.NONE;
-
-	}
-
-	function onMouseWheel( event ) {
-
-		if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return;
-
-		event.preventDefault();
-		event.stopPropagation();
-
-		scope.dispatchEvent( startEvent );
-
-		handleMouseWheel( event );
-
-		scope.dispatchEvent( endEvent );
-
-	}
-
-	function onTouchStart( event ) {
-
-		if ( scope.enabled === false ) return;
-
-		event.preventDefault();
-
-		switch ( event.touches.length ) {
-
-			case 1:
-
-				switch ( scope.touches.ONE ) {
-
-					case TOUCH.ROTATE:
-
-						if ( scope.enableRotate === false ) return;
-
-						handleTouchStartRotate( event );
-
-						state = STATE.TOUCH_ROTATE;
-
-						break;
-
-					case TOUCH.PAN:
-
-						if ( scope.enablePan === false ) return;
-
-						handleTouchStartPan( event );
-
-						state = STATE.TOUCH_PAN;
-
-						break;
-
-					default:
-
-						state = STATE.NONE;
-
-				}
-
-				break;
-
-			case 2:
-
-				switch ( scope.touches.TWO ) {
-
-					case TOUCH.DOLLY_PAN:
-
-						if ( scope.enableZoom === false && scope.enablePan === false ) return;
-
-						handleTouchStartDollyPan( event );
-
-						state = STATE.TOUCH_DOLLY_PAN;
-
-						break;
-
-					case TOUCH.DOLLY_ROTATE:
-
-						if ( scope.enableZoom === false && scope.enableRotate === false ) return;
-
-						handleTouchStartDollyRotate( event );
-
-						state = STATE.TOUCH_DOLLY_ROTATE;
-
-						break;
-
-					default:
-
-						state = STATE.NONE;
-
-				}
-
-				break;
-
-			default:
-
-				state = STATE.NONE;
-
-		}
-
-		if ( state !== STATE.NONE ) {
-
-			scope.dispatchEvent( startEvent );
-
-		}
-
-	}
-
-	function onTouchMove( event ) {
-
-		if ( scope.enabled === false ) return;
-
-		event.preventDefault();
-		event.stopPropagation();
-
-		switch ( state ) {
-
-			case STATE.TOUCH_ROTATE:
-
-				if ( scope.enableRotate === false ) return;
-
-				handleTouchMoveRotate( event );
-
-				scope.update();
-
-				break;
-
-			case STATE.TOUCH_PAN:
-
-				if ( scope.enablePan === false ) return;
-
-				handleTouchMovePan( event );
-
-				scope.update();
-
-				break;
-
-			case STATE.TOUCH_DOLLY_PAN:
-
-				if ( scope.enableZoom === false && scope.enablePan === false ) return;
-
-				handleTouchMoveDollyPan( event );
-
-				scope.update();
-
-				break;
-
-			case STATE.TOUCH_DOLLY_ROTATE:
-
-				if ( scope.enableZoom === false && scope.enableRotate === false ) return;
-
-				handleTouchMoveDollyRotate( event );
-
-				scope.update();
-
-				break;
-
-			default:
-
-				state = STATE.NONE;
-
-		}
-
-	}
-
-	function onTouchEnd( event ) {
-
-		if ( scope.enabled === false ) return;
-
-		handleTouchEnd( event );
-
-		scope.dispatchEvent( endEvent );
-
-		state = STATE.NONE;
-
-	}
-
-	function onContextMenu( event ) {
-
-		if ( scope.enabled === false ) return;
-
-		event.preventDefault();
-
-	}
-
-	//
-
-	scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );
-
-	scope.domElement.addEventListener( 'mousedown', onMouseDown, false );
-	scope.domElement.addEventListener( 'wheel', onMouseWheel, false );
-
-  scope.domElement.addEventListener( 'keydown', onDocumentKeyDown, false );
-  scope.domElement.addEventListener( 'keyup', onDocumentKeyUp, false );
-
-	scope.domElement.addEventListener( 'touchstart', onTouchStart, false );
-	scope.domElement.addEventListener( 'touchend', onTouchEnd, false );
-	scope.domElement.addEventListener( 'touchmove', onTouchMove, false );
-
-	// make sure element can receive keys.
-
-	if ( scope.domElement.tabIndex === - 1 ) {
-
-		scope.domElement.tabIndex = 0;
-
-	}
-
-	// force an update at start
-
-	this.update();
-
-};
-
-VoxelPainterControls.prototype = Object.create( EventDispatcher.prototype );
-VoxelPainterControls.prototype.constructor = VoxelPainterControls;
-
-
-// This set of controls performs orbiting, dollying (zooming), and panning.
-// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
-// This is very similar to VoxelPainterControls, another set of touch behavior
-//
-//    Orbit - right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate
-//    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
-//    Pan - left mouse, or arrow keys / touch: one-finger move
-
-var MapControls = function ( object, domElement ) {
-
-	VoxelPainterControls.call( this, object, domElement );
-
-	this.mouseButtons.LEFT = MOUSE.PAN;
-	this.mouseButtons.RIGHT = MOUSE.ROTATE;
-
-	this.touches.ONE = TOUCH.PAN;
-	this.touches.TWO = TOUCH.DOLLY_ROTATE;
-
-};
-
-MapControls.prototype = Object.create( EventDispatcher.prototype );
-MapControls.prototype.constructor = MapControls;
-
-export { VoxelPainterControls, MapControls };
+export default VoxelPainterControls;
diff --git a/src/controls/keypress.js b/src/controls/keypress.js
new file mode 100644
index 0000000..597ca50
--- /dev/null
+++ b/src/controls/keypress.js
@@ -0,0 +1,37 @@
+/*
+ * keypress actions
+ * @flow
+ */
+import keycode from 'keycode';
+
+import store from '../ui/store';
+import {
+  toggleGrid,
+  togglePixelNotify,
+  toggleMute,
+} from '../actions';
+
+
+function onKeyPress(event: KeyboardEvent) {
+  // ignore key presses if modal is open or chat is used
+  if (event.target.nodeName === 'INPUT'
+    || event.target.nodeName === 'TEXTAREA'
+  ) {
+    return;
+  }
+
+  switch (keycode(event)) {
+    case 'g':
+      store.dispatch(toggleGrid());
+      break;
+    case 'c':
+      store.dispatch(togglePixelNotify());
+      break;
+    case 'm':
+      store.dispatch(toggleMute());
+      break;
+    default:
+  }
+}
+
+export default onKeyPress;
diff --git a/src/core/Image.js b/src/core/Image.js
index ecf239c..7d5c3c3 100644
--- a/src/core/Image.js
+++ b/src/core/Image.js
@@ -40,15 +40,17 @@ export async function imageABGR2Canvas(
   const canvasMinXY = -(canvas.size / 2);
   const imageData = new Uint32Array(data.buffer);
 
-  const [ucx, ucy] = getChunkOfPixel([x, y], canvas.size);
-  const [lcx, lcy] = getChunkOfPixel([(x + width), (y + height)], canvas.size);
+  const [ucx, ucy] = getChunkOfPixel(canvas.size, x, y);
+  const [lcx, lcy] = getChunkOfPixel(canvas.size, x + width, y + height);
 
   logger.info(`Loading to chunks from ${ucx} / ${ucy} to ${lcx} / ${lcy} ...`);
   let chunk;
   for (let cx = ucx; cx <= lcx; cx += 1) {
     for (let cy = ucy; cy <= lcy; cy += 1) {
       chunk = await RedisCanvas.getChunk(cx, cy, canvasId);
-      chunk = (chunk) ? new Uint8Array(chunk) : new Uint8Array(TILE_SIZE * TILE_SIZE);
+      chunk = (chunk)
+        ? new Uint8Array(chunk)
+        : new Uint8Array(TILE_SIZE * TILE_SIZE);
       // offset of chunk in image
       const cOffX = cx * TILE_SIZE + canvasMinXY - x;
       const cOffY = cy * TILE_SIZE + canvasMinXY - y;
@@ -60,7 +62,9 @@ export async function imageABGR2Canvas(
           const clrY = cOffY + py;
           if (clrX >= 0 && clrY >= 0 && clrX < width && clrY < height) {
             const clr = imageData[clrX + clrY * width];
-            const clrIndex = (wipe) ? palette.abgr.indexOf(clr) : palette.abgr.indexOf(clr, 2);
+            const clrIndex = (wipe)
+              ? palette.abgr.indexOf(clr)
+              : palette.abgr.indexOf(clr, 2);
             if (~clrIndex) {
               const pixel = (protect) ? (clrIndex | 0x20) : clrIndex;
               chunk[cOff] = pixel;
@@ -113,15 +117,17 @@ export async function imagemask2Canvas(
 
   const imageData = new Uint8Array(data.buffer);
 
-  const [ucx, ucy] = getChunkOfPixel([x, y], canvas.size);
-  const [lcx, lcy] = getChunkOfPixel([(x + width), (y + height)], canvas.size);
+  const [ucx, ucy] = getChunkOfPixel(canvas.size, x, y);
+  const [lcx, lcy] = getChunkOfPixel(canvas.size, x + width, y + height);
 
   logger.info(`Loading to chunks from ${ucx} / ${ucy} to ${lcx} / ${lcy} ...`);
   let chunk;
   for (let cx = ucx; cx <= lcx; cx += 1) {
     for (let cy = ucy; cy <= lcy; cy += 1) {
       chunk = await RedisCanvas.getChunk(cx, cy, canvasId);
-      chunk = (chunk) ? new Uint8Array(chunk) : new Uint8Array(TILE_SIZE * TILE_SIZE);
+      chunk = (chunk)
+        ? new Uint8Array(chunk)
+        : new Uint8Array(TILE_SIZE * TILE_SIZE);
       // offset of chunk in image
       const cOffX = cx * TILE_SIZE + canvasMinXY - x;
       const cOffY = cy * TILE_SIZE + canvasMinXY - y;
@@ -133,7 +139,10 @@ export async function imagemask2Canvas(
           const clrY = cOffY + py;
           if (clrX >= 0 && clrY >= 0 && clrX < width && clrY < height) {
             let offset = (clrX + clrY * width) * 3;
-            if (!imageData[offset++] && !imageData[offset++] && !imageData[offset]) {
+            if (!imageData[offset++]
+              && !imageData[offset++]
+              && !imageData[offset]
+            ) {
               chunk[cOff] = filter(palette.abgr[chunk[cOff]]);
               pxlCnt += 1;
             }
diff --git a/src/core/constants.js b/src/core/constants.js
index 1cc9ba5..aced40c 100644
--- a/src/core/constants.js
+++ b/src/core/constants.js
@@ -62,6 +62,9 @@ export const DEFAULT_CANVASES = {
 
 export const TILE_LOADING_IMAGE = './loading.png';
 
+// constants for 3D voxel canvas
+export const THREE_CANVAS_HEIGHT = 128;
+export const THREE_TILE_SIZE = 64;
 // one bigchunk has 16x16 smallchunks, one smallchunk has 64x64 pixel, so one bigchunk is 1024x1024 pixels
 export const TILE_SIZE = 256;
 // how much to scale for a new tiled zoomlevel
diff --git a/src/core/draw.js b/src/core/draw.js
index 2631165..98c6bd4 100644
--- a/src/core/draw.js
+++ b/src/core/draw.js
@@ -8,9 +8,10 @@ import { getChunkOfPixel, getOffsetOfPixel } from './utils';
 import webSockets from '../socket/websockets';
 import logger from './logger';
 import RedisCanvas from '../data/models/RedisCanvas';
-import { registerPixelChange } from './tileserver';
 import canvases from '../canvases.json';
 
+import { THREE_CANVAS_HEIGHT } from './constants';
+
 
 /**
  *
@@ -21,13 +22,14 @@ import canvases from '../canvases.json';
  */
 export function setPixel(
   canvasId: number,
+  color: ColorIndex,
   x: number,
   y: number,
-  color: ColorIndex,
+  z: number = null,
 ) {
   const canvasSize = canvases[canvasId].size;
-  const [i, j] = getChunkOfPixel([x, y], canvasSize);
-  const offset = getOffsetOfPixel(x, y, canvasSize);
+  const [i, j] = getChunkOfPixel(canvasSize, x, y, z);
+  const offset = getOffsetOfPixel(canvasSize, x, y, z);
   RedisCanvas.setPixelInChunk(i, j, offset, color, canvasId);
   webSockets.broadcastPixel(canvasId, i, j, offset, color);
 }
@@ -44,9 +46,10 @@ export function setPixel(
 async function draw(
   user: User,
   canvasId: number,
+  color: ColorIndex,
   x: number,
   y: number,
-  color: ColorIndex,
+  z: number = null,
 ): Promise<Object> {
   if (!({}.hasOwnProperty.call(canvases, canvasId))) {
     return {
@@ -65,6 +68,25 @@ async function draw(
       success: false,
     };
   }
+  if (z !== null) {
+    if (z >= THREE_CANVAS_HEIGHT) {
+      return {
+        error: 'You reached build limit. Can\'t place higher than 128 blocks.',
+        success: false,
+      };
+    }
+    if (!canvas.v) {
+      return {
+        error: 'This is not a 3D canvas',
+        success: false,
+      };
+    }
+  } else if (canvas.v) {
+    return {
+      error: 'This is a 3D canvas. z is required.',
+      success: false,
+    };
+  }
 
   if (canvas.req !== -1) {
     if (user.id === null) {
@@ -80,13 +102,14 @@ async function draw(
     if (totalPixels < canvas.req) {
       return {
         errorTitle: 'Not Yet :(',
+        // eslint-disable-next-line max-len
         error: `You need to set ${canvas.req} pixels on another canvas first, before you can use this one.`,
         success: false,
       };
     }
   }
 
-  const setColor = await RedisCanvas.getPixel(x, y, canvasId);
+  const setColor = await RedisCanvas.getPixel(canvasId, x, y, z);
 
   let coolDown = !(setColor & 0x1E) ? canvas.bcd : canvas.pcd;
   if (user.isAdmin()) {
@@ -116,7 +139,7 @@ async function draw(
     };
   }
 
-  setPixel(canvasId, x, y, color);
+  setPixel(canvasId, color, x, y, null);
 
   user.setWait(waitLeft, canvasId);
   user.incrementPixelcount();
@@ -141,12 +164,13 @@ async function draw(
 function drawSafe(
   user: User,
   canvasId: number,
+  color: ColorIndex,
   x: number,
   y: number,
-  color: ColorIndex,
+  z: number = null,
 ): Promise<Cell> {
   if (user.isAdmin()) {
-    return draw(user, canvasId, x, y, color);
+    return draw(user, canvasId, color, x, y, z);
   }
 
   // can just check for one unique occurence,
@@ -158,7 +182,7 @@ function drawSafe(
     using(
       redlock.disposer(`locks:${userId}`, 5000, logger.error),
       async () => {
-        const ret = await draw(user, canvasId, x, y, color);
+        const ret = await draw(user, canvasId, color, x, y, z);
         resolve(ret);
       },
     ); // <-- unlock is automatically handled by bluebird
diff --git a/src/core/mail.js b/src/core/mail.js
index ee8dd6a..f394269 100644
--- a/src/core/mail.js
+++ b/src/core/mail.js
@@ -3,7 +3,7 @@
  * @flow
  */
 
-import Sequelize from 'sequelize';
+// import Sequelize from 'sequelize';
 import nodemailer from 'nodemailer';
 
 import logger from './logger';
diff --git a/src/core/tilesBackup.js b/src/core/tilesBackup.js
index dd8638c..fd7b536 100644
--- a/src/core/tilesBackup.js
+++ b/src/core/tilesBackup.js
@@ -24,6 +24,10 @@ export async function updateBackupRedis(canvasRedis, backupRedis, canvases) {
   for (let i = 0; i < ids.length; i += 1) {
     const id = ids[i];
     const canvas = canvases[id];
+    if (canvas.v) {
+      // ignore 3D canvases
+      continue;
+    }
     const chunksXY = (canvas.size / TILE_SIZE);
     console.log('Copy Chunks to backup redis...');
     const startTime = Date.now();
@@ -67,6 +71,11 @@ export async function incrementialBackupRedis(
   for (let i = 0; i < ids.length; i += 1) {
     const id = ids[i];
 
+    const canvas = canvases[id];
+    if (canvas.v) {
+      // ignore 3D canvases
+      continue;
+    }
 
     const canvasBackupDir = `${backupDir}/${id}`;
     if (!fs.existsSync(canvasBackupDir)) {
@@ -83,7 +92,6 @@ export async function incrementialBackupRedis(
       fs.mkdirSync(canvasTileBackupDir);
     }
 
-    const canvas = canvases[id];
     const palette = new Palette(canvas.colors, canvas.alpha);
     const chunksXY = (canvas.size / TILE_SIZE);
     console.log('Creating Incremential Backup...');
diff --git a/src/core/tileserver.js b/src/core/tileserver.js
index d16da05..61f3761 100644
--- a/src/core/tileserver.js
+++ b/src/core/tileserver.js
@@ -23,7 +23,7 @@ import {
   createTexture,
   initializeTiles,
 } from './Tile';
-import { mod, getChunkOfPixel, getMaxTiledZoom } from './utils';
+import { mod, getMaxTiledZoom } from './utils';
 
 
 // Array that holds cells of all changed base zoomlevel tiles
@@ -116,15 +116,6 @@ class CanvasUpdater {
     );
   }
 
-  /*
-   * register changed pixel, queue corespongind tile to reload
-   * @param pixel Pixel that got changed
-   */
-  registerPixelChange(pixel: Cell) {
-    const chunk = getChunkOfPixel(pixel, this.canvas.size);
-    return this.registerChunkChange(chunk);
-  }
-
   /*
    * initialize queues and start loops for updating tiles
    */
@@ -163,14 +154,12 @@ class CanvasUpdater {
 }
 
 export function registerChunkChange(canvasId: number, chunk: Cell) {
-  return CanvasUpdaters[canvasId].registerChunkChange(chunk);
+  if (CanvasUpdaters[canvasId]) {
+    CanvasUpdaters[canvasId].registerChunkChange(chunk);
+  }
 }
 RedisCanvas.setChunkChangeCallback(registerChunkChange);
 
-export function registerPixelChange(canvasId: number, pixel: Cell) {
-  return CanvasUpdaters[canvasId].registerPixelChange(pixel);
-}
-
 /*
  * starting update loops for canvases
  */
@@ -178,7 +167,12 @@ export function startAllCanvasLoops() {
   if (!fs.existsSync(`${TILE_FOLDER}`)) fs.mkdirSync(`${TILE_FOLDER}`);
   const ids = Object.keys(canvases);
   for (let i = 0; i < ids.length; i += 1) {
-    const updater = new CanvasUpdater(parseInt(ids[i], 10));
-    CanvasUpdaters[ids[i]] = updater;
+    const id = parseInt(ids[i], 10);
+    const canvas = canvases[id];
+    if (!canvas.v) {
+      // just 2D canvases
+      const updater = new CanvasUpdater(id);
+      CanvasUpdaters[ids[i]] = updater;
+    }
   }
 }
diff --git a/src/core/utils.js b/src/core/utils.js
index 4e33215..48e3db5 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -3,7 +3,11 @@
 import type { Cell } from './Cell';
 import type { State } from '../reducers';
 
-import { TILE_SIZE, TILE_ZOOM_LEVEL } from './constants';
+import {
+  TILE_SIZE,
+  THREE_TILE_SIZE,
+  TILE_ZOOM_LEVEL,
+} from './constants';
 
 /**
  * http://stackoverflow.com/questions/4467539/javascript-modulo-not-behaving
@@ -15,13 +19,6 @@ export function mod(n: number, m: number): number {
   return ((n % m) + m) % m;
 }
 
-export function sum(values: Array<number>): number {
-  let total = 0;
-  // TODO map reduce
-  values.forEach((value) => total += value);
-  return total;
-}
-
 /*
  * returns random integer
  * @param min Minimum of random integer
@@ -41,13 +38,26 @@ export function clamp(n: number, min: number, max: number): number {
   return Math.max(min, Math.min(n, max));
 }
 
-export function getChunkOfPixel(pixel: Cell, canvasSize: number = null): Cell {
-  const target = pixel.map((x) => Math.floor((x + (canvasSize / 2)) / TILE_SIZE));
-  return target;
+export function getChunkOfPixel(
+  canvasSize: number = null,
+  x: number,
+  y: number,
+  z: number = null,
+): Cell {
+  const tileSize = (z === null) ? TILE_SIZE : THREE_TILE_SIZE;
+  const cx = Math.floor((x + (canvasSize / 2)) / tileSize);
+  const cy = Math.floor((y + (canvasSize / 2)) / tileSize);
+  return [cx, cy];
 }
 
-export function getTileOfPixel(tileScale: number, pixel: Cell, canvasSize: number = null): Cell {
-  const target = pixel.map((x) => Math.floor((x + canvasSize / 2) / TILE_SIZE * tileScale));
+export function getTileOfPixel(
+  tileScale: number,
+  pixel: Cell,
+  canvasSize: number = null,
+): Cell {
+  const target = pixel.map(
+    (x) => Math.floor((x + canvasSize / 2) / TILE_SIZE * tileScale),
+  );
   return target;
 }
 
@@ -62,11 +72,19 @@ export function getCanvasBoundaries(canvasSize: number): number {
   return [canvasMinXY, canvasMaxXY];
 }
 
-export function getOffsetOfPixel(x: number, y: number, canvasSize: number = null): number {
-  const modOffset = mod((canvasSize / 2), TILE_SIZE);
-  const cx = mod(x + modOffset, TILE_SIZE);
-  const cy = mod(y + modOffset, TILE_SIZE);
-  return (cy * TILE_SIZE) + cx;
+export function getOffsetOfPixel(
+  canvasSize: number = null,
+  x: number,
+  y: number,
+  z: number = null,
+): number {
+  const tileSize = (z === null) ? TILE_SIZE : THREE_TILE_SIZE;
+  let offset = (z === null) ? 0 : (z * tileSize * tileSize);
+  const modOffset = mod((canvasSize / 2), tileSize);
+  const cx = mod(x + modOffset, tileSize);
+  const cy = mod(y + modOffset, tileSize);
+  offset += (cy * tileSize) + cx;
+  return offset;
 }
 
 /*
@@ -134,29 +152,6 @@ export function worldToScreen(
   ];
 }
 
-/*
- * Get Color Index of specific pixel
- * @param state State
- * @param viewport Viewport HTML canvas
- * @param coordinates  Coords of pixel in World coordinates
- * @return number of color Index
- */
-export function getColorIndexOfPixel(
-  state: State,
-  coordinates: Cell,
-): number {
-  const { chunks, canvasSize, canvasMaxTiledZoom } = state.canvas;
-  const [cx, cy] = getChunkOfPixel(coordinates, canvasSize);
-  const key = `${canvasMaxTiledZoom}:${cx}:${cy}`;
-  const chunk = chunks.get(key);
-  if (!chunk) {
-    return 0;
-  }
-  return chunk.getColorIndex(
-    getCellInsideChunk(coordinates),
-  );
-}
-
 export function durationToString(
   ms: number,
   smallest: boolean = false,
@@ -166,6 +161,7 @@ export function durationToString(
   if (seconds < 60 && smallest) {
     timestring = seconds;
   } else {
+    // eslint-disable-next-line max-len
     timestring = `${Math.floor(seconds / 60)}:${(`0${seconds % 60}`).slice(-2)}`;
   }
   return timestring;
@@ -182,8 +178,10 @@ export function numberToString(num: number): string {
   let postfixNum = 0;
   while (postfixNum < postfix.length) {
     if (num < 10000) {
+      // eslint-disable-next-line max-len
       return `${Math.floor(num / 1000)}.${Math.floor((num % 1000) / 10)}${postfix[postfixNum]}`;
     } if (num < 100000) {
+      // eslint-disable-next-line max-len
       return `${Math.floor(num / 1000)}.${Math.floor((num % 1000) / 100)}${postfix[postfixNum]}`;
     } if (num < 1000000) {
       return Math.floor(num / 1000) + postfix[postfixNum];
@@ -203,6 +201,7 @@ export function numberToStringFull(num: number): string {
     return `${Math.floor(num / 1000)}.${(`00${num % 1000}`).slice(-3)}`;
   }
 
+  // eslint-disable-next-line max-len
   return `${Math.floor(num / 1000000)}.${(`00${Math.floor(num / 1000)}`).slice(-3)}.${(`00${num % 1000}`).slice(-3)}`;
 }
 
diff --git a/src/data/models/RedisCanvas.js b/src/data/models/RedisCanvas.js
index bb56e3c..2e19d76 100644
--- a/src/data/models/RedisCanvas.js
+++ b/src/data/models/RedisCanvas.js
@@ -42,14 +42,15 @@ class RedisCanvas {
   }
 
   static async setPixel(
+    canvasId: number,
+    color: number,
     x: number,
     y: number,
-    color: number,
-    canvasId: number,
+    z: number = null,
   ) {
     const canvasSize = canvases[canvasId].size;
-    const [i, j] = getChunkOfPixel([x, y], canvasSize);
-    const offset = getOffsetOfPixel(x, y, canvasSize);
+    const [i, j] = getChunkOfPixel(canvasSize, x, y, z);
+    const offset = getOffsetOfPixel(canvasSize, x, y, z);
     RedisCanvas.setPixelInChunk(i, j, offset, color, canvasId);
   }
 
@@ -73,16 +74,17 @@ class RedisCanvas {
   }
 
   static async getPixelIfExists(
+    canvasId: number,
     x: number,
     y: number,
-    canvasId: number,
+    z: number = null,
   ): Promise<number> {
     // 1st and 2nd bit -> not used yet
     // 3rd bit -> protected or not
     // rest (5 bits) -> index of color
     const canvasSize = canvases[canvasId].size;
-    const [i, j] = getChunkOfPixel([x, y], canvasSize);
-    const offset = getOffsetOfPixel(x, y, canvasSize);
+    const [i, j] = getChunkOfPixel(canvasSize, x, y, z);
+    const offset = getOffsetOfPixel(canvasSize, x, y, z);
     const args = [
       `ch:${canvasId}:${i}:${j}`,
       'GET',
@@ -96,12 +98,13 @@ class RedisCanvas {
   }
 
   static async getPixel(
+    canvasId: number,
     x: number,
     y: number,
-    canvasId: number,
+    z: number = null,
   ): Promise<number> {
     const canvasAlpha = canvases[canvasId].alpha;
-    const clr = RedisCanvas.getPixelIfExists(x, y, canvasId);
+    const clr = RedisCanvas.getPixelIfExists(canvasId, x, y, z);
     return (clr == null) ? canvasAlpha : clr;
   }
 }
diff --git a/src/reducers/canvas.js b/src/reducers/canvas.js
index 33b9d70..3b7d7bc 100644
--- a/src/reducers/canvas.js
+++ b/src/reducers/canvas.js
@@ -5,8 +5,6 @@ import type { Cell } from '../core/Cell';
 import Palette from '../core/Palette';
 import {
   getMaxTiledZoom,
-  getChunkOfPixel,
-  getCellInsideChunk,
   clamp,
   getIdFromObject,
 } from '../core/utils';
@@ -19,20 +17,18 @@ import {
   DEFAULT_CANVASES,
   TILE_SIZE,
 } from '../core/constants';
-import ChunkRGB from '../ui/ChunkRGB';
 
 export type CanvasState = {
   canvasId: number,
   canvasIdent: string,
+  is3D: boolean,
   canvasSize: number,
   canvasMaxTiledZoom: number,
   canvasStartDate: string,
   palette: Palette,
-  chunks: Map<string, ChunkRGB>,
   view: Cell,
   scale: number,
   viewscale: number,
-  requested: Set<string>,
   fetchs: number,
   isHistoricalView: boolean,
   historicalDate: string,
@@ -67,27 +63,30 @@ function getViewFromURL(canvases: Object) {
     let colors;
     let canvasSize;
     let canvasStartDate;
+    let is3D;
     if (canvasId == null) {
       // if canvas informations are not available yet
       // aka /api/me didn't load yet
       colors = canvases[DEFAULT_CANVAS_ID].colors;
       canvasSize = 1024;
+      is3D = false;
       canvasStartDate = null;
     } else {
       const canvas = canvases[canvasId];
       colors = canvas.colors;
       canvasSize = canvas.size;
+      is3D = !!canvas.v;
       canvasStartDate = canvas.sd;
     }
 
     const x = parseInt(almost[1], 10);
     const y = parseInt(almost[2], 10);
     let urlscale = parseInt(almost[3], 10);
-    if (isNaN(x) || isNaN(y)) {
+    if (Number.isNaN(x) || Number.isNaN(y)) {
       const thrown = 'NaN';
       throw thrown;
     }
-    if (!urlscale || isNaN(urlscale)) {
+    if (!urlscale || Number.isNaN(urlscale)) {
       urlscale = DEFAULT_SCALE;
     } else {
       urlscale = 2 ** (urlscale / 10);
@@ -97,6 +96,7 @@ function getViewFromURL(canvases: Object) {
       canvasId,
       canvasIdent,
       canvasSize,
+      is3D,
       canvasStartDate,
       canvasMaxTiledZoom: getMaxTiledZoom(canvasSize),
       palette: new Palette(colors, 0),
@@ -110,6 +110,7 @@ function getViewFromURL(canvases: Object) {
       canvasId: DEFAULT_CANVAS_ID,
       canvasIdent: canvases[DEFAULT_CANVAS_ID].ident,
       canvasSize: canvases[DEFAULT_CANVAS_ID].size,
+      is3D: !!canvases[DEFAULT_CANVAS_ID].v,
       canvasStartDate: null,
       canvasMaxTiledZoom: getMaxTiledZoom(canvases[DEFAULT_CANVAS_ID].size),
       palette: new Palette(canvases[DEFAULT_CANVAS_ID].colors, 0),
@@ -121,9 +122,7 @@ function getViewFromURL(canvases: Object) {
 }
 
 const initialState: CanvasState = {
-  chunks: new Map(),
   ...getViewFromURL(DEFAULT_CANVASES),
-  requested: new Set(),
   fetchs: 0,
   isHistoricalView: false,
   historicalDate: null,
@@ -131,36 +130,11 @@ const initialState: CanvasState = {
 };
 
 
-export default function gui(
+export default function canvasReducer(
   state: CanvasState = initialState,
   action: Action,
 ): CanvasState {
   switch (action.type) {
-    case 'PLACE_PIXEL': {
-      const {
-        chunks, canvasMaxTiledZoom, palette, canvasSize,
-      } = state;
-      const { coordinates, color } = action;
-
-      const [cx, cy] = getChunkOfPixel(coordinates, canvasSize);
-      const key = ChunkRGB.getKey(canvasMaxTiledZoom, cx, cy);
-      let chunk = chunks.get(key);
-      if (!chunk) {
-        chunk = new ChunkRGB(palette, [canvasMaxTiledZoom, cx, cy]);
-        chunks.set(chunk.key, chunk);
-      }
-
-      // redis prediction
-      chunk.setColor(
-        getCellInsideChunk(coordinates),
-        color,
-      );
-      return {
-        ...state,
-        chunks,
-      };
-    }
-
     case 'SET_SCALE': {
       let {
         view,
@@ -221,7 +195,7 @@ export default function gui(
         ...state,
         scale: (scale < 1.0) ? 1.0 : scale,
         viewscale: (viewscale < 1.0) ? 1.0 : viewscale,
-        isHistoricalView: !state.isHistoricalView,
+        isHistoricalView: !state.is3D && !state.isHistoricalView,
       };
     }
 
@@ -238,85 +212,36 @@ export default function gui(
     }
 
     case 'RELOAD_URL': {
-      const { canvasId, chunks, canvases } = state;
+      const { canvases } = state;
       const nextstate = getViewFromURL(canvases);
-      if (nextstate.canvasId !== canvasId) {
-        chunks.clear();
-      }
       return {
         ...state,
         ...nextstate,
       };
     }
 
-    /*
-     * set url coordinates
-     */
-    case 'ON_VIEW_FINISH_CHANGE': {
-      const { view, viewscale, canvasIdent } = state;
-      let [x, y] = view;
-      x = Math.round(x);
-      y = Math.round(y);
-      const scale = Math.round(Math.log2(viewscale) * 10);
-      const newhash = `#${canvasIdent},${x},${y},${scale}`;
-      window.history.replaceState(undefined, undefined, newhash);
-      return {
-        ...state,
-      };
-    }
-
     case 'REQUEST_BIG_CHUNK': {
       const {
-        palette, chunks, fetchs, requested,
+        fetchs,
       } = state;
-      const { center } = action;
 
-      const chunkRGB = new ChunkRGB(palette, center);
-      // chunkRGB.preLoad(chunks);
-      const { key } = chunkRGB;
-      chunks.set(key, chunkRGB);
-
-      requested.add(key);
       return {
         ...state,
-        chunks,
         fetchs: fetchs + 1,
-        requested,
       };
     }
 
     case 'RECEIVE_BIG_CHUNK': {
-      const { chunks, fetchs } = state;
-      const { center, arrayBuffer } = action;
-
-      const key = ChunkRGB.getKey(...center);
-      const chunk = chunks.get(key);
-      if (!chunk) return state;
-
-      chunk.isBasechunk = true;
-      if (arrayBuffer.byteLength) {
-        const chunkArray = new Uint8Array(arrayBuffer);
-        chunk.fromBuffer(chunkArray);
-      } else {
-        chunk.empty();
-      }
+      const { fetchs } = state;
 
       return {
         ...state,
-        chunks,
         fetchs: fetchs + 1,
       };
     }
 
     case 'RECEIVE_BIG_CHUNK_FAILURE': {
-      const { chunks, fetchs } = state;
-      const { center } = action;
-
-      const key = ChunkRGB.getKey(...center);
-      const chunk = chunks.get(key);
-      if (!chunk) return state;
-
-      chunk.empty();
+      const { fetchs } = state;
 
       return {
         ...state,
@@ -324,52 +249,10 @@ export default function gui(
       };
     }
 
-    case 'RECEIVE_IMAGE_TILE': {
-      const { chunks, fetchs } = state;
-      const { center, tile } = action;
-
-      const key = ChunkRGB.getKey(...center);
-      const chunk = chunks.get(key);
-      if (!chunk) return state;
-
-      chunk.fromImage(tile);
-
-      return {
-        ...state,
-        chunks,
-        fetchs: fetchs + 1,
-      };
-    }
-
-    case 'RECEIVE_PIXEL_UPDATE': {
-      const { chunks, canvasMaxTiledZoom } = state;
-      // i, j: Coordinates of chunk
-      // offset: Offset of pixel within said chunk
-      const {
-        i, j, offset, color,
-      } = action;
-
-      const key = ChunkRGB.getKey(canvasMaxTiledZoom, i, j);
-      const chunk = chunks.get(key);
-
-      // ignore because is not seen
-      if (!chunk) return state;
-
-      const ix = offset % TILE_SIZE;
-      const iy = Math.floor(offset / TILE_SIZE);
-      chunk.setColor([ix, iy], color);
-
-      return {
-        ...state,
-        chunks,
-      };
-    }
-
     case 'SELECT_CANVAS': {
       let { canvasId } = action;
-      const { canvases, chunks } = state;
+      const { canvases, isHistoricalView } = state;
 
-      chunks.clear();
       let canvas = canvases[canvasId];
       if (!canvas) {
         canvasId = DEFAULT_CANVAS_ID;
@@ -379,23 +262,25 @@ export default function gui(
         size: canvasSize,
         sd: canvasStartDate,
         ident: canvasIdent,
+        v: is3D,
         colors,
       } = canvas;
       const canvasMaxTiledZoom = getMaxTiledZoom(canvasSize);
       const palette = new Palette(colors, 0);
       const view = (canvasId === 0) ? getGivenCoords() : [0, 0];
-      chunks.clear();
       return {
         ...state,
         canvasId,
         canvasIdent,
         canvasSize,
+        is3D,
         canvasStartDate,
         canvasMaxTiledZoom,
         palette,
         view,
         viewscale: DEFAULT_SCALE,
         scale: DEFAULT_SCALE,
+        isHistoricalView: !is3D && isHistoricalView,
       };
     }
 
@@ -411,6 +296,7 @@ export default function gui(
       const {
         size: canvasSize,
         sd: canvasStartDate,
+        v: is3D,
         colors,
       } = canvases[canvasId];
       const canvasMaxTiledZoom = getMaxTiledZoom(canvasSize);
@@ -421,6 +307,7 @@ export default function gui(
         canvasId,
         canvasIdent,
         canvasSize,
+        is3D,
         canvasStartDate,
         canvasMaxTiledZoom,
         palette,
diff --git a/src/reducers/modal.js b/src/reducers/modal.js
index 33670f3..721dcbf 100644
--- a/src/reducers/modal.js
+++ b/src/reducers/modal.js
@@ -37,6 +37,7 @@ export default function modal(
       };
     }
 
+    case 'SELECT_CANVAS':
     case 'HIDE_MODAL':
       return {
         ...state,
diff --git a/src/routes/admintools.js b/src/routes/admintools.js
index 8b56031..e5188fc 100644
--- a/src/routes/admintools.js
+++ b/src/routes/admintools.js
@@ -157,6 +157,11 @@ router.post('/', upload.single('image'), async (req, res, next) => {
 
       const canvas = canvases[canvasId];
 
+      if (canvas.v) {
+        res.status(403).send('Can not upload Image to 3D canvas');
+        return;
+      }
+
       const canvasMaxXY = canvas.size / 2;
       const canvasMinXY = -canvasMaxXY;
       if (x < canvasMinXY || y < canvasMinXY
diff --git a/src/routes/api/pixel.js b/src/routes/api/pixel.js
index 14ae2e1..955ed47 100644
--- a/src/routes/api/pixel.js
+++ b/src/routes/api/pixel.js
@@ -6,14 +6,19 @@
 import type { Request, Response } from 'express';
 
 import draw from '../../core/draw';
-import { blacklistDetector, cheapDetector, strongDetector } from '../../core/isProxy';
+import {
+  blacklistDetector,
+  cheapDetector,
+  strongDetector,
+} from '../../core/isProxy';
 import verifyCaptcha from '../../utils/recaptcha';
 import logger from '../../core/logger';
 import redis from '../../data/redis';
-import { USE_PROXYCHECK, RECAPTCHA_SECRET, RECAPTCHA_TIME } from '../../core/config';
 import {
-  User,
-} from '../../data/models';
+  USE_PROXYCHECK,
+  RECAPTCHA_SECRET,
+  RECAPTCHA_TIME,
+} from '../../core/config';
 
 
 async function validate(req: Request, res: Response, next) {
@@ -21,6 +26,10 @@ async function validate(req: Request, res: Response, next) {
   const cn = parseInt(req.body.cn, 10);
   const x = parseInt(req.body.x, 10);
   const y = parseInt(req.body.y, 10);
+  let z = null;
+  if (req.body.z) {
+    z = parseInt(req.body.z, 10);
+  }
   const clr = parseInt(req.body.clr, 10);
 
   if (Number.isNaN(cn)) {
@@ -33,6 +42,8 @@ async function validate(req: Request, res: Response, next) {
     error = 'No color selected';
   } else if (clr < 2 || clr > 31) {
     error = 'Invalid color selected';
+  } else if (z !== null && Number.isNaN(z)) {
+    error = 'z is not a valid number';
   }
   if (error !== null) {
     res.status(400).json({ errors: [error] });
@@ -42,6 +53,7 @@ async function validate(req: Request, res: Response, next) {
   req.body.cn = cn;
   req.body.x = x;
   req.body.y = y;
+  req.body.z = z;
   req.body.clr = clr;
 
 
@@ -111,7 +123,7 @@ async function checkHuman(req: Request, res: Response, next) {
 // strongly check selective areas
 async function checkProxy(req: Request, res: Response, next) {
   const { trueIp: ip } = req;
-  if (USE_PROXYCHECK && ip != '0.0.0.1') {
+  if (USE_PROXYCHECK && ip !== '0.0.0.1') {
     /*
     //one area uses stronger detector
     const { x, y } = req.body;
@@ -146,6 +158,7 @@ async function checkProxy(req: Request, res: Response, next) {
 
 // strongly check just specific areas for proxies
 // do not proxycheck the rest
+// eslint-disable-next-line  no-unused-vars
 async function checkProxySelective(req: Request, res: Response, next) {
   const { trueIp: ip } = req;
   if (USE_PROXYCHECK) {
@@ -177,18 +190,16 @@ async function place(req: Request, res: Response) {
   });
 
   const {
-    cn, x, y, clr,
+    cn, x, y, z, clr,
   } = req.body;
-  const { user, headers, trueIp } = req;
-  const { ip } = user;
+  const { user, trueIp } = req;
 
-  const isHashed = parseInt(req.body.a, 10) === (x + y + 8);
-
-  logger.info(`${trueIp} / ${user.id} wants to place ${clr} in (${x}, ${y})`);
+  // eslint-disable-next-line max-len
+  logger.info(`${trueIp} / ${user.id} wants to place ${clr} in (${x}, ${y}, ${z}) on canvas ${cn}`);
 
   const {
     errorTitle, error, success, waitSeconds, coolDownSeconds,
-  } = await draw(user, cn, x, y, clr);
+  } = await draw(user, cn, clr, x, y, z);
   logger.log('debug', success);
 
   if (success) {
diff --git a/src/routes/tiles.js b/src/routes/tiles.js
index 7638948..91e2050 100644
--- a/src/routes/tiles.js
+++ b/src/routes/tiles.js
@@ -7,10 +7,11 @@
 
 import express from 'express';
 import type { Request, Response } from 'express';
-import sharp from 'sharp';
-import { TILE_SIZE, HOUR } from '../core/constants';
 import { TILE_FOLDER } from '../core/config';
-import RedisCanvas from '../data/models/RedisCanvas';
+import { HOUR } from '../core/constants';
+// import sharp from 'sharp';
+// import { TILE_SIZE, HOUR } from '../core/constants';
+// import RedisCanvas from '../data/models/RedisCanvas';
 
 
 const router = express.Router();
@@ -72,16 +73,17 @@ router.use('/', express.static(TILE_FOLDER, {
 /*
  * catch File Not Found: Send empty tile
  */
-router.use('/:c([0-9]+)/:z([0-9]+)/:x([0-9]+)/:y([0-9]+).png', async (req: Request, res: Response) => {
-  const { c: paramC } = req.params;
-  const c = parseInt(paramC, 10);
-  res.set({
-    'Cache-Control': `public, s-maxage=${2 * 60 * 60}, max-age=${1 * 60 * 60}`, // seconds
-    'Content-Type': 'image/png',
+router.use('/:c([0-9]+)/:z([0-9]+)/:x([0-9]+)/:y([0-9]+).png',
+  async (req: Request, res: Response) => {
+    const { c: paramC } = req.params;
+    const c = parseInt(paramC, 10);
+    res.set({
+      'Cache-Control': `public, s-maxage=${2 * 3600}, max-age=${1 * 3600}`,
+      'Content-Type': 'image/png',
+    });
+    res.status(200);
+    res.sendFile(`${TILE_FOLDER}/${c}/emptytile.png`);
   });
-  res.status(200);
-  res.sendFile(`${TILE_FOLDER}/${c}/emptytile.png`);
-});
 
 
 export default router;
diff --git a/src/socket/APISocketServer.js b/src/socket/APISocketServer.js
index 28c477a..9ed126c 100644
--- a/src/socket/APISocketServer.js
+++ b/src/socket/APISocketServer.js
@@ -28,7 +28,8 @@ async function verifyClient(info, done) {
   const { headers } = req;
   const ip = await getIPFromRequest(req);
 
-  if (!headers.authorization || headers.authorization != `Bearer ${APISOCKET_KEY}`) {
+  if (!headers.authorization
+    || headers.authorization != `Bearer ${APISOCKET_KEY}`) {
     logger.warn(`API ws request from ${ip} authenticated`);
     return done(false);
   }
@@ -83,7 +84,9 @@ class APISocketServer extends WebSocketEvents {
 
     const sendmsg = JSON.stringify(['msg', name, msg]);
     this.wss.clients.forEach((client) => {
-      if (client !== ws && client.subChat && client.readyState === WebSocket.OPEN) {
+      if (client !== ws
+        && client.subChat
+        && client.readyState === WebSocket.OPEN) {
         client.send(sendmsg);
       }
     });
@@ -117,9 +120,9 @@ class APISocketServer extends WebSocketEvents {
     });
     this.wss.clients.forEach((client) => {
       if (client.subOnline && client.readyState === WebSocket.OPEN) {
-        frame.forEach((buffer) => {
+        frame.forEach((data) => {
           try {
-            client._socket.write(buffer);
+            client._socket.write(data);
           } catch (error) {
             logger.error('(!) Catched error on write apisocket:', error);
           }
@@ -139,9 +142,9 @@ class APISocketServer extends WebSocketEvents {
     });
     this.wss.clients.forEach((client) => {
       if (client.subPxl && client.readyState === WebSocket.OPEN) {
-        frame.forEach((buffer) => {
+        frame.forEach((data) => {
           try {
-            client._socket.write(buffer);
+            client._socket.write(data);
           } catch (error) {
             logger.error('(!) Catched error on write apisocket:', error);
           }
@@ -177,7 +180,7 @@ class APISocketServer extends WebSocketEvents {
         if (clr < 0 || clr > 32) return;
         // be aware that user null has no cd
         if (!minecraftid && !ip) {
-          setPixel(0, x, y, clr);
+          setPixel(0, clr, x, y);
           ws.send(JSON.stringify(['retpxl', null, null, true, 0, 0]));
           return;
         }
@@ -185,7 +188,7 @@ class APISocketServer extends WebSocketEvents {
         user.ip = ip;
         const {
           error, success, waitSeconds, coolDownSeconds,
-        } = await drawUnsafe(user, 0, x, y, clr);
+        } = await drawUnsafe(user, 0, clr, x, y, null);
         ws.send(JSON.stringify([
           'retpxl',
           (minecraftid) || ip,
@@ -229,7 +232,9 @@ class APISocketServer extends WebSocketEvents {
       if (command == 'mcchat') {
         const [minecraftname, msg] = packet;
         const user = this.mc.minecraftname2User(minecraftname);
-        const chatname = (user.id) ? `[MC] ${user.regUser.name}` : `[MC] ${minecraftname}`;
+        const chatname = (user.id)
+          ? `[MC] ${user.regUser.name}`
+          : `[MC] ${minecraftname}`;
         webSockets.broadcastChatMessage(chatname, msg, false);
         this.broadcastChatMessage(chatname, msg, true, ws);
         return;
@@ -265,6 +270,7 @@ class APISocketServer extends WebSocketEvents {
 
       ws.isAlive = false;
       ws.ping(() => {});
+      return null;
     });
   }
 }
diff --git a/src/socket/packets/PixelUpdate.js b/src/socket/packets/PixelUpdate.js
index 98c0fea..eb92c34 100644
--- a/src/socket/packets/PixelUpdate.js
+++ b/src/socket/packets/PixelUpdate.js
@@ -17,6 +17,8 @@ export default {
     // CLIENT
     const i = data.getInt16(1);
     const j = data.getInt16(3);
+    // const offset = (data.getUint8(5) << 16) | data.getUint16(6);
+    // const color = data.getUint8(8);
     const offset = data.getUint16(5);
     const color = data.getUint8(7);
     return {
@@ -26,11 +28,14 @@ export default {
   dehydrate(i, j, offset, color): Buffer {
     // SERVER
     if (!process.env.BROWSER) {
-      const buffer = Buffer.allocUnsafe(1 + 2 + 2 + 2 + 1);
+      const buffer = Buffer.allocUnsafe(1 + 2 + 2 + 1 + 2 + 1);
       buffer.writeUInt8(OP_CODE, 0);
 
       buffer.writeInt16BE(i, 1);
       buffer.writeInt16BE(j, 3);
+      // buffer.writeUInt8(offset >>> 16, 5);
+      // buffer.writeUInt16BE(offset & 0x00FFFF, 6);
+      // buffer.writeUInt8(color, 8);
       buffer.writeUInt16BE(offset, 5);
       buffer.writeUInt8(color, 7);
 
diff --git a/src/store/audio.js b/src/store/audio.js
index e7b102e..f68d3d3 100644
--- a/src/store/audio.js
+++ b/src/store/audio.js
@@ -27,7 +27,10 @@ export default (store) => (next) => (action) => {
 
 
       gainNode.gain.setValueAtTime(0.3, context.currentTime);
-      gainNode.gain.exponentialRampToValueAtTime(0.2, context.currentTime + 0.1);
+      gainNode.gain.exponentialRampToValueAtTime(
+        0.2,
+        context.currentTime + 0.1,
+      );
 
       oscillatorNode.connect(gainNode);
       gainNode.connect(context.destination);
@@ -46,11 +49,17 @@ export default (store) => (next) => (action) => {
       // oscillatorNode.detune.value = -600
 
       oscillatorNode.frequency.setValueAtTime(1479.98, context.currentTime);
-      oscillatorNode.frequency.exponentialRampToValueAtTime(493.88, context.currentTime + 0.01);
+      oscillatorNode.frequency.exponentialRampToValueAtTime(
+        493.88,
+        context.currentTime + 0.01,
+      );
 
 
       gainNode.gain.setValueAtTime(0.5, context.currentTime);
-      gainNode.gain.exponentialRampToValueAtTime(0.2, context.currentTime + 0.1);
+      gainNode.gain.exponentialRampToValueAtTime(
+        0.2,
+        context.currentTime + 0.1,
+      );
 
       oscillatorNode.connect(gainNode);
       gainNode.connect(context.destination);
@@ -68,9 +77,18 @@ export default (store) => (next) => (action) => {
       oscillatorNode.type = 'sine';
       oscillatorNode.detune.value = -900;
       oscillatorNode.frequency.setValueAtTime(600, context.currentTime);
-      oscillatorNode.frequency.setValueAtTime(1400, context.currentTime + 0.025);
-      oscillatorNode.frequency.setValueAtTime(1200, context.currentTime + 0.05);
-      oscillatorNode.frequency.setValueAtTime(900, context.currentTime + 0.075);
+      oscillatorNode.frequency.setValueAtTime(
+        1400,
+        context.currentTime + 0.025,
+      );
+      oscillatorNode.frequency.setValueAtTime(
+        1200,
+        context.currentTime + 0.05,
+      );
+      oscillatorNode.frequency.setValueAtTime(
+        900,
+        context.currentTime + 0.075,
+      );
 
       const lfo = context.createOscillator();
       lfo.type = 'sine';
@@ -94,10 +112,16 @@ export default (store) => (next) => (action) => {
 
       oscillatorNode.type = 'sine';
       oscillatorNode.frequency.setValueAtTime(clrFreq, context.currentTime);
-      oscillatorNode.frequency.exponentialRampToValueAtTime(1400, context.currentTime + 0.2);
+      oscillatorNode.frequency.exponentialRampToValueAtTime(
+        1400,
+        context.currentTime + 0.2,
+      );
 
       gainNode.gain.setValueAtTime(0.5, context.currentTime);
-      gainNode.gain.exponentialRampToValueAtTime(0.2, context.currentTime + 0.1);
+      gainNode.gain.exponentialRampToValueAtTime(
+        0.2,
+        context.currentTime + 0.1,
+      );
 
       oscillatorNode.connect(gainNode);
       gainNode.connect(context.destination);
@@ -114,11 +138,20 @@ export default (store) => (next) => (action) => {
 
       oscillatorNode.type = 'sine';
       oscillatorNode.frequency.setValueAtTime(349.23, context.currentTime);
-      oscillatorNode.frequency.setValueAtTime(523.25, context.currentTime + 0.1);
-      oscillatorNode.frequency.setValueAtTime(698.46, context.currentTime + 0.2);
+      oscillatorNode.frequency.setValueAtTime(
+        523.25,
+        context.currentTime + 0.1,
+      );
+      oscillatorNode.frequency.setValueAtTime(
+        698.46,
+        context.currentTime + 0.2,
+      );
 
       gainNode.gain.setValueAtTime(0.5, context.currentTime);
-      gainNode.gain.exponentialRampToValueAtTime(0.2, context.currentTime + 0.15);
+      gainNode.gain.exponentialRampToValueAtTime(
+        0.2,
+        context.currentTime + 0.15,
+      );
 
       oscillatorNode.connect(gainNode);
       gainNode.connect(context.destination);
@@ -135,10 +168,16 @@ export default (store) => (next) => (action) => {
 
       oscillatorNode.type = 'sine';
       oscillatorNode.frequency.setValueAtTime(310, context.currentTime);
-      oscillatorNode.frequency.exponentialRampToValueAtTime(355, context.currentTime + 0.025);
+      oscillatorNode.frequency.exponentialRampToValueAtTime(
+        355,
+        context.currentTime + 0.025,
+      );
 
       gainNode.gain.setValueAtTime(0.1, context.currentTime);
-      gainNode.gain.exponentialRampToValueAtTime(0.1, context.currentTime + 0.1);
+      gainNode.gain.exponentialRampToValueAtTime(
+        0.1,
+        context.currentTime + 0.1,
+      );
 
       oscillatorNode.connect(gainNode);
       gainNode.connect(context.destination);
diff --git a/src/store/notifications.js b/src/store/notifications.js
index 4ad1296..2fb51d9 100644
--- a/src/store/notifications.js
+++ b/src/store/notifications.js
@@ -35,6 +35,7 @@ export default () => (next) => (action) => {
         // nothing
     }
   } catch (e) {
+    // eslint-disable-next-line no-console
     console.error(e);
   }
   return next(action);
diff --git a/src/store/promise.js b/src/store/promise.js
index d99e15f..ef5b91e 100644
--- a/src/store/promise.js
+++ b/src/store/promise.js
@@ -21,6 +21,7 @@
  */
 
 function warn(error) {
+  // eslint-disable-next-line no-console
   console.warn(error.message || error);
   throw error; // To let the caller handle the rejection
 }
diff --git a/src/store/rendererHook.js b/src/store/rendererHook.js
index c99f2bf..f42a98b 100644
--- a/src/store/rendererHook.js
+++ b/src/store/rendererHook.js
@@ -4,13 +4,17 @@
  * @flow
  */
 
-import renderer from '../ui/Renderer';
+import {
+  getRenderer,
+  initRenderer,
+} from '../ui/renderer';
 
 export default (store) => (next) => (action) => {
   const { type } = action;
 
-  if (type == 'SET_HISTORICAL_TIME') {
+  if (type === 'SET_HISTORICAL_TIME') {
     const state = store.getState();
+    const renderer = getRenderer();
     renderer.updateOldHistoricalTime(state.canvas.historicalTime);
   }
 
@@ -23,15 +27,21 @@ export default (store) => (next) => (action) => {
     case 'RELOAD_URL':
     case 'SELECT_CANVAS':
     case 'RECEIVE_ME': {
-      renderer.updateCanvasData(state);
+      const renderer = getRenderer();
+      const { is3D } = state.canvas;
+      if (is3D === renderer.is3D) {
+        renderer.updateCanvasData(state);
+      } else {
+        initRenderer(store, is3D);
+      }
       break;
     }
 
     case 'SET_HISTORICAL_TIME':
     case 'REQUEST_BIG_CHUNK':
     case 'RECEIVE_BIG_CHUNK':
-    case 'RECEIVE_BIG_CHUNK_FAILURE':
-    case 'RECEIVE_IMAGE_TILE': {
+    case 'RECEIVE_BIG_CHUNK_FAILURE': {
+      const renderer = getRenderer();
       renderer.forceNextRender = true;
       break;
     }
@@ -44,12 +54,26 @@ export default (store) => (next) => (action) => {
         view,
         canvasSize,
       } = state.canvas;
+      const renderer = getRenderer();
       renderer.updateScale(viewscale, canvasMaxTiledZoom, view, canvasSize);
       break;
     }
 
+    case 'RECEIVE_PIXEL_UPDATE': {
+      const {
+        i,
+        j,
+        offset,
+        color,
+      } = action;
+      const renderer = getRenderer();
+      renderer.renderPixel(i, j, offset, color);
+      break;
+    }
+
     case 'SET_VIEW_COORDINATES': {
       const { view, canvasSize } = state.canvas;
+      const renderer = getRenderer();
       renderer.updateView(view, canvasSize);
       break;
     }
diff --git a/src/store/title.js b/src/store/title.js
index 4f01611..0478db9 100644
--- a/src/store/title.js
+++ b/src/store/title.js
@@ -13,6 +13,8 @@ const TITLE = 'PixelPlanet.fun';
 let lastTitle = null;
 
 export default (store) => (next) => (action) => {
+  const ret = next(action);
+
   switch (action.type) {
     case 'COOLDOWN_SET': {
       const { coolDown } = store.getState().user;
@@ -28,9 +30,26 @@ export default (store) => (next) => (action) => {
       break;
     }
 
+
+    case 'SELECT_CANVAS':
+    case 'ON_VIEW_FINISH_CHANGE': {
+      const {
+        view,
+        viewscale,
+        canvasIdent,
+      } = store.getState().canvas;
+      let [x, y] = view;
+      x = Math.round(x);
+      y = Math.round(y);
+      const scale = Math.round(Math.log2(viewscale) * 10);
+      const newhash = `#${canvasIdent},${x},${y},${scale}`;
+      window.history.replaceState(undefined, undefined, newhash);
+      break;
+    }
+
     default:
     // nothing
   }
 
-  return next(action);
+  return ret;
 };
diff --git a/src/ui/ChunkLoader2D.js b/src/ui/ChunkLoader2D.js
new file mode 100644
index 0000000..8a85fad
--- /dev/null
+++ b/src/ui/ChunkLoader2D.js
@@ -0,0 +1,201 @@
+/*
+ * Fetching and storing of 2D chunks
+ *
+ * @flow
+ */
+
+import ChunkRGB from './ChunkRGB';
+import { TILE_SIZE } from '../core/constants';
+import {
+  loadingTiles,
+  loadImage,
+} from './loadImage';
+import {
+  requestBigChunk,
+  receiveBigChunk,
+  receiveBigChunkFailure,
+} from '../actions';
+import {
+  getCellInsideChunk,
+  getChunkOfPixel,
+} from '../core/utils';
+
+class ChunkLoader {
+  store = null;
+  canvasId: number;
+  canvasMaxTiledZoom: number;
+  palette;
+  chunks: Map<string, ChunkRGB>;
+
+  constructor(store) {
+    this.store = store;
+    const state = store.getState();
+    const {
+      canvasId,
+      canvasMaxTiledZoom,
+      palette,
+    } = state.canvas;
+    this.canvasId = canvasId;
+    this.canvasMaxTiledZoom = canvasMaxTiledZoom;
+    this.palette = palette;
+    this.chunks = new Map();
+  }
+
+  getAllChunks() {
+    return this.chunks;
+  }
+
+  getPixelUpdate(
+    cx: number,
+    cy: number,
+    offset: number,
+    color: number,
+  ) {
+    const chunk = this.chunks.get(`${this.canvasMaxTiledZoom}:${cx}:${cy}`);
+    if (chunk) {
+      const ix = offset % TILE_SIZE;
+      const iy = Math.floor(offset / TILE_SIZE);
+      chunk.setColor([ix, iy], color);
+    }
+  }
+
+  getColorIndexOfPixel(
+    x: number,
+    y: number,
+  ) {
+    const state: State = this.store.getState();
+    const { canvasSize } = state.canvas;
+    const [cx, cy] = getChunkOfPixel(canvasSize, x, y);
+    const key = `${this.canvasMaxTiledZoom}:${cx}:${cy}`;
+    const chunk = this.chunks.get(key);
+    if (!chunk) {
+      return 0;
+    }
+    return chunk.getColorIndex(
+      getCellInsideChunk([x, y]),
+    );
+  }
+
+  getChunk(zoom, cx: number, cy: number, fetch: boolean) {
+    const chunkKey = `${zoom}:${cx}:${cy}`;
+    const chunk = this.chunks.get(chunkKey);
+    const { canvasId } = this;
+    if (chunk) {
+      if (chunk.ready) {
+        return chunk.image;
+      }
+      return loadingTiles.getTile(canvasId);
+    } if (fetch) {
+      // fetch chunk
+      const chunkRGB = new ChunkRGB(this.palette, chunkKey);
+      this.chunks.set(chunkKey, chunkRGB);
+
+      if (this.canvasMaxTiledZoom === zoom) {
+        this.fetchBaseChunk(zoom, cx, cy, chunkRGB);
+      } else {
+        this.fetchTile(zoom, cx, cy, chunkRGB);
+      }
+    }
+    return loadingTiles.getTile(canvasId);
+  }
+
+  getHistoricalChunk(cx, cy, fetch, historicalDate, historicalTime = null) {
+    let chunkKey = (historicalTime)
+      ? `${historicalDate}${historicalTime}`
+      : historicalDate;
+    chunkKey += `:${cx}:${cy}`;
+    const chunk = this.chunks.get(chunkKey);
+    const { canvasId } = this;
+    if (chunk) {
+      if (chunk.ready) {
+        return chunk.image;
+      }
+      return (historicalTime) ? null : loadingTiles.getTile(canvasId);
+    } if (fetch) {
+      // fetch tile
+      const chunkRGB = new ChunkRGB(this.palette, chunkKey);
+      this.chunks.set(chunkKey, chunkRGB);
+      this.fetchHistoricalChunk(
+        cx,
+        cy,
+        historicalDate,
+        historicalTime,
+        chunkRGB,
+      );
+    }
+    return (historicalTime) ? null : loadingTiles.getTile(canvasId);
+  }
+
+  async fetchHistoricalChunk(
+    cx: number,
+    cy: number,
+    historicalDate: string,
+    historicalTime: string,
+    chunkRGB,
+  ) {
+    const { canvasId } = this;
+    const { key } = chunkRGB;
+    let url = `${window.backupurl}/${historicalDate}/`;
+    if (historicalTime) {
+      // incremential tiles
+      url += `${canvasId}/${historicalTime}/${cx}/${cy}.png`;
+    } else {
+      // full tiles
+      url += `${canvasId}/tiles/${cx}/${cy}.png`;
+    }
+    this.store.dispatch(requestBigChunk(key));
+    try {
+      const img = await loadImage(url);
+      chunkRGB.fromImage(img);
+      this.store.dispatch(receiveBigChunk(key));
+    } catch (error) {
+      this.store.dispatch(receiveBigChunkFailure(key, error));
+      if (historicalTime) {
+        chunkRGB.empty(true);
+      } else {
+        chunkRGB.empty();
+      }
+    }
+  }
+
+  async fetchBaseChunk(zoom, cx: number, cy: number, chunkRGB) {
+    const center = [zoom, cx, cy];
+    this.store.dispatch(requestBigChunk(center));
+    chunkRGB.isBasechunk = true;
+    try {
+      const url = `/chunks/${this.canvasId}/${cx}/${cy}.bmp`;
+      const response = await fetch(url);
+      if (response.ok) {
+        const arrayBuffer = await response.arrayBuffer();
+        if (arrayBuffer.byteLength) {
+          const chunkArray = new Uint8Array(arrayBuffer);
+          chunkRGB.fromBuffer(chunkArray);
+        } else {
+          throw new Error('Chunk response was invalid');
+        }
+        this.store.dispatch(receiveBigChunk(center));
+      } else {
+        throw new Error('Network response was not ok.');
+      }
+    } catch (error) {
+      chunkRGB.empty();
+      this.store.dispatch(receiveBigChunkFailure(center, error));
+    }
+  }
+
+  async fetchTile(zoom, cx: number, cy: number, chunkRGB) {
+    const center = [zoom, cx, cy];
+    this.store.dispatch(requestBigChunk(center));
+    try {
+      const url = `/tiles/${this.canvasId}/${zoom}/${cx}/${cy}.png`;
+      const img = await loadImage(url);
+      chunkRGB.fromImage(img);
+      this.store.dispatch(receiveBigChunk(center));
+    } catch (error) {
+      this.store.dispatch(receiveBigChunkFailure(center, error));
+      chunkRGB.empty();
+    }
+  }
+}
+
+export default ChunkLoader;
diff --git a/src/ui/ChunkRGB.js b/src/ui/ChunkRGB.js
index 8d3c137..852fa4f 100644
--- a/src/ui/ChunkRGB.js
+++ b/src/ui/ChunkRGB.js
@@ -7,7 +7,6 @@ import { TILE_SIZE } from '../core/constants';
 
 
 class ChunkRGB {
-  cell: Cell;
   key: string;
   image: HTMLCanvasElement;
   ready: boolean;
@@ -15,7 +14,7 @@ class ChunkRGB {
   palette: Palette;
   isBasechunk: boolean;
 
-  constructor(palette: Palette, cell: Cell) {
+  constructor(palette: Palette, key) {
     // isBasechunk gets set to true by RECEIVE_BIG_CHUNK
     // if true => chunk got requested from api/chunk and
     //            receives websocket pixel updates
@@ -25,10 +24,8 @@ class ChunkRGB {
     this.image = document.createElement('canvas');
     this.image.width = TILE_SIZE;
     this.image.height = TILE_SIZE;
-    this.cell = cell;
-    this.key = ChunkRGB.getKey(...cell);
+    this.key = key;
     this.ready = false;
-    this.isEmpty = false;
     this.timestamp = Date.now();
   }
 
@@ -89,21 +86,15 @@ class ChunkRGB {
     ctx.drawImage(img, 0, 0);
   }
 
-  empty() {
+  empty(transparent: boolean = false) {
     this.ready = true;
-    this.isEmpty = true;
-    const { image, palette } = this;
-    const ctx = image.getContext('2d');
-    // eslint-disable-next-line prefer-destructuring
-    ctx.fillStyle = palette.colors[0];
-    ctx.fillRect(0, 0, TILE_SIZE, TILE_SIZE);
-  }
-
-  static getKey(z: number, x: number, y: number) {
-    // this is also hardcoded into core/utils.js at getColorIndexOfPixel
-    // just to prevent whole ChunkRGB to get loaded into web.js
-    // ...could test that at some point if really neccessary
-    return `${z}:${x}:${y}`;
+    if (!transparent) {
+      const { image, palette } = this;
+      const ctx = image.getContext('2d');
+      // eslint-disable-next-line prefer-destructuring
+      ctx.fillStyle = palette.colors[0];
+      ctx.fillRect(0, 0, TILE_SIZE, TILE_SIZE);
+    }
   }
 
   static getIndexFromCell([x, y]: Cell): number {
diff --git a/src/ui/PixelNotify.js b/src/ui/PixelNotify.js
index 7cba68b..c13f8f8 100644
--- a/src/ui/PixelNotify.js
+++ b/src/ui/PixelNotify.js
@@ -47,7 +47,7 @@ class PixelNotify {
 
 
   doRender() {
-    return (this.pixelList.length != 0);
+    return (this.pixelList.length !== 0);
   }
 
 
@@ -75,13 +75,18 @@ class PixelNotify {
         continue;
       }
       const [sx, sy] = worldToScreen(state, $viewport, [x, y])
-        .map((x) => x + this.scale / 2);
+        .map((z) => z + this.scale / 2);
 
+      // eslint-disable-next-line max-len
       const notRadius = timePasseded / PixelNotify.NOTIFICATION_TIME * this.notificationRadius;
       const circleScale = notRadius / 100;
       viewportCtx.save();
       viewportCtx.scale(circleScale, circleScale);
-      viewportCtx.drawImage(this.notifcircle, sx / circleScale - 100, sy / circleScale - 100);
+      viewportCtx.drawImage(
+        this.notifcircle,
+        sx / circleScale - 100,
+        sy / circleScale - 100,
+      );
       viewportCtx.restore();
     }
   }
diff --git a/src/ui/Renderer.js b/src/ui/Renderer2D.js
similarity index 79%
rename from src/ui/Renderer.js
rename to src/ui/Renderer2D.js
index 459c6df..9365975 100644
--- a/src/ui/Renderer.js
+++ b/src/ui/Renderer2D.js
@@ -1,4 +1,5 @@
 /*
+ * Renders 2D canvases
  *
  * @flow
  */
@@ -11,21 +12,19 @@ import {
   getTileOfPixel,
   getPixelFromChunkOffset,
 } from '../core/utils';
-import {
-  fetchChunk,
-  fetchTile,
-  fetchHistoricalChunk,
-} from '../actions';
 
 import {
   renderGrid,
   renderPlaceholder,
   renderPotatoPlaceholder,
-} from './renderelements';
-import ChunkRGB from './ChunkRGB';
-import { loadingTiles } from './loadImage';
+} from './render2Delements';
+import {
+  initControls,
+  removeControls,
+} from '../controls/PixelPainterControls';
 
 
+import ChunkLoader from './ChunkLoader2D';
 import pixelNotify from './PixelNotify';
 
 // dimensions of offscreen canvas NOT whole canvas
@@ -38,6 +37,11 @@ const SCALE_THREASHOLD = Math.min(
 
 
 class Renderer {
+  is3D: false;
+  //
+  canvasId: number = null;
+  chunkLoader: Object = null;
+  //--
   centerChunk: Cell;
   tiledScale: number;
   tiledZoom: number;
@@ -53,7 +57,7 @@ class Renderer {
   //--
   oldHistoricalTime: string;
 
-  constructor() {
+  constructor(store) {
     this.centerChunk = [null, null];
     this.tiledScale = 0;
     this.tiledZoom = 4;
@@ -64,20 +68,44 @@ class Renderer {
     this.lastFetch = 0;
     this.oldHistoricalTime = null;
     //--
+    const viewport = document.createElement('canvas');
+    viewport.width = window.innerWidth;
+    viewport.height = window.innerHeight;
+    this.viewport = viewport;
+    document.body.appendChild(this.viewport);
+    //--
+    this.resizeHandle = this.resizeHandle.bind(this);
+    window.addEventListener('resize', this.resizeHandle);
+    //--
     this.canvas = document.createElement('canvas');
     this.canvas.width = CANVAS_WIDTH;
     this.canvas.height = CANVAS_HEIGHT;
 
     const context = this.canvas.getContext('2d');
-    if (!context) return;
-
     context.fillStyle = '#000000';
     context.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+    //--
+    this.setStore(store);
+  }
+
+  destructor() {
+    removeControls(this.viewport);
+    window.removeEventListener('resize', this.resizeHandle);
+    this.viewport.remove();
+  }
+
+  getAllChunks() {
+    return this.chunkLoader.getAllChunks();
+  }
+
+  resizeHandle() {
+    this.viewport.width = window.innerWidth;
+    this.viewport.height = window.innerHeight;
+    this.forceNextRender = true;
   }
 
   // HAS to be set before any rendering can happen
-  setViewport(viewport: HTMLCanvasElement, store) {
-    this.viewport = viewport;
+  setStore(store) {
     this.store = store;
     const state = store.getState();
     const {
@@ -87,8 +115,8 @@ class Renderer {
       canvasSize,
     } = state.canvas;
     this.updateCanvasData(state);
+    initControls(this, this.viewport, store);
     this.updateScale(viewscale, canvasMaxTiledZoom, view, canvasSize);
-    this.forceNextRender = true;
   }
 
   updateCanvasData(state: State) {
@@ -97,7 +125,14 @@ class Renderer {
       viewscale,
       view,
       canvasSize,
+      canvasId,
     } = state.canvas;
+    if (canvasId !== this.canvasId) {
+      this.canvasId = canvasId;
+      if (canvasId !== null) {
+        this.chunkLoader = new ChunkLoader(this.store);
+      }
+    }
     this.updateScale(viewscale, canvasMaxTiledZoom, view, canvasSize);
   }
 
@@ -109,6 +144,10 @@ class Renderer {
     }
   }
 
+  getColorIndexOfPixel(cx, cy) {
+    return this.chunkLoader.getColorIndexOfPixel(cx, cy);
+  }
+
   updateScale(
     viewscale: number,
     canvasMaxTiledZoom: number,
@@ -156,6 +195,7 @@ class Renderer {
       scale,
       isHistoricalView,
     } = state.canvas;
+    this.chunkLoader.getPixelUpdate(i, j, offset, color);
 
     if (scale < 0.8 || isHistoricalView) return;
     const scaleM = (scale > SCALE_THREASHOLD) ? 1 : scale;
@@ -216,10 +256,7 @@ class Renderer {
     } = this;
     const {
       viewscale: scale,
-      canvasId,
       canvasSize,
-      canvasMaxTiledZoom,
-      chunks,
     } = state.canvas;
 
     let { relScale } = this;
@@ -264,8 +301,7 @@ class Renderer {
     const [xc, yc] = chunkPosition; // center chunk
     // CLEAN margin
     // draw new chunks. If not existing, just clear.
-    let chunk: ChunkRGB;
-    let key: string;
+    let chunk;
     for (let dx = -CHUNK_RENDER_RADIUS_X; dx <= CHUNK_RENDER_RADIUS_X; dx += 1) {
       for (let dy = -CHUNK_RENDER_RADIUS_Y; dy <= CHUNK_RENDER_RADIUS_Y; dy += 1) {
         const cx = xc + dx;
@@ -278,32 +314,11 @@ class Renderer {
           // if out of bounds
           context.fillRect(x, y, TILE_SIZE, TILE_SIZE);
         } else {
-          key = ChunkRGB.getKey(tiledZoom, cx, cy);
-          chunk = chunks.get(key);
+          chunk = this.chunkLoader.getChunk(tiledZoom, cx, cy, fetch);
           if (chunk) {
-            // render new chunk
-            if (chunk.ready) {
-              context.drawImage(chunk.image, x, y);
-              if (fetch) chunk.timestamp = curTime;
-            } else if (loadingTiles.hasTiles) {
-              context.drawImage(loadingTiles.getTile(canvasId), x, y);
-            } else {
-              context.fillRect(x, y, TILE_SIZE, TILE_SIZE);
-            }
+            context.drawImage(chunk, x, y);
           } else {
-            // we don't have that chunk
-            if (fetch) {
-              if (tiledZoom === canvasMaxTiledZoom) {
-                this.store.dispatch(fetchChunk(canvasId, [tiledZoom, cx, cy]));
-              } else {
-                this.store.dispatch(fetchTile(canvasId, [tiledZoom, cx, cy]));
-              }
-            }
-            if (loadingTiles.hasTiles) {
-              context.drawImage(loadingTiles.getTile(canvasId), x, y);
-            } else {
-              context.fillRect(x, y, TILE_SIZE, TILE_SIZE);
-            }
+            context.fillRect(x, y, TILE_SIZE, TILE_SIZE);
           }
         }
       }
@@ -313,10 +328,15 @@ class Renderer {
 
 
   render() {
+    if (!this.chunkLoader) {
+      return;
+    }
     const state: State = this.store.getState();
-    return (state.canvas.isHistoricalView)
-      ? this.renderHistorical(state)
-      : this.renderMain(state);
+    if (state.canvas.isHistoricalView) {
+      this.renderHistorical(state);
+    } else {
+      this.renderMain(state);
+    }
   }
 
 
@@ -342,19 +362,29 @@ class Renderer {
       view,
       viewscale,
       canvasSize,
-      canvasId,
     } = state.canvas;
 
-    if (!view || canvasId === null) return;
-
     const [x, y] = view;
     const [cx, cy] = this.centerChunk;
 
     // if we have to render pixelnotify
     const doRenderPixelnotify = (viewscale >= 0.5 && showPixelNotify && pixelNotify.doRender());
     // if we have to render placeholder
-    const doRenderPlaceholder = (viewscale >= 3 && placeAllowed && (hover || this.hover) && !isPotato);
-    const doRenderPotatoPlaceholder = (viewscale >= 3 && placeAllowed && (hover !== this.hover || this.forceNextRender || this.forceNextSubrender || doRenderPixelnotify) && isPotato);
+    const doRenderPlaceholder = (
+      viewscale >= 3
+      && placeAllowed
+      && (hover || this.hover)
+      && !isPotato
+    );
+    const doRenderPotatoPlaceholder = (
+      viewscale >= 3
+      && placeAllowed
+      && (hover !== this.hover
+        || this.forceNextRender
+        || this.forceNextSubrender
+        || doRenderPixelnotify
+      ) && isPotato
+    );
     //--
     // if we have nothing to render, return
     // note: this.hover is used to, to render without the placeholder one last time when cursor leaves window
@@ -425,9 +455,7 @@ class Renderer {
     } = this;
     const {
       viewscale,
-      canvasId,
       canvasSize,
-      chunks,
       historicalDate,
       historicalTime,
     } = state.canvas;
@@ -479,8 +507,7 @@ class Renderer {
     const [xc, yc] = chunkPosition; // center chunk
     // CLEAN margin
     // draw  chunks. If not existing, just clear.
-    let chunk: ChunkRGB;
-    let key: string;
+    let chunk;
     for (let dx = -CHUNK_RENDER_RADIUS_X; dx <= CHUNK_RENDER_RADIUS_X; dx += 1) {
       for (let dy = -CHUNK_RENDER_RADIUS_Y; dy <= CHUNK_RENDER_RADIUS_Y; dy += 1) {
         const cx = xc + dx;
@@ -494,55 +521,21 @@ class Renderer {
           context.fillRect(x, y, TILE_SIZE, TILE_SIZE);
         } else {
           // full chunks
-          key = ChunkRGB.getKey(historicalDate, cx, cy);
-          chunk = chunks.get(key);
+          chunk = this.chunkLoader.getHistoricalChunk(cx, cy, fetch, historicalDate);
           if (chunk) {
-            // render new chunk
-            if (chunk.ready) {
-              context.drawImage(chunk.image, x, y);
-              if (fetch) chunk.timestamp = curTime;
-            } else if (loadingTiles.hasTiles) {
-              context.drawImage(loadingTiles.getTile(canvasId), x, y);
-            } else {
-              context.fillRect(x, y, TILE_SIZE, TILE_SIZE);
-            }
+            context.drawImage(chunk, x, y);
           } else {
-            // we don't have that chunk
-            if (fetch) {
-              this.store.dispatch(fetchHistoricalChunk(canvasId, [cx, cy], historicalDate, null));
-            }
-            if (loadingTiles.hasTiles) {
-              context.drawImage(loadingTiles.getTile(canvasId), x, y);
-            } else {
-              context.fillRect(x, y, TILE_SIZE, TILE_SIZE);
-            }
+            context.fillRect(x, y, TILE_SIZE, TILE_SIZE);
           }
           // incremential chunks
           if (historicalTime === '0000') continue;
-          key = ChunkRGB.getKey(`${historicalDate}${historicalTime}`, cx, cy);
-          chunk = chunks.get(key);
+          chunk = this.chunkLoader.getHistoricalChunk(cx, cy, fetch, historicalDate, historicalTime);
           if (chunk) {
-            // render new chunk
-            if (!chunk.ready && oldHistoricalTime) {
-              // redraw previous incremential chunk if new one is not there yet
-              key = ChunkRGB.getKey(`${historicalDate}${oldHistoricalTime}`, cx, cy);
-              chunk = chunks.get(key);
-            }
-            if (chunk && chunk.ready && !chunk.isEmpty) {
-              context.drawImage(chunk.image, x, y);
-              if (fetch) chunk.timestamp = curTime;
-            }
-          } else {
-            if (fetch) {
-              // we don't have that chunk
-              this.store.dispatch(fetchHistoricalChunk(canvasId, [cx, cy], historicalDate, historicalTime));
-            }
-            if (oldHistoricalTime) {
-              key = ChunkRGB.getKey(`${historicalDate}${oldHistoricalTime}`, cx, cy);
-              chunk = chunks.get(key);
-              if (chunk && chunk.ready && !chunk.isEmpty) {
-                context.drawImage(chunk.image, x, y);
-              }
+            context.drawImage(chunk, x, y);
+          } else if (oldHistoricalTime) {
+            chunk = this.chunkLoader.getHistoricalChunk(cx, cy, false, historicalDate, oldHistoricalTime);
+            if (chunk) {
+              context.drawImage(chunk, x, y);
             }
           }
         }
@@ -612,5 +605,4 @@ class Renderer {
 }
 
 
-const renderer = new Renderer();
-export default renderer;
+export default Renderer;
diff --git a/src/ui/Renderer3D.js b/src/ui/Renderer3D.js
new file mode 100644
index 0000000..7591000
--- /dev/null
+++ b/src/ui/Renderer3D.js
@@ -0,0 +1,279 @@
+/*
+ * 3D Renderer for VoxelCanvas
+ *
+ * @flow
+ */
+
+import * as THREE from 'three';
+
+import VoxelPainterControls from '../controls/VoxelPainterControls';
+import {
+  setHover,
+} from '../actions';
+
+
+class Renderer {
+  is3D = true;
+  //--
+  store;
+  //--
+  scene: Object;
+  camera: Object;
+  rollOverMesh: Object;
+  voxel: Object;
+  voxelMaterials: Array<Object>;
+  objects: Array<Object>;
+  plane: Object;
+  //--
+  controls: Object;
+  threeRenderer: Object;
+  //--
+  mouse;
+  raycaster;
+  pressTime: number;
+
+  constructor(store) {
+    this.store = store;
+    const state = store.getState();
+    this.objects = [];
+
+    // camera
+    const camera = new THREE.PerspectiveCamera(
+      45,
+      window.innerWidth / window.innerHeight,
+      1,
+      2000,
+    );
+    camera.position.set(100, 160, 260);
+    camera.lookAt(0, 0, 0);
+    this.camera = camera;
+
+    // scene
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0xf0f0f0);
+    this.scene = scene;
+
+    // hover helper
+    const rollOverGeo = new THREE.BoxBufferGeometry(10, 10, 10);
+    const rollOverMaterial = new THREE.MeshBasicMaterial({
+      color: 0xff0000,
+      opacity: 0.5,
+      transparent: true,
+    });
+    this.rollOverMesh = new THREE.Mesh(rollOverGeo, rollOverMaterial);
+    scene.add(this.rollOverMesh);
+
+    // cubes
+    this.voxel = new THREE.BoxBufferGeometry(10, 10, 10);
+    this.initCubeMaterials(state);
+
+    // grid
+    const gridHelper = new THREE.GridHelper(1000, 100, 0x555555, 0x555555);
+    scene.add(gridHelper);
+
+    //
+    this.raycaster = new THREE.Raycaster();
+    this.mouse = new THREE.Vector2();
+
+    // Plane Floor
+    const geometry = new THREE.PlaneBufferGeometry(5000, 5000);
+    geometry.rotateX(-Math.PI / 2);
+    const plane = new THREE.Mesh(
+      geometry,
+      new THREE.MeshLambertMaterial({ color: 0xcae3ff }),
+    );
+    scene.add(plane);
+    this.plane = plane;
+    this.objects.push(plane);
+
+    // lights
+    const ambientLight = new THREE.AmbientLight(0x606060);
+    scene.add(ambientLight);
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff);
+    directionalLight.position.set(1, 0.75, 0.5).normalize();
+    scene.add(directionalLight);
+
+    // renderer
+    const threeRenderer = new THREE.WebGLRenderer({ antialias: true });
+    threeRenderer.setPixelRatio(window.devicePixelRatio);
+    threeRenderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(threeRenderer.domElement);
+    this.threeRenderer = threeRenderer;
+
+    // controls
+    const controls = new VoxelPainterControls(camera, threeRenderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.75;
+    controls.maxPolarAngle = Math.PI / 2;
+    controls.minDistance = 100.00;
+    controls.maxDistance = 1000.00;
+    this.controls = controls;
+
+    const { domElement } = threeRenderer;
+
+    this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);
+    this.onDocumentMouseDown = this.onDocumentMouseDown.bind(this);
+    this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);
+    this.onWindowResize = this.onWindowResize.bind(this);
+    domElement.addEventListener('mousemove', this.onDocumentMouseMove, false);
+    domElement.addEventListener('mousedown', this.onDocumentMouseDown, false);
+    domElement.addEventListener('mouseup', this.onDocumentMouseUp, false);
+    window.addEventListener('resize', this.onWindowResize, false);
+  }
+
+  destructor() {
+    window.addEventListener('resize', this.onWindowResize, false);
+    this.threeRenderer.dispose();
+    const { domElement } = this.threeRenderer;
+    this.threeRenderer = null;
+    domElement.remove();
+  }
+
+  static getAllChunks() {
+    return null;
+  }
+
+  initCubeMaterials(state) {
+    const { palette } = state.canvas;
+    const { colors } = palette;
+    const cubeMaterials = [];
+    for (let index = 0; index < colors.length; index++) {
+      const material = new THREE.MeshLambertMaterial({
+        color: colors[index],
+      });
+      cubeMaterials.push(material);
+    }
+    this.voxelMaterials = cubeMaterials;
+  }
+
+  render() {
+    if (!this.threeRenderer) {
+      return;
+    }
+    this.controls.update();
+    this.threeRenderer.render(this.scene, this.camera);
+  }
+
+  onWindowResize() {
+    this.camera.aspect = window.innerWidth / window.innerHeight;
+    this.camera.updateProjectionMatrix();
+    this.threeRenderer.setSize(window.innerWidth, window.innerHeight);
+  }
+
+  onDocumentMouseMove(event) {
+    event.preventDefault();
+    const {
+      clientX,
+      clientY,
+    } = event;
+    const {
+      innerWidth,
+      innerHeight,
+    } = window;
+    const {
+      camera,
+      objects,
+      raycaster,
+      mouse,
+      rollOverMesh,
+    } = this;
+
+    mouse.set(
+      (clientX / innerWidth) * 2 - 1,
+      -(clientY / innerHeight) * 2 + 1,
+    );
+
+    raycaster.setFromCamera(mouse, camera);
+    const intersects = raycaster.intersectObjects(objects);
+    if (intersects.length > 0) {
+      const intersect = intersects[0];
+      rollOverMesh.position
+        .copy(intersect.point)
+        .add(intersect.face.normal);
+      rollOverMesh.position
+        .divideScalar(10)
+        .floor()
+        .multiplyScalar(10)
+        .addScalar(5);
+    }
+    const hover = rollOverMesh.position
+      .toArray()
+      .map((u) => Math.floor(u / 10));
+    this.store.dispatch(setHover(hover));
+  }
+
+  onDocumentMouseDown() {
+    this.pressTime = Date.now();
+  }
+
+  onDocumentMouseUp(event) {
+    if (Date.now() - this.pressTime > 600) {
+      return;
+    }
+    event.preventDefault();
+    const {
+      clientX,
+      clientY,
+    } = event;
+    const {
+      innerWidth,
+      innerHeight,
+    } = window;
+    const {
+      camera,
+      objects,
+      raycaster,
+      mouse,
+      plane,
+      voxel,
+      voxelMaterials,
+      store,
+      scene,
+    } = this;
+
+    mouse.set(
+      (clientX / innerWidth) * 2 - 1,
+      -(clientY / innerHeight) * 2 + 1,
+    );
+
+    raycaster.setFromCamera(mouse, camera);
+
+    const intersects = raycaster.intersectObjects(objects);
+    if (intersects.length > 0) {
+      const intersect = intersects[0];
+
+      switch (event.button) {
+        case 0: {
+          // left mouse button
+          const state = store.getState();
+          const { selectedColor } = state.gui;
+          const newVoxel = new THREE.Mesh(
+            voxel,
+            voxelMaterials[selectedColor],
+          );
+          newVoxel.position.copy(intersect.point)
+            .add(intersect.face.normal);
+          newVoxel.position.divideScalar(10)
+            .floor()
+            .multiplyScalar(10)
+            .addScalar(5);
+          scene.add(newVoxel);
+          objects.push(newVoxel);
+        }
+          break;
+        case 2:
+          // right mouse button
+          if (intersect.object !== plane) {
+            scene.remove(intersect.object);
+            objects.splice(objects.indexOf(intersect.object), 1);
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  }
+}
+
+export default Renderer;
diff --git a/src/ui/ads.js b/src/ui/ads.js
index 804c683..1870e9a 100644
--- a/src/ui/ads.js
+++ b/src/ui/ads.js
@@ -23,6 +23,7 @@ adTagParams.set('videoad_start_delay', 0);
 adTagParams.set('description_url', 'http://pixelplanet.fun/');
 adTagParams.set('max_ad_duration', 20000);
 if (__DEV__) adTagParams.set('adtest', 'on');
+// eslint-disable-next-line max-len
 const adTagUrl = `https://googleads.g.doubleclick.net/pagead/ads?${adTagParams.toString()}`;
 
 /**
@@ -84,7 +85,7 @@ function init() {
   if (typeof google === 'undefined') return;
   outstreamContainer = document.getElementById('outstreamContainer');
 
-  adsController = new google.outstream.AdsController(
+  adsController = new window.google.outstream.AdsController(
     outstreamContainer,
     onAdLoaded,
     onDone,
diff --git a/src/ui/keypress.js b/src/ui/keypress.js
deleted file mode 100644
index 93e558f..0000000
--- a/src/ui/keypress.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * keypress actions
- * @flow
- */
-import keycode from 'keycode';
-
-import store from './store';
-import {
-  toggleGrid,
-  togglePixelNotify,
-  toggleMute,
-  moveNorth,
-  moveWest,
-  moveSouth,
-  moveEast,
-  zoomIn,
-  zoomOut,
-  onViewFinishChange,
-} from '../actions';
-
-
-function onKeyPress(event: KeyboardEvent) {
-  // ignore key presses if modal is open or chat is used
-  if (event.target.nodeName == 'INPUT' || event.target.nodeName == 'TEXTAREA') return;
-
-  switch (keycode(event)) {
-    case 'up':
-    case 'w':
-      store.dispatch(moveNorth());
-      break;
-    case 'left':
-    case 'a':
-      store.dispatch(moveWest());
-      break;
-    case 'down':
-    case 's':
-      store.dispatch(moveSouth());
-      break;
-    case 'right':
-    case 'd':
-      store.dispatch(moveEast());
-      break;
-    case 'g':
-      store.dispatch(toggleGrid());
-      return;
-    case 'c':
-      store.dispatch(togglePixelNotify());
-      return;
-    case 'space':
-      if ($viewport) $viewport.click();
-      return;
-    case 'm':
-      store.dispatch(toggleMute());
-      return;
-    case '+':
-    case 'e':
-      store.dispatch(zoomIn());
-      return;
-    case '-':
-    case 'q':
-      store.dispatch(zoomOut());
-      return;
-    default:
-      return;
-  }
-  store.dispatch(onViewFinishChange());
-}
-
-export default onKeyPress;
diff --git a/src/ui/loadImage.js b/src/ui/loadImage.js
index 00f82f2..2b0df1b 100644
--- a/src/ui/loadImage.js
+++ b/src/ui/loadImage.js
@@ -21,10 +21,8 @@ export function loadImage(url) {
  */
 class LoadingTiles {
   tiles: Object;
-  hasTiles: boolean;
 
   constructor() {
-    this.hasTiles = false;
     this.tiles = {};
     this.loadLoadingTile(0);
   }
@@ -33,7 +31,7 @@ class LoadingTiles {
     if (typeof this.tiles[canvasId] === 'undefined') {
       this.loadLoadingTile(canvasId);
     }
-    return this.tiles[canvasId] || this.tiles[0];
+    return this.tiles[canvasId] || this.tiles[0] || null;
   }
 
   async loadLoadingTile(canvasId: number) {
@@ -43,11 +41,7 @@ class LoadingTiles {
     this.tiles[canvasId] = null;
     const img = await loadImage(`./loading${canvasId}.png`);
     this.tiles[canvasId] = img;
-    if (canvasId === 0) {
-      this.hasTiles = true;
-    }
   }
 }
 
-
 export const loadingTiles = new LoadingTiles();
diff --git a/src/ui/renderelements.js b/src/ui/render2Delements.js
similarity index 91%
rename from src/ui/renderelements.js
rename to src/ui/render2Delements.js
index 3dee6af..630b95d 100644
--- a/src/ui/renderelements.js
+++ b/src/ui/render2Delements.js
@@ -20,8 +20,7 @@ export function renderPlaceholder(
   const { selectedColor, hover } = state.gui;
   const { palette } = state.canvas;
 
-  const worldPos = screenToWorld(state, $viewport, hover);
-  const [sx, sy] = worldToScreen(state, $viewport, worldPos);
+  const [sx, sy] = worldToScreen(state, $viewport, hover);
 
   viewportCtx.save();
   viewportCtx.translate(sx + (scale / 2), sy + (scale / 2));
@@ -55,8 +54,7 @@ export function renderPotatoPlaceholder(
   const { selectedColor, hover } = state.gui;
   const { palette } = state.canvas;
 
-  const worldPos = screenToWorld(state, $viewport, hover);
-  const [sx, sy] = worldToScreen(state, $viewport, worldPos);
+  const [sx, sy] = worldToScreen(state, $viewport, hover);
 
   viewportCtx.save();
   viewportCtx.fillStyle = '#000';
diff --git a/src/ui/renderer.js b/src/ui/renderer.js
new file mode 100644
index 0000000..fcb6c5e
--- /dev/null
+++ b/src/ui/renderer.js
@@ -0,0 +1,39 @@
+/*
+ * Manage renderers and switch between them
+ * A renderer will create it's own viewport and append it
+ * to document.body.
+ *
+ * @flow
+ */
+
+import Renderer2D from './Renderer2D';
+
+let renderer = {
+  render: () => null,
+  destructor: () => null,
+  renderPixel: () => null,
+  updateCanvasData: () => null,
+};
+
+function animationLoop() {
+  renderer.render();
+  window.requestAnimationFrame(animationLoop);
+}
+animationLoop();
+
+export async function initRenderer(store, is3D: boolean) {
+  renderer.destructor();
+  if (is3D) {
+    /* eslint-disable-next-line max-len */
+    const module = await import(/* webpackChunkName: "voxel" */ '../ui/Renderer3D');
+    const Renderer3D = module.default;
+    renderer = new Renderer3D(store);
+  } else {
+    renderer = new Renderer2D(store);
+  }
+  return renderer;
+}
+
+export function getRenderer() {
+  return renderer;
+}
diff --git a/src/voxel.js b/src/voxel.js
deleted file mode 100644
index 6dc4d3f..0000000
--- a/src/voxel.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import * as THREE from 'three';
-import { VoxelPainterControls } from './controls/VoxelPainterControls';
-// import { OrbitControls } from './controls/OrbitControls';
-import store from './ui/store';
-
-var camera, scene, renderer;
-var plane;
-var mouse, raycaster;
-
-var rollOverMesh, rollOverMaterial;
-var cubeGeo, cubeMaterial;
-
-var controls;
-
-var objects = [];
-
-function init() {
-  // quit 2d rendering
-  const canvas = document.getElementById('gameWindow').remove();
-
-  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
-  camera.position.set( 100, 160, 260 );
-  camera.lookAt( 0, 0, 0 );
-
-  scene = new THREE.Scene();
-  scene.background = new THREE.Color( 0xf0f0f0 );
-
-  // roll-over helpers
-
-  var rollOverGeo = new THREE.BoxBufferGeometry( 10, 10, 10 );
-  rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
-  rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
-  scene.add( rollOverMesh );
-
-  // cubes
-  cubeGeo = new THREE.BoxBufferGeometry( 10, 10, 10 );
-  cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c } );
-
-  // grid
-  var gridHelper = new THREE.GridHelper( 1000, 100, 0x555555, 0x555555  );
-  scene.add( gridHelper );
-
-  //
-  raycaster = new THREE.Raycaster();
-  mouse = new THREE.Vector2();
-
-
-  // Floor with random cold color triangles
-  var floorGeometry = new THREE.PlaneBufferGeometry( 1000, 1000, 100, 100 );
-  floorGeometry.rotateX( - Math.PI / 2 );
-  // vertex displacement
-  var vertex = new THREE.Vector3();
-  var color = new THREE.Color();
-  var position = floorGeometry.attributes.position;
-  for ( var i = 0, l = position.count; i < l; i ++ ) {
-    vertex.fromBufferAttribute( position, i );
-    vertex.x += Math.random() * 20 - 10;
-    vertex.y += Math.random() * 2;
-    vertex.z += Math.random() * 20 - 10;
-    position.setXYZ( i, vertex.x, vertex.y, vertex.z );
-  }
-  floorGeometry = floorGeometry.toNonIndexed(); // ensure each face has unique vertices
-  position = floorGeometry.attributes.position;
-  var colors = [];
-  for ( var i = 0, l = position.count; i < l; i ++ ) {
-    color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
-    colors.push( color.r, color.g, color.b );
-  }
-  floorGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
-  var floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
-  plane = new THREE.Mesh( floorGeometry, floorMaterial );
-  scene.add( plane );
-  objects.push( plane );
-
-  /*
-  // Plane Floor
-  var geometry = new THREE.PlaneBufferGeometry( 5000, 5000 );
-  geometry.rotateX( - Math.PI / 2 );
-  plane = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({ color: 0x009900 }) );
-  scene.add( plane );
-  objects.push( plane );
-  */
-
-
-  // lights
-
-  var ambientLight = new THREE.AmbientLight( 0x606060 );
-  scene.add( ambientLight );
-
-  var directionalLight = new THREE.DirectionalLight( 0xffffff );
-  directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
-  scene.add( directionalLight );
-
-  renderer = new THREE.WebGLRenderer( { antialias: true } );
-  renderer.setPixelRatio( window.devicePixelRatio );
-  renderer.setSize( window.innerWidth, window.innerHeight );
-  document.body.appendChild( renderer.domElement );
-
-  controls = new VoxelPainterControls(camera, renderer.domElement);
-  controls.enableDamping = true;
-  controls.dampingFactor = 0.75;
-  controls.maxPolarAngle = Math.PI / 2;
-  controls.minDistance = 100.00;
-  controls.maxDistance = 1000.00;
-  /*controls.rotateSpeed = 1.5;
-  controls.zoomSpeed = 10.0;
-  controls.panSpeed = 0.3;
-  controls.keys = [65, 83, 68]; // ASD
-  controls.dynamicDampingFactor = 0.2;
-  */
-
-  renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
-  renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
-  renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
-  //document.addEventListener( 'keydown', onDocumentKeyDown, false );
-  //document.addEventListener( 'keyup', onDocumentKeyUp, false );
-  //
-  window.addEventListener( 'resize', onWindowResize, false );
-
-}
-
-init();
-
-window.animationLoop = () => {
-  controls.update();
-  renderer.render( scene, camera );
-  requestAnimationFrame(window.animationLoop);
-}
-
-function onWindowResize() {
-
-  camera.aspect = window.innerWidth / window.innerHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize( window.innerWidth, window.innerHeight );
-
-}
-
-function onDocumentMouseMove( event ) {
-
-  event.preventDefault();
-
-  mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
-
-  raycaster.setFromCamera( mouse, camera );
-
-  var intersects = raycaster.intersectObjects( objects );
-
-  if ( intersects.length > 0 ) {
-
-    var intersect = intersects[ 0 ];
-
-    rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
-    rollOverMesh.position.divideScalar( 10 ).floor().multiplyScalar( 10 ).addScalar( 5 );
-
-  }
-}
-
-var pressTime = 0;
-function onDocumentMouseDown( event ) { 
-  pressTime = Date.now();
-}
-
-function onDocumentMouseUp( event ) {
-  if (Date.now() - pressTime > 600) {
-    return;
-  }
-
-  event.preventDefault();
-  mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
-
-  raycaster.setFromCamera( mouse, camera );
-
-  var intersects = raycaster.intersectObjects( objects );
-
-  if ( intersects.length > 0 ) {
-    var intersect = intersects[ 0 ];
-
-    switch ( event.button ) {
-      case 0:
-        // left mouse button
-        const state = store.getState();
-        const clri = state.gui.selectedColor;
-        const clr = state.canvas.palette.colors[clri];
-        const material = new THREE.MeshLambertMaterial( { color: clr } );
-
-        console.log("set voxel");
-        var voxel = new THREE.Mesh( cubeGeo, material );
-        voxel.position.copy( intersect.point ).add( intersect.face.normal );
-        voxel.position.divideScalar( 10 ).floor().multiplyScalar( 10 ).addScalar( 5 );
-        scene.add( voxel );
-
-        objects.push( voxel );
-        break;
-      case 2:
-        // right mouse button
-        console.log("remove voxel");
-        if ( intersect.object !== plane ) {
-          scene.remove( intersect.object );
-          objects.splice( objects.indexOf( intersect.object ), 1 );
-        }
-        break;
-    }
-  }
-}
diff --git a/src/voxelSA.js b/src/voxelSA.js
deleted file mode 100644
index 8e9e8f3..0000000
--- a/src/voxelSA.js
+++ /dev/null
@@ -1,199 +0,0 @@
-import * as THREE from 'three';
-import { VoxelPainterControls } from './controls/VoxelPainterControls';
-// import { OrbitControls } from './controls/OrbitControls';
-
-var camera, scene, renderer;
-var plane;
-var mouse, raycaster;
-
-var rollOverMesh, rollOverMaterial;
-var cubeGeo, cubeMaterial;
-
-var controls;
-
-var objects = [];
-
-document.addEventListener('DOMContentLoaded', () => {
-  init();
-  render();
-});
-
-function init() {
-
-  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
-  camera.position.set( 100, 160, 260 );
-  camera.lookAt( 0, 0, 0 );
-
-  scene = new THREE.Scene();
-  scene.background = new THREE.Color( 0xf0f0f0 );
-
-  // roll-over helpers
-
-  var rollOverGeo = new THREE.BoxBufferGeometry( 10, 10, 10 );
-  rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
-  rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
-  scene.add( rollOverMesh );
-
-  // cubes
-  cubeGeo = new THREE.BoxBufferGeometry( 10, 10, 10 );
-  cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c } );
-
-  // grid
-  var gridHelper = new THREE.GridHelper( 1000, 100, 0x555555, 0x555555  );
-  scene.add( gridHelper );
-
-  //
-  raycaster = new THREE.Raycaster();
-  mouse = new THREE.Vector2();
-
-
-  // Floor with random cold color triangles
-  var floorGeometry = new THREE.PlaneBufferGeometry( 1000, 1000, 100, 100 );
-  floorGeometry.rotateX( - Math.PI / 2 );
-  // vertex displacement
-  var vertex = new THREE.Vector3();
-  var color = new THREE.Color();
-  var position = floorGeometry.attributes.position;
-  for ( var i = 0, l = position.count; i < l; i ++ ) {
-    vertex.fromBufferAttribute( position, i );
-    vertex.x += Math.random() * 20 - 10;
-    vertex.y += Math.random() * 2;
-    vertex.z += Math.random() * 20 - 10;
-    position.setXYZ( i, vertex.x, vertex.y, vertex.z );
-  }
-  floorGeometry = floorGeometry.toNonIndexed(); // ensure each face has unique vertices
-  position = floorGeometry.attributes.position;
-  var colors = [];
-  for ( var i = 0, l = position.count; i < l; i ++ ) {
-    color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
-    colors.push( color.r, color.g, color.b );
-  }
-  floorGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
-  var floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
-  plane = new THREE.Mesh( floorGeometry, floorMaterial );
-  scene.add( plane );
-  objects.push( plane );
-
-  /*
-  // Plane Floor
-  var geometry = new THREE.PlaneBufferGeometry( 5000, 5000 );
-  geometry.rotateX( - Math.PI / 2 );
-  plane = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({ color: 0x009900 }) );
-  scene.add( plane );
-  objects.push( plane );
-  */
-
-
-  // lights
-
-  var ambientLight = new THREE.AmbientLight( 0x606060 );
-  scene.add( ambientLight );
-
-  var directionalLight = new THREE.DirectionalLight( 0xffffff );
-  directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
-  scene.add( directionalLight );
-
-  renderer = new THREE.WebGLRenderer( { antialias: true } );
-  renderer.setPixelRatio( window.devicePixelRatio );
-  renderer.setSize( window.innerWidth, window.innerHeight );
-  document.body.appendChild( renderer.domElement );
-
-  controls = new VoxelPainterControls(camera, renderer.domElement);
-  controls.enableDamping = true;
-  controls.dampingFactor = 0.75;
-  controls.maxPolarAngle = Math.PI / 2;
-  controls.minDistance = 100.00;
-  controls.maxDistance = 1000.00;
-  /*controls.rotateSpeed = 1.5;
-  controls.zoomSpeed = 10.0;
-  controls.panSpeed = 0.3;
-  controls.keys = [65, 83, 68]; // ASD
-  controls.dynamicDampingFactor = 0.2;
-  */
-
-  renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
-  renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
-  renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
-  //document.addEventListener( 'keydown', onDocumentKeyDown, false );
-  //document.addEventListener( 'keyup', onDocumentKeyUp, false );
-  //
-  window.addEventListener( 'resize', onWindowResize, false );
-
-}
-
-function render() {
-  controls.update();
-  renderer.render( scene, camera );
-  requestAnimationFrame(render);
-}
-
-function onWindowResize() {
-
-  camera.aspect = window.innerWidth / window.innerHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize( window.innerWidth, window.innerHeight );
-
-}
-
-function onDocumentMouseMove( event ) {
-
-  event.preventDefault();
-
-  mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
-
-  raycaster.setFromCamera( mouse, camera );
-
-  var intersects = raycaster.intersectObjects( objects );
-
-  if ( intersects.length > 0 ) {
-
-    var intersect = intersects[ 0 ];
-
-    rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
-    rollOverMesh.position.divideScalar( 10 ).floor().multiplyScalar( 10 ).addScalar( 5 );
-
-  }
-}
-
-var pressTime = 0;
-function onDocumentMouseDown( event ) { 
-  pressTime = Date.now();
-}
-
-function onDocumentMouseUp( event ) {
-  if (Date.now() - pressTime > 600) {
-    return;
-  }
-
-  event.preventDefault();
-  mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
-
-  raycaster.setFromCamera( mouse, camera );
-
-  var intersects = raycaster.intersectObjects( objects );
-
-  if ( intersects.length > 0 ) {
-    var intersect = intersects[ 0 ];
-
-    switch ( event.button ) {
-      case 0:
-        // left mouse button
-        console.log("set voxel");
-        var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
-        voxel.position.copy( intersect.point ).add( intersect.face.normal );
-        voxel.position.divideScalar( 10 ).floor().multiplyScalar( 10 ).addScalar( 5 );
-        scene.add( voxel );
-
-        objects.push( voxel );
-        break;
-      case 2:
-        // right mouse button
-        console.log("remove voxel");
-        if ( intersect.object !== plane ) {
-          scene.remove( intersect.object );
-          objects.splice( objects.indexOf( intersect.object ), 1 );
-        }
-        break;
-    }
-  }
-}