diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/index.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/index.tsx index b68deb992..df4cc78d5 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/index.tsx +++ b/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(() => { , 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); diff --git a/src/components/ArmorMesh/components/Armor/index.tsx b/src/components/ArmorMesh/components/Armor/index.tsx index 51939ff74..17d433d49 100644 --- a/src/components/ArmorMesh/components/Armor/index.tsx +++ b/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(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 + ).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 }, diff --git a/src/components/ArmorMesh/components/Armor/shaders/fragment.glsl b/src/components/ArmorMesh/components/Armor/shaders/fragment.glsl index 76c09ddd4..25c1f37cb 100644 --- a/src/components/ArmorMesh/components/Armor/shaders/fragment.glsl +++ b/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; } \ No newline at end of file