├── .babelrc ├── .browserslistrc ├── .editorconfig ├── .eslintrc ├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src ├── bitmap-fonts │ ├── desyrel.png │ └── desyrel.xml ├── css │ └── style.css ├── images │ ├── bunny1.png │ ├── bunny10.png │ ├── bunny11.png │ ├── bunny12.png │ ├── bunny2.png │ ├── bunny3.png │ ├── bunny4.png │ ├── bunny5.png │ ├── bunny6.png │ ├── bunny7.png │ ├── bunny8.png │ └── bunny9.png ├── js │ ├── SceneController.js │ ├── index.js │ ├── loadScript.js │ ├── phaser2 │ │ ├── App.js │ │ ├── load.js │ │ ├── scenes.js │ │ └── scenes │ │ │ ├── BitmapTextCounting.js │ │ │ ├── BitmapTextStatic.js │ │ │ ├── CanvasTextCounting.js │ │ │ ├── CanvasTextStatic.js │ │ │ ├── GraphicsComplex.js │ │ │ ├── GraphicsSimple.js │ │ │ ├── IScene.js │ │ │ ├── SpritesAndGraphics.js │ │ │ ├── SpritesMultipleTextures.js │ │ │ ├── SpritesSingleTexture.js │ │ │ └── Spritesheet.js │ ├── phaser3 │ │ ├── App.js │ │ ├── load.js │ │ ├── scenes.js │ │ └── scenes │ │ │ ├── BitmapTextCounting.js │ │ │ ├── BitmapTextStatic.js │ │ │ ├── CanvasTextCounting.js │ │ │ ├── CanvasTextStatic.js │ │ │ ├── GraphicsComplex.js │ │ │ ├── GraphicsSimple.js │ │ │ ├── IScene.js │ │ │ ├── SpritesAndGraphics.js │ │ │ ├── SpritesMultipleTextures.js │ │ │ ├── SpritesSingleTexture.js │ │ │ └── Spritesheet.js │ ├── pixi │ │ ├── App.js │ │ ├── load.js │ │ ├── scenes.js │ │ └── scenes │ │ │ ├── BitmapTextCounting.js │ │ │ ├── BitmapTextStatic.js │ │ │ ├── CanvasTextCounting.js │ │ │ ├── CanvasTextStatic.js │ │ │ ├── GraphicsComplex.js │ │ │ ├── GraphicsSimple.js │ │ │ ├── IScene.js │ │ │ ├── SpritesAndGraphics.js │ │ │ ├── SpritesMultipleTextures.js │ │ │ ├── SpritesSingleTexture.js │ │ │ └── Spritesheet.js │ └── storage.js ├── spritesheets │ ├── bunnies.json │ └── bunnies.png └── vendor │ ├── polyfill-append.js │ ├── polyfill-fixedSeedRandom.js │ ├── polyfill-phaser2.js │ ├── polyfill-pixi.js │ └── stats.js ├── typedefs └── pixi.js.d.ts ├── webpack.common.js ├── webpack.dev.js └── webpack.prod.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry", 7 | "corejs": 3, 8 | } 9 | ] 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | defaults 2 | IE 11 3 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs. 2 | # More information at http://EditorConfig.org 3 | root = true 4 | 5 | [*] 6 | end_of_line = lf 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | indent_style = tab 10 | 11 | [{package.json,bower.json,.travis.yml}] 12 | indent_style = space 13 | indent_size = 2 14 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint:recommended", 3 | "env": { 4 | "browser": true, 5 | "node": true, 6 | "es6": true 7 | }, 8 | "parserOptions": { 9 | "ecmaVersion": 6, 10 | "sourceType": "module" 11 | }, 12 | "globals": { 13 | "PIXI": true, 14 | "Phaser": true 15 | }, 16 | "rules": { 17 | "no-console": "off", 18 | "strict": [ 19 | "error", 20 | "global" 21 | ], 22 | "curly": "warn" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js text eol=lf 2 | *.json text eol=lf 3 | *.yml text eol=lf 4 | *.md text eol=lf 5 | *.txt text eol=lf 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | .idea 5 | .vscode 6 | npm-debug.log -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Dave Moore 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # webgl-benchmark 2 | > Benchmark WebGL performance using different JavaScript rendering/game engines, such as Pixi and Phaser 3 | 4 | https://themoonrat.github.io/webgl-benchmark/ 5 | 6 | ## Background 7 | 8 | There are 2 common questions when developing contents using WebGL 9 | 1. Which library should I choose? 10 | 2. What is the most efficient way to construct a scene to be rendered? 11 | 12 | Question number 1 is impossible to answer, as there are many questions and considerations outside of pure rendering performance. But this project does allow you to make a like-for-like performance comparison across scenes that are set up to be as similar as possible. 13 | 14 | Question number 2 can be helped with this project by comparing scenes within the same engine, and discovering what is most efficient. 15 | 16 | Libraries currently covered are Pixi, Phaser 2 and Phaser 3. 17 | 18 | Scenes covered range from testing raw sprite rendering performance, to testing graphics & shapes rendering performance. 19 | 20 | ## Usage 21 | 22 | You can find the latest build at https://themoonrat.github.io/webgl-benchmark/ 23 | 24 | You can also clone this repo and run `npm run start` for a development build, or `npm run build` for a production build. 25 | 26 | There are 4 options you can change 27 | * Library: Switch between different rendering libraries. This will refresh the browser, as it cannot be changed on the fly. 28 | * Version: Switch between different versions of the currently selected rendering library. This too will refresh the browser. 29 | * Scene: Switch between different 'scenes' on the fly. Each scene stress tests a different aspect of the rendering library and the ability of the hardware you are running. 30 | * ObjectCount: Change how many objects are currently being rendered at once. Some libraries are quicker at adding / removing objects than others, so be patient, especially at the very high end. 31 | 32 | ## License 33 | 34 | MIT 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webgl-benchmark", 3 | "version": "1.5.0", 4 | "description": "Benchmark WebGL performance using different JavaScript rendering/game engines, such as Pixi and Phaser.", 5 | "keywords": [ 6 | "WebGL", 7 | "Pixi", 8 | "Pixijs", 9 | "Phaser", 10 | "Benchmark" 11 | ], 12 | "author": "Dave Moore", 13 | "license": "MIT", 14 | "private": false, 15 | "scripts": { 16 | "test": "echo \"Error: no test specified\" && exit 1", 17 | "build": "webpack --config webpack.prod.js --progress --profile", 18 | "dev": "webpack --config webpack.dev.js --progress --profile", 19 | "start": "webpack-dev-server --config webpack.dev.js --progress --profile" 20 | }, 21 | "main": "src/js/index.js", 22 | "repository": { 23 | "type": "git", 24 | "url": "git+https://github.com/themoonrat/webgl-benchmark.git" 25 | }, 26 | "bugs": { 27 | "url": "https://github.com/themoonrat/webgl-benchmark/issues" 28 | }, 29 | "homepage": "https://github.com/themoonrat/webgl-benchmark#readme", 30 | "devDependencies": { 31 | "@babel/core": "^7.16.5", 32 | "@babel/preset-env": "^7.16.5", 33 | "babel-loader": "^8.2.3", 34 | "clean-webpack-plugin": "^4.0.0", 35 | "copy-webpack-plugin": "^10.2.0", 36 | "css-loader": "^6.5.1", 37 | "eslint": "^8.5.0", 38 | "file-loader": "^6.2.0", 39 | "html-webpack-plugin": "^5.5.0", 40 | "mini-css-extract-plugin": "^2.4.5", 41 | "style-loader": "^3.3.1", 42 | "webpack": "^5.65.0", 43 | "webpack-cli": "^4.9.1", 44 | "webpack-dev-server": "^4.7.1", 45 | "webpack-merge": "^5.8.0", 46 | "write-file-webpack-plugin": "^4.5.1" 47 | }, 48 | "dependencies": { 49 | "core-js": "^3.20.1", 50 | "dat.gui": "^0.7.7", 51 | "keyboardevent-key-polyfill": "^1.1.0", 52 | "normalize.css": "^8.0.1", 53 | "regenerator-runtime": "^0.13.9", 54 | "url-search-params-polyfill": "^8.1.1" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/bitmap-fonts/desyrel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/bitmap-fonts/desyrel.png -------------------------------------------------------------------------------- /src/bitmap-fonts/desyrel.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | 708 | 709 | 710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 | 747 | 748 | 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | 813 | 814 | 815 | 816 | 817 | 818 | 819 | 820 | 821 | 822 | 823 | 824 | 825 | 826 | 827 | 828 | 829 | 830 | 831 | 832 | 833 | 834 | 835 | 836 | 837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 | 845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 | 859 | 860 | 861 | 862 | 863 | 864 | 865 | 866 | 867 | 868 | 869 | 870 | 871 | 872 | 873 | 874 | 875 | 876 | 877 | 878 | 879 | 880 | 881 | 882 | 883 | 884 | 885 | 886 | 887 | 888 | 889 | 890 | 891 | 892 | 893 | 894 | 895 | 896 | 897 | 898 | 899 | 900 | 901 | 902 | 903 | 904 | 905 | 906 | 907 | 908 | 909 | 910 | 911 | 912 | 913 | 914 | 915 | 916 | 917 | 918 | 919 | 920 | 921 | 922 | 923 | 924 | 925 | 926 | 927 | 928 | 929 | 930 | 931 | 932 | 933 | 934 | 935 | 936 | 937 | 938 | 939 | 940 | 941 | 942 | 943 | 944 | 945 | 946 | 947 | 948 | 949 | 950 | 951 | 952 | 953 | 954 | 955 | 956 | 957 | 958 | 959 | 960 | 961 | 962 | 963 | 964 | 965 | 966 | 967 | 968 | 969 | 970 | 971 | 972 | 973 | 974 | 975 | 976 | 977 | 978 | 979 | 980 | 981 | 982 | 983 | 984 | 985 | 986 | 987 | 988 | 989 | 990 | 991 | 992 | 993 | 994 | 995 | 996 | 997 | 998 | 999 | 1000 | 1001 | 1002 | 1003 | 1004 | 1005 | 1006 | 1007 | 1008 | 1009 | 1010 | 1011 | 1012 | 1013 | 1014 | 1015 | 1016 | 1017 | 1018 | 1019 | 1020 | 1021 | 1022 | 1023 | 1024 | 1025 | 1026 | 1027 | 1028 | 1029 | 1030 | 1031 | 1032 | 1033 | 1034 | 1035 | 1036 | 1037 | 1038 | 1039 | 1040 | 1041 | 1042 | 1043 | 1044 | 1045 | 1046 | 1047 | 1048 | 1049 | 1050 | 1051 | 1052 | 1053 | 1054 | 1055 | 1056 | 1057 | 1058 | 1059 | 1060 | 1061 | 1062 | 1063 | 1064 | 1065 | 1066 | 1067 | 1068 | 1069 | 1070 | 1071 | 1072 | 1073 | 1074 | 1075 | 1076 | 1077 | 1078 | 1079 | 1080 | 1081 | 1082 | 1083 | 1084 | 1085 | 1086 | 1087 | 1088 | 1089 | 1090 | 1091 | 1092 | 1093 | 1094 | 1095 | 1096 | 1097 | 1098 | 1099 | 1100 | 1101 | 1102 | 1103 | 1104 | 1105 | 1106 | 1107 | 1108 | 1109 | 1110 | 1111 | 1112 | 1113 | 1114 | 1115 | 1116 | 1117 | 1118 | 1119 | 1120 | 1121 | 1122 | 1123 | 1124 | 1125 | 1126 | 1127 | 1128 | 1129 | 1130 | 1131 | 1132 | 1133 | 1134 | 1135 | 1136 | 1137 | 1138 | 1139 | 1140 | 1141 | 1142 | 1143 | 1144 | 1145 | 1146 | 1147 | 1148 | 1149 | 1150 | 1151 | 1152 | 1153 | 1154 | 1155 | 1156 | 1157 | 1158 | 1159 | 1160 | 1161 | 1162 | 1163 | 1164 | 1165 | 1166 | 1167 | 1168 | 1169 | 1170 | 1171 | 1172 | 1173 | 1174 | 1175 | 1176 | 1177 | 1178 | 1179 | 1180 | 1181 | 1182 | 1183 | 1184 | 1185 | 1186 | 1187 | 1188 | 1189 | 1190 | 1191 | 1192 | 1193 | 1194 | 1195 | 1196 | 1197 | 1198 | 1199 | 1200 | 1201 | 1202 | 1203 | 1204 | 1205 | 1206 | 1207 | 1208 | 1209 | 1210 | 1211 | 1212 | 1213 | 1214 | 1215 | 1216 | 1217 | 1218 | 1219 | 1220 | 1221 | 1222 | 1223 | 1224 | 1225 | 1226 | 1227 | 1228 | 1229 | 1230 | 1231 | 1232 | 1233 | 1234 | 1235 | 1236 | 1237 | 1238 | 1239 | 1240 | 1241 | 1242 | 1243 | 1244 | 1245 | 1246 | 1247 | 1248 | 1249 | 1250 | 1251 | 1252 | 1253 | 1254 | 1255 | 1256 | 1257 | 1258 | 1259 | 1260 | 1261 | 1262 | 1263 | 1264 | 1265 | 1266 | 1267 | 1268 | 1269 | 1270 | 1271 | 1272 | 1273 | 1274 | 1275 | 1276 | 1277 | 1278 | 1279 | 1280 | 1281 | 1282 | 1283 | 1284 | 1285 | 1286 | 1287 | 1288 | 1289 | 1290 | 1291 | 1292 | 1293 | 1294 | 1295 | 1296 | 1297 | 1298 | 1299 | 1300 | 1301 | 1302 | 1303 | 1304 | 1305 | 1306 | 1307 | 1308 | 1309 | 1310 | 1311 | 1312 | 1313 | 1314 | 1315 | 1316 | 1317 | 1318 | 1319 | 1320 | 1321 | 1322 | 1323 | 1324 | 1325 | 1326 | 1327 | 1328 | 1329 | 1330 | 1331 | 1332 | 1333 | 1334 | 1335 | 1336 | 1337 | 1338 | 1339 | 1340 | 1341 | 1342 | 1343 | 1344 | 1345 | 1346 | 1347 | 1348 | 1349 | 1350 | 1351 | 1352 | 1353 | 1354 | 1355 | 1356 | 1357 | 1358 | 1359 | 1360 | 1361 | 1362 | 1363 | 1364 | 1365 | 1366 | 1367 | 1368 | 1369 | 1370 | 1371 | 1372 | 1373 | 1374 | 1375 | 1376 | 1377 | 1378 | 1379 | 1380 | 1381 | 1382 | 1383 | 1384 | 1385 | 1386 | 1387 | 1388 | 1389 | 1390 | 1391 | 1392 | 1393 | 1394 | 1395 | 1396 | 1397 | 1398 | 1399 | 1400 | 1401 | 1402 | 1403 | 1404 | 1405 | 1406 | 1407 | 1408 | 1409 | 1410 | 1411 | 1412 | 1413 | 1414 | 1415 | 1416 | 1417 | 1418 | 1419 | 1420 | 1421 | 1422 | 1423 | 1424 | 1425 | 1426 | 1427 | 1428 | 1429 | 1430 | 1431 | 1432 | 1433 | 1434 | 1435 | 1436 | 1437 | 1438 | 1439 | 1440 | 1441 | 1442 | 1443 | 1444 | 1445 | 1446 | 1447 | 1448 | 1449 | 1450 | 1451 | 1452 | 1453 | 1454 | 1455 | 1456 | 1457 | 1458 | 1459 | 1460 | 1461 | 1462 | 1463 | 1464 | 1465 | 1466 | 1467 | 1468 | 1469 | 1470 | 1471 | 1472 | 1473 | 1474 | 1475 | 1476 | 1477 | 1478 | 1479 | 1480 | 1481 | 1482 | 1483 | 1484 | 1485 | 1486 | 1487 | 1488 | 1489 | 1490 | 1491 | 1492 | 1493 | 1494 | 1495 | 1496 | 1497 | 1498 | 1499 | 1500 | 1501 | 1502 | 1503 | 1504 | 1505 | 1506 | 1507 | 1508 | 1509 | 1510 | 1511 | 1512 | 1513 | 1514 | 1515 | 1516 | 1517 | 1518 | 1519 | 1520 | 1521 | 1522 | 1523 | 1524 | 1525 | 1526 | 1527 | 1528 | 1529 | 1530 | 1531 | 1532 | 1533 | 1534 | 1535 | 1536 | 1537 | 1538 | 1539 | 1540 | 1541 | 1542 | 1543 | 1544 | 1545 | 1546 | 1547 | 1548 | 1549 | 1550 | 1551 | 1552 | 1553 | 1554 | 1555 | 1556 | 1557 | 1558 | 1559 | 1560 | 1561 | 1562 | 1563 | 1564 | 1565 | 1566 | 1567 | 1568 | 1569 | 1570 | 1571 | 1572 | 1573 | 1574 | 1575 | 1576 | 1577 | 1578 | 1579 | 1580 | 1581 | 1582 | 1583 | 1584 | 1585 | 1586 | 1587 | 1588 | 1589 | 1590 | 1591 | 1592 | 1593 | 1594 | 1595 | 1596 | 1597 | 1598 | 1599 | 1600 | 1601 | 1602 | 1603 | 1604 | 1605 | 1606 | 1607 | 1608 | 1609 | 1610 | 1611 | 1612 | 1613 | 1614 | 1615 | 1616 | 1617 | 1618 | 1619 | 1620 | 1621 | 1622 | 1623 | 1624 | 1625 | 1626 | 1627 | 1628 | 1629 | 1630 | 1631 | 1632 | 1633 | 1634 | 1635 | 1636 | 1637 | 1638 | 1639 | 1640 | 1641 | 1642 | 1643 | 1644 | 1645 | 1646 | 1647 | 1648 | 1649 | 1650 | 1651 | 1652 | 1653 | 1654 | 1655 | 1656 | 1657 | 1658 | 1659 | 1660 | 1661 | 1662 | 1663 | 1664 | 1665 | 1666 | 1667 | 1668 | 1669 | 1670 | 1671 | 1672 | 1673 | 1674 | 1675 | 1676 | 1677 | 1678 | 1679 | 1680 | 1681 | 1682 | 1683 | 1684 | 1685 | 1686 | 1687 | 1688 | 1689 | 1690 | 1691 | 1692 | 1693 | 1694 | 1695 | 1696 | 1697 | 1698 | 1699 | 1700 | 1701 | 1702 | 1703 | 1704 | 1705 | 1706 | 1707 | 1708 | 1709 | 1710 | 1711 | 1712 | 1713 | 1714 | 1715 | 1716 | 1717 | 1718 | 1719 | 1720 | 1721 | 1722 | 1723 | 1724 | 1725 | 1726 | 1727 | 1728 | 1729 | 1730 | 1731 | 1732 | 1733 | 1734 | 1735 | 1736 | 1737 | 1738 | 1739 | 1740 | 1741 | 1742 | 1743 | 1744 | 1745 | 1746 | 1747 | 1748 | 1749 | 1750 | 1751 | 1752 | 1753 | 1754 | 1755 | 1756 | 1757 | 1758 | 1759 | 1760 | 1761 | 1762 | 1763 | 1764 | 1765 | 1766 | 1767 | 1768 | 1769 | 1770 | 1771 | 1772 | 1773 | 1774 | 1775 | 1776 | 1777 | 1778 | 1779 | 1780 | 1781 | 1782 | 1783 | 1784 | 1785 | 1786 | 1787 | 1788 | 1789 | 1790 | 1791 | 1792 | 1793 | 1794 | 1795 | 1796 | 1797 | 1798 | 1799 | 1800 | 1801 | 1802 | 1803 | 1804 | 1805 | 1806 | 1807 | 1808 | 1809 | 1810 | 1811 | 1812 | 1813 | 1814 | 1815 | 1816 | 1817 | 1818 | 1819 | 1820 | 1821 | 1822 | 1823 | 1824 | 1825 | 1826 | 1827 | 1828 | 1829 | 1830 | 1831 | 1832 | 1833 | 1834 | 1835 | 1836 | 1837 | 1838 | 1839 | 1840 | 1841 | 1842 | 1843 | 1844 | 1845 | 1846 | 1847 | 1848 | 1849 | 1850 | 1851 | 1852 | 1853 | 1854 | 1855 | 1856 | 1857 | 1858 | 1859 | 1860 | 1861 | 1862 | 1863 | 1864 | 1865 | 1866 | 1867 | 1868 | 1869 | 1870 | 1871 | 1872 | 1873 | 1874 | 1875 | 1876 | 1877 | 1878 | 1879 | 1880 | 1881 | 1882 | 1883 | 1884 | 1885 | 1886 | 1887 | 1888 | 1889 | 1890 | 1891 | 1892 | 1893 | 1894 | 1895 | 1896 | 1897 | 1898 | 1899 | 1900 | 1901 | 1902 | 1903 | 1904 | 1905 | 1906 | 1907 | 1908 | 1909 | 1910 | 1911 | 1912 | 1913 | 1914 | 1915 | 1916 | 1917 | 1918 | 1919 | 1920 | 1921 | 1922 | 1923 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | *, ::after, ::before { 2 | box-sizing: border-box; 3 | } 4 | 5 | * { 6 | -webkit-touch-callout: none; 7 | -ms-touch-action: none; 8 | touch-action: none; 9 | -khtml-user-select: none; 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | -ms-user-select: none; 13 | -o-user-select: none; 14 | user-select: none; 15 | -webkit-text-size-adjust: none; 16 | -ms-text-size-adjust: none; 17 | text-size-adjust: none; 18 | -webkit-tap-highlight-color: transparent; 19 | -webkit-user-modify: read-only; 20 | } 21 | 22 | html { 23 | -ms-interpolation-mode: nearest-neighbor; 24 | } 25 | 26 | body { 27 | font-size: 16px; 28 | color: #cfd4db; 29 | background-color: #000000; 30 | cursor: default; 31 | line-height: 1.3; 32 | overflow: hidden; 33 | padding:0; 34 | margin:0; 35 | } 36 | 37 | canvas { 38 | position: absolute; 39 | outline: none; 40 | } 41 | 42 | #frame { 43 | max-width: 960px; 44 | max-height: 540px; 45 | width: 100%; 46 | height: 100%; 47 | visibility: hidden; 48 | } 49 | 50 | .center { 51 | position: absolute; 52 | top: 50%; 53 | left: 50%; 54 | -webkit-transform: translate(-50%, -50%); 55 | -moz-transform: translate(-50%, -50%); 56 | -ms-transform: translate(-50%, -50%); 57 | -o-transform: translate(-50%, -50%); 58 | transform: translate(-50%, -50%); 59 | } 60 | 61 | #stats { 62 | position: absolute; 63 | left: 0; 64 | z-index: 1; 65 | } 66 | 67 | #gui { 68 | position: absolute; 69 | right: 0; 70 | z-index: 1; 71 | opacity: 0.95; 72 | } 73 | -------------------------------------------------------------------------------- /src/images/bunny1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/images/bunny1.png -------------------------------------------------------------------------------- /src/images/bunny10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/images/bunny10.png -------------------------------------------------------------------------------- /src/images/bunny11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/images/bunny11.png -------------------------------------------------------------------------------- /src/images/bunny12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/images/bunny12.png -------------------------------------------------------------------------------- /src/images/bunny2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/images/bunny2.png -------------------------------------------------------------------------------- /src/images/bunny3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/images/bunny3.png -------------------------------------------------------------------------------- /src/images/bunny4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/images/bunny4.png -------------------------------------------------------------------------------- /src/images/bunny5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/images/bunny5.png -------------------------------------------------------------------------------- /src/images/bunny6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/images/bunny6.png -------------------------------------------------------------------------------- /src/images/bunny7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/images/bunny7.png -------------------------------------------------------------------------------- /src/images/bunny8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/images/bunny8.png -------------------------------------------------------------------------------- /src/images/bunny9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/images/bunny9.png -------------------------------------------------------------------------------- /src/js/SceneController.js: -------------------------------------------------------------------------------- 1 | import storage from './storage.js'; 2 | 3 | import pixiScenes from './pixi/scenes.js' 4 | import phaser2Scenes from './phaser2/scenes.js' 5 | import phaser3Scenes from './phaser3/scenes.js' 6 | 7 | export default class SceneController { 8 | constructor(app, stats, gui) { 9 | this._app = app; 10 | this._stats = stats; 11 | this._gui = gui; 12 | 13 | this._scenes = []; 14 | 15 | let sceneList; 16 | if (storage.get('library') === 'Phaser2') { 17 | sceneList = phaser2Scenes; 18 | } else if (storage.get('library') === 'Phaser3') { 19 | sceneList = phaser3Scenes; 20 | } else { 21 | sceneList = pixiScenes; 22 | } 23 | 24 | for (const Scene of sceneList) { 25 | this._scenes.push(new Scene(app, gui)); 26 | } 27 | 28 | this._guiData = { 29 | scene: parseInt(storage.get('scene'), 10), 30 | objectCount: parseInt(storage.get('objectCount'), 10) 31 | }; 32 | 33 | if (Number.isNaN(this._guiData.scene)) { 34 | this._guiData.scene = 0; 35 | } 36 | 37 | if (Number.isNaN(this._guiData.objectCount)) { 38 | this._guiData.objectCount = 10000; 39 | } 40 | 41 | storage.set('scene', this._guiData.scene); 42 | storage.set('objectCount', this._guiData.objectCount); 43 | 44 | const guiEntries = {}; 45 | this._scenes.forEach((scene, index) => { 46 | guiEntries[scene.title] = index; 47 | }) 48 | 49 | const guiSceneController = this._gui.add(this._guiData, 'scene', guiEntries); 50 | 51 | guiSceneController.onChange((value) => { 52 | storage.set('scene', value); 53 | this._switch(value); 54 | }); 55 | 56 | const guiObjectCountController = this._gui.add(this._guiData, 'objectCount', 0, 100000, 1000); 57 | guiObjectCountController.onChange((value) => { 58 | storage.set('objectCount', value); 59 | this._scenes[this._guiData.scene].changeObjectCount(value); 60 | }); 61 | 62 | this._switch(this._guiData.scene); 63 | 64 | document.addEventListener('keydown', (event) => { 65 | if (event.key === 'Enter') { 66 | if (this.scene === this._scenes.length - 1) { 67 | this._switch(0); 68 | } else { 69 | this._switch(this.scene + 1); 70 | } 71 | } 72 | }); 73 | } 74 | 75 | _switch(index) { 76 | if (index >= 0 && index < this._scenes.length) { 77 | for (const scene of this._scenes) { 78 | scene.stop(); 79 | } 80 | 81 | this._scenes[index].start(this._guiData.objectCount); 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import "core-js/stable"; 2 | import "regenerator-runtime/runtime"; 3 | import 'url-search-params-polyfill'; 4 | import 'keyboardevent-key-polyfill'; 5 | import '../vendor/polyfill-append.js'; 6 | import '../vendor/polyfill-fixedSeedRandom.js'; 7 | 8 | import 'normalize.css'; 9 | import '../css/style.css'; 10 | 11 | import * as dat from 'dat.gui'; 12 | import Stats from '../vendor/stats.js'; 13 | 14 | import storage from './storage.js'; 15 | import SceneController from './SceneController.js'; 16 | import loadPixi from './pixi/load.js'; 17 | import loadPhaser2 from './phaser2/load.js'; 18 | import loadPhaser3 from './phaser3/load.js'; 19 | 20 | // setup shared stats instance 21 | const stats = new Stats(); 22 | stats.domElement.id = 'stats'; 23 | 24 | // setup shared gui instance 25 | const gui = new dat.GUI({ autoPlace: false }); 26 | gui.domElement.id = 'gui'; 27 | gui.width = 300; 28 | 29 | // create a centralised div for other elements to sit within 30 | const frameDiv = document.createElement('div'); 31 | frameDiv.id = 'frame'; 32 | frameDiv.classList.add('center'); 33 | frameDiv.append(stats.domElement); 34 | frameDiv.append(gui.domElement); 35 | document.body.append(frameDiv); 36 | 37 | const validLibraries = ['Pixi', 'Phaser2', 'Phaser3']; 38 | 39 | const guiData = { 40 | library: validLibraries.includes(storage.get('library')) ? storage.get('library') : validLibraries[0] 41 | }; 42 | 43 | storage.set('library', guiData.library); 44 | 45 | const guiController = gui.add(guiData, 'library', validLibraries) 46 | guiController.onChange((library) => { 47 | storage.set('library', library); 48 | 49 | window.location.href = storage.url().href; 50 | }); 51 | 52 | let loadLibrary; 53 | if (storage.get('library') === 'Phaser2') { 54 | loadLibrary = loadPhaser2; 55 | } else if (storage.get('library') === 'Phaser3') { 56 | loadLibrary = loadPhaser3; 57 | } else { 58 | loadLibrary = loadPixi; 59 | } 60 | 61 | // only start the scene controller when the correct version of pixi has loaded 62 | loadLibrary(stats, gui) 63 | .then((app) => { 64 | new SceneController(app, stats, gui); 65 | frameDiv.style.visibility = 'visible'; 66 | 67 | resize(app); 68 | window.addEventListener('resize', (e) => { 69 | resize(app); 70 | }) 71 | }) 72 | 73 | 74 | function resize(app) { 75 | let width = Math.min(window.innerWidth, 960); 76 | let height = Math.min(window.innerHeight, 540); 77 | 78 | const ratio = width / height; 79 | const requiredRatio = 960 / 540; 80 | 81 | if (ratio > requiredRatio) { 82 | width = height * requiredRatio; 83 | } else { 84 | height = width / requiredRatio; 85 | } 86 | 87 | frameDiv.style.width = app.canvas.style.width = `${width}px`; 88 | frameDiv.style.height = app.canvas.style.height = `${height}px`; 89 | } 90 | -------------------------------------------------------------------------------- /src/js/loadScript.js: -------------------------------------------------------------------------------- 1 | export default function (url) { 2 | return new Promise((resolve, reject) => { 3 | const script = document.createElement("script"); 4 | script.type = "text/javascript"; 5 | script.src = url; 6 | script.async = true; 7 | script.addEventListener("load", resolve) 8 | script.addEventListener("error", reject) 9 | document.body.appendChild(script); 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /src/js/phaser2/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Convenience class to create a new Phaser application. 3 | */ 4 | export default class App { 5 | /** 6 | * @param {function} resolvePromise - call when assets have preloader 7 | * @param {Object} stats - stats instance 8 | */ 9 | constructor(resolvePromise, stats) { 10 | const options = { 11 | width: 960, 12 | height: 540, 13 | backgroundColor: 0x1099bb, 14 | scene: { 15 | preload: () => { 16 | this._game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; 17 | this.canvas.classList.add('center'); 18 | 19 | for (let i = 1; i <= 12; ++i) { 20 | this._game.load.image(`images/bunny${i}.png`, `images/bunny${i}.png`); 21 | } 22 | this._game.load.atlas('spritesheets/bunnies.png', 'spritesheets/bunnies.png', 'spritesheets/bunnies.json'); 23 | this._game.load.bitmapFont('Desyrel', 'bitmap-fonts/desyrel.png', 'bitmap-fonts/desyrel.xml'); 24 | }, 25 | create: () => { 26 | if (resolvePromise) { 27 | this._game.state.preRender = () => { 28 | this._stats.begin(); 29 | } 30 | this._game.state.render = () => { 31 | this._stats.end(); 32 | } 33 | 34 | this._game.stage.backgroundColor = options.backgroundColor; 35 | this._game.stage.disableVisibilityChange = true; 36 | 37 | resolvePromise(this); 38 | } 39 | } 40 | } 41 | } 42 | 43 | this._stats = stats; 44 | 45 | this._game = new Phaser.Game(options.width, options.height, Phaser.WEBGL_MULTI || Phaser.AUTO, 'frame', options.scene); 46 | 47 | this._screen = { 48 | width: options.width, 49 | height: options.height 50 | } 51 | } 52 | 53 | get canvas() { 54 | return this._game.canvas; 55 | } 56 | 57 | /** 58 | * Reference to the renderer's screen rectangle. Its safe to use as filterArea or hitArea for whole screen 59 | * 60 | * @member {Object} 61 | * @readonly 62 | */ 63 | get screen() { 64 | return this._screen; 65 | } 66 | 67 | /** 68 | * The Phaser game object 69 | * 70 | * @member {Object} 71 | * @readonly 72 | */ 73 | get game() { 74 | return this._game; 75 | } 76 | 77 | /** 78 | * The single scene that we use for our tests 79 | * 80 | * @member {Object} 81 | * @readonly 82 | */ 83 | get stage() { 84 | return this._game.stage; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/js/phaser2/load.js: -------------------------------------------------------------------------------- 1 | import polyfillPhaser2 from '../../vendor/polyfill-phaser2.js'; 2 | 3 | import loadScript from '../loadScript.js'; 4 | import storage from '../storage.js'; 5 | import App from './App.js'; 6 | 7 | export default function loadPhaser(stats, gui) { 8 | let resolvePromise; 9 | 10 | const v2Offical = [ 11 | "2.0.7", "2.1.3", "2.2.2", "2.3.0", "2.4.9", "2.5.0", "2.6.2" 12 | ]; 13 | const v2Community = [ 14 | "2.7.10", "2.8.8", "2.9.4", "2.10.6", "2.11.1", "2.12.1", "2.13.3", "2.14.0", "2.15.1", "2.16.2", "2.17.0", "2.18.0", "2.19.2" 15 | ]; 16 | const versions = [ 17 | ...v2Offical, 18 | ...v2Community 19 | ].reverse(); 20 | 21 | const guiData = { 22 | version: versions.includes(storage.get('version')) ? storage.get('version') : versions[0] 23 | }; 24 | 25 | storage.set('version', guiData.version); 26 | 27 | const guiController = gui.add(guiData, 'version', versions) 28 | guiController.onChange((version) => { 29 | storage.set('version', version); 30 | 31 | window.location.href = storage.url().href; 32 | }); 33 | 34 | let versionMatch = guiData.version.match(/(\d+).(\d+).(\d+)/); 35 | let isOfficialVersion = !versionMatch || versionMatch[2] < 7; 36 | let libUrl = ''; 37 | if (isOfficialVersion) { 38 | libUrl = `https://cdnjs.cloudflare.com/ajax/libs/phaser/${guiData.version}/phaser.min.js`; 39 | } else { 40 | libUrl = `https://cdn.jsdelivr.net/npm/phaser-ce@${guiData.version}`; 41 | } 42 | 43 | loadScript(libUrl) 44 | .catch(() => { 45 | console.log(`Could not load Phaser\n[${guiData.version}] from [${libUrl}]\nMay not be a valid version`); 46 | }) 47 | .then(() => { 48 | if (window.Phaser) { 49 | polyfillPhaser2(); 50 | 51 | new App(resolvePromise, stats); 52 | } 53 | }); 54 | 55 | return new Promise((resolve) => { 56 | resolvePromise = resolve; 57 | }); 58 | } 59 | -------------------------------------------------------------------------------- /src/js/phaser2/scenes.js: -------------------------------------------------------------------------------- 1 | import BitmapTextStatic from './scenes/BitmapTextStatic'; 2 | import BitmapTextCounting from './scenes/BitmapTextCounting'; 3 | import CanvasTextStatic from './scenes/CanvasTextStatic'; 4 | import CanvasTextCounting from './scenes/CanvasTextCounting'; 5 | import GraphicsComplex from './scenes/GraphicsComplex.js'; 6 | import GraphicsSimple from './scenes/GraphicsSimple.js'; 7 | import SpritesAndGraphics from './scenes/SpritesAndGraphics.js'; 8 | import Spritesheet from './scenes/Spritesheet.js'; 9 | import SpritesMultipleTextures from './scenes/SpritesMultipleTextures.js'; 10 | import SpritesSingleTexture from './scenes/SpritesSingleTexture.js'; 11 | 12 | // export in the order you wish them to appear in the drop down list 13 | export default [ 14 | SpritesSingleTexture, 15 | SpritesMultipleTextures, 16 | Spritesheet, 17 | GraphicsSimple, 18 | GraphicsComplex, 19 | SpritesAndGraphics, 20 | CanvasTextStatic, 21 | CanvasTextCounting, 22 | BitmapTextStatic, 23 | BitmapTextCounting 24 | ] 25 | -------------------------------------------------------------------------------- /src/js/phaser2/scenes/BitmapTextCounting.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class BitmapTextCounting extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Text: Bitmap Counting'; 8 | this.description = 'Text created via the Bitmap Fonts. '; 9 | this.description += 'Only 1 in a hundred of the visible texts update each frame. '; 10 | this.description += 'Advantages: Fastest way to render text. Changing text does not effect rendering performance. '; 11 | this.description += 'Disadvantages: Cannot change text style dynamically at run time. '; 12 | 13 | this._frameCount = 0; 14 | } 15 | 16 | _update(delta) { 17 | super._update(delta); 18 | 19 | const childrenToCount = this._children.length / 100 || 0; 20 | ++this._frameCount; 21 | 22 | for (let i = this._children.length - childrenToCount; i < this._children.length; ++i) { 23 | this._children[i].text = this._frameCount; 24 | } 25 | } 26 | 27 | _create(objectCount) { 28 | for (let i = 0; i < this._children.length; ++i) { 29 | this._children[i].text = 'WebGL'; 30 | } 31 | 32 | for (let i = this._children.length; i < objectCount; ++i) { 33 | const text = this._app.game.add.bitmapText(0, 0, 'Desyrel', 'WebGL', 35); 34 | text.align = 'center'; 35 | if (text.anchor) { 36 | text.anchor.set(0.5); 37 | } else { // for early v2 38 | for (let i = 0; i < text.children.length; ++i) { 39 | text.children[i].x -= text.textWidth * 0.5; 40 | text.children[i].y -= text.textHeight * 0.5; 41 | } 42 | } 43 | text.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 44 | 45 | this._app.stage.addChild(text); 46 | } 47 | } 48 | 49 | _destroy(objectCount = 0) { 50 | super._destroy(objectCount); 51 | for (let i = 0; i < this._children.length; ++i) { 52 | this._children[i].text = 'WebGL'; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/js/phaser2/scenes/BitmapTextStatic.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class BitmapTextStatic extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Text: Bitmap Static'; 8 | this.description = 'Text created via the Bitmap Fonts. '; 9 | this.description += 'Advantages: Fastest way to render text. '; 10 | this.description += 'Disadvantages: Cannot change text style dynamically at run time. '; 11 | } 12 | 13 | _create(objectCount) { 14 | for (let i = this._children.length; i < objectCount; ++i) { 15 | const text = this._app.game.add.bitmapText(0, 0, 'Desyrel', 'WebGL', 35); 16 | text.align = 'center'; 17 | if (text.anchor) { 18 | text.anchor.set(0.5); 19 | } else { // for early v2 20 | for (let i = 0; i < text.children.length; ++i) { 21 | text.children[i].x -= text.textWidth * 0.5; 22 | text.children[i].y -= text.textHeight * 0.5; 23 | } 24 | } 25 | text.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 26 | 27 | this._app.stage.addChild(text); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/js/phaser2/scenes/CanvasTextCounting.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class CanvasTextCounting extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Text: Canvas Counting'; 8 | this.description = 'Text created via the Canvas API, with the canvas then used as a texture for a sprite. '; 9 | this.description += 'Only 1 in a hundred of the visible texts update each frame. '; 10 | this.description += 'Advantages: Dynamic and flexible styling. '; 11 | this.description += 'Disadvantages: Textures have to be re-created and uploaded to the GPU each time the text or style changes, which can be slow. '; 12 | this.description += 'Also, because each text has its own texture, the GPU is swapping between them a lot. '; 13 | 14 | this._colors = [0x29BF12, 0xABFF4F, 0x18BDBD, 0xF21B3F, 0xFF9914]; 15 | 16 | this._frameCount = 0; 17 | } 18 | 19 | _update(delta) { 20 | super._update(delta); 21 | 22 | const childrenToCount = this._children.length / 100 || 0; 23 | ++this._frameCount; 24 | 25 | for (let i = this._children.length - childrenToCount; i < this._children.length; ++i) { 26 | this._children[i].text = this._frameCount; 27 | } 28 | } 29 | 30 | _create(objectCount) { 31 | for (let i = 0; i < this._children.length; ++i) { 32 | this._children[i].text = 'WebGL'; 33 | } 34 | 35 | for (let i = this._children.length; i < objectCount; ++i) { 36 | const color = this._colors[this._children.length % this._colors.length]; 37 | const text = this._app.game.add.text(0, 0, 'WebGL', { 38 | fontFamily: 'Arial', 39 | fontSize: 30, 40 | font: '30px Arial', // for backwards compatibility 41 | fill: `#${color.toString(16)}` 42 | }); 43 | text.setShadow(1, 1, 'black', 1); 44 | text.anchor.set(0.5); 45 | text.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 46 | 47 | this._app.stage.addChild(text); 48 | } 49 | } 50 | 51 | _destroy(objectCount = 0) { 52 | super._destroy(objectCount); 53 | for (let i = 0; i < this._children.length; ++i) { 54 | this._children[i].text = 'WebGL'; 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/js/phaser2/scenes/CanvasTextStatic.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class CanvasTextStatic extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Text: Canvas Static'; 8 | this.description = 'Text created via the Canvas API, with the canvas then used as a texture for a sprite. '; 9 | this.description += 'Advantages: Dynamic and flexible styling. '; 10 | this.description += 'Disadvantages: Textures have to be re-created and uploaded to the GPU each time the text or style changes, which can be slow. '; 11 | this.description += 'Also, because each text has its own texture, the GPU is swapping between them a lot. '; 12 | 13 | this._colors = [0x29BF12, 0xABFF4F, 0x18BDBD, 0xF21B3F, 0xFF9914]; 14 | } 15 | 16 | _create(objectCount) { 17 | for (let i = this._children.length; i < objectCount; ++i) { 18 | const color = this._colors[this._children.length % this._colors.length]; 19 | const text = this._app.game.add.text(0, 0, 'WebGL', { 20 | fontFamily: 'Arial', 21 | fontSize: 30, 22 | font: '30px Arial', // for backwards compatibility 23 | fill: `#${color.toString(16)}` 24 | }); 25 | text.setShadow(1, 1, 'black', 1); 26 | text.anchor.set(0.5); 27 | text.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 28 | 29 | this._app.stage.addChild(text); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/js/phaser2/scenes/GraphicsComplex.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class GraphicsComplex extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Graphics: Complex'; 8 | this.description = 'One of four complex shapes types are used, making more advanced techniques are used to keep performance up.'; 9 | 10 | this._colors = [0x29BF12, 0xABFF4F, 0x08BDBD, 0xF21B3F, 0xFF9914]; 11 | } 12 | 13 | _create(objectCount) { 14 | for (let i = this._children.length; i < objectCount; ++i) { 15 | const color = this._colors[this._children.length % this._colors.length]; 16 | const graphic = this._app.game.add.graphics(); 17 | graphic.beginFill(color); 18 | 19 | const type = this._children.length % 4; 20 | if (type === 0) { 21 | graphic.drawPolygon(this._drawStar(0, 0, 5, 30, 20, 1)); 22 | } else if (type === 1) { 23 | graphic.drawPolygon([-15, -30, 15, 15, -30, 15]); 24 | } else if (type === 2) { 25 | graphic.drawPolygon([-15, -30, -15, 0, 15, 15, -30, 15]); 26 | } else { 27 | graphic.drawEllipse(0, 0, 30, 15); 28 | } 29 | 30 | graphic.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 31 | 32 | this._app.stage.addChild(graphic); 33 | } 34 | } 35 | 36 | _drawStar(x, y, points, radius, innerRadius, rotation = 0) { 37 | innerRadius = innerRadius || radius / 2; 38 | 39 | const startAngle = (-1 * Math.PI / 2) + rotation; 40 | const len = points * 2; 41 | const delta = Math.PI * 2 / len; 42 | const polygon = []; 43 | 44 | for (let i = 0; i < len; i++) { 45 | const r = i % 2 ? innerRadius : radius; 46 | const angle = (i * delta) + startAngle; 47 | 48 | polygon.push( 49 | x + (r * Math.cos(angle)), 50 | y + (r * Math.sin(angle)) 51 | ); 52 | } 53 | 54 | return polygon; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/js/phaser2/scenes/GraphicsSimple.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class GraphicsSimple extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Graphics: Simple'; 8 | this.description = 'Only a single square graphic type is created; this scene should test the basic raw graphics rendering power.'; 9 | 10 | this._colors = [0x29BF12, 0xABFF4F, 0x08BDBD, 0xF21B3F, 0xFF9914]; 11 | } 12 | 13 | _create(objectCount) { 14 | for (let i = this._children.length; i < objectCount; ++i) { 15 | const color = this._colors[this._children.length % this._colors.length]; 16 | const graphic = this._app.game.add.graphics(); 17 | graphic.beginFill(color); 18 | graphic.drawRect(-15, -15, 30, 30); 19 | graphic.position.set(Math.random() * this._app.screen.width, graphic.y = Math.random() * this._app.screen.height); 20 | 21 | this._app.stage.addChild(graphic); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/js/phaser2/scenes/IScene.js: -------------------------------------------------------------------------------- 1 | export default class IScene { 2 | constructor(app, gui) { 3 | this._app = app; 4 | this._gui = gui; 5 | 6 | this._children = this._app.stage.children; 7 | 8 | this.title = ''; 9 | this.description = ''; 10 | 11 | this._last 12 | 13 | this._targetMS = 1000 / 60; 14 | } 15 | 16 | start(objectCount) { 17 | console.log(`Scene Changed: ${this.title}`); 18 | console.log(this.description); 19 | 20 | this._app.game.state.update = () => { 21 | // 2.0.x and 2.1.x have used elapsed rather than elapsedMS 22 | const delta = (this._app.game.time.elapsedMS || this._app.game.time.elapsed) / this._targetMS; 23 | this._update(delta); 24 | } 25 | 26 | this._create(objectCount); 27 | } 28 | 29 | stop() { 30 | this._app.game.state.update = () => { }; 31 | 32 | this._destroy(); 33 | } 34 | 35 | changeObjectCount(objectCount) { 36 | if (objectCount > this._children.length) { 37 | this._create(objectCount); 38 | } else if (objectCount < this._children.length) { 39 | this._destroy(objectCount) 40 | } 41 | } 42 | 43 | _update(delta = 0) { 44 | for (let i = 0; i < this._children.length; ++i) { 45 | this._children[i].rotation += 0.05 * delta; 46 | } 47 | } 48 | 49 | _create() { 50 | throw new Error('IScene _create function must be overridden'); 51 | } 52 | 53 | _destroy(objectCount = 0) { 54 | this._children.length = objectCount; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/js/phaser2/scenes/SpritesAndGraphics.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class SpritesAndGraphics extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Sprites and Graphics'; 8 | this.description = 'A mix of individual sprites, sprites from a spritesheet and graphics'; 9 | 10 | this._colors = [0x29BF12, 0xABFF4F, 0x08BDBD, 0xF21B3F, 0xFF9914]; 11 | this._bunnyIndex = 1; 12 | this._shapeIndex = 0; 13 | } 14 | 15 | _create(objectCount) { 16 | for (let i = this._children.length; i < objectCount; ++i) { 17 | if (i % 20 < 7) { 18 | const sprite = this._app.game.add.sprite(0, 0, `images/bunny${this._bunnyIndex}.png`); 19 | this._bunnyIndex === 12 ? this._bunnyIndex = 1 : ++this._bunnyIndex; 20 | sprite.anchor.set(0.5); 21 | sprite.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 22 | 23 | this._app.stage.addChild(sprite); 24 | } else if (i % 20 < 14) { 25 | const sprite = this._app.game.add.sprite(0, 0, `spritesheets/bunnies.png`, `spritesheets/bunny${this._bunnyIndex}.png`); 26 | this._bunnyIndex === 12 ? this._bunnyIndex = 1 : ++this._bunnyIndex; 27 | sprite.anchor.set(0.5); 28 | sprite.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 29 | 30 | this._app.stage.addChild(sprite); 31 | } else if (i % 20 < 18) { 32 | const color = this._colors[this._children.length % this._colors.length]; 33 | const graphic = this._app.game.add.graphics(); 34 | graphic.beginFill(color); 35 | graphic.drawRect(-15, -15, 30, 30); 36 | graphic.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 37 | 38 | this._app.stage.addChild(graphic); 39 | } else { 40 | const color = this._colors[this._children.length % this._colors.length]; 41 | const graphic = this._app.game.add.graphics(); 42 | graphic.beginFill(color); 43 | 44 | const type = this._children.length % 4; 45 | if (type === 0) { 46 | graphic.drawPolygon(this._drawStar(0, 0, 5, 30, 20, 1)); 47 | } else if (type === 1) { 48 | graphic.drawPolygon([-15, -30, 15, 15, -30, 15]); 49 | } else if (type === 2) { 50 | graphic.drawPolygon([-15, -30, -15, 0, 15, 15, -30, 15]); 51 | } else { 52 | graphic.drawEllipse(0, 0, 30, 15); 53 | } 54 | 55 | graphic.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 56 | 57 | this._app.stage.addChild(graphic); 58 | } 59 | } 60 | } 61 | 62 | _drawStar(x, y, points, radius, innerRadius, rotation = 0) { 63 | innerRadius = innerRadius || radius / 2; 64 | 65 | const startAngle = (-1 * Math.PI / 2) + rotation; 66 | const len = points * 2; 67 | const delta = Math.PI * 2 / len; 68 | const polygon = []; 69 | 70 | for (let i = 0; i < len; i++) { 71 | const r = i % 2 ? innerRadius : radius; 72 | const angle = (i * delta) + startAngle; 73 | 74 | polygon.push( 75 | x + (r * Math.cos(angle)), 76 | y + (r * Math.sin(angle)) 77 | ); 78 | } 79 | 80 | return polygon; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/js/phaser2/scenes/SpritesMultipleTextures.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class SpritesSingleTexture extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Sprites: Multiple Textures (12)'; 8 | this.description = 'There are 12 bunnies all using their own texture. ' 9 | this.description += 'Renderers that cannot support multi-texturing will show a decrease in speed compared to a single texture. ' 10 | this.description += 'Those that do support multi-texturing could reach single texture performance if the GPU has enough texture units.'; 11 | 12 | this._bunnyIndex = 1; 13 | } 14 | 15 | _create(objectCount) { 16 | for (let i = this._children.length; i < objectCount; ++i) { 17 | const sprite = this._app.game.add.sprite(0, 0, `images/bunny${this._bunnyIndex}.png`); 18 | this._bunnyIndex === 12 ? this._bunnyIndex = 1 : ++this._bunnyIndex; 19 | sprite.anchor.set(0.5); 20 | sprite.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 21 | 22 | this._app.stage.addChild(sprite); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/js/phaser2/scenes/SpritesSingleTexture.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class SpritesSingleTexture extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Sprites: Single Texture'; 8 | this.description = 'A single bunny texture is used; this scene should test the basic raw sprite rendering power.' 9 | } 10 | 11 | _create(objectCount) { 12 | for (let i = this._children.length; i < objectCount; ++i) { 13 | const sprite = this._app.game.add.sprite(0, 0, 'images/bunny1.png'); 14 | sprite.anchor.set(0.5); 15 | sprite.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 16 | 17 | this._app.stage.addChild(sprite); 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/js/phaser2/scenes/Spritesheet.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class Spritesheet extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Spritesheet'; 8 | this.description = 'There are 12 bunnies, but all on one spritesheet. ' 9 | this.description += 'Since all bunnies come from one texture, the render speed should be comparable to as if just a single texture i used.'; 10 | 11 | this._bunnyIndex = 1; 12 | } 13 | 14 | _create(objectCount) { 15 | for (let i = this._children.length; i < objectCount; ++i) { 16 | const sprite = this._app.game.add.sprite(0, 0, `spritesheets/bunnies.png`, `spritesheets/bunny${this._bunnyIndex}.png`); 17 | this._bunnyIndex === 12 ? this._bunnyIndex = 1 : ++this._bunnyIndex; 18 | sprite.anchor.set(0.5); 19 | sprite.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 20 | 21 | this._app.stage.addChild(sprite); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/js/phaser3/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @typedef {object} RenderConfig 3 | * 4 | * @property {boolean} [antialias=true] - When set to `true`, WebGL uses linear interpolation to draw scaled or rotated textures, giving a smooth appearance. When set to `false`, WebGL uses nearest-neighbor interpolation, giving a crisper appearance. `false` also disables antialiasing of the game canvas itself, if the browser supports it, when the game canvas is scaled. 5 | * @property {boolean} [pixelArt=false] - Sets `antialias` and `roundPixels` to true. This is the best setting for pixel-art games. 6 | * @property {boolean} [autoResize=false] - Automatically resize the Game Canvas if you resize the renderer. 7 | * @property {boolean} [roundPixels=false] - Draw texture-based Game Objects at only whole-integer positions. Game Objects without textures, like Graphics, ignore this property. 8 | * @property {boolean} [transparent=false] - Whether the game canvas will be transparent. 9 | * @property {boolean} [clearBeforeRender=true] - Whether the game canvas will be cleared between each rendering frame. 10 | * @property {boolean} [premultipliedAlpha=true] - In WebGL mode, the drawing buffer contains colors with pre-multiplied alpha. 11 | * @property {boolean} [preserveDrawingBuffer=false] - In WebGL mode, the drawing buffer won't be cleared automatically each frame. 12 | * @property {boolean} [failIfMajorPerformanceCaveat=false] - Let the browser abort creating a WebGL context if it judges performance would be unacceptable. 13 | * @property {string} [powerPreference='default'] - "high-performance", "low-power" or "default". A hint to the browser on how much device power the game might use. 14 | * @property {integer} [batchSize=2000] - The default WebGL batch size. 15 | */ 16 | 17 | /** 18 | * @typedef {object} PhaserConfig 19 | * 20 | * @property {(integer|string)} [width=1024] - The width of the game, in game pixels. 21 | * @property {(integer|string)} [height=768] - The height of the game, in game pixels. 22 | * @property {number} [resolution=1] - The size of each game pixel, in canvas pixels. Values larger than 1 are "high" resolution. 23 | * @property {object} [scene=null] - A scene or scenes to add to the game. If several are given, the first is started; the remainder are started only if they have { active: true }. 24 | * @property {RenderConfig} [render] - Game renderer configuration. 25 | * @property {(string|number)} [backgroundColor=0x1099bb] - The background color of the game canvas. The default is black. 26 | */ 27 | 28 | /** 29 | * Convenience class to create a new Phaser application. 30 | */ 31 | export default class App { 32 | /** 33 | * @param {function} resolvePromise - call when assets have preloader 34 | * @param {Object} stats - stats instance 35 | */ 36 | constructor(resolvePromise, stats) { 37 | const options = { 38 | width: 960, 39 | height: 540, 40 | resolution: 1, 41 | render: { 42 | antialias: true, 43 | pixelArt: false, 44 | autoResize: false, 45 | roundPixels: false, 46 | transparent: false, 47 | clearBeforeRender: true, 48 | premultipliedAlpha: true, 49 | preserveDrawingBuffer: false, 50 | failIfMajorPerformanceCaveat: false, 51 | powerPreference: 'high-performance' 52 | }, 53 | backgroundColor: 0x1099bb, 54 | fps: { 55 | min: 1, 56 | panicMax: 1 57 | }, 58 | scene: { 59 | preload: () => { 60 | this.canvas.classList.add('center'); 61 | document.getElementById('frame').appendChild(this.canvas); 62 | 63 | const scene = this._game.scene.scenes[0]; 64 | for (let i = 1; i <= 12; ++i) { 65 | scene.load.image(`images/bunny${i}.png`, `images/bunny${i}.png`); 66 | } 67 | scene.load.atlas('spritesheets/bunnies.png', 'spritesheets/bunnies.png', 'spritesheets/bunnies.json'); 68 | scene.load.bitmapFont('Desyrel', 'bitmap-fonts/desyrel.png', 'bitmap-fonts/desyrel.xml'); 69 | }, 70 | create: () => { 71 | this._game.events.on('prerender', () => { 72 | this._stats.begin(); 73 | }); 74 | 75 | this._game.events.on('postrender', () => { 76 | this._stats.end(); 77 | }); 78 | 79 | resolvePromise(this); 80 | } 81 | } 82 | } 83 | 84 | this._stats = stats; 85 | 86 | this._game = new Phaser.Game(options); 87 | 88 | this._screen = { 89 | width: options.width, 90 | height: options.height 91 | } 92 | } 93 | 94 | get canvas() { 95 | return this._game.canvas; 96 | } 97 | 98 | /** 99 | * Reference to the renderer's screen rectangle. Its safe to use as filterArea or hitArea for whole screen 100 | * 101 | * @member {Object} 102 | * @readonly 103 | */ 104 | get screen() { 105 | return this._screen; 106 | } 107 | 108 | /** 109 | * The Phaser game object 110 | * 111 | * @member {Object} 112 | * @readonly 113 | */ 114 | get game() { 115 | return this._game; 116 | } 117 | 118 | /** 119 | * The single scene that we use for our tests 120 | * 121 | * @member {Object} 122 | * @readonly 123 | */ 124 | get scene() { 125 | return this._game.scene.scenes[0]; 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /src/js/phaser3/load.js: -------------------------------------------------------------------------------- 1 | import loadScript from '../loadScript.js'; 2 | import storage from '../storage.js'; 3 | import App from './App.js'; 4 | 5 | export default function loadPhaser(stats, gui) { 6 | let resolvePromise; 7 | 8 | const versions = [ 9 | "3.0.0", "3.1.2", "3.2.1", "3.3.0", "3.4.0", "3.5.1", "3.6.1", "3.7.1", "3.8.0", "3.9.0", 10 | "3.10.1","3.11.0", "3.12.0", "3.13.0", "3.14.0", "3.15.1", "3.16.2", "3.17.0", "3.18.1", "3.19.0", 11 | "3.20.1", "3.21.0", "3.22.0", "3.23.0", "3.24.1", 12 | "3.50.1", "3.51.0", "3.52.0", "3.53.1", "3.54.0", "3.55.2" 13 | ].reverse(); 14 | 15 | const guiData = { 16 | version: versions.includes(storage.get('version')) ? storage.get('version') : versions[0] 17 | }; 18 | 19 | storage.set('version', guiData.version); 20 | 21 | const guiController = gui.add(guiData, 'version', versions) 22 | guiController.onChange((version) => { 23 | storage.set('version', version); 24 | 25 | window.location.href = storage.url().href; 26 | }); 27 | 28 | let libUrl = `https://cdn.jsdelivr.net/npm/phaser@${guiData.version}/dist/phaser.min.js`; 29 | 30 | loadScript(libUrl) 31 | .catch(() => { 32 | console.log(`Could not load Phaser\n[${guiData.version}] from [${libUrl}]\nMay not be a valid version`); 33 | }) 34 | .then(() => { 35 | if (window.Phaser) { 36 | new App(resolvePromise, stats); 37 | } 38 | }); 39 | 40 | return new Promise((resolve) => { 41 | resolvePromise = resolve; 42 | }); 43 | } 44 | -------------------------------------------------------------------------------- /src/js/phaser3/scenes.js: -------------------------------------------------------------------------------- 1 | import BitmapTextStatic from './scenes/BitmapTextStatic'; 2 | import BitmapTextCounting from './scenes/BitmapTextCounting'; 3 | import CanvasTextStatic from './scenes/CanvasTextStatic'; 4 | import CanvasTextCounting from './scenes/CanvasTextCounting'; 5 | import GraphicsComplex from './scenes/GraphicsComplex.js'; 6 | import GraphicsSimple from './scenes/GraphicsSimple.js'; 7 | import SpritesAndGraphics from './scenes/SpritesAndGraphics.js'; 8 | import Spritesheet from './scenes/Spritesheet.js'; 9 | import SpritesMultipleTextures from './scenes/SpritesMultipleTextures.js'; 10 | import SpritesSingleTexture from './scenes/SpritesSingleTexture.js'; 11 | 12 | // export in the order you wish them to appear in the drop down list 13 | export default [ 14 | SpritesSingleTexture, 15 | SpritesMultipleTextures, 16 | Spritesheet, 17 | GraphicsSimple, 18 | GraphicsComplex, 19 | SpritesAndGraphics, 20 | CanvasTextStatic, 21 | CanvasTextCounting, 22 | BitmapTextStatic, 23 | BitmapTextCounting 24 | ] 25 | -------------------------------------------------------------------------------- /src/js/phaser3/scenes/BitmapTextCounting.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class BitmapTextCounting extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Text: Bitmap Counting'; 8 | this.description = 'Text created via the Bitmap Fonts. '; 9 | this.description += 'Only 1 in a hundred of the visible texts update each frame. '; 10 | this.description += 'Advantages: Fastest way to render text. Changing text does not effect rendering performance. '; 11 | this.description += 'Disadvantages: Cannot change text style dynamically at run time. '; 12 | 13 | this._frameCount = 0; 14 | } 15 | 16 | _update(delta) { 17 | super._update(delta); 18 | 19 | const childrenToCount = this._children.length / 100 || 0; 20 | ++this._frameCount; 21 | 22 | for (let i = this._children.length - childrenToCount; i < this._children.length; ++i) { 23 | this._children[i].text = this._frameCount; 24 | } 25 | } 26 | 27 | _create(objectCount) { 28 | for (let i = 0; i < this._children.length; ++i) { 29 | this._children[i].text = 'WebGL'; 30 | } 31 | 32 | for (let i = this._children.length; i < objectCount; ++i) { 33 | const text = this._app.scene.add.bitmapText(0, 0, 'Desyrel', 'WebGL', 35, 'center'); 34 | text.setOrigin(0.5); 35 | text.setPosition(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 36 | } 37 | } 38 | 39 | _destroy(objectCount = 0) { 40 | super._destroy(objectCount); 41 | for (let i = 0; i < this._children.length; ++i) { 42 | this._children[i].text = 'WebGL'; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/js/phaser3/scenes/BitmapTextStatic.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class BitmapTextStatic extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Text: Bitmap Static'; 8 | this.description = 'Text created via the Bitmap Fonts. '; 9 | this.description += 'Advantages: Fastest way to render text. '; 10 | this.description += 'Disadvantages: Cannot change text style dynamically at run time. '; 11 | } 12 | 13 | _create(objectCount) { 14 | for (let i = this._children.length; i < objectCount; ++i) { 15 | const text = this._app.scene.add.bitmapText(0, 0, 'Desyrel', 'WebGL', 35, 'center'); 16 | text.setOrigin(0.5); 17 | text.setPosition(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/js/phaser3/scenes/CanvasTextCounting.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class CanvasTextCounting extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Text: Canvas Counting'; 8 | this.description = 'Text created via the Canvas API, with the canvas then used as a texture for a sprite. '; 9 | this.description += 'Only 1 in a hundred of the visible texts update each frame. '; 10 | this.description += 'Advantages: Dynamic and flexible styling. '; 11 | this.description += 'Disadvantages: Textures have to be re-created and uploaded to the GPU each time the text or style changes, which can be slow. '; 12 | this.description += 'Also, because each text has its own texture, the GPU is swapping between them a lot. '; 13 | 14 | this._colors = [0x29BF12, 0xABFF4F, 0x18BDBD, 0xF21B3F, 0xFF9914]; 15 | 16 | this._frameCount = 0; 17 | } 18 | 19 | _update(delta) { 20 | super._update(delta); 21 | 22 | const childrenToCount = this._children.length / 100 || 0; 23 | ++this._frameCount; 24 | 25 | for (let i = this._children.length - childrenToCount; i < this._children.length; ++i) { 26 | this._children[i].text = this._frameCount; 27 | } 28 | } 29 | 30 | _create(objectCount) { 31 | for (let i = 0; i < this._children.length; ++i) { 32 | this._children[i].text = 'WebGL'; 33 | } 34 | 35 | for (let i = this._children.length; i < objectCount; ++i) { 36 | const color = this._colors[this._children.length % this._colors.length]; 37 | const text = this._app.scene.add.text(0, 0, 'WebGL', { 38 | fontFamily: 'Arial', 39 | fontSize: 30, 40 | color: `#${color.toString(16)}`, 41 | shadow: { 42 | offsetX: 1, 43 | offsetY: 1, 44 | color: '#000000', 45 | blur: 1, 46 | stroke: true, 47 | fill: true 48 | } 49 | }); 50 | text.setOrigin(0.5); 51 | text.setPosition(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 52 | } 53 | } 54 | 55 | _destroy(objectCount = 0) { 56 | super._destroy(objectCount); 57 | for (let i = 0; i < this._children.length; ++i) { 58 | this._children[i].text = 'WebGL'; 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/js/phaser3/scenes/CanvasTextStatic.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class CanvasTextStatic extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Text: Canvas Static'; 8 | this.description = 'Text created via the Canvas API, with the canvas then used as a texture for a sprite. '; 9 | this.description += 'Advantages: Dynamic and flexible styling. '; 10 | this.description += 'Disadvantages: Textures have to be re-created and uploaded to the GPU each time the text or style changes, which can be slow. '; 11 | this.description += 'Also, because each text has its own texture, the GPU is swapping between them a lot. '; 12 | 13 | this._colors = [0x29BF12, 0xABFF4F, 0x18BDBD, 0xF21B3F, 0xFF9914]; 14 | } 15 | 16 | _create(objectCount) { 17 | for (let i = this._children.length; i < objectCount; ++i) { 18 | const color = this._colors[this._children.length % this._colors.length]; 19 | const text = this._app.scene.add.text(0, 0, 'WebGL', { 20 | fontFamily: 'Arial', 21 | fontSize: 30, 22 | color: `#${color.toString(16)}`, 23 | shadow: { 24 | offsetX: 1, 25 | offsetY: 1, 26 | color: '#000000', 27 | blur: 1, 28 | stroke: true, 29 | fill: true 30 | } 31 | }); 32 | text.setOrigin(0.5); 33 | text.setPosition(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/js/phaser3/scenes/GraphicsComplex.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class GraphicsComplex extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Graphics: Complex'; 8 | this.description = 'One of four complex shapes types are used, making more advanced techniques are used to keep performance up.'; 9 | 10 | this._colors = [0x29BF12, 0xABFF4F, 0x08BDBD, 0xF21B3F, 0xFF9914]; 11 | } 12 | 13 | _create(objectCount) { 14 | for (let i = this._children.length; i < objectCount; ++i) { 15 | const color = this._colors[this._children.length % this._colors.length]; 16 | const graphic = this._app.scene.add.graphics({ fillStyle: { color } }); 17 | 18 | const type = this._children.length % 4; 19 | if (type === 0) { 20 | const polygon = this._drawStar(0, 0, 5, 30, 20, 1); 21 | graphic.fillPoints(polygon.points, true); 22 | } else if (type === 1) { 23 | graphic.fillTriangleShape(new Phaser.Geom.Triangle(-15, -30, 15, 15, -30, 15)); 24 | } else if (type === 2) { 25 | const polygon = new Phaser.Geom.Polygon([-15, -30, -15, 0, 15, 15, -30, 15]); 26 | graphic.fillPoints(polygon.points, true) 27 | } else { 28 | graphic.fillEllipseShape(new Phaser.Geom.Ellipse(0, 0, 60, 30)); 29 | } 30 | 31 | graphic.x = Math.random() * this._app.screen.width; 32 | graphic.y = Math.random() * this._app.screen.height 33 | } 34 | } 35 | 36 | _drawStar(x, y, points, radius, innerRadius, rotation = 0) { 37 | innerRadius = innerRadius || radius / 2; 38 | 39 | const startAngle = (-1 * Math.PI / 2) + rotation; 40 | const len = points * 2; 41 | const delta = Math.PI * 2 / len; 42 | const polygon = []; 43 | 44 | for (let i = 0; i < len; i++) { 45 | const r = i % 2 ? innerRadius : radius; 46 | const angle = (i * delta) + startAngle; 47 | 48 | polygon.push( 49 | x + (r * Math.cos(angle)), 50 | y + (r * Math.sin(angle)) 51 | ); 52 | } 53 | 54 | return new Phaser.Geom.Polygon(polygon); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/js/phaser3/scenes/GraphicsSimple.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class GraphicsSimple extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Graphics: Simple'; 8 | this.description = 'Only a single square graphic type is created; this scene should test the basic raw graphics rendering power.'; 9 | 10 | this._colors = [0x29BF12, 0xABFF4F, 0x08BDBD, 0xF21B3F, 0xFF9914]; 11 | } 12 | 13 | _create(objectCount) { 14 | for (let i = this._children.length; i < objectCount; ++i) { 15 | const color = this._colors[this._children.length % this._colors.length]; 16 | const graphic = this._app.scene.add.graphics({ fillStyle: { color } }); 17 | graphic.fillRectShape(new Phaser.Geom.Rectangle(-15, -15, 30, 30)); 18 | graphic.x = Math.random() * this._app.screen.width; 19 | graphic.y = Math.random() * this._app.screen.height 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/js/phaser3/scenes/IScene.js: -------------------------------------------------------------------------------- 1 | export default class IScene { 2 | constructor(app, gui) { 3 | this._app = app; 4 | this._gui = gui; 5 | 6 | this._children = this._app.scene.children.list; 7 | 8 | this.title = ''; 9 | this.description = ''; 10 | 11 | this._targetMS = 1000 / 60; 12 | } 13 | 14 | start(objectCount) { 15 | console.log(`Scene Changed: ${this.title}`); 16 | console.log(this.description); 17 | 18 | this._app.scene.sys.events.on('update', this._callUpdate, this); 19 | 20 | this._create(objectCount); 21 | } 22 | 23 | stop() { 24 | this._app.scene.sys.events.off('update', this._callUpdate, this); 25 | 26 | this._destroy(); 27 | } 28 | 29 | changeObjectCount(objectCount) { 30 | if (objectCount > this._children.length) { 31 | this._create(objectCount); 32 | } else if (objectCount < this._children.length) { 33 | this._destroy(objectCount) 34 | } 35 | } 36 | 37 | _callUpdate(time, deltaMS) { 38 | const delta = deltaMS / this._targetMS; 39 | this._update(delta); 40 | } 41 | 42 | _update(delta) { 43 | for (let i = 0; i < this._children.length; ++i) { 44 | this._children[i].rotation += 0.05 * delta; 45 | } 46 | } 47 | 48 | _create() { 49 | throw new Error('IScene _create function must be overridden'); 50 | } 51 | 52 | _destroy(objectCount = 0) { 53 | this._children.length = objectCount; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/js/phaser3/scenes/SpritesAndGraphics.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class SpritesAndGraphics extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Sprites and Graphics'; 8 | this.description = 'A mix of individual sprites, sprites from a spritesheet and graphics'; 9 | 10 | this._colors = [0x29BF12, 0xABFF4F, 0x08BDBD, 0xF21B3F, 0xFF9914]; 11 | this._bunnyIndex = 1; 12 | this._shapeIndex = 0; 13 | } 14 | 15 | _create(objectCount) { 16 | for (let i = this._children.length; i < objectCount; ++i) { 17 | if (i % 20 < 7) { 18 | const sprite = this._app.scene.add.sprite(0, 0, `images/bunny${this._bunnyIndex}.png`); 19 | this._bunnyIndex === 12 ? this._bunnyIndex = 1 : ++this._bunnyIndex; 20 | 21 | sprite.setPosition(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 22 | } else if (i % 20 < 14) { 23 | const sprite = this._app.scene.add.sprite(0, 0, `spritesheets/bunnies.png`, `spritesheets/bunny${this._bunnyIndex}.png`); 24 | this._bunnyIndex === 12 ? this._bunnyIndex = 1 : ++this._bunnyIndex; 25 | 26 | sprite.setPosition(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 27 | } else if (i % 20 < 18) { 28 | const color = this._colors[this._children.length % this._colors.length]; 29 | const graphic = this._app.scene.add.graphics({ fillStyle: { color } }); 30 | graphic.fillRectShape(new Phaser.Geom.Rectangle(-15, -15, 30, 30)); 31 | 32 | graphic.x = Math.random() * this._app.screen.width; 33 | graphic.y = Math.random() * this._app.screen.heigh; 34 | } else { 35 | const color = this._colors[this._children.length % this._colors.length]; 36 | const graphic = this._app.scene.add.graphics({ fillStyle: { color } }); 37 | 38 | if (this._shapeIndex === 0) { 39 | const polygon = this._drawStar(0, 0, 5, 30, 20, 1); 40 | graphic.fillPoints(polygon.points, true); 41 | } else if (this._shapeIndex === 1) { 42 | graphic.fillTriangleShape(new Phaser.Geom.Triangle(-15, -30, 15, 15, -30, 15)); 43 | } else if (this._shapeIndex === 2) { 44 | const polygon = new Phaser.Geom.Polygon([-15, -30, -15, 0, 15, 15, -30, 15]); 45 | graphic.fillPoints(polygon.points, true) 46 | } else { 47 | graphic.fillEllipseShape(new Phaser.Geom.Ellipse(0, 0, 60, 30)); 48 | } 49 | 50 | this._shapeIndex === 4 ? this._shapeIndex = 0 : ++this._shapeIndex; 51 | 52 | graphic.x = Math.random() * this._app.screen.width; 53 | graphic.y = Math.random() * this._app.screen.height 54 | } 55 | } 56 | } 57 | 58 | _drawStar(x, y, points, radius, innerRadius, rotation = 0) { 59 | innerRadius = innerRadius || radius / 2; 60 | 61 | const startAngle = (-1 * Math.PI / 2) + rotation; 62 | const len = points * 2; 63 | const delta = Math.PI * 2 / len; 64 | const polygon = []; 65 | 66 | for (let i = 0; i < len; i++) { 67 | const r = i % 2 ? innerRadius : radius; 68 | const angle = (i * delta) + startAngle; 69 | 70 | polygon.push( 71 | x + (r * Math.cos(angle)), 72 | y + (r * Math.sin(angle)) 73 | ); 74 | } 75 | 76 | return new Phaser.Geom.Polygon(polygon); 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/js/phaser3/scenes/SpritesMultipleTextures.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class SpritesSingleTexture extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Sprites: Multiple Textures (12)'; 8 | this.description = 'There are 12 bunnies all using their own texture. ' 9 | this.description += 'Renderers that cannot support multi-texturing will show a decrease in speed compared to a single texture. ' 10 | this.description += 'Those that do support multi-texturing could reach single texture performance if the GPU has enough texture units.'; 11 | 12 | this._bunnyIndex = 1; 13 | } 14 | 15 | _create(objectCount) { 16 | for (let i = this._children.length; i < objectCount; ++i) { 17 | const sprite = this._app.scene.add.sprite(0, 0, `images/bunny${this._bunnyIndex}.png`); 18 | this._bunnyIndex === 12 ? this._bunnyIndex = 1 : ++this._bunnyIndex; 19 | sprite.setPosition(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/js/phaser3/scenes/SpritesSingleTexture.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class SpritesSingleTexture extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Sprites: Single Texture'; 8 | this.description = 'A single bunny texture is used; this scene should test the basic raw sprite rendering power.' 9 | } 10 | 11 | _create(objectCount) { 12 | for (let i = this._children.length; i < objectCount; ++i) { 13 | const sprite = this._app.scene.add.sprite(0, 0, 'images/bunny1.png'); 14 | sprite.setPosition(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/js/phaser3/scenes/Spritesheet.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class Spritesheet extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Spritesheet'; 8 | this.description = 'There are 12 bunnies, but all on one spritesheet. ' 9 | this.description += 'Since all bunnies come from one texture, the render speed should be comparable to as if just a single texture i used.'; 10 | 11 | this._bunnyIndex = 1; 12 | } 13 | 14 | _create(objectCount) { 15 | for (let i = this._children.length; i < objectCount; ++i) { 16 | const sprite = this._app.scene.add.sprite(0, 0, `spritesheets/bunnies.png`, `spritesheets/bunny${this._bunnyIndex}.png`); 17 | this._bunnyIndex === 12 ? this._bunnyIndex = 1 : ++this._bunnyIndex; 18 | sprite.setPosition(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/js/pixi/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @typedef {Object} PixiConfig 3 | * 4 | * @property {number} [width=960] - the width of the renderers view 5 | * @property {number} [height=540] - the height of the renderers view 6 | * @property {boolean} [transparent=false] - If the render view is transparent, default false 7 | * @property {boolean} [antialias=false] - sets antialias (only applicable in chrome at the moment) 8 | * @property {boolean} [preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you 9 | * need to call toDataUrl on the webgl context 10 | * @property {number} [resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 11 | * @property {boolean} [forceCanvas=false] - prevents selection of WebGL renderer, even if such is present 12 | * @property {number} [backgroundColor=0x1099bb] - The background color of the rendered area 13 | * (shown if not transparent). 14 | * @property {boolean} [clearBeforeRender=true] - This sets if the renderer will clear the canvas or 15 | * not before the new render pass. 16 | * @property {boolean} [roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, 17 | * stopping pixel interpolation. 18 | * @property {boolean} [forceFXAA=false] - forces FXAA antialiasing to be used over native. 19 | * FXAA is faster, but may not always look as great **webgl only** 20 | * @property {boolean} [legacy=false] - `true` to ensure compatibility with older / less advanced devices. 21 | * If you experience unexplained flickering try setting this to true. **webgl only** 22 | * @property {string} [powerPreference=high-performance] - Parameter passed to webgl context, set to "high-performance" 23 | * for devices with dual graphics card **webgl only** 24 | */ 25 | 26 | /** 27 | * Convenience class to create a new PIXI application. 28 | */ 29 | export default class App { 30 | /** 31 | * @param {function} resolvePromise - call when assets have preloader 32 | * @param {Object} stats - stats instance 33 | */ 34 | constructor(resolvePromise, stats) { 35 | PIXI.Loader.shared 36 | .add('images/bunny1.png') 37 | .add('images/bunny2.png') 38 | .add('images/bunny3.png') 39 | .add('images/bunny4.png') 40 | .add('images/bunny5.png') 41 | .add('images/bunny6.png') 42 | .add('images/bunny7.png') 43 | .add('images/bunny8.png') 44 | .add('images/bunny9.png') 45 | .add('images/bunny10.png') 46 | .add('images/bunny11.png') 47 | .add('images/bunny12.png') 48 | .add('spritesheets/bunnies.json') 49 | .add('bitmap-fonts/desyrel.xml') 50 | .load(() => { 51 | resolvePromise(this); 52 | }); 53 | 54 | const options = { 55 | width: 960, 56 | height: 540, 57 | transparent: false, 58 | antialias: false, 59 | preserveDrawingBuffer: false, 60 | resolution: 1, 61 | forceCanvas: false, 62 | backgroundColor: 0x1099bb, 63 | clearBeforeRender: true, 64 | roundPixels: false, 65 | forceFXAA: false, 66 | legacy: false, 67 | powerPreference: 'high-performance' 68 | }; 69 | 70 | this._stats = stats; 71 | 72 | const RendererType = PIXI.utils.isWebGLSupported() ? PIXI.Renderer || PIXI.WebGLRenderer : PIXI.CanvasRender; 73 | if (!RendererType) { 74 | return window.alert("No valid renderer found"); 75 | } 76 | 77 | /** 78 | * WebGL renderer if available, otherwise CanvasRenderer 79 | * 80 | * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer} 81 | */ 82 | this._renderer; 83 | 84 | if (PIXI.VERSION[0] === '5') { 85 | this._renderer = new RendererType(options); 86 | } else { 87 | this._renderer = new RendererType(options.width, options.height, options); 88 | } 89 | 90 | /** 91 | * The root display container that's rendered. 92 | * 93 | * @member {PIXI.Container} 94 | */ 95 | this._stage = new PIXI.Container(); 96 | 97 | this._screen = { 98 | width: options.width, 99 | height: options.height 100 | } 101 | 102 | /** 103 | * Ticker for doing render updates. 104 | * 105 | * @member {PIXI.ticker.Ticker} 106 | */ 107 | this.ticker = PIXI.Ticker ? new PIXI.Ticker() : new PIXI.ticker.Ticker(); 108 | this.ticker.add(this._render, this); 109 | this.ticker.start(); 110 | 111 | this.canvas.classList.add('center'); 112 | document.getElementById('frame').appendChild(this.canvas); 113 | } 114 | 115 | /** 116 | * Render the current stage. 117 | */ 118 | _render() { 119 | this._stats.begin(); 120 | this._renderer.render(this.stage); 121 | this._stats.end(); 122 | } 123 | 124 | get canvas() { 125 | return this._renderer.view; 126 | } 127 | 128 | /** 129 | * The root display container that's rendered. 130 | * 131 | * @member {PIXI.Container} 132 | * @readonly 133 | */ 134 | get stage() { 135 | return this._stage; 136 | } 137 | 138 | /** 139 | * Reference to the renderer's screen rectangle. Its safe to use as filterArea or hitArea for whole screen 140 | * 141 | * @member {Object} 142 | * @readonly 143 | */ 144 | get screen() { 145 | return this._screen; 146 | } 147 | } 148 | -------------------------------------------------------------------------------- /src/js/pixi/load.js: -------------------------------------------------------------------------------- 1 | import polyfillPixi from '../../vendor/polyfill-pixi.js'; 2 | import loadScript from '../loadScript.js'; 3 | import storage from '../storage.js'; 4 | import App from './App.js'; 5 | 6 | export default function loadPixi(stats, gui) { 7 | let resolvePromise; 8 | 9 | const versions = [ 10 | "v3.0.11", 11 | "v4.0.3", "v4.1.1", "v4.2.3", "v4.3.5", "v4.4.4", "v4.5.6", "v4.6.2", "v4.7.3", "v4.8.9", 12 | "v5.0.4", "v5.1.5", "v5.2.4", "v5.3.11", 13 | "v6.0.4", "v6.1.3", "v6.2.1", 14 | "dev" 15 | ].reverse(); 16 | 17 | const guiData = { 18 | version: versions.includes(storage.get('version')) ? storage.get('version') : 'dev' 19 | }; 20 | 21 | storage.set('version', guiData.version); 22 | 23 | const guiController = gui.add(guiData, 'version', versions) 24 | guiController.onChange((version) => { 25 | storage.set('version', version); 26 | 27 | window.location.href = storage.url().href; 28 | }); 29 | 30 | const libUrl = `https://pixijs.download/${guiData.version}/pixi.min.js`; 31 | 32 | loadScript(libUrl) 33 | .catch(() => { 34 | console.log(`Could not load Pixi\n[${guiData.version}] from [${libUrl}]\nMay not be a valid version`); 35 | }) 36 | .then(() => { 37 | if (window.PIXI) { 38 | polyfillPixi(); 39 | 40 | new App(resolvePromise, stats); 41 | } 42 | }); 43 | 44 | return new Promise((resolve) => { 45 | resolvePromise = resolve; 46 | }); 47 | } 48 | -------------------------------------------------------------------------------- /src/js/pixi/scenes.js: -------------------------------------------------------------------------------- 1 | import BitmapTextStatic from './scenes/BitmapTextStatic'; 2 | import BitmapTextCounting from './scenes/BitmapTextCounting'; 3 | import CanvasTextStatic from './scenes/CanvasTextStatic'; 4 | import CanvasTextCounting from './scenes/CanvasTextCounting'; 5 | import GraphicsComplex from './scenes/GraphicsComplex.js'; 6 | import GraphicsSimple from './scenes/GraphicsSimple.js'; 7 | import SpritesAndGraphics from './scenes/SpritesAndGraphics.js'; 8 | import Spritesheet from './scenes/Spritesheet.js'; 9 | import SpritesMultipleTextures from './scenes/SpritesMultipleTextures.js'; 10 | import SpritesSingleTexture from './scenes/SpritesSingleTexture.js'; 11 | 12 | // export in the order you wish them to appear in the drop down list 13 | export default [ 14 | SpritesSingleTexture, 15 | SpritesMultipleTextures, 16 | Spritesheet, 17 | GraphicsSimple, 18 | GraphicsComplex, 19 | SpritesAndGraphics, 20 | CanvasTextStatic, 21 | CanvasTextCounting, 22 | BitmapTextStatic, 23 | BitmapTextCounting 24 | ] 25 | -------------------------------------------------------------------------------- /src/js/pixi/scenes/BitmapTextCounting.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class BitmapTextCounting extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Text: Bitmap Counting'; 8 | this.description = 'Text created via the Bitmap Fonts. '; 9 | this.description += 'Only 1 in a hundred of the visible texts update each frame. '; 10 | this.description += 'Advantages: Fastest way to render text. Changing text does not effect rendering performance. '; 11 | this.description += 'Disadvantages: Cannot change text style dynamically at run time. '; 12 | 13 | this._frameCount = 0; 14 | } 15 | 16 | _update(delta) { 17 | super._update(delta); 18 | 19 | const childrenToCount = this._children.length / 100 || 0; 20 | ++this._frameCount; 21 | 22 | for (let i = this._children.length - childrenToCount; i < this._children.length; ++i) { 23 | this._children[i].text = this._frameCount; 24 | } 25 | } 26 | 27 | _create(objectCount) { 28 | for (let i = 0; i < this._children.length; ++i) { 29 | this._children[i].text = 'WebGL'; 30 | } 31 | 32 | for (let i = this._children.length; i < objectCount; ++i) { 33 | const text = new PIXI.BitmapText('WebGL', { 34 | font: '35px Desyrel', 35 | align: 'center' 36 | }); 37 | 38 | if (text.anchor) { 39 | text.anchor.set(0.5); 40 | } else { // for v3 41 | for (let i = 0; i < text.children.length; ++i) { 42 | text.children[i].x -= text.textWidth * 0.5; 43 | text.children[i].y -= text.textHeight * 0.5; 44 | } 45 | } 46 | text.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 47 | 48 | this._app.stage.addChild(text); 49 | } 50 | } 51 | 52 | _destroy(objectCount = 0) { 53 | super._destroy(objectCount); 54 | for (let i = 0; i < this._children.length; ++i) { 55 | this._children[i].text = 'WebGL'; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/js/pixi/scenes/BitmapTextStatic.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class BitmapTextStatic extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Text: Bitmap Static'; 8 | this.description = 'Text created via the Bitmap Fonts. '; 9 | this.description += 'Advantages: Fastest way to render text. '; 10 | this.description += 'Disadvantages: Cannot change text style dynamically at run time. '; 11 | } 12 | 13 | _create(objectCount) { 14 | for (let i = this._children.length; i < objectCount; ++i) { 15 | const text = new PIXI.extras.BitmapText('WebGL', { 16 | font: '35px Desyrel', 17 | align: 'center' 18 | }); 19 | 20 | if (text.anchor) { 21 | text.anchor.set(0.5); 22 | } else { // for v3 23 | for (let i = 0; i < text.children.length; ++i) { 24 | text.children[i].x -= text.textWidth * 0.5; 25 | text.children[i].y -= text.textHeight * 0.5; 26 | } 27 | } 28 | text.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 29 | 30 | this._app.stage.addChild(text); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/js/pixi/scenes/CanvasTextCounting.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class CanvasTextCounting extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Text: Canvas Counting'; 8 | this.description = 'Text created via the Canvas API, with the canvas then used as a texture for a sprite. '; 9 | this.description += 'Only 1 in a hundred of the visible texts update each frame. '; 10 | this.description += 'Advantages: Dynamic and flexible styling. '; 11 | this.description += 'Disadvantages: Textures have to be re-created and uploaded to the GPU each time the text or style changes, which can be slow. '; 12 | this.description += 'Also, because each text has its own texture, the GPU is swapping between them a lot. '; 13 | 14 | this._colors = [0x29BF12, 0xABFF4F, 0x18BDBD, 0xF21B3F, 0xFF9914]; 15 | 16 | this._frameCount = 0; 17 | } 18 | 19 | _update(delta) { 20 | super._update(delta); 21 | 22 | const childrenToCount = this._children.length / 100 || 0; 23 | ++this._frameCount; 24 | 25 | for (let i = this._children.length - childrenToCount; i < this._children.length; ++i) { 26 | this._children[i].text = this._frameCount; 27 | } 28 | } 29 | 30 | _create(objectCount) { 31 | for (let i = 0; i < this._children.length; ++i) { 32 | this._children[i].text = 'WebGL'; 33 | } 34 | 35 | for (let i = this._children.length; i < objectCount; ++i) { 36 | const color = this._colors[this._children.length % this._colors.length]; 37 | const text = new PIXI.Text('WebGL', { 38 | fontFamily: 'Arial', 39 | fontSize: 30, 40 | font: '30px Arial', // for backwards compatibility with v3 41 | dropShadow: true, 42 | dropShadowDistance: 1, 43 | dropShadowAngle: 3.141 / 4, 44 | dropShadowBlur: 1, 45 | fill: color 46 | }); 47 | text.anchor.set(0.5); 48 | text.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 49 | 50 | this._app.stage.addChild(text); 51 | } 52 | } 53 | 54 | _destroy(objectCount = 0) { 55 | super._destroy(objectCount); 56 | for (let i = 0; i < this._children.length; ++i) { 57 | this._children[i].text = 'WebGL'; 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/js/pixi/scenes/CanvasTextStatic.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class CanvasTextStatic extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Text: Canvas Static'; 8 | this.description = 'Text created via the Canvas API, with the canvas then used as a texture for a sprite. '; 9 | this.description += 'Advantages: Dynamic and flexible styling. '; 10 | this.description += 'Disadvantages: Textures have to be re-created and uploaded to the GPU each time the text or style changes, which can be slow. '; 11 | this.description += 'Also, because each text has its own texture, the GPU is swapping between them a lot. '; 12 | 13 | this._colors = [0x29BF12, 0xABFF4F, 0x18BDBD, 0xF21B3F, 0xFF9914]; 14 | } 15 | 16 | _create(objectCount) { 17 | for (let i = this._children.length; i < objectCount; ++i) { 18 | const color = this._colors[this._children.length % this._colors.length]; 19 | const text = new PIXI.Text('WebGL', { 20 | fontFamily: 'Arial', 21 | fontSize: 30, 22 | font: '30px Arial', // for backwards compatibility with v3 23 | dropShadow: true, 24 | dropShadowDistance: 1, 25 | dropShadowAngle: 3.141 / 4, 26 | dropShadowBlur: 1, 27 | fill: color 28 | }); 29 | text.anchor.set(0.5); 30 | text.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 31 | 32 | this._app.stage.addChild(text); 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/js/pixi/scenes/GraphicsComplex.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class GraphicsComplex extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Graphics: Complex'; 8 | this.description = 'One of four complex shapes types are used, making more advanced techniques are used to keep performance up.'; 9 | 10 | this._colors = [0x29BF12, 0xABFF4F, 0x08BDBD, 0xF21B3F, 0xFF9914]; 11 | } 12 | 13 | _create(objectCount) { 14 | for (let i = this._children.length; i < objectCount; ++i) { 15 | const color = this._colors[this._children.length % this._colors.length]; 16 | const graphic = new PIXI.Graphics(); 17 | graphic.beginFill(color); 18 | 19 | const type = this._children.length % 4; 20 | if (type === 0) { 21 | graphic.drawStar(0, 0, 5, 30, 20, 1); 22 | } else if (type === 1) { 23 | graphic.drawPolygon([-15, -30, 15, 15, -30, 15]); 24 | } else if (type === 2) { 25 | graphic.drawPolygon([-15, -30, -15, 0, 15, 15, -30, 15]); 26 | } else { 27 | graphic.drawEllipse(0, 0, 30, 15); 28 | } 29 | 30 | graphic.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 31 | 32 | this._app.stage.addChild(graphic); 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/js/pixi/scenes/GraphicsSimple.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class GraphicsSimple extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Graphics: Simple'; 8 | this.description = 'Only a single square graphic type is created; this scene should test the basic raw graphics rendering power.'; 9 | 10 | this._colors = [0x29BF12, 0xABFF4F, 0x08BDBD, 0xF21B3F, 0xFF9914]; 11 | } 12 | 13 | _create(objectCount) { 14 | for (let i = this._children.length; i < objectCount; ++i) { 15 | const color = this._colors[this._children.length % this._colors.length]; 16 | const graphic = new PIXI.Graphics(); 17 | graphic.beginFill(color); 18 | graphic.drawRect(-15, -15, 30, 30); 19 | graphic.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 20 | 21 | this._app.stage.addChild(graphic); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/js/pixi/scenes/IScene.js: -------------------------------------------------------------------------------- 1 | export default class IScene { 2 | constructor(app, gui) { 3 | this._app = app; 4 | this._gui = gui; 5 | 6 | this._children = this._app.stage.children; 7 | 8 | this.title = ''; 9 | this.description = ''; 10 | } 11 | 12 | start(objectCount) { 13 | console.log(`Scene Changed: ${this.title}`); 14 | console.log(this.description); 15 | 16 | this._app.ticker.add(this._update, this); 17 | 18 | this._create(objectCount); 19 | } 20 | 21 | stop() { 22 | this._app.ticker.remove(this._update, this); 23 | 24 | this._destroy(); 25 | } 26 | 27 | changeObjectCount(objectCount) { 28 | if (objectCount > this._children.length) { 29 | this._create(objectCount); 30 | } else if (objectCount < this._children.length) { 31 | this._destroy(objectCount) 32 | } 33 | } 34 | 35 | _update(delta) { 36 | for (let i = 0; i < this._children.length; ++i) { 37 | this._children[i].rotation += 0.05 * delta; 38 | } 39 | } 40 | 41 | _create() { 42 | throw new Error('IScene _create function must be overridden'); 43 | } 44 | 45 | _destroy(objectCount = 0) { 46 | this._children.length = objectCount; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/js/pixi/scenes/SpritesAndGraphics.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class SpritesAndGraphics extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Sprites and Graphics'; 8 | this.description = 'A mix of individual sprites, sprites from a spritesheet and graphics'; 9 | 10 | this._colors = [0x29BF12, 0xABFF4F, 0x08BDBD, 0xF21B3F, 0xFF9914]; 11 | this._bunnyIndex = 1; 12 | this._shapeIndex = 0; 13 | } 14 | 15 | _create(objectCount) { 16 | for (let i = this._children.length; i < objectCount; ++i) { 17 | if (i % 20 < 7) { 18 | const sprite = PIXI.Sprite.from(`images/bunny${this._bunnyIndex}.png`); 19 | this._bunnyIndex === 12 ? this._bunnyIndex = 1 : ++this._bunnyIndex; 20 | sprite.anchor.set(0.5); 21 | sprite.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 22 | 23 | this._app.stage.addChild(sprite); 24 | } else if (i % 20 < 14) { 25 | const sprite = PIXI.Sprite.from(`spritesheets/bunny${this._bunnyIndex}.png`); 26 | this._bunnyIndex === 12 ? this._bunnyIndex = 1 : ++this._bunnyIndex; 27 | sprite.anchor.set(0.5); 28 | sprite.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 29 | 30 | this._app.stage.addChild(sprite); 31 | } else if ( i % 20 < 18 ) { 32 | const color = this._colors[this._children.length % this._colors.length]; 33 | const graphic = new PIXI.Graphics(); 34 | graphic.beginFill(color); 35 | graphic.drawRect(-15, -15, 30, 30); 36 | graphic.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 37 | 38 | this._app.stage.addChild(graphic); 39 | } else { 40 | const color = this._colors[this._children.length % this._colors.length]; 41 | const graphic = new PIXI.Graphics(); 42 | graphic.beginFill(color); 43 | 44 | if (this._shapeIndex === 0) { 45 | graphic.drawStar(0, 0, 5, 30, 20, 1); 46 | } else if (this._shapeIndex === 1) { 47 | graphic.drawPolygon([-15, -30, 15, 15, -30, 15]); 48 | } else if (this._shapeIndex === 2) { 49 | graphic.drawPolygon([-15, -30, -15, 0, 15, 15, -30, 15]); 50 | } else { 51 | graphic.drawEllipse(0, 0, 30, 15); 52 | } 53 | 54 | this._shapeIndex === 4 ? this._shapeIndex = 0 : ++this._shapeIndex; 55 | 56 | graphic.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 57 | 58 | this._app.stage.addChild(graphic); 59 | } 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/js/pixi/scenes/SpritesMultipleTextures.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class SpritesMultipleTextures extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Sprites: Multiple Textures (12)'; 8 | this.description = 'There are 12 bunnies all using their own texture. ' 9 | this.description += 'Renderers that cannot support multi-texturing will show a decrease in speed compared to a single texture. ' 10 | this.description += 'Those that do support multi-texturing could reach single texture performance if the GPU has enough texture units.'; 11 | 12 | this._bunnyIndex = 1; 13 | } 14 | 15 | _create(objectCount) { 16 | for (let i = this._children.length; i < objectCount; ++i) { 17 | const sprite = PIXI.Sprite.from(`images/bunny${this._bunnyIndex}.png`); 18 | this._bunnyIndex === 12 ? this._bunnyIndex = 1 : ++this._bunnyIndex; 19 | sprite.anchor.set(0.5); 20 | sprite.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 21 | 22 | this._app.stage.addChild(sprite); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/js/pixi/scenes/SpritesSingleTexture.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class SpritesSingleTexture extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Sprites: Single Texture'; 8 | this.description = 'A single bunny texture is used; this scene should test the basic raw sprite rendering power.' 9 | } 10 | 11 | _create(objectCount) { 12 | for (let i = this._children.length; i < objectCount; ++i) { 13 | const sprite = PIXI.Sprite.from('images/bunny1.png'); 14 | sprite.anchor.set(0.5); 15 | sprite.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 16 | 17 | this._app.stage.addChild(sprite); 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/js/pixi/scenes/Spritesheet.js: -------------------------------------------------------------------------------- 1 | import IScene from './IScene.js'; 2 | 3 | export default class Spritesheet extends IScene { 4 | constructor(app, gui) { 5 | super(app, gui); 6 | 7 | this.title = 'Spritesheet'; 8 | this.description = 'There are 12 bunnies, but all on one spritesheet. ' 9 | this.description += 'Since all bunnies come from one texture, the render speed should be comparable to as if just a single texture i used.'; 10 | 11 | this._bunnyIndex = 1; 12 | } 13 | 14 | _create(objectCount) { 15 | for (let i = this._children.length; i < objectCount; ++i) { 16 | const sprite = PIXI.Sprite.from(`spritesheets/bunny${this._bunnyIndex}.png`); 17 | this._bunnyIndex === 12 ? this._bunnyIndex = 1 : ++this._bunnyIndex; 18 | sprite.anchor.set(0.5); 19 | sprite.position.set(Math.random() * this._app.screen.width, Math.random() * this._app.screen.height); 20 | 21 | this._app.stage.addChild(sprite); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/js/storage.js: -------------------------------------------------------------------------------- 1 | const url = new URL(`${location.protocol}//${location.host}${location.pathname}${window.location.search}`); 2 | 3 | export default { 4 | url: () => { 5 | return url; 6 | }, 7 | 8 | get: (key) => { 9 | const fromUrl = url.searchParams.get(key); 10 | if (typeof fromUrl !== undefined) { 11 | return fromUrl; 12 | } 13 | 14 | const fromLocalStorage = localStorage.getItem(key); 15 | if (typeof fromLocalStorage !== undefined) { 16 | return fromLocalStorage 17 | } 18 | 19 | return undefined; 20 | }, 21 | 22 | set: (key, value) => { 23 | url.searchParams.set(key, value); 24 | localStorage.setItem(key, value); 25 | window.history.replaceState({}, document.title, url.href); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/spritesheets/bunnies.json: -------------------------------------------------------------------------------- 1 | { 2 | "frames": { 3 | "spritesheets/bunny1.png": { 4 | "frame": { 5 | "x": 4, 6 | "y": 4, 7 | "w": 25, 8 | "h": 32 9 | }, 10 | "rotated": false, 11 | "trimmed": false, 12 | "spriteSourceSize": { 13 | "x": 0, 14 | "y": 0, 15 | "w": 25, 16 | "h": 32 17 | }, 18 | "sourceSize": { 19 | "w": 25, 20 | "h": 32 21 | }, 22 | "anchor": { 23 | "x": 0.5, 24 | "y": 0.5 25 | } 26 | }, 27 | "spritesheets/bunny2.png": { 28 | "frame": { 29 | "x": 29, 30 | "y": 4, 31 | "w": 25, 32 | "h": 32 33 | }, 34 | "rotated": false, 35 | "trimmed": false, 36 | "spriteSourceSize": { 37 | "x": 0, 38 | "y": 0, 39 | "w": 25, 40 | "h": 32 41 | }, 42 | "sourceSize": { 43 | "w": 25, 44 | "h": 32 45 | }, 46 | "anchor": { 47 | "x": 0.5, 48 | "y": 0.5 49 | } 50 | }, 51 | "spritesheets/bunny3.png": { 52 | "frame": { 53 | "x": 54, 54 | "y": 4, 55 | "w": 25, 56 | "h": 32 57 | }, 58 | "rotated": false, 59 | "trimmed": false, 60 | "spriteSourceSize": { 61 | "x": 0, 62 | "y": 0, 63 | "w": 25, 64 | "h": 32 65 | }, 66 | "sourceSize": { 67 | "w": 25, 68 | "h": 32 69 | }, 70 | "anchor": { 71 | "x": 0.5, 72 | "y": 0.5 73 | } 74 | }, 75 | "spritesheets/bunny4.png": { 76 | "frame": { 77 | "x": 79, 78 | "y": 4, 79 | "w": 25, 80 | "h": 32 81 | }, 82 | "rotated": false, 83 | "trimmed": false, 84 | "spriteSourceSize": { 85 | "x": 0, 86 | "y": 0, 87 | "w": 25, 88 | "h": 32 89 | }, 90 | "sourceSize": { 91 | "w": 25, 92 | "h": 32 93 | }, 94 | "anchor": { 95 | "x": 0.5, 96 | "y": 0.5 97 | } 98 | }, 99 | "spritesheets/bunny5.png": { 100 | "frame": { 101 | "x": 4, 102 | "y": 36, 103 | "w": 25, 104 | "h": 32 105 | }, 106 | "rotated": false, 107 | "trimmed": false, 108 | "spriteSourceSize": { 109 | "x": 0, 110 | "y": 0, 111 | "w": 25, 112 | "h": 32 113 | }, 114 | "sourceSize": { 115 | "w": 25, 116 | "h": 32 117 | }, 118 | "anchor": { 119 | "x": 0.5, 120 | "y": 0.5 121 | } 122 | }, 123 | "spritesheets/bunny6.png": { 124 | "frame": { 125 | "x": 29, 126 | "y": 36, 127 | "w": 25, 128 | "h": 32 129 | }, 130 | "rotated": false, 131 | "trimmed": false, 132 | "spriteSourceSize": { 133 | "x": 0, 134 | "y": 0, 135 | "w": 25, 136 | "h": 32 137 | }, 138 | "sourceSize": { 139 | "w": 25, 140 | "h": 32 141 | }, 142 | "anchor": { 143 | "x": 0.5, 144 | "y": 0.5 145 | } 146 | }, 147 | "spritesheets/bunny7.png": { 148 | "frame": { 149 | "x": 54, 150 | "y": 36, 151 | "w": 25, 152 | "h": 32 153 | }, 154 | "rotated": false, 155 | "trimmed": false, 156 | "spriteSourceSize": { 157 | "x": 0, 158 | "y": 0, 159 | "w": 25, 160 | "h": 32 161 | }, 162 | "sourceSize": { 163 | "w": 25, 164 | "h": 32 165 | }, 166 | "anchor": { 167 | "x": 0.5, 168 | "y": 0.5 169 | } 170 | }, 171 | "spritesheets/bunny8.png": { 172 | "frame": { 173 | "x": 79, 174 | "y": 36, 175 | "w": 25, 176 | "h": 32 177 | }, 178 | "rotated": false, 179 | "trimmed": false, 180 | "spriteSourceSize": { 181 | "x": 0, 182 | "y": 0, 183 | "w": 25, 184 | "h": 32 185 | }, 186 | "sourceSize": { 187 | "w": 25, 188 | "h": 32 189 | }, 190 | "anchor": { 191 | "x": 0.5, 192 | "y": 0.5 193 | } 194 | }, 195 | "spritesheets/bunny9.png": { 196 | "frame": { 197 | "x": 4, 198 | "y": 68, 199 | "w": 25, 200 | "h": 32 201 | }, 202 | "rotated": false, 203 | "trimmed": false, 204 | "spriteSourceSize": { 205 | "x": 0, 206 | "y": 0, 207 | "w": 25, 208 | "h": 32 209 | }, 210 | "sourceSize": { 211 | "w": 25, 212 | "h": 32 213 | }, 214 | "anchor": { 215 | "x": 0.5, 216 | "y": 0.5 217 | } 218 | }, 219 | "spritesheets/bunny10.png": { 220 | "frame": { 221 | "x": 29, 222 | "y": 68, 223 | "w": 25, 224 | "h": 32 225 | }, 226 | "rotated": false, 227 | "trimmed": false, 228 | "spriteSourceSize": { 229 | "x": 0, 230 | "y": 0, 231 | "w": 25, 232 | "h": 32 233 | }, 234 | "sourceSize": { 235 | "w": 25, 236 | "h": 32 237 | }, 238 | "anchor": { 239 | "x": 0.5, 240 | "y": 0.5 241 | } 242 | }, 243 | "spritesheets/bunny11.png": { 244 | "frame": { 245 | "x": 54, 246 | "y": 68, 247 | "w": 25, 248 | "h": 32 249 | }, 250 | "rotated": false, 251 | "trimmed": false, 252 | "spriteSourceSize": { 253 | "x": 0, 254 | "y": 0, 255 | "w": 25, 256 | "h": 32 257 | }, 258 | "sourceSize": { 259 | "w": 25, 260 | "h": 32 261 | }, 262 | "anchor": { 263 | "x": 0.5, 264 | "y": 0.5 265 | } 266 | }, 267 | "spritesheets/bunny12.png": { 268 | "frame": { 269 | "x": 79, 270 | "y": 68, 271 | "w": 25, 272 | "h": 32 273 | }, 274 | "rotated": false, 275 | "trimmed": false, 276 | "spriteSourceSize": { 277 | "x": 0, 278 | "y": 0, 279 | "w": 25, 280 | "h": 32 281 | }, 282 | "sourceSize": { 283 | "w": 25, 284 | "h": 32 285 | }, 286 | "anchor": { 287 | "x": 0.5, 288 | "y": 0.5 289 | } 290 | } 291 | }, 292 | "animations": { 293 | "spritesheets/bunny": [ 294 | "spritesheets/bunny1.png", 295 | "spritesheets/bunny2.png", 296 | "spritesheets/bunny3.png", 297 | "spritesheets/bunny4.png", 298 | "spritesheets/bunny5.png", 299 | "spritesheets/bunny6.png", 300 | "spritesheets/bunny7.png", 301 | "spritesheets/bunny8.png", 302 | "spritesheets/bunny9.png", 303 | "spritesheets/bunny10.png", 304 | "spritesheets/bunny11.png", 305 | "spritesheets/bunny12.png" 306 | ] 307 | }, 308 | "meta": { 309 | "app": "https://www.codeandweb.com/texturepacker", 310 | "version": "1.0", 311 | "image": "bunnies.png", 312 | "format": "RGBA8888", 313 | "size": { 314 | "w": 108, 315 | "h": 104 316 | }, 317 | "scale": "1", 318 | "smartupdate": "$TexturePacker:SmartUpdate:050c9b6ac791192efe90d226f882d667:ad4813d7cf97e154e5c4f372d57af76f:62d956865a4c5c48a07889147e78678d$" 319 | } 320 | } 321 | -------------------------------------------------------------------------------- /src/spritesheets/bunnies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themoonrat/webgl-benchmark/9f71419cf776b45b217d2a188d378dc14bdc3ba6/src/spritesheets/bunnies.png -------------------------------------------------------------------------------- /src/vendor/polyfill-append.js: -------------------------------------------------------------------------------- 1 | // Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md 2 | ((arr) => { 3 | arr.forEach(function (item) { 4 | // eslint-disable-next-line no-prototype-builtins 5 | if (item.hasOwnProperty('append')) { 6 | return; 7 | } 8 | Object.defineProperty(item, 'append', { 9 | configurable: true, 10 | enumerable: true, 11 | writable: true, 12 | value: function append() { 13 | const argArr = Array.prototype.slice.call(arguments), 14 | docFrag = document.createDocumentFragment(); 15 | 16 | argArr.forEach(function (argItem) { 17 | const isNode = argItem instanceof Node; 18 | docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); 19 | }); 20 | 21 | this.appendChild(docFrag); 22 | } 23 | }); 24 | }); 25 | })([Element.prototype, Document.prototype, DocumentFragment.prototype]); 26 | -------------------------------------------------------------------------------- /src/vendor/polyfill-fixedSeedRandom.js: -------------------------------------------------------------------------------- 1 | let seed = 1; 2 | function random() { 3 | const x = Math.sin(seed++) * 10000; 4 | return x - Math.floor(x); 5 | } 6 | 7 | Math.random = random; 8 | -------------------------------------------------------------------------------- /src/vendor/polyfill-phaser2.js: -------------------------------------------------------------------------------- 1 | export default function pollyfillPhaser2() { 2 | if (window.Phaser) { 3 | // convert 2.0.x phaser drawPolygon function to accept straight array of indices, rather than x and y points 4 | if (Phaser.VERSION.includes("2.0.")) { 5 | Phaser.Graphics.prototype.drawPolygonOld = Phaser.Graphics.prototype.drawPolygon; 6 | Phaser.Graphics.prototype.drawPolygon = function (points) { 7 | const convertedPoints = []; 8 | for (let i = 0; i < points.length; i += 2) { 9 | const x = points[i] || 0; 10 | const y = points[i + 1] || 0; 11 | convertedPoints.push({ 12 | x, 13 | y 14 | }); 15 | } 16 | this.drawPolygonOld({ points: convertedPoints }); 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/vendor/polyfill-pixi.js: -------------------------------------------------------------------------------- 1 | export default function pollyfillPixi() { 2 | if (window.PIXI) { 3 | // v3 does not have .from, so since we preload assets, use fromFrame instead 4 | if (!PIXI.Sprite.from) { 5 | PIXI.Sprite.from = PIXI.Sprite.fromFrame; 6 | } 7 | 8 | // move v3 and v4 loaders to the v5 area 9 | if (!PIXI.Loader || !PIXI.Loader.shared) { 10 | PIXI.Loader = { 11 | shared: PIXI.loader 12 | } 13 | } 14 | 15 | // move v3 and v4 BitmapText to the v5 area 16 | if (!PIXI.BitmapText) { 17 | PIXI.BitmapText = PIXI.extras.BitmapText; 18 | } 19 | 20 | // v3 does not contain this function natively 21 | if (!PIXI.Graphics.prototype.drawStar) { 22 | PIXI.Graphics.prototype.drawStar = function (x, y, points, radius, innerRadius, rotation = 0) { 23 | innerRadius = innerRadius || radius / 2; 24 | 25 | const startAngle = (-1 * Math.PI / 2) + rotation; 26 | const len = points * 2; 27 | const delta = PIXI.PI_2 / len; 28 | const polygon = []; 29 | 30 | for (let i = 0; i < len; i++) { 31 | const r = i % 2 ? innerRadius : radius; 32 | const angle = (i * delta) + startAngle; 33 | 34 | polygon.push( 35 | x + (r * Math.cos(angle)), 36 | y + (r * Math.sin(angle)) 37 | ); 38 | } 39 | 40 | return this.drawPolygon(polygon); 41 | } 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/vendor/stats.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author mrdoob / http://mrdoob.com/ 3 | */ 4 | 5 | var Stats = function () { 6 | 7 | var mode = 0; 8 | 9 | var container = document.createElement('div'); 10 | container.style.cssText = 'cursor:pointer;opacity:0.9'; 11 | container.addEventListener('click', function (event) { 12 | 13 | event.preventDefault(); 14 | showPanel(++mode % container.children.length); 15 | 16 | }, false); 17 | 18 | // 19 | 20 | function addPanel(panel) { 21 | 22 | container.appendChild(panel.dom); 23 | return panel; 24 | 25 | } 26 | 27 | function showPanel(id) { 28 | 29 | for (var i = 0; i < container.children.length; i++) { 30 | 31 | container.children[i].style.display = i === id ? 'block' : 'none'; 32 | 33 | } 34 | 35 | mode = id; 36 | 37 | } 38 | 39 | // 40 | 41 | var beginTime = (performance || Date).now(), prevTime = beginTime, frames = 0; 42 | 43 | var fpsPanel = addPanel(new Stats.Panel('FPS', '#0ff', '#002')); 44 | var msPanel = addPanel(new Stats.Panel('MS', '#0f0', '#020')); 45 | 46 | if (self.performance && self.performance.memory) { 47 | 48 | var memPanel = addPanel(new Stats.Panel('MB', '#f08', '#201')); 49 | 50 | } 51 | 52 | showPanel(0); 53 | 54 | return { 55 | 56 | REVISION: 16, 57 | 58 | domElement: container, 59 | 60 | addPanel: addPanel, 61 | showPanel: showPanel, 62 | 63 | setMode: showPanel, // backwards compatibility 64 | 65 | begin: function () { 66 | 67 | beginTime = (performance || Date).now(); 68 | 69 | }, 70 | 71 | end: function () { 72 | 73 | frames++; 74 | 75 | var time = (performance || Date).now(); 76 | 77 | msPanel.update(time - beginTime, 200); 78 | 79 | if (time > prevTime + 1000) { 80 | 81 | fpsPanel.update((frames * 1000) / (time - prevTime), 100); 82 | 83 | prevTime = time; 84 | frames = 0; 85 | 86 | if (memPanel) { 87 | 88 | var memory = performance.memory; 89 | memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576); 90 | 91 | } 92 | 93 | } 94 | 95 | return time; 96 | 97 | }, 98 | 99 | update: function () { 100 | 101 | beginTime = this.end(); 102 | 103 | } 104 | 105 | }; 106 | 107 | }; 108 | 109 | Stats.Panel = function (name, fg, bg) { 110 | 111 | var min = Infinity, max = 0, round = Math.round; 112 | var PR = round(window.devicePixelRatio || 1); 113 | 114 | var WIDTH = 80 * PR, HEIGHT = 48 * PR, 115 | TEXT_X = 3 * PR, TEXT_Y = 2 * PR, 116 | GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR, 117 | GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR; 118 | 119 | var canvas = document.createElement('canvas'); 120 | canvas.width = WIDTH; 121 | canvas.height = HEIGHT; 122 | canvas.style.cssText = 'width:80px;height:48px'; 123 | 124 | var context = canvas.getContext('2d'); 125 | context.font = 'bold ' + (9 * PR) + 'px Helvetica,Arial,sans-serif'; 126 | context.textBaseline = 'top'; 127 | 128 | context.fillStyle = bg; 129 | context.fillRect(0, 0, WIDTH, HEIGHT); 130 | 131 | context.fillStyle = fg; 132 | context.fillText(name, TEXT_X, TEXT_Y); 133 | context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT); 134 | 135 | context.fillStyle = bg; 136 | context.globalAlpha = 0.9; 137 | context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT); 138 | 139 | return { 140 | 141 | dom: canvas, 142 | 143 | update: function (value, maxValue) { 144 | 145 | min = Math.min(min, value); 146 | max = Math.max(max, value); 147 | 148 | context.fillStyle = bg; 149 | context.globalAlpha = 1; 150 | context.fillRect(0, 0, WIDTH, GRAPH_Y); 151 | context.fillStyle = fg; 152 | context.fillText(round(value) + ' ' + name + ' (' + round(min) + '-' + round(max) + ')', TEXT_X, TEXT_Y); 153 | 154 | context.drawImage(canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT); 155 | 156 | context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT); 157 | 158 | context.fillStyle = bg; 159 | context.globalAlpha = 0.9; 160 | context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round((1 - (value / maxValue)) * GRAPH_HEIGHT)); 161 | 162 | } 163 | 164 | }; 165 | 166 | }; 167 | 168 | if (typeof module === 'object') { 169 | 170 | module.exports = Stats; 171 | 172 | } 173 | -------------------------------------------------------------------------------- /webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: { 5 | app: './src/js/index.js' 6 | }, 7 | output: { 8 | path: path.resolve(__dirname, 'dist') 9 | }, 10 | optimization: { 11 | runtimeChunk: 'single', 12 | splitChunks: { 13 | cacheGroups: { 14 | vendor: { 15 | test: /[\\/]node_modules[\\/]|[\\/]vendor[\\/]/, 16 | name: 'vendors', 17 | chunks: 'all' 18 | } 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /webpack.dev.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { merge } = require('webpack-merge'); 3 | const common = require('./webpack.common.js'); 4 | 5 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 6 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 7 | const WriteFilePlugin = require('write-file-webpack-plugin'); 8 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 9 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 10 | 11 | module.exports = merge(common, { 12 | mode: 'development', 13 | devtool: 'source-map', 14 | devServer: { 15 | static: path.join(__dirname, 'dist'), 16 | open: true, 17 | client: { 18 | overlay: { 19 | warnings: true, 20 | errors: true 21 | } 22 | } 23 | }, 24 | output: { 25 | filename: 'js/[name].js' 26 | }, 27 | optimization: { 28 | moduleIds: 'deterministic' 29 | }, 30 | plugins: [ 31 | new CleanWebpackPlugin(), 32 | new HtmlWebpackPlugin({ 33 | title: 'WebGL Benchmark', 34 | meta: { 35 | 'viewport': 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no, minimal-ui', 36 | 'apple-mobile-web-app-capable': 'yes' 37 | }, 38 | hash: true 39 | }), 40 | new WriteFilePlugin(), 41 | new CopyWebpackPlugin({ 42 | patterns: [ 43 | { 44 | from: 'src/bitmap-fonts/', 45 | to: 'bitmap-fonts/', 46 | toType: 'dir' 47 | }, 48 | { 49 | from: 'src/images/', 50 | to: 'images/', 51 | toType: 'dir' 52 | }, 53 | { 54 | from: 'src/spritesheets/', 55 | to: 'spritesheets/', 56 | toType: 'dir' 57 | } 58 | ] 59 | }), 60 | new MiniCssExtractPlugin({ 61 | filename: "css/[name].css" 62 | }) 63 | ], 64 | module: { 65 | rules: [ 66 | { 67 | test: /\.js$/, 68 | exclude: /[\\/]node_modules[\\/]|[\\/]vendor[\\/]/, 69 | use: [{ 70 | loader: 'babel-loader' 71 | }] 72 | }, 73 | { 74 | test: /\.css$/, 75 | use: [ 76 | { 77 | loader: MiniCssExtractPlugin.loader, 78 | options: { 79 | publicPath: '../' 80 | } 81 | }, 82 | 'css-loader' 83 | ] 84 | }, 85 | { 86 | test: /\.(woff|woff2|eot|ttf|otf)$/, 87 | use: [{ 88 | loader: 'file-loader', 89 | options: { 90 | name: '[name].[ext]', 91 | outputPath: 'fonts/' 92 | } 93 | }] 94 | } 95 | ] 96 | } 97 | }); 98 | -------------------------------------------------------------------------------- /webpack.prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const common = require('./webpack.common.js'); 3 | 4 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 5 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 6 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 7 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 8 | 9 | module.exports = merge(common, { 10 | mode: 'production', 11 | output: { 12 | filename: 'js/[name].js' 13 | }, 14 | optimization: { 15 | moduleIds: 'deterministic' 16 | }, 17 | plugins: [ 18 | new CleanWebpackPlugin(), 19 | new HtmlWebpackPlugin({ 20 | title: 'WebGL Benchmark', 21 | meta: { 22 | 'viewport': 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no, minimal-ui', 23 | 'apple-mobile-web-app-capable': 'yes' 24 | }, 25 | hash: true, 26 | minify: { 27 | collapseWhitespace: false 28 | } 29 | }), 30 | new CopyWebpackPlugin({ 31 | patterns: [ 32 | { 33 | from: 'src/bitmap-fonts/', 34 | to: 'bitmap-fonts/', 35 | toType: 'dir' 36 | }, 37 | { 38 | from: 'src/images/', 39 | to: 'images/', 40 | toType: 'dir' 41 | }, 42 | { 43 | from: 'src/spritesheets/', 44 | to: 'spritesheets/', 45 | toType: 'dir' 46 | } 47 | ] 48 | }), 49 | new MiniCssExtractPlugin({ 50 | filename: "css/[name].css" 51 | }) 52 | ], 53 | module: { 54 | rules: [ 55 | { 56 | test: /\.js$/, 57 | exclude: /(node_modules)/, 58 | use: [{ 59 | loader: 'babel-loader' 60 | }] 61 | }, 62 | { 63 | test: /\.css$/, 64 | use: [ 65 | { 66 | loader: MiniCssExtractPlugin.loader, 67 | options: { 68 | publicPath: '../' 69 | } 70 | }, 71 | 'css-loader' 72 | ] 73 | }, 74 | { 75 | test: /\.(woff|woff2|eot|ttf|otf)$/, 76 | use: [{ 77 | loader: 'file-loader', 78 | options: { 79 | name: '[name].[ext]', 80 | outputPath: 'fonts/' 81 | } 82 | }] 83 | } 84 | ] 85 | } 86 | }); 87 | --------------------------------------------------------------------------------