By investigating on staroyale.io's Google Analytics records, we find out our game didn't performed well on machines with old browsers and GPU. That's why we started our performance optimization recently. The part we focus on today is our WebGL particle system three.quarks, which is built in house.

Before the latest performance, for each particle system, three.quarks uses an InstancedBufferGeometry to render it. It works fine for the situation which has many particles but a few systems. But in most games, each special effect is usually composed by multiple systems. And real games have hundreds of special effect running at the same time such as muzzle flashes, projectile effect, hit impact effect and so on. Because each InstancedBufferGeometry will creates bunch of VertexBuffers and cost a draw call per frame. The lag of particle systems becomes quickly unbearable.

In last three.quarks update, the newest BatchParticleRenderer solves this issue by batching particle systems that has same textures and shader settings. In update loop, it updates all the particle in the systems with same settings to a single set of buffers. It avoids creating and destroying buffers dynamically and reduces hundreds of drawcalls in our game.

After this update, we also find another bottleneck we have on our particle system is caused by one of the last updates on WebGLRenderer in three.js. If a material is transparent and double sided, the renderer will set material needs update to true and render it twice. The biggest problem here is by setting needsUpdate to true. It auto increments the version of the material and forces the renderer to generate new Program cache by calling this extremely expensive function getProgramCachedKey, which occupies 30% of the total scripting time in our test.

By removing this piece of code in official three.js, we never hit any bottleneck of particle systems in our game anymore. For better performance, consider use our version of three.js for your performance demanding 3d application.

    if ( material.transparent === true && material.side === DoubleSide ) {
        material.side = BackSide;
        material.needsUpdate = true;
        _this.renderBufferDirect( camera, scene, geometry, material, object, group );
        material.side = FrontSide;material.needsUpdate = true;
        _this.renderBufferDirect( camera, scene, geometry, material, object, group );
        material.side = DoubleSide;
    }

Hi everyone, update here! (Monday, June 7th, 2021)

UI

• Improve ship upgrade UI
• Improve essence UI
• Add Upgrade animation and sound
• Implement Shop and Lootbox UI
• Add Lootbox animation

Graphics

• Add MSAA (Anti Aliasing) to High quality settings.
• Fix Color Space and Improve graphics.

Gameplay

• Bring back Battle royale mode

Join our Discord Channel https://discord.gg/VVeMfSE for game testing and the latest update.

I am so excited to share with you what happened in the last three weeks, and the great progress we made on UI and player experience. We have a technical artist and two interns joined our development team. They will help us build a better game.

Gameplay

• Consumables are added to the game to recover health of ships and We added an easy to access circular menu. Press/Hold 4 to use.

• Players can now manually reload (Press R) for weapons, so they can decided when to reload the weapons.
• We changed how missile works in our game. Now missile starts slow and gradually build up speed. and it has a real missile model.
• Enemy ships health and shield are hidden from players. But the brightness of the shield and the smoke came out of the ship will roughly indicates ships health.

• Show Total number of players and total kills on the right corner

• Now players can switch ships freely in spectator mode by pressing Z.

Graphics and UX

• Redesigned a fresh UI completely.

• Updated the mini-map to display teammates
• Friendly ships now have aura under them that matches their status on left bottom corner
• Added ship detail screen to show upgrades and detailed statics.
• Added In Game Pause Menu

General

• Introduced players progression. Experience, coins, ship unlocks. (In progress)
• We added Facebook Login.

Quality of Life

• We improved assets loading and put them at the beginning of loading websites.

Join our Discord Channel https://discord.gg/VVeMfSE for game testing and the latest update.

Gameplay

• We decided to change player's perspective to a Third person view to have a better feeling of driving spaceship.

• We added Team mode!!! players can play as a team of 2 or a team of 4.

• We implemented Google Login Integration on backend and front end.
• An awesome visual effect and sound effect will present when player pick up items.

• Now the transparency of shield indicates ship's shield health.
• We started integrating NavMesh for AI.
• Player can now drop items in inventory menu
• We remove weapon perks and added weapon level upgrading system.
• We added Ship Explosion Effect.

Graphics and UX

• We added ship status in ship selection UI.

• We improved all visual effect's rendering.
• We fixed Inventory Windows (press I).  We are still working on Weapon icon and Item icon.
• We moved utility addon such as Shield capacitator,  Thruster and Reactor's display to Ship status box.

Quality of Life

• Clients now predicts ship movement between network tick. now the game works in poor network condition
• Fix multiple memory leaks

Join our Discord Channel https://discord.gg/VVeMfSE for game testing and the latest update.

The last two weeks has been huge for us. We made great progress in a lot of area.

Gameplay

• We changed our UI interface. so user don't have to enter name to play.
  
• We added email/password Login and account game stats. We will have Google, Facebook Login intergrated Later.
• We changed the minimap to display the whole map.
  
• Added 2 new ships and created proper ship icons
  • The first new ship is Phoenix - a nimble striker with great mobility and a short duration invisible skill
  • The second new ship is Defiant - a heavy fighter with good cargo size and fire power. The skill for this ship is not designed yet.
• We made all the ammos, vfxs and bullets trail's color matchs weapons' color.
  • Yellow for light ammo
  • Red for Heavy ammo
  • Green for Energy ammo
  • Blue for Explosive ammo
• We added a new Weapon - Charging Rail Gun
  • Players can hold mouse button to charge the gun up to 1 second.
  • Charged shots have more travel speed and damage, but also cost more energy.
    
• Dropped items are not piled up anymore. Items will repell each other after drop. Players can pick up them eaiser.
• We designed a basic collision test 16 players map using Blender and made the entity export code work.
• We redesigned all the weapon perks' model.

Graphics and UI

• Improved hazard rendering by using a cool shader effect.
  
• Improved the health bar, shield bar and energy bar display by using different colors.

Bug Fix

• Spectate/Main Menu after death didn't work now
• In game shield bar did not display correctly after losing all the shield
• Remove testing network transition

If you have ever developed 3D applications in browser, you must know the well-known WebGL library called three.js. Now you have three.quarks a high-performance particle system library with a WYSIWYG visual editor for it.

three.js is so powerful that almost all the coolest visual effect in the web is created by it. However, three.js is not intended only for game development and it lacks a lot of standard feature that game engines need. The feature we need here for our game is a 3D particle system and an editor for it.

I did some research, but every library I found has one of the following shortcomings:

• Bad performance
• Not flexible to customize
• Lacking a realtime editor to test and create visual effects

To address those problems, I created a new particle system three.quarks for three.js, and a real-time editor three.quarks-editor.

three.quarks computes most particles information on CPU, and it uses customized shader and instancing technique to render those particles. three.quarks supports 1 dimension Bezier Curves for the best transform visual effect. Most importantly, developers can customize how the particle system works by adding their own Behavior.

three.quarks-editor can help you preview a set of particle system at once. and you can also adjust all the particle system at real time and export those system as a JSON file. Your app or game can load those JSON file later. It even includes a Javascript scripting system to test those effect in a similar environment to your application.

Note: Both libraries are still under heavy development, use it with your caution.

We proudly announce geom2.js an open source, high performance library for 2D Geometry Calculation written in TypeScript.

In Staroyale.io, it's used for collision detection and artificial intelligence (steering and path finding), server-client viewport optimization. But I think you guys will find it useful in other situations.

We extract the server-side code of Staroyale.io to make it a standard alone library, because we think other gamedevs probably love it too.

Difference from Physics Engines

Most physics engines bundles all the physics related data structure and algorithm together. It makes setup easy but it limits the flexibility of the application or games. Because in lots of scenario except physics simulation, objects are not intended to move according to physics laws.

This library is much more light-weight than a physics engine, and it gives users a more control over their own 2d world.

NPM Install

npm install geom2.js

Structure:

• Vector
• Segment
• Shap
  • AABB (Axis-Aligned Bounding Box)
  • Arc
  • Circle
  • Polygon

Algorithm:

• Common
  • Collision detection between shapes.
    • GJK (Gilbert–Johnson–Keerthi)
    • SAT (Separation Axis Theorem)
  • Convex Polygon test
  • Convex Hull
• Generation
  • Random convex polygon generation
• Advance
  • Field of view scanning (line sweeping)

Container:

• Loose QuadTree
  • High-quality quadtree implementation
  • It can store AABB (Axis-Aligned Bounding Box).
  • No elements on branch nodes, all data on leaves.
  • It maintains loose boundary on all nodes.
  • It outperforms simple-quadtree and all other available js quadtree.

Addition Feature:

• Physics Collision Resolution

I will start update all the development and news for Staroyale.io on this Blog.

There are going to be a lot of real shit here for game devs.

Isn't it existing? Click the link to try our game.