ハードウェア特性に基づいた

WebGL 高速化手法

WebGL fast method that is based

on hardware characteristics

2015/6/6 WebGL Meetup Tokyo #2

株式会社エクサ　安藤幸央

@yukio_andoh

ǁǁǁŬŚƌŽŶŽƐŽƌŐǁĞďŐůΞϮϬϭϭ<ŚƌŽŶŽƐ'ƌŽƵƉͲZĞǀ ϬϮϭϭ

tĞď'>ϭϬW/YƵŝĐŬZĞĨĞƌĞŶĐĞĂƌĚͲWĂŐĞϭ

tŚŽůĞ&ƌĂŵĞďƵīĞƌKƉĞƌĂƟŽŶƐϱϭϯϯǀŽŝĚĐůĞĂƌ;ƵůŽŶŐŵĂƐŬͿϱϭϯϭϭŵĂƐŬŝƚǁŝƐĞKZŽĨK>KZWd,^dE/>ͺh&&Zͺ/dǀŽŝĚĐůĞĂƌŽůŽƌ;ŇŽĂƚƌĞĚŇŽĂƚŐƌĞĞŶŇŽĂƚďůƵĞŇŽĂƚĂůƉŚĂͿǀŽŝĚĐůĞĂƌĞƉƚŚ;ŇŽĂƚĚĞƉƚŚͿĚĞƉƚŚůĂŵƉĞĚƚŽƚŚĞƌĂŶŐĞϬƚŽϭ

ǀŽŝĚĐůĞĂƌ^ƚĞŶĐŝů;ŝŶƚƐͿǀŽŝĚĐŽůŽƌDĂƐŬ;ůƌĞĚůŐƌĞĞŶůďůƵĞůĂůƉŚĂͿǀŽŝĚĚĞƉƚŚDĂƐŬ;ůŇĂŐͿǀŽŝĚƐƚĞŶĐŝůDĂƐŬ;ƵŝŶƚŵĂƐŬͿǀŽŝĚƐƚĞŶĐŝůDĂƐŬ^ĞƉĂƌĂƚĞ;ĞŶƵŵĨĂĐĞƵŝŶƚŵĂƐŬͿĨĂĐĞ&ZKEd <&ZKEdͺEͺ<

tĞď'>ΠŝƐĂƐŽŌǁĂƌĞŝŶƚĞƌĨĂĐĞĨŽƌĂĐĐĞƐƐŝŶŐŐƌĂƉŚŝĐƐŚĂƌĚǁĂƌĞĨƌŽŵǁŝƚŚŝŶĂǁĞďďƌŽǁƐĞƌ ĂƐĞĚŽŶKƉĞŶ'>^ϮϬtĞď'>ĂůůŽǁƐĂƉƌŽŐƌĂŵŵĞƌƚŽƐƉĞĐŝĨLJƚŚĞŽďũĞĐƚƐĂŶĚŽƉĞƌĂƟŽŶƐŝŶǀŽůǀĞĚŝŶƉƌŽĚƵĐŝŶŐŚŝŐŚͲƋƵĂůŝƚLJŐƌĂƉŚŝĐĂůŝŵĂŐĞƐƐƉĞĐŝĮĐĂůůLJĐŽůŽƌŝŵĂŐĞƐŽĨϯŽďũĞĐƚƐ

ͻŶŶŶƌĞĨĞƌƐƚŽƐĞĐƟŽŶƐŝŶƚŚĞtĞď'>ϭϬƐƉĞĐŝĮĐĂƟŽŶĂǀĂŝůĂďůĞĂƚǁǁǁŬŚƌŽŶŽƐŽƌŐǁĞďŐů

ͻŽŶƚĞŶƚŵĂƌŬĞĚŝŶƉƵƌƉůĞĚŽĞƐŶŽƚŚĂǀĞĂĐŽƌƌĞƐƉŽŶĚŝŶŐĨƵŶĐƟŽŶŝŶKƉĞŶ'>^dŚĞKƉĞŶ'>^ϮϬƐƉĞĐŝĮĐĂƟŽŶŝƐĂǀĂŝůĂďůĞĂƚǁǁǁŬŚƌŽŶŽƐŽƌŐƌĞŐŝƐƚƌLJŐůĞƐ

tĞď'>ĨƵŶĐƟŽŶĐĂůůƐďĞŚĂǀĞŝĚĞŶƟĐĂůůLJƚŽƚŚĞŝƌKƉĞŶ'>^ĐŽƵŶƚĞƌƉĂƌƚƐƵŶůĞƐƐŽƚŚĞƌǁŝƐĞŶŽƚĞĚ

ƌƌĂLJƵīĞƌĂŶĚdLJƉĞĚƌƌĂLJƐϱϭϮĂƚĂŝƐƚƌĂŶƐĨĞƌƌĞĚƚŽtĞď'>ƵƐŝŶŐƌƌĂLJƵīĞƌĂŶĚǀŝĞǁƐƵīĞƌƐƌĞƉƌĞƐĞŶƚƵŶƐƚƌƵĐƚƵƌĞĚďŝŶĂƌLJĚĂƚĂǁŚŝĐŚĐĂŶďĞŵŽĚŝĮĞĚƵƐŝŶŐŽŶĞŽƌŵŽƌĞƚLJƉĞĚĂƌƌĂLJǀŝĞǁƐ

ƵīĞƌƐƌƌĂLJƵīĞƌ;ƵůŽŶŐďLJƚĞ>ĞŶŐƚŚͿƵůŽŶŐďLJƚĞ>ĞŶŐƚŚƌĞĂĚͲŽŶůLJůĞŶŐƚŚŽĨǀŝĞǁŝŶďLJƚĞƐƌĞĂƚĞƐĂŶĞǁďƵīĞƌ dŽŵŽĚŝĨLJƚŚĞĚĂƚĂĐƌĞĂƚĞŽŶĞŽƌŵŽƌĞǀŝĞǁƐƌĞĨĞƌĞŶĐŝŶŐŝƚ

sŝĞǁƐ/ŶƚŚĞĨŽůůŽǁŝŶŐsŝĞǁdLJƉĞŵĂLJďĞ/ŶƚϴƌƌĂLJ /ŶƚϭϲƌƌĂLJ /ŶƚϯϮƌƌĂLJ hŝŶƚϴƌƌĂLJ hŝŶƚϭϲƌƌĂLJ hŝŶƚϯϮƌƌĂLJ &ůŽĂƚϯϮƌƌĂLJsŝĞǁdLJƉĞ;ƵůŽŶŐůĞŶŐƚŚͿ

ƌĞĂƚĞƐĂǀŝĞǁĂŶĚĂŶĞǁƵŶĚĞƌůLJŝŶŐďƵīĞƌƵůŽŶŐůĞŶŐƚŚZĞĂĚͲŽŶůLJ ŶƵŵďĞƌŽĨĞůĞŵĞŶƚƐŝŶƚŚŝƐǀŝĞǁ

sŝĞǁdLJƉĞ;sŝĞǁdLJƉĞŽƚŚĞƌͿƌĞĂƚĞƐŶĞǁƵŶĚĞƌůLJŝŶŐďƵīĞƌĂŶĚĐŽƉŝĞƐŽƚŚĞƌĂƌƌĂLJ

sŝĞǁdLJƉĞ;ƚLJƉĞŽƚŚĞƌͿƌĞĂƚĞƐŶĞǁƵŶĚĞƌůLJŝŶŐďƵīĞƌĂŶĚĐŽƉŝĞƐŽƚŚĞƌĂƌƌĂLJ

sŝĞǁdLJƉĞ;ƌƌĂLJƵīĞƌďƵīĞƌŽƉƟŽŶĂůƵůŽŶŐďLJƚĞKīƐĞƚŽƉƟŽŶĂůƵůŽŶŐůĞŶŐƚŚͿƌĞĂƚĞĂŶĞǁǀŝĞǁŽĨŐŝǀĞŶďƵīĞƌ ƐƚĂƌƟŶŐĂƚŽƉƟŽŶĂůďLJƚĞŽīƐĞƚĞdžƚĞŶĚŝŶŐĨŽƌŽƉƟŽŶĂůůĞŶŐƚŚĞůĞŵĞŶƚƐƌƌĂLJƵīĞƌďƵīĞƌZĞĂĚͲŽŶůLJ ďƵīĞƌďĂĐŬŝŶŐƚŚŝƐǀŝĞǁƵůŽŶŐďLJƚĞKīƐĞƚZĞĂĚͲŽŶůLJ ďLJƚĞŽīƐĞƚŽĨǀŝĞǁƐƚĂƌƚŝŶďƵīĞƌƵůŽŶŐůĞŶŐƚŚZĞĂĚͲŽŶůLJ ŶƵŵďĞƌŽĨĞůĞŵĞŶƚƐŝŶƚŚŝƐǀŝĞǁ

KƚŚĞƌWƌŽƉĞƌƟĞƐƵůŽŶŐďLJƚĞ>ĞŶŐƚŚZĞĂĚͲŽŶůLJ ůĞŶŐƚŚŽĨǀŝĞǁŝŶďLJƚĞƐĐŽŶƐƚƵůŽŶŐzd^ͺWZͺ>DEdĞůĞŵĞŶƚƐŝnjĞŝŶďLJƚĞƐ

DĞƚŚŽĚƐǀŝĞǁŝсŐĞƚƐĞƚĞůĞŵĞŶƚŝƐĞƚ;sŝĞǁdLJƉĞŽƚŚĞƌ ŽƉƟŽŶĂůƵůŽŶŐŽīƐĞƚͿƐĞƚ;ƚLJƉĞŽƚŚĞƌŽƉƟŽŶĂůƵůŽŶŐŽīƐĞƚͿ

ZĞƉůĂĐĞĞůĞŵĞŶƚƐŝŶƚŚŝƐǀŝĞǁǁŝƚŚƚŚŽƐĞĨƌŽŵŽƚŚĞƌ ƐƚĂƌƟŶŐĂƚŽƉƟŽŶĂůŽīƐĞƚ

sŝĞǁdLJƉĞƐƵďƐĞƚ;ůŽŶŐďĞŐŝŶŽƉƟŽŶĂůůŽŶŐĞŶĚͿZĞƚƵƌŶĂƐƵďƐĞƚŽĨƚŚŝƐǀŝĞǁƌĞĨĞƌĞŶĐŝŶŐƚŚĞƐĂŵĞƵŶĚĞƌůLJŝŶŐďƵīĞƌ

dŚĞtĞď'>ŽŶƚĞdžƚĂŶĚŐĞƚŽŶƚĞdžƚ;ͿϮϱdŚŝƐŽďũĞĐƚŵĂŶĂŐĞƐKƉĞŶ'>ƐƚĂƚĞĂŶĚƌĞŶĚĞƌƐƚŽƚŚĞĂĚƌĂǁŝŶŐďƵīĞƌ ǁŚŝĐŚŵƵƐƚŝƐĂůƐŽďĞĐƌĞĂƚĞĚĂƚƚŚĞƐĂŵĞƟŵĞŽĨĂƐƚŚĞĐŽŶƚĞdžƚĐƌĞĂƟŽŶƌĞĂƚĞƚŚĞ:HE*/5HQGHULQJ&RQWH[WŽďũĞĐƚĂŶĚĚƌĂǁŝŶŐďƵīĞƌďLJĐĂůůŝŶŐƚŚĞŐĞƚŽŶƚĞdžƚŵĞƚŚŽĚŽĨĂŐŝǀĞŶ,dD>ĂŶǀĂƐůĞŵĞŶƚŽďũĞĐƚǁŝƚŚƚŚĞĞdžĂĐƚƐƚƌŝŶŐǁĞďŐů dŚĞĚƌĂǁŝŶŐďƵīĞƌŝƐĂůƐŽĐƌĞĂƚĞĚďLJŐĞƚŽŶƚĞdžƚ

&ŽƌĞdžĂŵƉůĞ'2&7<3(KWPO!KWPO!ERG\!FDQYDVLG ´F´!FDQYDV!VFULSWW\SH ´WH[WMDYDVFULSW´!YDUFDQYDV GRFXPHQWJHW(OHPHQW%\,G³F´YDUJO FDQYDVJHW&RQWH[W³ZHEJO´JOFOHDU&RORUJOFOHDUJO&2/25B%8))(5B%,7VFULSW!ERG\!KWPO!

tĞď'>KďũĞĐƚϱϯdŚŝƐŝƐƚŚĞƉĂƌĞŶƚŝŶƚĞƌĨĂĐĞĨŽƌĂůůtĞď'>ƌĞƐŽƵƌĐĞŽďũĞĐƚƐZĞƐŽƵƌĐĞŝŶƚĞƌĨĂĐĞŽďũĞĐƚƐtĞď'>ƵīĞƌϱϰ KƉĞŶ'>ƵīĞƌKďũĞĐƚtĞď'>WƌŽŐƌĂŵϱϲ KƉĞŶ'>WƌŽŐƌĂŵKďũĞĐƚtĞď'>ZĞŶĚĞƌďƵīĞƌϱϳ KƉĞŶ'>ZĞŶĚĞƌďƵīĞƌKďũĞĐƚtĞď'>^ŚĂĚĞƌϱϴ KƉĞŶ'>^ŚĂĚĞƌKďũĞĐƚtĞď'>dĞdžƚƵƌĞϱϵ KƉĞŶ'>dĞdžƚƵƌĞKďũĞĐƚtĞď'>hŶŝĨŽƌŵ>ŽĐĂƟŽŶϱϭϬ >ŽĐĂƟŽŶŽĨĂƵŶŝĨŽƌŵǀĂƌŝĂďůĞŝŶĂ

ƐŚĂĚĞƌƉƌŽŐƌĂŵtĞď'>ĐƟǀĞ/ŶĨŽϱϭϭ /ŶĨŽƌŵĂƟŽŶƌĞƚƵƌŶĞĚĨƌŽŵĐĂůůƐƚŽ

ŐĞƚĐƟǀĞƩƌŝďĂŶĚŐĞƚĐƟǀĞhŶŝĨŽƌŵ,ĂƐƚŚĞĨŽůůŽǁŝŶŐƌĞĂĚͲŽŶůLJƉƌŽƉĞƌƟĞƐŶĂŵĞůŽĐĂƟŽŶƐŝnjĞƚLJƉĞ

tĞď'>ZĞŶĚĞƌŝŶŐŽŶƚĞdžƚϱϭϯdŚŝƐŝƐƚŚĞƉƌŝŶŝĐƉĂůŝŶƚĞƌĨĂĐĞŝŶtĞď'>dŚĞĨƵŶĐƟŽŶƐůŝƐƚĞĚŽŶƚŚŝƐƌĞĨĞƌĞŶĐĞĐĂƌĚĂƌĞĂǀĂŝůĂďůĞǁŝƚŚŝŶƚŚŝƐŝŶƚĞƌĨĂĐĞƩƌŝďƵƚĞƐĐĂŶǀĂƐ dLJƉĞ,dD>ĂŶǀĂƐůĞŵĞŶƚ

ƌĞĨĞƌĞŶĐĞƚŽƚŚĞĐĂŶǀĂƐĞůĞŵĞŶƚǁŚŝĐŚĐƌĞĂƚĞĚƚŚŝƐĐŽŶƚĞdžƚ

ĚƌĂǁŝŶŐƵīĞƌtŝĚƚŚ dLJƉĞ'>ƐŝnjĞŝdŚĞĂĐƚƵĂůǁŝĚƚŚŽĨƚŚĞĚƌĂǁŝŶŐďƵīĞƌ ǁŚŝĐŚŵĂLJĚŝīĞƌĨƌŽŵƚŚĞǁŝĚƚŚĂƩƌŝďƵƚĞŽĨƚŚĞ,dD>ĂŶǀĂƐůĞŵĞŶƚŝĨƚŚĞŝŵƉůĞŵĞŶƚĂƟŽŶŝƐƵŶĂďůĞƚŽƐĂƟƐĨLJƚŚĞƌĞƋƵĞƐƚĞĚǁŝĚƚŚŽƌŚĞŝŐŚƚ

ĚƌĂǁŝŶŐƵīĞƌ,ĞŝŐŚƚ dLJƉĞ'>ƐŝnjĞŝdŚĞĂĐƚƵĂůŚĞŝŐŚƚŽĨƚŚĞĚƌĂǁŝŶŐďƵīĞƌ ǁŚŝĐŚŵĂLJĚŝīĞƌĨƌŽŵƚŚĞŚĞŝŐŚƚĂƩƌŝďƵƚĞŽĨƚŚĞ,dD>ĂŶǀĂƐůĞŵĞŶƚŝĨƚŚĞŝŵƉůĞŵĞŶƚĂƟŽŶŝƐƵŶĂďůĞƚŽƐĂƟƐĨLJƚŚĞƌĞƋƵĞƐƚĞĚǁŝĚƚŚŽƌŚĞŝŐŚƚ

/ŶƚĞƌĨĂĐĞƐ/ŶƚĞƌĨĂĐĞƐĂƌĞŽƉƟŽŶĂůƌĞƋƵĞƐƚƐĂŶĚŵĂLJďĞŝŐŶŽƌĞĚďLJĂŶŝŵƉůĞŵĞŶƚĂƟŽŶ^ĞĞŐĞƚŽŶƚĞdžƚƩƌŝďƵƚĞƐĨŽƌĂĐƚƵĂůǀĂůƵĞƐ

tĞď'>ŽŶƚĞdžƚƩƌŝďƵƚĞƐϱϮdŚŝƐŝŶƚĞƌĨĂĐĞĐŽŶƚĂŝŶƐƌĞƋƵĞƐƚĞĚĚƌĂǁŝŶŐƐƵƌĨĂĐĞĂƩƌŝďƵƚĞƐĂŶĚŝƐƉĂƐƐĞĚĂƐƚŚĞƐĞĐŽŶĚƉĂƌĂŵĞƚĞƌƚŽŐĞƚŽŶƚĞdžƚƩƌŝďƵƚĞƐĂůƉŚĂ ĞĨĂƵůƚƚƌƵĞ

/ĨƚƌƵĞƌĞƋƵĞƐƚƐĂĚƌĂǁŝŶŐďƵīĞƌǁŝƚŚĂŶĂůƉŚĂĐŚĂŶŶĞůĨŽƌƚŚĞƉƵƌƉŽƐĞƐŽĨƉĞƌĨŽƌŵŝŶŐKƉĞŶ'>ĚĞƐƟŶĂƟŽŶĂůƉŚĂŽƉĞƌĂƟŽŶƐĂŶĚĐŽŵƉŽƐŝƟŶŐǁŝƚŚƚŚĞƉĂŐĞ

ĚĞƉƚŚ ĞĨĂƵůƚƚƌƵĞ/ĨƚƌƵĞƌĞƋƵĞƐƚƐĚƌĂǁŝŶŐďƵīĞƌǁŝƚŚĂĚĞƉƚŚďƵīĞƌŽĨĂƚůĞĂƐƚϭϲďŝƚƐ

ƐƚĞŶĐŝů ĞĨĂƵůƚĨĂůƐĞ/ĨƚƌƵĞƌĞƋƵĞƐƚƐĂƐƚĞŶĐŝůďƵīĞƌŽĨĂƚůĞĂƐƚϴďŝƚƐ

ĂŶƟĂůŝĂƐ ĞĨĂƵůƚƚƌƵĞ/ĨƚƌƵĞƌĞƋƵĞƐƚƐĚƌĂǁŝŶŐďƵīĞƌǁŝƚŚĂŶƟĂůŝĂƐŝŶŐƵƐŝŶŐŝƚƐĐŚŽŝĐĞŽĨƚĞĐŚŶŝƋƵĞ;ŵƵůƟƐĂŵƉůĞƐƵƉĞƌƐĂŵƉůĞͿĂŶĚƋƵĂůŝƚLJ

ƉƌĞŵƵůƟƉůŝĞĚůƉŚĂ ĞĨĂƵůƚƚƌƵĞ/ĨƚƌƵĞƌĞƋƵĞƐƚƐĚƌĂǁŝŶŐďƵīĞƌǁŚŝĐŚĐŽŶƚĂŝŶƐĐŽůŽƌƐǁŝƚŚƉƌĞŵƵůƟƉůŝĞĚĂůƉŚĂ;/ŐŶŽƌĞĚŝĨůƉŚĂŝƐĨĂůƐĞͿ

ƉƌĞƐĞƌǀĞƌĂǁŝŶŐƵīĞƌ ĞĨĂƵůƚĨĂůƐĞ/ĨƚƌƵĞƌĞƋƵĞƐƚƐƚŚĂƚĐŽŶƚĞŶƚƐŽĨƚŚĞĚƌĂǁŝŶŐďƵīĞƌƌĞŵĂŝŶŝŶďĞƚǁĞĞŶĨƌĂŵĞƐĂƚƉŽƚĞŶƟĂůƉĞƌĨŽƌŵĂŶĐĞĐŽƐƚ

sŝĞǁĂŶĚůŝƉϱϭϯϯͲϱϭϯϰdŚĞǀŝĞǁƉŽƌƚƐƉĞĐŝĮĞƐƚŚĞĂĸŶĞƚƌĂŶƐĨŽƌŵĂƟŽŶŽĨdžĂŶĚLJĨƌŽŵŶŽƌŵĂůŝnjĞĚĚĞǀŝĐĞĐŽŽƌĚŝŶĂƚĞƐƚŽǁŝŶĚŽǁĐŽŽƌĚŝŶĂƚĞƐƌĂǁŝŶŐďƵīĞƌƐŝnjĞŝƐĚĞƚĞƌŵŝŶĞĚďLJƚŚĞ,dD>ĂŶǀĂƐůĞŵĞŶƚǀŽŝĚĚĞƉƚŚZĂŶŐĞ;ŇŽĂƚnjEĞĂƌŇŽĂƚnj&ĂƌͿnjEĞĂƌůĂŵƉĞĚƚŽƚŚĞƌĂŶŐĞϬƚŽϭDƵƐƚďĞфсnj&Ăƌnj&ĂƌůĂŵƉĞĚƚŽƚŚĞƌĂŶŐĞϬƚŽϭǀŽŝĚƐĐŝƐƐŽƌ;ŝŶƚdžŝŶƚLJůŽŶŐǁŝĚƚŚůŽŶŐŚĞŝŐŚƚͿǀŽŝĚǀŝĞǁƉŽƌƚ;ŝŶƚdžŝŶƚLJůŽŶŐǁŝĚƚŚůŽŶŐŚĞŝŐŚƚͿ

WĞƌͲ&ƌĂŐŵĞŶƚKƉĞƌĂƟŽŶƐϱϭϯϯǀŽŝĚďůĞŶĚŽůŽƌ;ŇŽĂƚƌĞĚŇŽĂƚŐƌĞĞŶŇŽĂƚďůƵĞŇŽĂƚĂůƉŚĂͿǀŽŝĚďůĞŶĚƋƵĂƟŽŶ;ĞŶƵŵŵŽĚĞͿŵŽĚĞ^ĞĞŵŽĚĞZ'ĨŽƌďůĞŶĚƋƵĂƟŽŶ^ĞƉĂƌĂƚĞǀŽŝĚďůĞŶĚƋƵĂƟŽŶ^ĞƉĂƌĂƚĞ;ĞŶƵŵŵŽĚĞZ'

ĞŶƵŵŵŽĚĞůƉŚĂͿŵŽĚĞZ'ĂŶĚŵŽĚĞůƉŚĂ&hEͺ&hEͺ^hdZd &hEͺZsZ^ͺ^hdZd

ǀŽŝĚďůĞŶĚ&ƵŶĐ;ĞŶƵŵƐĨĂĐƚŽƌĞŶƵŵĚĨĂĐƚŽƌͿƐĨĂĐƚŽƌ^ĂŵĞĂƐĨŽƌĚĨĂĐƚŽƌƉůƵƐ^Zͺ>W,ͺ^dhZdĚĨĂĐƚŽƌZKKEKEͺD/Eh^ͺ^ZͺK>KZKEͺD/Eh^ͺ^dͺK>KZKEͺD/Eh^ͺ^Zͺ>W,KEͺD/Eh^ͺ^dͺ>W,KEͺD/Eh^ͺKE^dEdͺK>KZKEͺD/Eh^ͺKE^dEdͺ>W,

EŽƚĞ^ƌĐĂŶĚĚƐƚĨĂĐƚŽƌƐŵĂLJŶŽƚďŽƚŚƌĞĨĞƌĞŶĐĞĐŽŶƐƚĂŶƚĐŽůŽƌǀŽŝĚďůĞŶĚ&ƵŶĐ^ĞƉĂƌĂƚĞ;ĞŶƵŵƐƌĐZ'ĞŶƵŵĚƐƚZ'

ĞŶƵŵƐƌĐůƉŚĂĞŶƵŵĚƐƚůƉŚĂͿƐƌĐZ'ƐƌĐůƉŚĂ^ĞĞƐĨĂĐƚŽƌĨŽƌďůĞŶĚ&ƵŶĐĚƐƚZ'ĚƐƚůƉŚĂ^ĞĞĚĨĂĐƚŽƌĨŽƌďůĞŶĚ&ƵŶĐEŽƚĞ^ƌĐĂŶĚĚƐƚĨĂĐƚŽƌƐŵĂLJŶŽƚďŽƚŚƌĞĨĞƌĞŶĐĞĐŽŶƐƚĂŶƚĐŽůŽƌǀŽŝĚĚĞƉƚŚ&ƵŶĐ;ĞŶƵŵĨƵŶĐͿĨƵŶĐEsZ>tz^>^^Yh>>Yh>'ZdZ'Yh>EKdYh>

ǀŽŝĚƐĂŵƉůĞŽǀĞƌĂŐĞ;ŇŽĂƚǀĂůƵĞůŝŶǀĞƌƚͿǀŽŝĚƐƚĞŶĐŝů&ƵŶĐ;ĞŶƵŵĨƵŶĐŝŶƚƌĞĨƵŝŶƚŵĂƐŬͿĨƵŶĐEsZ>tz^>^^>Yh>EKdYh>'ZdZ'Yh>

ǀŽŝĚƐƚĞŶĐŝů&ƵŶĐ^ĞƉĂƌĂƚĞ;ĞŶƵŵĨĂĐĞĞŶƵŵĨƵŶĐŝŶƚƌĞĨƵŝŶƚŵĂƐŬͿ

ĨĂĐĞ&ZKEd <&ZKEdͺEͺ<ĨƵŶĐEsZ>tz^>^^>Yh>EKdYh>'ZdZ'Yh>

ǀŽŝĚƐƚĞŶĐŝůKƉ;ĞŶƵŵĨĂŝůĞŶƵŵnjĨĂŝůĞŶƵŵnjƉĂƐƐͿĨĂŝůnjĨĂŝůĂŶĚnjƉĂƐƐ<W ZKZW>/EZZ/EsZd /EZͺtZW ZͺtZW

ǀŽŝĚƐƚĞŶĐŝůKƉ^ĞƉĂƌĂƚĞ;ĞŶƵŵĨĂĐĞĞŶƵŵĨĂŝůĞŶƵŵnjĨĂŝůĞŶƵŵnjƉĂƐƐͿ

ĨĂĐĞ&ZKEd <&ZKEdͺEͺ<ĨĂŝůnjĨĂŝůĂŶĚnjƉĂƐƐ^ĞĞĨĂŝůnjĨĂŝůĂŶĚnjƉĂƐƐĨŽƌƐƚĞŶĐŝůKƉ

ƵīĞƌKďũĞĐƚƐϱϭϯϱKŶĐĞďŽƵŶĚďƵīĞƌƐŵĂLJŶŽƚďĞƌĞďŽƵŶĚǁŝƚŚĂĚŝīĞƌĞŶƚdĂƌŐĞƚǀŽŝĚďŝŶĚƵīĞƌ;ĞŶƵŵƚĂƌŐĞƚKďũĞĐƚďƵīĞƌͿƚĂƌŐĞƚZZzͺh&&Z>DEdͺZZzͺh&&Z

ǀŽŝĚďƵīĞƌĂƚĂ;ĞŶƵŵƚĂƌŐĞƚůŽŶŐƐŝnjĞĞŶƵŵƵƐĂŐĞͿƚĂƌŐĞƚZZzͺh&&Z>DEdͺZZzͺh&&ZƵƐĂŐĞ^dd/ͺZt^dZDͺZtzED/ͺZt

ǀŽŝĚďƵīĞƌĂƚĂ;ĞŶƵŵƚĂƌŐĞƚKďũĞĐƚĚĂƚĂĞŶƵŵƵƐĂŐĞͿƚĂƌŐĞƚĂŶĚƵƐĂŐĞ^ĂŵĞĂƐĨŽƌďƵīĞƌĂƚĂĂďŽǀĞ

ǀŽŝĚďƵīĞƌ^ƵďĂƚĂ;ĞŶƵŵƚĂƌŐĞƚůŽŶŐŽīƐĞƚKďũĞĐƚĚĂƚĂͿƚĂƌŐĞƚZZzͺh&&Z>DEdͺZZzͺh&&Z

KďũĞĐƚĐƌĞĂƚĞƵīĞƌ;ͿEŽƚĞŽƌƌĞƐƉŽŶĚŝŶŐKƉĞŶ'>^ĨƵŶĐƟŽŶŝƐ'ĞŶƵīĞƌƐǀŽŝĚĚĞůĞƚĞƵīĞƌ;KďũĞĐƚďƵīĞƌͿĂŶLJŐĞƚƵīĞƌWĂƌĂŵĞƚĞƌ;ĞŶƵŵƚĂƌŐĞƚĞŶƵŵƉŶĂŵĞͿƚĂƌŐĞƚZZzͺh&&Z>DEdͺZZzͺh&&ZƉŶĂŵĞh&&Zͺ^/h&&Zͺh^'ůŝƐƵīĞƌ;KďũĞĐƚďƵīĞƌͿ

ĞƚĞĐƚĂŶĚŶĂďůĞdžƚĞŶƐŝŽŶƐϱϭϯϭϰƐƚƌŝŶŐŐĞƚ^ƵƉƉŽƌƚĞĚdžƚĞŶƐŝŽŶƐ;ͿŽďũĞĐƚŐĞƚdžƚĞŶƐŝŽŶ;ƐƚƌŝŶŐŶĂŵĞͿ

ZĂƐƚĞƌŝnjĂƟŽŶϱϭϯϯǀŽŝĚĐƵůů&ĂĐĞ;ĞŶƵŵŵŽĚĞͿŵŽĚĞ<&ZKEdͺEͺ<&ZKEd

ǀŽŝĚĨƌŽŶƚ&ĂĐĞ;ĞŶƵŵŵŽĚĞͿŵŽĚĞttǀŽŝĚůŝŶĞtŝĚƚŚ;ŇŽĂƚǁŝĚƚŚͿǀŽŝĚƉŽůLJŐŽŶKīƐĞƚ;ŇŽĂƚĨĂĐƚŽƌ

ŇŽĂƚƵŶŝƚƐͿ

ĞƚĞĐƚĐŽŶƚĞdžƚůŽƐƚĞǀĞŶƚƐϱϭϯϭϯůŝƐŽŶƚĞdžƚ>ŽƐƚ;Ϳ

WebGL Cheat Sheet

via. https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf

SGI IRIS GL 1984～, OpenGL 1992～ VRML 1995～ Canvas3D 2006～ WebGL 2011～

WebGLは、

ソフトウェア

というよりも、

ハードウェアを最大限

コントロールするため

のAPI

２のべき乗サイズの

テクスチャの方が、

親和性が良いのも

そのせい

速い？

遅い？photo (cc) ph-stopphoto (cc) Will Richards

Google RAIL

100 ms

Response Animation Idle Load

16 ms 100 ms 1000 ms

Google RAIL

100 ms

Response Animation Idle Load

60 fps 50～100

ms

1000 ms

fps : frame per second = フレームレート

via. https://paulbakaus.com/tutorials/performance/the-illusion-of-motion/

遅くならない為には

ターゲットを絞る

パフォーマンス計画

を立てる

via. AKQA Winterlands

初めは低いスペック

の端末に合わせる

高性能端末向けには

徐々にリッチな素材

を追加すれば良い

via. AKQA Winterlands

何を重視するか、

基本ポリシーを検討

　美しさ？

　操作性？

　オブジェクト数？

　fps？

Photo (cc) Andrionni Ribo cf. http://akirodic.com/p/jellyfish/

Pixar の Rendering の歴史

10 hour / frame

via. (C) Pixar

このハードウェアで

は、このくらい....

ベンチマークツールで

計ったり、単純サンプ

ルで計り比較する

（3DMark, GFXBench,

UnityBench 等）

via. (C) 3DMark

透明、霧、照明、影表

現は高い負荷。

通常描画を透明にする

よりも、特別に考える

単なるブレンド描画で

十分な場合も...

via. http://blog.bonzaisoftware.com/stochastic-order-independent-transparency/#more-348

手前から描くとカリ

ング（隠れている面

を描かない）が効く

ので速い。

ただし、PowerVR

系(iOS) は効かない(Tile Based Deferred Renderer)

via. (C) imgtec

後から加えるの

は容易だが、

後からチューニ

ングしたり削除

するのは難しいphoto (cc) Chris Martin

via. http://caniuse.com/

ブラウザ間の主な差

分はJavaScript部分

Chrome:V8

Safari: Nitro

Firefox: asm.js可

IE11: WebGL0.93

(全命令には未対応)

https://kripken.github.io/ammo.js/examples/new/ammo.html

闇雲にチューニング

せずに、どこが遅い

のか見極める

パレートの80:20

の法則

photo (cc) Will Richards

JavaScript

CSS

http(img)

Network

WebGL

Page Speed

Insights

https://developers.google.com/speed/pagespeed/

画像の最適化や、サーバー側の設定の不備など、まずは JavaScript 周辺の遅い箇所を発見できる

WebGL Inspector

http://benvanik.github.io/WebGL-Inspector/

動作中の命令群のスナップショットを取得し、OpenGLの命令が無駄に重複している箇所を見つけることができる。発見したらループ外へ移動するなど、命令配置場所を検討できる

fps表示

chrome://flags fps

stats.js を取り込んでおく方法もあり https://github.com/mrdoob/stats.js

機能追加ごとに速度を体感

via. http://daureg.free.fr/ta_webit/3d_pipeline.jpg

あらゆる箇所が遅くなる要因に....

CPUの限界、頂点の限界、ピクセルの限界

何かの描画要素を

ON/OFF して何が

負荷なのか、何が関

係無いかを見いだす

テクスチャ有無、

ポリゴン数半分とか

描画画面を 1/2 や

1/4 に小さくして

みる。

遅さが変わらないの

であれば、CPU/

JavaScript 側の

負荷が多い

早すぎる最適化

は諸悪の根源で

ある

ドナルド・クヌース（アルゴリズムの大家。アートオブコ

ンピュータプログラミングの作者）

photo (cc) Will Richardsトニー・ホーア説もあり

CPU GPU

1+1

1+1

1+1

1+1

1+1

1+1

1+1

1+1

1+1, 1+1, 1+1, 1+1, 1+1, 1+1CPU GPU

CPU GPU

JavaScript WebGL

CPU GPUUnified Memory の場合を除く

WebGL は、

ステートマシン

一度設定した状

態は保持される

photo (cc) Eric Lubbers

何度も同じ設定

をするのは無駄

設定を切り替え

るのは高負荷

photo (cc) Eric Lubbers

これらをふまえて...

高速WebGL

20の法則

#01

バラバラのポリゴンよりも、まとめたポリゴンで扱う。drawCallの回数を少なく。THREE.js だとGeometryUtils.merge()

ただし、妄信せず、コンテンツ表現とのバランスが重要

#02

頂点データの再利用 drawElements() を使ったindexed Polygon 指定でできるだけデータ数を少なく

#03

縮退三角形Degenerate triangle

面積がゼロの三角形を表現して、離れたポリゴン同士を連続したものとして扱う

#04

同じことするにも、複数の方法があり、速い方法と遅い方法がある。バイト配列の指定やRGB順の違いなど

gl.bindTexture(gl.TEXTURE_2D, tex1024);gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, img1024);

#05

必要の無い OpenGL命令を何度も呼ばないOpenGLはステートマシンなので重複呼び出しは高負荷。パラメータの ON/OFF をチェック。両面描画？片面？フォグいる？毎回クリア？

#06

ループの回数の多いところ、負荷の多そうなところに気を配るループ内をよりシンプルに、ループ外で良いことは、事前計算。

簡単に試すには、空ループに書き換える等

#07

CPU、JavaScript で計算しているが、GPU側で出来そうなことを肩代わりしてもらう。事前計算しておく

特に同時並列で実行可能な、それほど精度が必要でないもの

#08

型付き配列を活用Float32Array() が座標値の配列にも色値もマトリックス表現も調度いい。適度な精度

trianglePositions = new Float32Array([ // X, Y, Z, -0.5, -0.25, 0.0, 0.5, -0.25, 0.0, 0.0, 0.559016994, 0.0]);

#09

テクスチャは一番資源を食う。小さくて荒くても比較しないと実はあまり気付かない。よく使うテクスチャはできるだけ始めの段階でロードしてバインドしておく。あとは切り替えて使うだけ

#10

JPEG, PNG自身を圧縮展開する時間もあるので、ハードウェアが対応しているテクスチャ圧縮フォーマットが一番いい（要拡張命令）実はネット上をやり取りするのが一番遅い（PNG圧縮、8bit index）

http://toji.github.io/texture-tester/

PowerVR PVRTCvia. http://wiki.sparrow-framework.org/manual/pvr_textures

#11

テクスチャのロードとバインドは大きな負荷テクスチャアトラスでまとめる。使う時に UV 指定をうまくずらして使う

(C) Minecraft

#12

ミップマップを活用。テクスチャがバインドされたままで、最適サイズを切り替えてうので一番都合がいい。遠くにあるオブジェクトは描画面積も小さいので、小さいテクスチャで十分。

#13

LOD活用

広い空間や、広い領域を扱う場合は、Level of Detail がとても効果あり。視点から近い時は細かく、遠い時は荒く

#14

read系の命令を描画ループ中で使わない。

コンテキストスイッチングにとても負荷がかかる。設定値を read() したり、ピクセル値を read() したりがとても遅い

#15

スマートフォン向けには、常に最大性能が良いわけではない。バッテリー消費とのバランスを考慮する

3G/LTEは最初の立ち上がりが遅いので、なるべくまとめてやり取り

#16

エラーチェック用や、デバッグ用のコードを綺麗に取り除く。笑うかもしれないが、以外と盲点。最初から仕組みを準備しておくエラーの発生を直すと速くなる時もあり

#17

Retina なら 2倍拡大表示でも十分？！

#18

カラースクリプティング、ストーリーテリングも重要

雰囲気や、気分で速度に関する感覚もだいぶ変わる

#19

使えるからといって限界値まで使わない

出来るだけ少なく

http://webglreport.com/

#20

利用機材を最適な環境設定にしよう。

特にノートパソコン、モバイル機器は、バッテリー温存のために色々と遅くなる

GPUが切り替わる機種

まとめハードウェアの性質や仕組みを理解し、最大限に生かす

適切な量と適切な表現で、無駄なことはしない

できるだけまとめて、場合によっては、できるだけ分割して

WebGL以外のネットやJavaScriptが遅くはないですか？

適切なチューニングには、適切プロファイリングが重要

選択と集中。ループの中を速くするのが一番効果あり

スマートなデータ

を使う

つまらないコード

を書くのだ

ロブ・パイク（UNIX、Go言語の作者の一人）

photo (cc) Will Richards

WebGL は

インタラクティブ

な上に、動画より

も小さいよね！

Mr. doob（Three.js の開発者）

photo (cc) ricardo cabello

Advertise on Rhizome with Nectar AdsRHIZOME NEWS

Our weekly email newsletter including featured stories, events, job listings, announcements and opportunities in

the fields of art & technology.

Follow

いいね！3,580

Subscribe to Rhizome's YouTube Channel Rhizome RSS

Follow on TumblrFEATURED ARTICLES

Study of Waves: an interview with SCRAAATCH

by MENDI + KEITH OBADIKE on Jun 4th, 2015

Stay With Me: AIRBNB Pavilion at IDEAS CITY

by MICHAEL CONNOR on May 28th, 2015

'Bodies are packages made to be opened': Shu Lea Cheang's

'I.K.U.' (2000)by B. RUBY RICH on May 26th, 2015

Don't Fight It: On "/Performing the Text," curated by Kerry Doran

by ANTON HAUGEN on May 20th, 2015

おまけ極端なチューニングによりコードを書き換えた時は、元の

コードも書き残しておいた方がいい（何をやっているのか

デモやギャラリー展示など、単発、単体の時は、苦労して

チューニングするよりも、速いマシンを調達した方が早い

メーカーが提供しているチップのドキュメントを読むとより

深く理解できます（特に PowerVR や NVIDIA系は充実）

PDF download

http://goo.gl/

Thanks!

@yukio_andoh