ΠΡΠΈΠ²Π΅Ρ, Ρ ΡΠ΅ΠΉΡΠ°Ρ ΠΈΠ·ΡΡΠ°Ρ PixiJS Π΄Π»Ρ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΠΈ ΠΏΠΎΠΊΠ° ΠΎΠ½ ΠΌΠ½Π΅ ΠΎΡΠ΅Π½Ρ Π½ΡΠ°Π²ΠΈΡΡΡ! ΠΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΠΊ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎ-Π½Π°ΡΡΠΎΡΡΠ΅ΠΌΡ ΡΠ»ΠΎΠΆΠ½Π°Ρ ΡΠ°ΡΡΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΠΌΠ΅ΡΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡΡΡ. Π― Π½Π΅ ΡΠΌΠΎΠ³ Π½Π°ΠΉΡΠΈ ΡΠΏΠΎΡΠΎΠ± Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ»ΡΡΡΠΈΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ, ΠΈ ΠΌΠΎΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π½Π°Π΄Π΅ΠΆΠ΄Π° - Π½Π°ΠΉΡΠΈ ΠΏΠΎΠΌΠΎΡΡ Π² ΡΡΠΎΠΌ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π΅.
1500 ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ
ΠΌΠ΅ΡΠΎΠΊ
60 ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² ΡΠ΅ΠΊΡΠ½Π΄Ρ
60 ΠΊΠ°Π΄ΡΠΎΠ² Π² ΡΠ΅ΠΊΡΠ½Π΄Ρ
Π― ΡΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π» ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ BitMapText, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π°Π΅Ρ ~ 28 FPS Π½Π° MacBook Pro.
https://www.pixiplayground.com/#/edit/rLbAN_xrw7yUU_cg_c8Xv
ΠΡΡΡ Π»ΠΈ Ρ Π²Π°Ρ ΠΈΠ΄Π΅Ρ ΡΠ»ΡΡΡΠΈΡΡ ΡΡΠΎ? ΠΠ°ΡΠ°Π½Π΅Π΅ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΡΠΏΠ°ΡΠΈΠ±ΠΎ!
ΠΡ ΡΠ²Π΅ΡΠ΅Π½Ρ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ 1500 Π½Π° ΡΠΊΡΠ°Π½Π΅ _Π²ΡΠ΅_ ΡΠ°Π·? Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ Π·Π°ΠΊΠ°Π΄ΡΠΎΠ²ΡΡ
ΠΌΠ΅ΡΠΎΠΊ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ. Pixi Π½Π΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΠΈΠ· ΠΊΠΎΡΠΎΠ±ΠΊΠΈ, Π½ΠΎ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, @pixi-essentials/cull
ΠΎΡ @SukantPal), ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Π·Π΄Π΅ΡΡ ΠΏΠΎΠΌΠΎΡΡ.
ΠΡΠ΅ Π»ΠΈ 1500 ΡΡΠΈΠΊΠ΅ΡΠΎΠΊ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½Ρ? ΠΡΠ»ΠΈ Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΠ±Π»ΠΈΠΊΠ°ΡΠΎΠ², Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² Sprite Ρ ΠΏΠΎΠΌΠΎΡΡΡ RenderTexture ΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ Π·Π° ΡΡΠ΅Ρ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΎΠ±ΡΠ΅ΠΌΠ° ΠΏΠ°ΠΌΡΡΠΈ.
@ChristophWalter ΠΠΎΠΊΠ°Π·Π°Π½Π½ΡΠΉ Π²Π°ΠΌΠΈ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠΈΠ³ΡΠ°ΡΡ ΠΎΡ ΠΎΡΠ±ΡΠ°ΠΊΠΎΠ²ΠΊΠΈ, ΠΊΠ°ΠΊ ΡΠΏΠΎΠΌΠΈΠ½Π°Π» @bigtimebuddy . 1500 ΡΡΠΈΠΊΠ΅ΡΠΎΠΊ ΠΏΠΎ 112 ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ² Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ - ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ. ΠΡΡΡ ΠΏΡΠΈΡΠΈΠ½Ρ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΡΠΌ Π²Π°Ρ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΅ΠΊΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π΅ΡΡΡ. Π― Π½Π΅ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π±Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ, Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΠΏΠ»ΠΎΡΠ½ΡΠΉ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅ ΡΠΌΠΎΠΆΠ΅Ρ Π΅Π³ΠΎ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° MESH.BATCHABLE_SIZE Π½Π° Π±ΠΎΠ»ΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ 200, ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ. Π― Π½Π΅ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π» ΡΡΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ 45 FPS ΠΏΠΎΡΠ»Π΅ 6-ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π·Π°ΠΌΠ΅Π΄Π»Π΅Π½ΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠ° Π½Π° ΠΌΠΎΠ΅ΠΌ iMac.
Π― Π½Π΅ ΠΎΡΠΎΠ±ΠΎ ΡΠ°Π·Π±ΠΈΡΠ°Π» ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ. ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅ Π½Π°Π΄ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ, ΠΈ ΡΡΠΎ ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠ·ΠΊΠΈΠΌ ΠΌΠ΅ΡΡΠΎΠΌ Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠ°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π±ΡΠΊΠ²Ρ (Π²ΡΠ΅ Π±ΡΠΊΠ²Ρ As, Π·Π°ΡΠ΅ΠΌ Π²ΡΠ΅ B, Π²ΡΠ΅ C ΠΈ Ρ. Π.) ΠΠΌΠ΅ΡΡΠ΅. Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΡΡΠΈ ΡΠ΅ΠΊΡΡΡΡΡ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠ° ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈ / ΠΈΠ»ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄ΠΈΡΡΠ΅ΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅Ρ ΡΠ°ΡΡΡ ΡΠΊΡΠ°Π½Π°, ΠΊΠΎΡΠΎΡΠ°Ρ _ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π°_ (Ρ.Π΅. Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ 60 ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ ΠΈΠ· 1500 ΠΌΠ΅ΡΠΎΠΊ). ΠΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΈΠ΄Π΅ΠΈ, ΠΈ ΠΈΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΊΠ°ΠΊ ΡΠ°ΠΊΠΎΠ²ΡΠ΅.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΠΏΠΎΠΌΠΎΡΡ!
ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ±ΡΠ°ΠΊΠΎΠ²ΠΊΡ, ΠΈ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»ΠΎΠ²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΡΠΎΠ»ΡΠΊΠΎ ΡΡΠ»ΡΠΊΠΎΠ² ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ. ΠΠΎ ΠΏΠΎ ΠΏΡΠΈΡΠΈΠ½Π°ΠΌ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΊΠΎΠ½ΠΊΡΡΠΈΡΠΎΠ²Π°ΡΡ Ρ Π½Π΅ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌΠΈ. ΠΡ ΡΠΆΠ΅ ΡΡΠ°Π²ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ ΡΠΎΠΌΠ½Π΅Π½ΠΈΠ΅ ΡΡΠΈ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ, Π½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ webgl ΠΌΠΎΠΆΠ΅Ρ ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ ΠΈ Ρ ΡΡΠΈΠΌ.
ΠΡΠΈΠΊΠ΅ΡΠΊΠΈ Π±ΡΠ΄ΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌΠΈ. ΠΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π½Π΅ ΡΠ°ΠΊ ΡΠ°ΡΡΠΎ ΠΌΠ΅Π½ΡΡΡΡΡ. ΠΡΠΈΠΌΠ΅Ρ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. Π’Π°ΠΊ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π» Π΄Π»Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ. Π― Π·Π°ΠΌΠ΅ΡΠΈΠ», ΡΡΠΎ FPS ΠΎΡΡΠ°Π΅ΡΡΡ ΠΏΡΠ΅ΠΆΠ½ΠΈΠΌ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Ρ Π½Π΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ( ΠΈΠ³ΡΠΎΠ²Π°Ρ ΠΏΠ»ΠΎΡΠ°Π΄ΠΊΠ° ). ΠΡΡΡ Π»ΠΈ ΡΠΏΠΎΡΠΎΠ± ΠΏΠ΅ΡΠ΅Π΄Π΅Π»ΡΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΌΠ΅Π½ΡΡΡΡΡ?
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° MESH.BATCHABLE_SIZE Π½ΠΈΡΠ΅Π³ΠΎ Ρ ΠΌΠΎΠ΅ΠΉ ΡΡΠΎΡΠΎΠ½Ρ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»Π°. Π― ΡΠ°ΡΡΠΌΠΎΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π²Π°ΡΠΈ ΠΈΠ΄Π΅ΠΈ ΠΈΠ»ΠΈ ΠΏΠΎΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΊΡΠΏΠΈΡΡ iMac Π― Π½Π΅ ΠΎΡΠ΅Π½Ρ Π»ΡΠ±Π»Ρ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³, ΡΠ°ΠΊ ΡΡΠΎ ΡΡΠΈ ΠΈΠ΄Π΅ΠΈ ΠΌΠ½Π΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ!
ΠΡ , Π΅ΡΠ»ΠΈ Π²Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΡΠ΅ΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠ³Π΄Π° Π»ΡΡΡΠΈΠΌ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ Π±ΡΠ»ΠΎ Π±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎ, ΡΡΠΎ ΡΠΊΠ°Π·Π°Π» @bigtimebuddy , Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ - ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Mesh ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΡΡΡ ΡΠ΅ΡΠΊΡ Π½Π°ΠΏΡΡΠΌΡΡ (Π²ΠΌΠ΅ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ 1500 ΡΠΏΡΠ°ΠΉΡΠΎΠ²).
ΠΡΠΎ Π΄Π°Π΅Ρ Π΄Π²Π° ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°:
Π ΠΎΠ±ΡΠ΅ΠΌ, ΠΏΡΠΎΡΠ΅ΡΡ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
ΠΡΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΎΡΠ΅ΡΡ. Π Π°ΡΡΠΊΠ°ΠΆΠΈΡΠ΅, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΊΠ°ΠΊ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ!
ΠΡΠΈΠ²Π΅Ρ, Ρ ΠΏΠΎΠΏΡΡΠ°Π»ΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠ΅ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ BitmapText Π² ΡΠ΅ΠΊΡΡΡΡΡ, ΠΏΠΎΡ ΠΎΠΆΠ΅, ΡΡΠ°Π±ΠΎΡΠ°Π»ΠΎ. ΠΠΎ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Ρ Π·Π°ΡΡΡΡΠ», ΠΏΡΡΠ°ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠ΅ΠΊΡΡΡΡΡ Π² ΡΠ΅ΡΠΊΠ΅. Π― ΠΏΡΠΎΠ±ΠΎΠ²Π°Π» ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ PIXI.Mesh ΠΈ PIXI.SimpleMesh. ΠΡΠΆΠ½ΠΎ Π»ΠΈ ΠΌΠ½Π΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠ΅ΠΉΠ΄Π΅Ρ ΠΈΠ»ΠΈ Ρ ΠΌΠΎΠ³Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ PIXI.MeshMaterial?
const bitmapFontText = new PIXI.BitmapText(
'Lorem ipsum dolor\nsit amet consetetur\nsadipscing elitr sed',
{ font: '55px Desyrel', align: 'left' }
);
const texture = PIXI.RenderTexture.create({ width: 800, height: 600 });
app.renderer.render(bitmapFontText, texture);
const vertices = [
-0.5, -0.5,
0.5, -0.5,
0.5, 0.5,
-0.5, 0.5
];
const uvs = [
0, 0,
1, 0,
1, 1,
0, 1,
];
const indices = [0, 1, 2, 0, 2, 3];
const geometry = new PIXI.MeshGeometry(vertices, uvs, indices);
const shader = new PIXI.MeshMaterial(texture);
const mesh = new PIXI.Mesh(geometry, shader);
app.stage.addChild(mesh);
https://www.pixiplayground.com/#/edit/7RHqFti0tdSzw -6iOtylk
-
_Edit_: ΠΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ. ΠΠ΅ΡΡΠΈΠ½Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. _Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ°Π³_: ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠΉ ΡΠ΅ΠΊΡΡΡΡΡ Π² ΡΠ΅ΡΠΊΠ΅.
const vertices = [
0, 0,
500, 0,
500, 500,
0, 500
];
-
_Edit 2_: ΠΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΡΠ΅ΠΊΡΡΡΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΡΠΈΠΊΠ΅ΡΠΎΠΊ, Π²Π΅ΡΠ½ΠΎ? Π― ΠΌΠΎΠ³ Π²ΡΡΠ°Π·ΠΈΡΡΡΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ. ΠΠ΅ΡΠΊΠΈ Π±ΡΠ΄ΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌΠΈ, Π½ΠΎ ΠΈΡ
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΊΠ°Π΄ΡΠ΅.
Π― Π·Π°ΠΌΠ΅ΡΠΈΠ», ΡΡΠΎ FPS ΠΎΡΡΠ°Π΅ΡΡΡ ΠΏΡΠ΅ΠΆΠ½ΠΈΠΌ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Ρ Π½Π΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ( ΠΈΠ³ΡΠΎΠ²Π°Ρ ΠΏΠ»ΠΎΡΠ°Π΄ΠΊΠ° ). ΠΡΡΡ Π»ΠΈ ΡΠΏΠΎΡΠΎΠ± ΠΏΠ΅ΡΠ΅Π΄Π΅Π»ΡΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΌΠ΅Π½ΡΡΡΡΡ?
ΠΠΎΠΌΠΎΠΆΠ΅Ρ Π»ΠΈ Π² ΡΡΠΎΠΌ PIXI.Mesh? ΠΠ½Π°Π΅ΡΠ΅ Π»ΠΈ Π²Ρ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠ΅ΡΡΡΡ, Π³Π΄Π΅ Ρ ΠΌΠΎΠ³Ρ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° PixiJS?
@ChristophWalter ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠ΅Π΄ΡΡΠ²ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ (Π²ΠΌΠ΅ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ), Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠΈΠΊΠ΅Ρ-ΡΠΈΠΊΠ», ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ·ΡΠ²Π°Π΅Ρ Renderer.render
_only_ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Π²Π°ΡΠ΅ΠΉ ΡΡΠ΅Π½Ρ.
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ autoStart: false
ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π° Π·Π°ΡΠ΅ΠΌ Π²ΡΠ·Π²Π°ΡΡ app.render()
ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ-ΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ. Π’Π° ΠΆΠ΅ ΡΠ°Π·Π½ΠΈΡΠ°.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ, ΠΊΠ°ΠΊ-ΡΠΎ ΡΡΠ°Π±ΠΎΡΠ°Π»ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΡΡΡ ΠΈΠ· ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΅Π΅ Π² ΡΠΏΡΠ°ΠΉΡΠ΅. ΠΠΎ Ρ ΠΏΠΎΠΊΠ° Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, ΠΏΠΎΡΠ΅ΠΌΡ, ΠΈ Π½Π΅ ΠΌΠΎΠ³Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΡΡΠΎ Π½Π° Π΄Π΅ΡΡΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ°Π΄ΠΊΠ΅. π
ΠΠ΄Π½Π°ΠΊΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅Ρ Π²ΡΠ΅ 1500 ΠΏΠΎΠ·ΠΈΡΠΈΠΉ ΡΡΠΈΠΊΠ΅ΡΠΎΠΊ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΊΠ°Π΄Ρ ΡΠΎ ΡΠΊΠΎΡΠΎΡΡΡΡ 60 ΠΊΠ°Π΄ΡΠΎΠ² Π² ΡΠ΅ΠΊΡΠ½Π΄Ρ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΆΠ΄ΡΡ ΡΠ΅ΠΊΡΠ½Π΄Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ. ΠΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΊΠΎΡΠΎΡΠΊΠΎΠΌΡ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ ΠΊΠ°ΠΆΠ΄ΡΡ ΡΠ΅ΠΊΡΠ½Π΄Ρ. ΠΡΠ°ΠΊ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΠ°Π³ΠΎΠΌ Π±ΡΠ΄Π΅Ρ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½Π°Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΡΡΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² Π²Π΅Π±-Π²ΠΎΡΠΊΠ΅ΡΠ΅. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Ρ ΡΠΈΡΠ°Ρ ΠΎΠ± ImageBitmap ΠΈ OffscreenCanvas. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΈΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ Ρ ΠΏΠΎΠ΄Π΅Π»ΡΡΡ ΡΠ²ΠΎΠΈΠΌ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΎΠΌ.
ΠΡΠ°ΡΠΊΠΎΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ ΠΏΡΠ΅ΠΊΡΠ°ΡΠΈΠ» ΡΠ°ΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π΅Π΄Π΅Π»Ρ Π½Π°Π·Π°Π΄
Π― Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π» ΡΠ΅ΠΊΡΡ Π² Π²Π΅Π±-Π²ΠΎΡΠΊΠ΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΠ°Π±ΠΎΡΠ°Π» Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ:
// render-text-worker.js
onmessage = function(event) {
const textLines = event.data.text.split(/\n/);
const index = event.data.index;
const offscreen = new OffscreenCanvas(150,45);
const ctx = offscreen.getContext("2d");
ctx.font = "15px monospace";
textLines.forEach((text, index) => {
ctx.fillText(text, 0, 15 + index * 15)
})
const imageBitmap = offscreen.transferToImageBitmap();
postMessage({imageBitmap, index});
};
// index.js
const worker = new Worker("render-text-worker.js");
const callbacks ={}
function getLabelTexture(index, text, callback) {
callbacks[index] = callback
worker.postMessage({ index, text });
}
worker.onmessage = function({ data }) {
const callback = callbacks[data.index]
callback(PIXI.Texture.from(data.imageBitmap));
}
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π΄Π»Ρ ΠΌΠΎΠ΅Π³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠΉ Π½Π΅Ρ. Π Π°ΠΌΠΊΠΈ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΏΠ°Π΄Π°ΡΡ ΠΏΡΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π΅ ΡΠ΅ΠΊΡΡΠ° ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ, ΠΈΠ·-Π·Π° ΡΠ°Π±ΠΎΡΡ ΠΏΠΎ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΡ ΡΠ°ΡΡΡΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ· ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ.
ΠΠ»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ»ΡΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°ΡΡ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π΄Π»ΠΈΠ½Ρ ΡΠ΅ΠΊΡΡΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠΈΠΊΠ΅ΡΠΊΠΈ Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΊ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ.
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ, ΠΊΠ°ΠΊ-ΡΠΎ ΡΡΠ°Π±ΠΎΡΠ°Π»ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΡΡΡ ΠΈΠ· ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΅Π΅ Π² ΡΠΏΡΠ°ΠΉΡΠ΅. ΠΠΎ Ρ ΠΏΠΎΠΊΠ° Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, ΠΏΠΎΡΠ΅ΠΌΡ, ΠΈ Π½Π΅ ΠΌΠΎΠ³Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΡΡΠΎ Π½Π° Π΄Π΅ΡΡΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ°Π΄ΠΊΠ΅. π
ΠΠ΄Π½Π°ΠΊΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅Ρ Π²ΡΠ΅ 1500 ΠΏΠΎΠ·ΠΈΡΠΈΠΉ ΡΡΠΈΠΊΠ΅ΡΠΎΠΊ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΊΠ°Π΄Ρ ΡΠΎ ΡΠΊΠΎΡΠΎΡΡΡΡ 60 ΠΊΠ°Π΄ΡΠΎΠ² Π² ΡΠ΅ΠΊΡΠ½Π΄Ρ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΆΠ΄ΡΡ ΡΠ΅ΠΊΡΠ½Π΄Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ. ΠΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΊΠΎΡΠΎΡΠΊΠΎΠΌΡ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ ΠΊΠ°ΠΆΠ΄ΡΡ ΡΠ΅ΠΊΡΠ½Π΄Ρ. ΠΡΠ°ΠΊ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΠ°Π³ΠΎΠΌ Π±ΡΠ΄Π΅Ρ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½Π°Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΡΡΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² Π²Π΅Π±-Π²ΠΎΡΠΊΠ΅ΡΠ΅. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Ρ ΡΠΈΡΠ°Ρ ΠΎΠ± ImageBitmap ΠΈ OffscreenCanvas. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΈΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ Ρ ΠΏΠΎΠ΄Π΅Π»ΡΡΡ ΡΠ²ΠΎΠΈΠΌ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΎΠΌ.