skeletal-animation-system

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="description" content="A standalone, stateless, dual quaternion based skeletal animation system built with interactive applications in mind on top of WebGL"> <title>Skeletal Animation System</title> <link rel="stylesheet" href="tomorrow.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/javascript.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> <link rel="stylesheet" href="styles.css"> </head> <body onload="sh_highlightDocument();"> <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <defs> <radialGradient id="radGrad" class="full-size" r="0.15"> <stop stop-opacity="0" offset="0%" stop-color="#FFF" /> <stop offset="100%" stop-color="#FFF" /> </radialGradient> </defs> <path id="lines-dots" d="M135.62615,248.576784 C132.623608,246.088045 130.200066,242.81628 128.702956,238.916176 C127.350529,235.392982 126.903039,231.744966 127.246453,228.228253 L-92.089766,312.423539 C-89.4814194,314.807177 -87.3729695,317.817611 -86.0205421,321.340805 C-84.5234324,325.240909 -84.1352373,329.293971 -84.7012692,333.152557 L135.62615,248.576784 Z M152.489836,204.613347 C164.606488,199.9622 178.199476,206.014188 182.850623,218.130841 C187.50177,230.247493 181.449782,243.84048 169.333129,248.491627 C157.216477,253.142775 143.62349,247.090787 138.972343,234.974134 C134.321195,222.857482 140.373183,209.264495 152.489836,204.613347 Z M948.588106,34.7230955 C946.353789,37.9753754 943.281245,40.6688353 939.495074,42.4343556 C936.074803,44.0292542 932.448777,44.6912867 928.884489,44.5249994 L1019.95811,239.711602 C1022.12181,236.874311 1024.95972,234.522161 1028.37999,232.927262 C1032.16616,231.161742 1036.20446,230.539359 1040.13205,230.918298 L948.588106,34.7230955 Z M899.917107,10.6786926 C900.822454,23.6257688 912.052063,33.3875184 924.999139,32.4821707 C937.946215,31.5768229 947.707965,20.3472146 946.802617,7.40013837 C945.897269,-5.54693781 934.667661,-15.3086874 921.720585,-14.4033397 C908.773509,-13.4979919 899.011759,-2.26838354 899.917107,10.6786926 Z M364.88283,401.321103 L178.910234,256.023387 C182.509216,254.521253 185.783433,252.101023 188.355406,248.809048 C190.678821,245.835212 192.173334,242.47743 192.873113,239.013976 L378.009063,383.658033 C374.81778,385.174911 371.921294,387.437351 369.597879,390.411187 C367.025906,393.703162 365.469673,397.465627 364.88283,401.321103 Z M411.252291,393.133259 C421.47964,401.12374 423.29298,415.892208 415.302499,426.119557 C407.312019,436.346905 392.543551,438.160245 382.316202,430.169765 C372.088853,422.179284 370.275513,407.410816 378.265994,397.183467 C386.256474,386.956119 401.024943,385.142779 411.252291,393.133259 Z M1298.21072,376.426252 L1077.8833,291.85048 C1080.88585,289.361741 1083.30939,286.089976 1084.8065,282.189872 C1086.15893,278.666678 1086.60642,275.018661 1086.263,271.501948 L1305.59922,355.697234 C1302.99087,358.080873 1300.88242,361.091306 1299.53,364.6145 C1298.03289,368.514604 1297.64469,372.567666 1298.21072,376.426252 Z M1340.16017,355.039059 C1328.04351,350.387912 1314.45053,356.4399 1309.79938,368.556553 C1305.14823,380.673205 1311.20022,394.266192 1323.31687,398.91734 C1335.43352,403.568487 1349.02651,397.516499 1353.67766,385.399846 C1358.32881,373.283194 1352.27682,359.690207 1340.16017,355.039059 Z M1276.77077,730.590943 L1093.3623,582.069687 C1096.98695,580.630592 1100.3029,578.267874 1102.93194,575.021287 C1105.3069,572.088454 1106.85979,568.757266 1107.61991,565.306552 L1290.20327,713.159647 C1286.986,714.620598 1284.05047,716.832144 1281.67551,719.764977 C1279.04648,723.011564 1277.42482,726.746296 1276.77077,730.590943 Z M1324.52755,723.409562 C1334.61389,731.577317 1336.1692,746.375184 1328.00145,756.461521 C1319.83369,766.547859 1305.03583,768.103178 1294.94949,759.935422 C1284.86315,751.767667 1283.30783,736.969801 1291.47559,726.883463 C1299.64334,716.797125 1314.44121,715.241807 1324.52755,723.409562 Z M877.88283,879.321103 L691.910234,734.023387 C695.509216,732.521253 698.783433,730.101023 701.355406,726.809048 C703.678821,723.835212 705.173334,720.47743 705.873113,717.013976 L891.009063,861.658033 C887.81778,863.174911 884.921294,865.437351 882.597879,868.411187 C880.025906,871.703162 878.469673,875.465627 877.88283,879.321103 Z M924.252291,871.133259 C934.47964,879.12374 936.29298,893.892208 928.302499,904.119557 C920.312019,914.346905 905.543551,916.160245 895.316202,908.169765 C885.088853,900.179284 883.275513,885.410816 891.265994,875.183467 C899.256474,864.956119 914.024943,863.142779 924.252291,871.133259 Z M734.741688,1096.7501 L880.039404,910.7775 C881.541538,914.376481 883.961768,917.650698 887.253743,920.222671 C890.227579,922.546086 893.585361,924.040599 897.048815,924.740378 L752.404758,1109.87633 C750.88788,1106.68505 748.62544,1103.78856 745.651604,1101.46514 C742.359629,1098.89317 738.597164,1097.33694 734.741688,1096.7501 Z M742.929531,1143.11956 C734.939051,1153.34691 720.170583,1155.16025 709.943234,1147.16976 C699.715885,1139.17928 697.902546,1124.41082 705.893026,1114.18347 C713.883506,1103.95612 728.651975,1102.14278 738.879323,1110.13326 C749.106672,1118.12374 750.920012,1132.89221 742.929531,1143.11956 Z M1079.20544,1097.54711 L921.288871,922.162994 C925.094019,921.308637 928.738762,919.493738 931.843307,916.698394 C934.647825,914.173194 936.702706,911.125944 937.993276,907.836623 L1095.19942,1082.43173 C1091.79322,1083.3714 1088.54786,1085.0965 1085.74335,1087.6217 C1082.6388,1090.41705 1080.45287,1093.85212 1079.20544,1097.54711 Z M1126.29225,1097.53563 C1134.97669,1107.18068 1134.19796,1122.03967 1124.55292,1130.72411 C1114.90787,1139.40855 1100.04888,1138.62982 1091.36444,1128.98477 C1082.68,1119.33973 1083.45873,1104.48074 1093.10378,1095.7963 C1102.74883,1087.11186 1117.60781,1087.89059 1126.29225,1097.53563 Z M355.459726,807.371233 C357.948465,804.368691 361.22023,801.945149 365.120334,800.448039 C368.643528,799.095612 372.291544,798.648122 375.808257,798.991536 L283.191324,549.989677 C280.807686,552.598023 277.797253,554.706473 274.274059,556.058901 C270.373955,557.55601 266.320893,557.944205 262.462307,557.378173 L355.459726,807.371233 Z M399.423163,824.234919 C404.07431,836.351572 398.022322,849.944559 385.90567,854.595706 C373.789017,859.246853 360.19603,853.194865 355.544883,841.078213 C350.893736,828.96156 356.945724,815.368573 369.062376,810.717426 C381.179029,806.066279 394.772016,812.118267 399.423163,824.234919 Z M1062.50622,299.847299 L1082.54479,515.437911 C1078.88821,514.082003 1074.843,513.619036 1070.71686,514.272553 C1066.98947,514.862913 1063.60645,516.299384 1060.7326,518.355146 L1040.86011,303.813182 C1044.22858,304.880257 1047.88991,305.201011 1051.6173,304.610651 C1055.74345,303.957134 1059.4476,302.26679 1062.50622,299.847299 Z M1023.00964,274.211612 C1025.03996,287.030515 1037.07763,295.776393 1049.89653,293.746078 C1062.71543,291.715764 1071.46131,279.678095 1069.43099,266.859192 C1067.40068,254.04029 1055.36301,245.294412 1042.54411,247.324726 C1029.72521,249.355041 1020.97933,261.39271 1023.00964,274.211612 Z M-104.118468,662.013238 C-101.159818,664.554 -98.7937448,667.867563 -97.3649293,671.793201 C-96.0741961,675.339462 -95.6904414,678.994732 -96.0951781,682.504916 L232.534178,545.129262 C229.967829,542.700465 227.912239,539.653692 226.621506,536.107432 C225.192691,532.181793 224.87529,528.122574 225.508578,524.274454 L-104.118468,662.013238 Z M279.928121,494.979333 L364.358286,422.557464 C364.877751,426.422594 366.368084,430.211646 368.882212,433.548008 C371.153373,436.561939 374.009933,438.874586 377.174256,440.446929 L293.592018,512.22984 C292.952791,508.754701 291.517107,505.371347 289.245946,502.357415 C286.731818,499.021054 283.500339,496.54405 279.928121,494.979333 Z M275.835671,541.887963 C265.470427,549.698735 250.735855,547.627926 242.925083,537.262682 C235.114312,526.897438 237.185121,512.162866 247.550365,504.352094 C257.915609,496.541323 272.650181,498.612132 280.460952,508.977376 C288.271724,519.34262 286.200915,534.077192 275.835671,541.887963 Z M260.928121,916.979333 L345.358286,844.557464 C345.877751,848.422594 347.368084,852.211646 349.882212,855.548008 C352.153373,858.561939 355.009933,860.874586 358.174256,862.446929 L274.592018,934.22984 C273.952791,930.754701 272.517107,927.371347 270.245946,924.357415 C267.731818,921.021054 264.500339,918.54405 260.928121,916.979333 Z M256.835671,963.887963 C246.470427,971.698735 231.735855,969.627926 223.925083,959.262682 C216.114312,948.897438 218.185121,934.162866 228.550365,926.352094 C238.915609,918.541323 253.650181,920.612132 261.460952,930.977376 C269.271724,941.34262 267.200915,956.077192 256.835671,963.887963 Z M400.910234,378.637763 L482.2813,240.434721 C484.442554,243.680959 487.443067,246.433217 491.165316,248.329798 C494.527842,250.04309 498.109099,250.86945 501.642444,250.895514 L420.753387,388.152557 C418.655453,385.309341 415.881904,382.897765 412.519378,381.184473 C408.79713,379.287893 404.806848,378.478164 400.910234,378.637763 Z M527.766636,228.258847 C521.874434,239.822946 507.723305,244.420926 496.159206,238.528723 C484.595107,232.636521 479.997127,218.485392 485.88933,206.921293 C491.781532,195.357194 505.932661,190.759214 517.49676,196.651417 C529.060859,202.543619 533.658839,216.694748 527.766636,228.258847 Z M537.542021,228.366319 L758.213671,419.514276 C754.589022,420.953371 751.273065,423.316089 748.64403,426.562676 C746.269069,429.49551 744.716182,432.826697 743.956064,436.277411 L524.109524,245.797615 C527.326794,244.336664 530.262324,242.125118 532.637286,239.192285 C535.26632,235.945698 536.887981,232.210966 537.542021,228.366319 Z M1340.54202,754.366319 L1561.21367,945.514276 C1557.58902,946.953371 1554.27306,949.316089 1551.64403,952.562676 C1549.26907,955.49551 1547.71618,958.826697 1546.95606,962.277411 L1327.10952,771.797615 C1330.32679,770.336664 1333.26232,768.125118 1335.63729,765.192285 C1338.26632,761.945698 1339.88798,758.210966 1340.54202,754.366319 Z M760.66654,466.537155 C750.580203,458.3694 749.024884,443.571534 757.192639,433.485196 C765.360395,423.398858 780.158261,421.84354 790.244599,430.011295 C800.330937,438.17905 801.886255,452.976917 793.7185,463.063254 C785.550744,473.149592 770.752878,474.704911 760.66654,466.537155 Z M808.411989,449.771415 L1052.08702,529.017387 C1048.95834,531.345574 1046.36689,534.486017 1044.66771,538.302424 C1043.13275,541.750009 1042.49495,545.369606 1042.65384,548.899472 L799.948744,470.08534 C802.678266,467.841478 804.941381,464.945518 806.476344,461.497934 C808.175518,457.681527 808.775302,453.654337 808.411989,449.771415 Z M1066.62672,573.803151 C1054.7701,568.524242 1049.43781,554.633146 1054.71672,542.776522 C1059.99563,530.919897 1073.88672,525.587605 1085.74335,530.866515 C1097.59997,536.145424 1102.93226,550.036519 1097.65335,561.893144 C1092.37444,573.749769 1078.48335,579.08206 1066.62672,573.803151 Z M776.002866,481.668076 C772.166385,482.368425 768.102244,482.121917 764.152268,480.761831 C760.584021,479.533185 757.501838,477.531082 755.028622,475.007512 L675.961106,664.902029 C679.463692,664.436093 683.125103,664.755996 686.69335,665.984642 C690.643327,667.344728 693.997679,669.652611 696.589689,672.566468 L776.002866,481.668076 Z M653.241568,690.954183 C657.467016,678.682589 670.840512,672.159899 683.112106,676.385348 C695.3837,680.610797 701.906389,693.984292 697.680941,706.255886 C693.455492,718.52748 680.081996,725.05017 667.810402,720.824721 C655.538808,716.599272 649.016119,703.225777 653.241568,690.954183 Z M240.002866,977.668076 C236.166385,978.368425 232.102244,978.121917 228.152268,976.761831 C224.584021,975.533185 221.501838,973.531082 219.028622,971.007512 L139.961106,1160.90203 C143.463692,1160.43609 147.125103,1160.756 150.69335,1161.98464 C154.643327,1163.34473 157.997679,1165.65261 160.589689,1168.56647 L240.002866,977.668076 Z M117.241568,1186.95418 C113.016119,1199.22578 119.538808,1212.59927 131.810402,1216.82472 C144.081996,1221.05017 157.455492,1214.52748 161.680941,1202.25589 C165.906389,1189.98429 159.3837,1176.6108 147.112106,1172.38535 C134.840512,1168.1599 121.467016,1174.68259 117.241568,1186.95418 Z M497.365184,183.09594 C500.997545,181.676422 505.034052,181.142927 509.170973,181.724334 C512.908098,182.249552 516.315672,183.626763 519.224968,185.632055 L496.159206,-113.436003 C492.809878,-112.310302 489.154697,-111.925697 485.417572,-112.450916 C481.280651,-113.032322 477.547562,-114.657763 474.447185,-117.023505 L497.365184,183.09594 Z M1578.21072,483.426252 C1577.64469,479.567666 1578.03289,475.514604 1579.53,471.6145 C1580.88242,468.091306 1582.99087,465.080873 1585.59922,462.697234 L1366.263,378.501948 C1366.60642,382.018661 1366.15893,385.666678 1364.8065,389.189872 C1363.30939,393.089976 1360.88585,396.361741 1357.8833,398.85048 L1578.21072,483.426252 Z M1620.16017,462.039059 C1608.04351,457.387912 1594.45053,463.4399 1589.79938,475.556553 C1585.14823,487.673205 1591.20022,501.266192 1603.31687,505.91734 C1615.43352,510.568487 1629.02651,504.516499 1633.67766,492.399846 C1638.32881,480.283194 1632.27682,466.690207 1620.16017,462.039059 Z"></path> <rect id="mask" class="full-size" x="0" y="0" width="300" height="300" fill="url(#radGrad)"></rect> </svg> <div id="front"> <nav><ul> <li><a id="tuts-a" href="#tutorials">Tutorials</a></li> <li><a id="api-a" href="#API">API</a></li> <li><a id="abt-a" href="#about">About</a></li> <li><a target="_blank" href="https://github.com/chinedufn/skeletal-animation-system"> <svg width="25px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.58 31.77"><path class='mark' d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.81.15,1.11-.35,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.31,4.31,0,0,0-1.81-2.38c-1.48-1,.11-1,.11-1a3.42,3.42,0,0,1,2.5,1.68,3.47,3.47,0,0,0,4.74,1.35,3.48,3.48,0,0,1,1-2.18C9.7,23.08,5.9,21.68,5.9,15.44a6.3,6.3,0,0,1,1.68-4.37,5.86,5.86,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.44,15.44,0,0,1,8.16,0c3.11-2.11,4.48-1.67,4.48-1.67A5.85,5.85,0,0,1,25,11.07a6.29,6.29,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.89,3.89,0,0,1,1.11,3c0,2.18,0,3.93,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z" fill="#191717" fill-rule="evenodd"/></svg> </a></li> <li><a target="_blank" href="https://twitter.com/chinedufn"> <svg width="27px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 203.14"><title>twitter-mark</title><path class="mark" d="M78.62,203.14C173,203.14,224.56,125,224.56,57.2c0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,250,24a102.38,102.38,0,0,1-29.46,8.07A51.47,51.47,0,0,0,243.09,3.72a102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,17.4,9.36,51.33,51.33,0,0,0,33.28,77.83,50.91,50.91,0,0,1,10,71.41v.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,0,180.1a145.21,145.21,0,0,0,78.62,23"/></svg> </a></li> </ul></nav> <div id="hero"> <h1>Skeletal-Animation-System</h1> <h2>A standalone, stateless, dual quaternion based skeletal animation system built with interactive applications in mind.</h2> <a href="#get-started"><button id="get-started-btn">GET STARTED</button></a> <button id="demo-btn">DEMO <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.4 15.19"><title>arrow</title><path d="M30.7,15.19a1,1,0,0,1-.4-.08L.58,1.86A1,1,0,0,1,1.37.08L30.7,13.15,60,.08a1,1,0,0,1,.79,1.78L31.1,15.1A1,1,0,0,1,30.7,15.19Z" fill="#ff659b"/></svg> </div> <div id="demo">  <div id="canvas"> <img src="character.png" alt="placeholder"> </div> <ul id="demo-ctrls"> <li> <input class="toggle" type="checkbox" name="walk-btn" id="walk-btn" /> <label class="lbl" id="walk-lbl" for="walk-btn"><svg id="walk-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.3 49.4"> <path id="walk-path" d="M17.2,2.2c1.6,0,3,1.1,3.4,2.7c0.4,1.9-0.8,3.7-2.6,4.2c-0.3,0.1-0.5,0.1-0.8,0.1c-1.6,0-3-1.1-3.4-2.7 c-0.4-1.9,0.8-3.8,2.7-4.2C16.7,2.2,16.9,2.2,17.2,2.2 M13.8,10.5c1.6,0,3.1,0.6,4.3,1.7l3.4,6.8l3.7,3.2c0.8,0.7,1.1,1.6,0.4,2.5 c-0.3,0.4-0.6,0.5-0.9,0.5c-0.4,0-0.9-0.2-1.3-0.5l-4-2.8c-0.7-0.4-2.2-3.5-2.2-3.5l-1,6.6c-0.1,0.5,0,0.9,0.2,1.3l5.2,8.3l0.9,11 c0.1,0.7-0.3,1.4-1,1.6c-0.1,0-0.2,0-0.3,0c-0.6,0-1.1-0.4-1.3-1v0l-1.9-10.4l-4.6-5.6l-2.7,7.2l-5.8,9.3c-0.3,0.3-0.7,0.5-1.1,0.5 c-0.2,0-0.4,0-0.6-0.1c-0.6-0.3-0.9-1.1-0.6-1.8l4.5-9.3l2.2-7.8C9.4,27.4,9,25.4,9,23.6c0-1.8,1-7.4,1-7.4L6.9,19l-2.1,6.6 c-0.2,0.6-0.7,1-1.3,1c-0.1,0-0.3,0-0.4-0.1c-0.7-0.2-1.1-0.9-1-1.6l1.3-7c0-0.8,0.4-1.5,1-2.1l7-5C12.2,10.6,13,10.5,13.8,10.5 M17.2,0.2c-0.3,0-0.7,0-1,0.1c-3,0.6-4.9,3.6-4.3,6.5c0.1,0.6,0.4,1.2,0.7,1.7c-0.6,0.1-1.3,0.3-1.9,0.5c-0.1,0.1-0.3,0.1-0.4,0.2 l-7,5c0,0-0.1,0.1-0.1,0.1c-1,0.8-1.6,2.1-1.7,3.4l-1.2,6.9c-0.3,1.7,0.7,3.3,2.3,3.8c0.3,0.1,0.6,0.1,1,0.1c1.5,0,2.8-0.9,3.2-2.3 l0.3-1c0,0.4,0.1,0.8,0.1,1.2c0,0.4,0.1,0.9,0.1,1.2l-2.1,7.5l-4.4,9.1c0,0,0,0,0,0.1c-0.7,1.6,0,3.5,1.5,4.4 c0.5,0.2,1,0.4,1.5,0.4c1,0,2-0.4,2.6-1.2c0.1-0.1,0.1-0.1,0.2-0.2l5.8-9.3c0.1-0.1,0.1-0.2,0.2-0.4l1.5-4l2.1,2.5l1.8,9.8 c0,0.1,0,0.2,0.1,0.3c0.4,1.5,1.7,2.5,3.2,2.5c0.3,0,0.5,0,0.8-0.1c1.7-0.4,2.8-2,2.5-3.8l-0.9-10.9c0-0.3-0.1-0.6-0.3-0.9 l-5.2-8.3c0,0,0,0,0,0l0.2-1.6l3.8,2.7c0,0,0.1,0,0.1,0.1c0.6,0.4,1.4,0.8,2.3,0.8c1,0,1.8-0.4,2.5-1.2c1.3-1.6,1-3.8-0.7-5.2 l-3.4-2.9l-3.2-6.4c-0.1-0.2-0.2-0.4-0.4-0.6c0,0-0.1-0.1-0.1-0.1c2.3-1,3.7-3.6,3.1-6.2C21.9,2,19.7,0.2,17.2,0.2L17.2,0.2z"/> </svg> </label> </li> <input class="toggle" type="checkbox" name="wave-btn" id="wave-btn" /> <label class="lbl" id="wave-lbl" for="wave-btn"><svg id="wave-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 53.5"> <path id="wave-path" d="M29.5,3.7c0.4,0,0.7,0.1,1.1,0.3c1.4,0.8,1.3,2.4,0.5,3.8c0,0-6.4,12.1-6.9,13.3c-0.3,0.8,0,1.2,0.4,1.2 c0.2,0,0.5-0.2,0.8-0.5C26.2,20.8,36,7.3,36,7.3c0.6-0.9,1.4-1.5,2.3-1.5c0.4,0,0.8,0.1,1.2,0.4c1.3,0.9,1.1,2.5,0.2,3.8 c0,0-9.6,14.2-10,14.8c-0.4,0.6-0.3,1.1,0.1,1.1c0.2,0,0.5-0.1,0.9-0.4c1.3-0.9,10.4-12,10.4-12c0.7-0.7,1.5-1.2,2.3-1.2 c0.6,0,1.1,0.2,1.6,0.6c1.2,1.1,0.6,2.6-0.5,3.8c0,0-9.6,12-10,12.5c-0.3,0.4-0.2,1.5,0.6,1.5c0.2,0,0.4-0.1,0.7-0.2l6.5-5.5 c0.7-0.7,1.8-1.1,2.7-1.1c0.6,0,1.2,0.2,1.6,0.5c0.7,0.4-0.1,2-0.3,2c-1,0.9-9,9.1-10.9,12C29.7,46.7,25,49.9,20.3,49.9 c-2.6,0-5.2-1-8-2.6C8,45,5.2,40.6,5,35.7C4.7,31.3,5.1,28.2,3.5,21c-0.6-2.9-1-5.7,0.8-5.7c0.3,0,0.8,0.1,1.3,0.3 c2.1,0.9,3.5,3,3.7,5.3c0.1,2.7,1.4,5.8,3,6.5c0.1,0,0.2,0.1,0.3,0.1c1.8,0,4.9-5.5,6.1-7.8c1.2-2.3,8.4-14.2,8.4-14.2 C27.7,4.4,28.6,3.7,29.5,3.7 M29.5,1.2L29.5,1.2c-1.8,0-3.5,1.1-4.6,2.9c-0.3,0.5-7.2,12-8.5,14.3c-1.7,3.2-3,5-3.7,5.9 c-0.4-0.8-0.9-2.1-1-3.6c-0.2-3.3-2.2-6.1-5.2-7.4C5.8,13,5,12.8,4.3,12.8c-1.1,0-2.1,0.5-2.8,1.3c-1.3,1.6-1.1,3.9-0.4,7.4 c1.1,5.1,1.2,8,1.3,11c0,1.1,0.1,2.2,0.1,3.3C2.7,41.5,6,46.8,11,49.5c3.5,2,6.4,2.9,9.3,2.9c5.8,0,11.2-3.9,17.2-12.6 c1.7-2.6,9-10.1,10.4-11.4c1-0.7,1.5-2.1,1.6-2.9c0.2-1.3-0.4-2.6-1.4-3.2c-0.9-0.6-1.9-0.9-3-0.9c-0.3,0-0.7,0-1,0.1 c1.2-1.5,2.2-2.7,2.5-3.1c1.2-1.4,1.8-2.8,1.8-4.2c-0.1-1.2-0.6-2.2-1.5-3c-0.9-0.8-2-1.3-3.2-1.3c-0.3,0-0.7,0-1,0.1 c0.3-0.7,0.4-1.3,0.4-2c0-1.5-0.7-2.9-2-3.8c-0.8-0.6-1.7-0.8-2.6-0.8c-1.6,0-3,0.8-4.2,2.3c0,0,0,0,0,0c-0.1-1.5-0.9-2.8-2.3-3.6 C31.1,1.5,30.3,1.2,29.5,1.2L29.5,1.2z"/> </svg></label> </ul> </div> </div> <div id="content"> <br> <div id="shim"></div> <div id="abt"></div> <h3>Introduction</h3>  <p>skeletal-animation-system aims to give the user a flexible module for managing skeletal animations across different 3d models and bone groups.</p> <p><code>skeletal-animation-system</code> aims to provide a sane API for starting, stopping and interpolating skeletal animations.</p> <p>It supports blending between your previous and current animation when you switch animations. It also supports splitting your model into different bone groups such as the upper and lower body, allowing you to, for example, play a walking animation for your legs while playing a punch animation for your upper body.</p> <p><code>skeletal-animation-system</code> does not maintain an internal state, but instead lets the modules consumer track things such as the current animation and the current clock time.</p> <h3 id="toc_1">I use matrices and not dual quaternions</h3> <p>The first versions of <code>skeletal-animation-system</code> uses matrices instead of dual quaternions.</p> <p>The issue there was that <a href="http://chinedufn.com/dual-quaternion-shader-explained/">blending matrices can lead to unexpected artifacts</a>.</p> <p>So we switched to dual quaternions and completely dropped support for matrices.</p> <p>However, if you use matrices you can still make use of <code>skeletal-animation-system</code>.</p> <ol> <li><a href="https://github.com/chinedufn/mat4-to-dual-quat">Convert your matrices into dual quaternions</a> once when you first load your model.</li> <li>Use <code>skeletal-animation-system</code> to determine your pose dual quaternions</li> <li><a href="https://github.com/chinedufn/dual-quat-to-mat4">Convert your pose dual quaternions back into matrices before each render</a></li> <li>Use your newly created matrices for skinning</li> </ol> <p>The 3rd step here means that you're doing some extra work on the CPU, but this hopefully bridges the gap for you until you can move to dual quaternion based skinning.</p> <p>This API is still experimental and will evolve as we use it and realize the kinks.</p> <h3 id="toc_2">To Install</h3> <div><pre><code class="language-javascript">$ npm install --save skeletal-animation-system</code></pre></div> <h3 id="toc_3">Usage</h3> <div><pre><code class="language-javascript">var animationSystem = require('skeletal-animation-system') // Parsed using collada-dae-parser or some other parser var parsedColladaModel = require('./parsed-collada-model.json') // Keyframe data for all joints. // @see `github.com/chinedufn/blender-actions-to-json` for an example format var lowerBodyKeyframes = {...} var upperBodyKey = {...} // Convert our joint names into their associated joint index number // This number comes from collada-dae-parser // (or your parser of choice) var upperBodyJointNums = [0, 1, 5, 6, 8] var lowerBodyJointNums = [2, 3, 4, 7, 9] // Our options for animating our model's upper body var upperBodyOptions = { currentTime: 28.24, jointNums: upperBodyJointsNums, blendFunction: function (dt) { // Blend animations linearly over 2.5 seconds return 1 / 2.5 * dt }, currentAnimation: { keyframes: currentAnimKeyframes, startTime: 25 }, previousAnimation: { keyframes: previousAnimKeyframes, startTime: 24.5 } } // Our options for animating our model's lower body var lowerBodyOptions = { currentTime: 28.24, jointNums: lowerBodyJointNums, currentAnimation: { keyframes: currentAnimKeyframes, startTime: 24.3, noLoop: true } } var interpolatedUpperBodyJoints = animationSystem .interpolateJoints(upperBodyOptions).joints var lowerBodyData = animationSystem .interpolateJoints(lowerBodyOptions) var interpolatedLowerBodyJoints = lowerBodyData.joints console.log(lowerBodyData.currentAnimationInfo) // => {lowerKeyframeNumber: 5, upperKeyframeNumber: 6} // You now have your interpolated upper and lower body dual quaternions (joints). // You can pass these into any vertex shader that // works with dual quaternions // If you're just getting started and you still need matrices you // can convert these into matrices using dual-quat-to-mat4 // @see https://github.com/chinedufn/dual-quat-to-mat4</code></pre></div> <div id="tuts"></div> <h3>Tutorials</h3> <p><a href="http://chinedufn.com/webgl-skeletal-animation-sound-effect-tutorial/">WebGL Skeletal Animation Sound Effects Tutorial</a></p> <p><a href="http://chinedufn.com/attaching-objects-to-bones/">Attaching objects to bones</a></p> <p><a href="http://chinedufn.com/webgl-skeletal-animation-tutorial">WebGL Skeletal Animation Tutorial</a></p> <div id="ap"></div> <h3>API</h3> <h3 id="toc_6"><code>animationSystem.interpolateJoints( options )</code> -> <code>Object</code></h3> <h4 id="toc_7">options</h4> <p><em>Optional</em></p> <p>Type: <code>object</code></p> <div><pre><code class="language-javascript">// Example overrides var myOptions = { // TODO: } interpolatedJoints = animationSystem.interpolateJoints(myOptions)</code></pre></div> <h4 id="toc_8">currentTime</h4> <p>Type: <code>Number</code></p> <p>Default: <code>0</code></p> <p>The current number of seconds elapsed. If you have an animation an loop, this will typically be the sum of all of your loops time deltas</p> <div><pre><code class="language-javascript">// Example of tracking current time var currentTime = 0 function animationLoop (dt) { currentTime += dt }</code></pre></div> <h4 id="toc_9">keyframes</h4> <p>Type: <code>Object</code></p> <p>Default: <code>{}</code></p> <h4 id="toc_10">jointNums</h4> <p>Type: <code>Array</code></p> <p>An array of joint indices that you would like to interpolate.</p> <p>Say your model has 4 joints. To interpolate the entire model you would pass in [0, 1, 2, 3]. To only interpolate two of the joints you might pass in [0, 2], or any desired combination.</p> <p>These joint indices are based on the order of the joints in your <code>keyframes</code></p> <h4 id="toc_11">blendFunction</h4> <p>Type: <code>Function</code></p> <p>Default: <code>Blend linearly over 0.2 seconds</code></p> <p>A function that accepts a time elapsed in seconds and returns a value between <code>0</code> and <code>1</code>.</p> <p>This returned value represents the weight of the new animation.</p> <div><pre><code class="language-javascript">function myBlendFunction (dt) { // Blend the old animation into the new one linearly over 5 seconds return 0.2 * dt) }</code></pre></div> <h4 id="toc_12">currentAnimation</h4> <p>Type: <code>Object</code></p> <p>An object containing parameters for the current animation</p> <p>If you supply a previous animation your current animation will be blended in using your <code>blendFunction</code></p> <div><pre><code class="language-javascript">var currentAnimation = { keyframes: {0: [..], 1.66666: [...]} startTime: 10 }</code></pre></div> <h5 id="toc_13">currentAnimation.keyframes</h5> <p>Type: <code>Array</code></p> <div><pre><code class="language-javascript">{ "0": [ [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] ], "1.33333": [ [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 2, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 2, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 5, 1] ] }</code></pre></div> <p>Pose matrices for each joint in the model, organized by the animation time (<code>0</code> and <code>1.33333</code> are seconds)</p> <h5 id="toc_14">currentAnimation.startTime</h5> <p>Type: <code>Number</code></p> <p>The time in seconds that your current animation was initiated. This gets compared with the <code>currentTime</code> in order to interpolate your joint data appropriately.</p> <h5 id="toc_15">currentAnimation.noLoop</h5> <p>Type: <code>Boolean</code></p> <p>Whether or not your animation should loop. For example, let's say you are 13 seconds into a 4 second animation.</p> <p>If <code>noLoop === true</code> then you will be playing the frame at the 4th second.</p> <p>If <code>noLoop === false</code> then you will be playing the frame at the 1st second.</p> <h4 id="toc_16">previousAnimation</h4> <p>An object containing parameters for the previous animations. Your previous animation gets blended out using your <code>blendFunction</code> while your current animation gets blended in.</p> <p>Type: <code>Object</code></p> <h5 id="toc_17">previousAnimation.keyframes</h5> <p>Type: <code>Array</code></p> <div><pre><code class="language-javascript">{ "0": [ [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] ], "1.33333": [ [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 2, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 2, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 5, 1] ] }</code></pre></div> <p>Pose matrices for each joint in the model, organized by the animation time (<code>0</code> and <code>1.33333</code> are seconds)</p> <h5 id="toc_18">previousAnimation.startTime</h5> <p>Type: <code>Number</code></p> <p>The time in seconds that your previous animation was initiated. This is used in order to blend in the current animation.</p> <h3 id="toc_19">Returned data</h3> <div><pre><code class="language-javascript">// Example { joints: [...], currentAnimationInfo: { lowerKeyframeNumber: 0, upperKeyframeNumber:: 1 } }</code></pre></div> <h3 id="toc_20">See Also</h3> <ul> <li><a href="https://github.com/chinedufn/collada-dae-parser">collada-dae-parser</a></li> <li><a href="https://github.com/chinedufn/blender-iks-to-fks">blender-iks-to-fks</a></li> <li><a href="https://github.com/chinedufn/blender-actions-to-json">blender-actions-to-json</a></li> </ul> <h3 id="toc_21">References</h3> <ul> <li><a href="http://blog.demofox.org/2012/09/21/anatomy-of-a-skeletal-animation-system-part-1/">Anatomy of a skeletal animation system part 1</a>, <a href="http://blog.demofox.org/2012/09/21/anatomy-of-a-skeletal-animation-system-part-2/">part 2</a> and <a href="http://blog.demofox.org/2012/09/21/anatomy-of-a-skeletal-animation-system-part-3/">part 3</a></li> <li><a href="http://www.xbdev.net/misc_demos/demos/dual_quaternions_beyond/paper.pdf">Dual-Quaternions - From Classical Mechanics to Computer Graphics and Beyond</a> </ul> <h3 id="toc_22">License</h3> <p>MIT</p> <br> <br> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script> <script src="main.js"></script> </body> </html>