From 07cdb0788c4fb7ca6d428c7c5c348ae681f9d3ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 27 Feb 2024 17:44:18 -0600
Subject: [PATCH] feat: opaque mode

---
 .../components/Model/components/Options.tsx   | 38 +++++++++++++------
 .../Armor/components/CoreArmor/index.tsx      |  2 +
 .../CoreArmor/shaders/fragment.glsl           |  4 +-
 src/stores/tankopedia.ts                      |  2 +
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
index 9896894d8..e3ac0d6c9 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
@@ -30,6 +30,7 @@ export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
   const wireframe = useTankopediaPersistent(
     (state) => state.model.visual.wireframe,
   );
+  const opaque = useTankopediaPersistent((state) => state.model.visual.opaque);
   const fullScreenAvailable =
     typeof document !== 'undefined' && document.fullscreenEnabled;
   const environment = useTankopediaPersistent(
@@ -78,6 +79,8 @@ export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
           </DropdownMenu.Trigger>
 
           <DropdownMenu.Content>
+            <DropdownMenu.Label>Armor</DropdownMenu.Label>
+
             <DropdownMenu.CheckboxItem
               checked={greenPenetration}
               onCheckedChange={(checked) => {
@@ -89,6 +92,30 @@ export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
               Green penetration
             </DropdownMenu.CheckboxItem>
 
+            <DropdownMenu.CheckboxItem
+              checked={wireframe}
+              onCheckedChange={(checked) => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.model.visual.wireframe = checked;
+                });
+              }}
+            >
+              Wireframe
+            </DropdownMenu.CheckboxItem>
+
+            <DropdownMenu.CheckboxItem
+              checked={opaque}
+              onCheckedChange={(checked) => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.model.visual.opaque = checked;
+                });
+              }}
+            >
+              Opaque
+            </DropdownMenu.CheckboxItem>
+
+            <DropdownMenu.Label>Environment</DropdownMenu.Label>
+
             <DropdownMenu.CheckboxItem
               checked={showGrid}
               onCheckedChange={(checked) => {
@@ -132,17 +159,6 @@ export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
                 </DropdownMenu.RadioGroup>
               </DropdownMenu.SubContent>
             </DropdownMenu.Sub>
-
-            <DropdownMenu.CheckboxItem
-              checked={wireframe}
-              onCheckedChange={(checked) => {
-                mutateTankopediaPersistent((draft) => {
-                  draft.model.visual.wireframe = checked;
-                });
-              }}
-            >
-              Wireframe
-            </DropdownMenu.CheckboxItem>
           </DropdownMenu.Content>
         </DropdownMenu.Root>
       )}
diff --git a/src/components/Armor/components/CoreArmor/index.tsx b/src/components/Armor/components/CoreArmor/index.tsx
index b34b50326..8ddb62118 100644
--- a/src/components/Armor/components/CoreArmor/index.tsx
+++ b/src/components/Armor/components/CoreArmor/index.tsx
@@ -51,6 +51,7 @@ export function CoreArmor({ node, thickness }: CoreArmorProps) {
       explosionRadius: { value: null },
       greenPenetration: { value: null },
       wireframe: { value: null },
+      opaque: { value: null },
 
       resolution: { value: new Vector2() },
       spacedArmorBuffer: { value: null },
@@ -78,6 +79,7 @@ export function CoreArmor({ node, thickness }: CoreArmorProps) {
     ) {
       material.uniforms.greenPenetration.value = visual.greenPenetration;
       material.uniforms.wireframe.value = visual.wireframe;
+      material.uniforms.opaque.value = visual.opaque || visual.wireframe;
       material.wireframe = visual.wireframe;
     }
 
diff --git a/src/components/Armor/components/CoreArmor/shaders/fragment.glsl b/src/components/Armor/components/CoreArmor/shaders/fragment.glsl
index eb579b1cf..b5ad53518 100644
--- a/src/components/Armor/components/CoreArmor/shaders/fragment.glsl
+++ b/src/components/Armor/components/CoreArmor/shaders/fragment.glsl
@@ -14,6 +14,7 @@ uniform float damage;
 uniform float explosionRadius;
 uniform bool greenPenetration;
 uniform bool wireframe;
+uniform bool opaque;
 
 uniform highp sampler2D spacedArmorBuffer;
 uniform highp sampler2D spacedArmorDepth;
@@ -74,7 +75,7 @@ void main() {
     }
   }
 
-  float alpha = wireframe ? 1.0 : 0.5;
+  float alpha = opaque ? 1.0 : 0.5;
   vec3 color = vec3(1.0, splashChance * 0.392, 0.0);
   if (greenPenetration) {
     // non-trigonometric red-green mixing: https://www.desmos.com/calculator/ceo1oq7l67
@@ -84,5 +85,4 @@ void main() {
   } else {
     gl_FragColor = vec4(color, (1.0 - penetrationChance) * alpha);
   }
-
 }
\ No newline at end of file
diff --git a/src/stores/tankopedia.ts b/src/stores/tankopedia.ts
index 357d87d83..817492ab1 100644
--- a/src/stores/tankopedia.ts
+++ b/src/stores/tankopedia.ts
@@ -17,6 +17,7 @@ export interface TankopediaPersistent {
   model: {
     visual: {
       wireframe: boolean;
+      opaque: boolean;
       environment: (typeof ENVIRONMENTS)[number];
       controlsEnabled: boolean;
       showGrid: boolean;
@@ -105,6 +106,7 @@ export const useTankopediaPersistent = create<TankopediaPersistent>()(
       model: {
         visual: {
           wireframe: false,
+          opaque: false,
           environment: ENVIRONMENTS[0],
           controlsEnabled: true,
           showGrid: true,