fix: materials depth test rework #861

[r0man1337]

User description

Fix for #861 Refactor of materials depth sorting

---

PR Type

Bug fix, Enhancement

---

Description

• Disabled depth write for various materials across multiple biome components to fix depth sorting issues.
• Added renderOrder property to primitive objects in multiple components to control rendering order.
• Enhanced hexagon grid rendering by adding new materials and handling borders separately.
• Removed depthTest property from hexMaterial in HighlightedHexes component.

---

Changes walkthrough 📝

Relevant files

Enhancement

21 files WarriorModel.tsx Set render order for WarriorModel component.                          client/src/ui/components/models/armies/WarriorModel.tsx - Added `renderOrder` property to `primitive` object. +1/-1      BeachBiome.tsx Adjust depth write and render order for BeachBiome.            client/src/ui/components/models/biomes/BeachBiome.tsx Disabled depth write for "White Sand" material. Added renderOrder property to primitive object. +3/-1      DeciduousForestBiome.tsx Adjust depth write and render order for DeciduousForestBiome. client/src/ui/components/models/biomes/DeciduousForestBiome.tsx Disabled depth write for "Lush Grass" material. Added renderOrder property to primitive object. +3/-1      DeepOceanBiome.tsx Adjust depth write and render order for DeepOceanBiome.    client/src/ui/components/models/biomes/DeepOceanBiome.tsx Disabled depth write for "Deep Ocean Water" material. Added renderOrder property to primitive object. +3/-1      DesertBiome.tsx Adjust depth write and render order for DesertBiome.          client/src/ui/components/models/biomes/DesertBiome.tsx Disabled depth write for "Sand" material. Added renderOrder property to primitive object. +3/-1      GrasslandBiome.tsx Adjust depth write and render order for GrasslandBiome.    client/src/ui/components/models/biomes/GrasslandBiome.tsx Disabled depth write for "Lush Grass" material. Added renderOrder property to primitive object. +3/-1      OceanBiome.tsx Adjust depth write and render order for OceanBiome.            client/src/ui/components/models/biomes/OceanBiome.tsx Disabled depth write for "Ocean Water" material. Added renderOrder property to primitive object. +3/-1      ScorchedBiome.tsx Adjust depth write and render order for ScorchedBiome.      client/src/ui/components/models/biomes/ScorchedBiome.tsx Disabled depth write for "Scorched Rock" and "Lava" materials. Added renderOrder property to primitive objects. +4/-3      ShrublandBiome.tsx Adjust depth write and render order for ShrublandBiome.    client/src/ui/components/models/biomes/ShrublandBiome.tsx Disabled depth write for "Gray Dirt" and "Yellow Rock" materials. Added renderOrder property to primitive objects. +4/-3      SnowBiome.tsx Adjust depth write and render order for SnowBiome.              client/src/ui/components/models/biomes/SnowBiome.tsx Disabled depth write for "Rock" and "Snow" materials. Added renderOrder property to primitive objects. +4/-3      SubtropicalDesertBiome.tsx Adjust depth write and render order for SubtropicalDesertBiome. client/src/ui/components/models/biomes/SubtropicalDesertBiome.tsx Disabled depth write for "Orange Sand" and "Gray Dirt" materials. Added renderOrder property to primitive objects. +4/-3      TaigaBiome.tsx Adjust depth write and render order for TaigaBiome.            client/src/ui/components/models/biomes/TaigaBiome.tsx Disabled depth write for "Barren Grass" material. Added renderOrder property to primitive object. +2/-2      TemperateDesertBiome.tsx Adjust depth write and render order for TemperateDesertBiome. client/src/ui/components/models/biomes/TemperateDesertBiome.tsx Disabled depth write for "Red Rock" and "Orange Sand" materials. Added renderOrder property to primitive objects. +4/-3      TemperateRainforestBiome.tsx Adjust depth write and render order for TemperateRainforestBiome. client/src/ui/components/models/biomes/TemperateRainforestBiome.tsx Disabled depth write for first material in the array. Added renderOrder property to primitive objects. +3/-1      TropicalRainforestBiome.tsx Adjust depth write and render order for TropicalRainforestBiome. client/src/ui/components/models/biomes/TropicalRainforestBiome.tsx Disabled depth write for first material in the array. Added renderOrder property to primitive objects. +3/-1      TropicalSeasonalForestBiome.tsx Adjust depth write and render order for TropicalSeasonalForestBiome. client/src/ui/components/models/biomes/TropicalSeasonalForestBiome.tsx Disabled depth write for first two materials in the array. Added renderOrder property to primitive objects. +7/-1      TundraBiome.tsx Adjust depth write and render order for TundraBiome.          client/src/ui/components/models/biomes/TundraBiome.tsx Disabled depth write for first three materials in the array. Added renderOrder property to primitive objects. +4/-1      Structures.tsx Set render order for BuiltStructure component.                      client/src/ui/components/models/buildings/worldmap/Structures.tsx - Added `renderOrder` property to `primitive` object. +1/-1      HexLayers.tsx Enhance hexagon grid rendering and border handling.            client/src/ui/components/worldmap/hexagon/HexLayers.tsx Added new hexagon and border materials. Updated logic to handle revealed hexes and borders separately. Added renderOrder property to primitive objects. +65/-35  HighlightedHexes.tsx Remove depth test from HighlightedHexes material.                client/src/ui/components/worldmap/hexagon/HighlightedHexes.tsx - Removed `depthTest` property from `hexMaterial`. +0/-1      Flags.jsx Set render order for Flags component.                                        client/src/ui/components/worldmap/Flags.jsx - Added `renderOrder` property to `primitive` objects. +2/-2

---

💡 PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eternum	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 12, 2024 3:22pm

[github-actions[bot]]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review [1-5]	3
🧪 Relevant tests	No
🔒 Security concerns	No
⚡ Key issues to review	Possible Bug: The `depthWrite` property is set to `false` for various materials, which could lead to rendering issues where some objects might not appear as intended in certain scenes or under specific lighting conditions. This change should be thoroughly tested across different environments to ensure it does not negatively impact the visual quality or performance.
	Consistency Issue: The `renderOrder` property is set uniformly across various components. It's crucial to verify if this uniform setting does not conflict with the specific rendering needs of different objects, potentially causing some objects to render out of order.

[github-actions[bot]]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible bug	Add a conditional rendering to check if the model object is defined ___ **Consider adding a condition to check if the model object is defined before rendering the component. This can prevent potential runtime errors if model is undefined.** [client/src/ui/components/models/armies/WarriorModel.tsx [48]](https://github.com/BibliothecaDAO/eternum/pull/911/files#diff-d06b5122c20065f999ae44007babc11861248157d05a8a0136bab495bf6aaf51R48-R48) ```diff - +{model && } ``` Suggestion importance[1-10]: 9 Why: This suggestion prevents potential runtime errors by ensuring that the `model` object is defined before rendering, which is crucial for stability.	9
	Add a check to ensure that the object being pushed to the array is defined ___ **Consider checking if group[ind] is defined before pushing to borders to prevent potential errors when group[ind] is undefined.** [client/src/ui/components/worldmap/hexagon/HexLayers.tsx [193-198]](https://github.com/BibliothecaDAO/eternum/pull/911/files#diff-32d953460a4689eeda29120db48be52828dc4e94c6e6dab11277ba52ce4db0feR193-R198) ```diff +if ( + group[ind] && + !revealed.some((hex) => hex.col === tmpCol && hex.row === tmpRow) && + !borders.some((hex) => hex.col === tmpCol && hex.row === tmpRow) +) { + borders.push(group[ind]); +} - ``` Suggestion importance[1-10]: 9 Why: This suggestion addresses a potential bug by adding a check to ensure that `group[ind]` is defined before pushing it to the `borders` array. This prevents possible runtime errors and improves code robustness.	9
Maintainability	Use a loop to set properties for all elements in an array to improve code maintainability ___ **Instead of setting depthWrite individually for each material, use a loop to apply the property to all materials in the array. This reduces redundancy and makes the code easier to maintain.** [client/src/ui/components/models/biomes/TundraBiome.tsx [60-62]](https://github.com/BibliothecaDAO/eternum/pull/911/files#diff-7f5f1860eeecda9710975e81cfcb8e26d82bdc281b88bec4c37d45404da827fcR60-R62) ```diff -materials[0].depthWrite = false; -materials[1].depthWrite = false; -materials[2].depthWrite = false; +materials.forEach(material => material.depthWrite = false); ``` Suggestion importance[1-10]: 8 Why: This suggestion improves code maintainability by reducing redundancy. Using a loop to set the `depthWrite` property for all materials makes the code cleaner and easier to update in the future.	8
	Verify and document the intention behind setting depthWrite to false ___ **Ensure that setting depthWrite to false for "White Sand" material is intentional and documented, as it affects rendering behavior and might not be obvious to other developers or in future maintenance.** [client/src/ui/components/models/biomes/BeachBiome.tsx [37]](https://github.com/BibliothecaDAO/eternum/pull/911/files#diff-1ca28c109ecf399ddd5d50fdd20c63e9be0dc166b5ddce4d950e6631f751ea1eR37-R37) ```diff +// Ensure depthWrite is intentionally set to false for specific rendering needs materials["White Sand"].depthWrite = false; ``` Suggestion importance[1-10]: 7 Why: Adding a comment to document the intention behind setting `depthWrite` to `false` improves code maintainability and helps future developers understand the reasoning behind this decision.	7
	Remove commented-out code to clean up and clarify the codebase ___ **Remove commented-out code for setting depthWrite on materials unless there's a clear reason to keep it for future reference. Keeping commented code can lead to confusion and clutter.** [client/src/ui/components/models/biomes/TropicalSeasonalForestBiome.tsx [56-58]](https://github.com/BibliothecaDAO/eternum/pull/911/files#diff-70bffbd81abf0cc0ac28f290fb8909c67c1ba9f19753a3c716cf569cbbc0b3d2R56-R58) ```diff -// materials[2].depthWrite = false; -// materials[3].depthWrite = false; -// materials[4].depthWrite = false; +// Removed unused commented-out code ``` Suggestion importance[1-10]: 6 Why: Removing commented-out code helps to keep the codebase clean and reduces potential confusion, improving overall code readability.	6
	Correct the comment to accurately describe the opacity setting ___ **The opacity comment for hexMaterial is misleading as it states "Start fully transparent" but the opacity is set to 0.4. Correct the comment to reflect the actual opacity setting.** [client/src/ui/components/worldmap/hexagon/HexLayers.tsx [149]](https://github.com/BibliothecaDAO/eternum/pull/911/files#diff-32d953460a4689eeda29120db48be52828dc4e94c6e6dab11277ba52ce4db0feR149-R149) ```diff -opacity: 0.4, // Start fully transparent +opacity: 0.4, // Start with partial transparency ``` Suggestion importance[1-10]: 6 Why: Correcting the comment improves code readability and maintainability by ensuring that comments accurately describe the code, preventing potential confusion for future developers.	6
Enhancement	Refactor setting material properties to reduce redundancy and improve maintainability ___ **Consider consolidating the depthWrite property setting for materials into a single configuration function or object to improve code maintainability and reduce redundancy across different biomes.** [client/src/ui/components/models/biomes/ScorchedBiome.tsx [31-32]](https://github.com/BibliothecaDAO/eternum/pull/911/files#diff-f0a34877e7e779540a31c35d0b192c038e496afc52c904692b68acdce9a0aeabR31-R32) ```diff -materials["Scorched Rock"].depthWrite = false; -materials.Lava.depthWrite = false; +setMaterialProperties(["Scorched Rock", "Lava"], { depthWrite: false }); ``` Suggestion importance[1-10]: 8 Why: Consolidating the `depthWrite` property setting into a single function or object reduces redundancy and enhances maintainability, making the code easier to manage and update.	8
Possible issue	Adjust the opacity to ensure the material is visible if it's not intended to be fully transparent ___ **The opacity value for hexTransparentMaterial is set to 0, which makes it fully transparent and thus invisible. If this is not intentional, consider setting a higher opacity value.** [client/src/ui/components/worldmap/hexagon/HexLayers.tsx [141]](https://github.com/BibliothecaDAO/eternum/pull/911/files#diff-32d953460a4689eeda29120db48be52828dc4e94c6e6dab11277ba52ce4db0feR141-R141) ```diff -opacity: 0, // Start fully transparent +opacity: 0.5, // Adjusted to make the material slightly visible ``` Suggestion importance[1-10]: 7 Why: This suggestion addresses a potential issue where the material might be invisible due to full transparency. Adjusting the opacity to a higher value ensures that the material is visible if that is the intended behavior.	7