feat: opaque mode

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>
       )}

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;
     }
 

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);
   }
-
 }

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,