feat: corrected texture resolutions

src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/index.tsx

@@ -1,6 +1,6 @@
 import { createPortal, useFrame } from '@react-three/fiber';
 import { memo } from 'react';
-import { DepthTexture, Scene } from 'three';
+import { DepthTexture, Scene, Vector2 } from 'three';
 import { externalModuleMaskRenderTarget } from '../../../../../../../../components/ArmorMesh';
 import { spacedArmorDepthRenderTarget } from '../../../../../../../../components/ArmorMesh/components/SpacedArmorDepth';
 import { ArmorHighlighting } from './components/ArmorHighlighting';
@@ -23,28 +23,28 @@ export const TankArmor = memo(() => {
     <ArmorHighlighting />,
     armorHighlightingScene,
   );
+  const renderSize = new Vector2();
+  const newRenderSize = new Vector2();
 
   useFrame(({ gl, scene, camera }) => {
+    const pixelRatio = gl.getPixelRatio();
     gl.autoClear = true;
 
-    externalModuleMaskRenderTarget.setSize(
-      gl.domElement.width,
-      gl.domElement.height,
-    );
+    gl.getSize(newRenderSize).multiplyScalar(pixelRatio);
+    if (!newRenderSize.equals(renderSize)) {
+      renderSize.copy(newRenderSize);
+      spacedArmorDepthRenderTarget.depthTexture = new DepthTexture(
+        renderSize.x,
+        renderSize.y,
+      );
+    }
+
+    externalModuleMaskRenderTarget.setSize(renderSize.x, renderSize.y);
     gl.setRenderTarget(externalModuleMaskRenderTarget);
     gl.render(externalModuleMaskScene, camera);
 
     gl.clearDepth();
-    spacedArmorDepthRenderTarget.setSize(
-      gl.domElement.width,
-      gl.domElement.height,
-    );
-    if (!spacedArmorDepthRenderTarget.depthTexture) {
-      spacedArmorDepthRenderTarget.depthTexture = new DepthTexture(
-        gl.domElement.width,
-        gl.domElement.height,
-      );
-    }
+    spacedArmorDepthRenderTarget.setSize(renderSize.x, renderSize.y * 0.5);
     gl.setRenderTarget(spacedArmorDepthRenderTarget);
     gl.render(spacedArmorDepthScene, camera);
 

src/components/ArmorMesh/components/Armor/index.tsx

@@ -1,6 +1,6 @@
 import { MeshProps, useFrame, useThree } from '@react-three/fiber';
 import { useEffect, useRef } from 'react';
-import { ShaderMaterial, Vector2 } from 'three';
+import { IUniform, ShaderMaterial, Vector2 } from 'three';
 import { degToRad } from 'three/src/math/MathUtils';
 import { canSplash } from '../../../../core/blitz/canSplash';
 import { isExplosive } from '../../../../core/blitz/isExplosive';
@@ -26,7 +26,6 @@ export function ArmorMesh({
   const initialShell = useDuel.getState().antagonist!.shell;
   const initialTankopedia = useTankopediaPersistent.getState();
   const material = useRef<ShaderMaterial>(null);
-  const resolution = new Vector2();
   const explosionCapable = isExplosive(initialShell.type);
 
   useEffect(() => {
@@ -87,10 +86,12 @@ export function ArmorMesh({
 
   useFrame(({ gl, camera }) => {
     if (material.current) {
-      material.current.uniforms.resolution.value = resolution.set(
-        gl.domElement.width,
-        gl.domElement.height,
-      );
+      gl.getSize(material.current.uniforms.resolution.value);
+
+      (
+        material.current.uniforms.resolution as IUniform<Vector2>
+      ).value.multiplyScalar(gl.getPixelRatio());
+
       material.current.uniforms.externalModuleMask.value =
         externalModuleMaskRenderTarget.texture;
       material.current.uniforms.spacedArmorDepth.value =
@@ -116,7 +117,7 @@ export function ArmorMesh({
           transparent
           depthWrite={false}
           uniforms={{
-            resolution: { value: null },
+            resolution: { value: new Vector2() },
             externalModuleMask: { value: null },
             spacedArmorDepth: { value: null },
             spacedArmorMask: { value: null },

src/components/ArmorMesh/components/Armor/shaders/fragment.glsl

@@ -112,4 +112,6 @@ void main() {
   } else {
     gl_FragColor = vec4(color, (1.0 - penetrationChance) * 0.5);
   }
+
+  // gl_FragColor = externalModuleMaskColor;
 }