[Experiment] Build a React-Three-Fiber (WebGL) renderer for Athena Crisis

[cpojer]

Currently Athena Crisis is using the DOM to render the core game. I would like there to be a full renderer for the game using React-Three-Fiber so we can make comparisons on performance and battery usage. It also opens the door for a possible 3d version of the game in the future, give more options for fancy fog implementations, and it should help fix the rendering of decorations which is currently a bit messed up.

Expectation & Steps

• Create a new package at the root (you get to pick a Greek god you like!) and mirror the package.json setup from hera. Add it to pnpm-workspace.yaml. All new code should go into this new package.
• Check out Map and its child components. These are the primary components of the renderer that need to be ported, along with animation components. Ideally, as part of this experiment, a new component Map.tsx component is created in the new package that retains the same interface/props but renders to React-Three-Fiber instead. You may have to look at GameMap for how this component is used, and you'll need to explore its child components like Tiles, Decorators, Fog, Building and Unit. The Unit component is the most dynamic one and most likely needs the most work, especially to support animations like unit moves and animations.
• There are a number of fancy usages of CSS like fading buildings when a unit is above it:
  
• Or the subtle outline that fades in when a unit is selected:
  
• Decorations are currently drawn behind buildings and units which can look odd. Ideally a proper renderer will put them (as well as forests etc.) on the right z-layer so that units and buildings can be "behind" a decoration or "inside" a forest.
  
• Menus can remain being rendered using the DOM on top of the map for now.

Ideally, at the end we have a full renderer for the game and can simply swap the Map component to use a different renderer.

Funding

• We're using Polar.sh to distribute funds.
• You receive the reward once the issue is completed & confirmed by Nakazawa Tech.

[emmz3230]

will love to be assign this task

[cpojer]

Feel free to give it a try! It's ok if multiple people work on an issue, only pull requests count and none has been created for this task yet.

[Pixelrobin]

Is this still active/needed/funded? I'm a web developer with some history with game dev and Three.js. I think it would be an interesting problem to tackle and I have a little bit of proof of concept code I'm been tinkering with. Just wondering if it's worth seeing if I can take it all the way.

[cpojer]

Hello @Pixelrobin. Yes, this is still very much active, and I'd be excited to collaborate on it. Feel free to join our Discord, we have a #tech channel: https://discord.gg/athenacrisis

[itsdouges]

If you're going to do any development in react three fiber I'd be happy to help get the repo set up with Triplex (see: triplex.dev).

The VS Code extension is coming soon, happy to add everyone as an early adopter.

[emmz3230]

i am workinmg on this already