TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-21 10:47:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

use useRef instead of useState

Browse Source
This commit is contained in:
tresabhi committed 2026-10-02 16:34:12 -05:00
1 parent 0477887d68
commit f7db1280cf
1 file changed
+65 -64
Download Patch File Download Diff File Expand all files Collapse all files
packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/index.tsx
+65 -64
View File
@@ -5,7 +5,7 @@ import {
} from "@blitzkit/core"; } from "@blitzkit/core";
import { invalidate, useFrame } from "@react-three/fiber"; import { invalidate, useFrame } from "@react-three/fiber";
import type { QuicklimeEvent } from "quicklime"; import type { QuicklimeEvent } from "quicklime";
import { useEffect, useState } from "react"; import { useEffect, useRef } from "react";
import { import {
MeshBasicMaterial, MeshBasicMaterial,
NormalBlending, NormalBlending,
@@ -43,44 +43,43 @@ export function PrimaryArmorSceneComponent({
node, node,
thickness, thickness,
}: PrimaryArmorSceneComponentProps) { }: PrimaryArmorSceneComponentProps) {
const [material] = useState( const material = useRef(
() => new ShaderMaterial({
new ShaderMaterial({ fragmentShader,
fragmentShader, vertexShader,
vertexShader,
fog: true, fog: true,
transparent: true, transparent: true,
blending: isHalloween ? SubtractiveBlending : NormalBlending, blending: isHalloween ? SubtractiveBlending : NormalBlending,
uniforms: UniformsUtils.merge([ uniforms: UniformsUtils.merge([
UniformsLib.common, UniformsLib.common,
UniformsLib.fog, UniformsLib.fog,
{ {
thickness: { value: null }, thickness: { value: null },
penetration: { value: null }, penetration: { value: null },
caliber: { value: null }, caliber: { value: null },
ricochet: { value: null }, ricochet: { value: null },
normalization: { value: null }, normalization: { value: null },
isExplosive: { value: null }, isExplosive: { value: null },
canSplash: { value: null }, canSplash: { value: null },
damage: { value: null }, damage: { value: null },
explosionRadius: { value: null }, explosionRadius: { value: null },
greenPenetration: { value: null }, greenPenetration: { value: null },
advancedHighlighting: { value: null }, advancedHighlighting: { value: null },
opaque: { value: null }, opaque: { value: null },
inverseProjectionMatrix: { value: null }, inverseProjectionMatrix: { value: null },
resolution: { value: new Vector2() }, resolution: { value: new Vector2() },
spacedArmorBuffer: { value: null }, spacedArmorBuffer: { value: null },
spacedArmorDepth: { value: null }, spacedArmorDepth: { value: null },
opacity: { value: 0 }, opacity: { value: 0 },
}, },
]), ]),
}) }),
); );
useEffect(() => { useEffect(() => {
@@ -89,17 +88,17 @@ export function PrimaryArmorSceneComponent({
const shell = const shell =
tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell; tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
material.uniforms.caliber.value = shell.caliber; material.current.uniforms.caliber.value = shell.caliber;
material.uniforms.ricochet.value = degToRad( material.current.uniforms.ricochet.value = degToRad(
isExplosive(shell.type) ? 90 : shell.ricochet! isExplosive(shell.type) ? 90 : shell.ricochet!,
); );
material.uniforms.normalization.value = degToRad( material.current.uniforms.normalization.value = degToRad(
shell.normalization ?? 0 shell.normalization ?? 0,
); );
material.uniforms.isExplosive.value = isExplosive(shell.type); material.current.uniforms.isExplosive.value = isExplosive(shell.type);
material.uniforms.canSplash.value = canSplash(shell.type); material.current.uniforms.canSplash.value = canSplash(shell.type);
material.uniforms.damage.value = shell.armor_damage; material.current.uniforms.damage.value = shell.armor_damage;
material.uniforms.explosionRadius.value = shell.explosion_radius; material.current.uniforms.explosionRadius.value = shell.explosion_radius;
handleProtagonistEquipmentChange(true); handleProtagonistEquipmentChange(true);
handleAntagonistEquipmentChange(true); handleAntagonistEquipmentChange(true);
@@ -107,31 +106,32 @@ export function PrimaryArmorSceneComponent({
invalidate(); invalidate();
} }
function handleGreenPenetrationChange(greenPenetration: boolean) { function handleGreenPenetrationChange(greenPenetration: boolean) {
material.uniforms.greenPenetration.value = greenPenetration; material.current.uniforms.greenPenetration.value = greenPenetration;
} }
function handleAdvancedHighlightingChange(advancedHighlighting: boolean) { function handleAdvancedHighlightingChange(advancedHighlighting: boolean) {
material.uniforms.advancedHighlighting.value = advancedHighlighting; material.current.uniforms.advancedHighlighting.value =
advancedHighlighting;
invalidate(); invalidate();
} }
function handleOpaqueChange(opaque: boolean) { function handleOpaqueChange(opaque: boolean) {
material.uniforms.opaque.value = opaque; material.current.uniforms.opaque.value = opaque;
} }
function handleWireframeChange(wireframe: boolean) { function handleWireframeChange(wireframe: boolean) {
material.wireframe = wireframe; material.current.wireframe = wireframe;
} }
function handleProtagonistEquipmentChange(noInvalidate = false) { function handleProtagonistEquipmentChange(noInvalidate = false) {
const equipment = Duel.state.protagonist.equipmentMatrix; const equipment = Duel.state.protagonist.equipmentMatrix;
const hasEnhancedArmor = hasEquipment( const hasEnhancedArmor = hasEquipment(
110, 110,
Duel.state.protagonist.tank.equipment_preset, Duel.state.protagonist.tank.equipment_preset,
equipment equipment,
); );
const equalizer = const equalizer =
(Duel.state.equalize (Duel.state.equalize
? Duel.state.protagonist.tank.equalizer?.armor ? Duel.state.protagonist.tank.equalizer?.armor
: undefined) ?? 1; : undefined) ?? 1;
material.uniforms.thickness.value = material.current.uniforms.thickness.value =
thickness * (hasEnhancedArmor ? 1.04 : 1) * equalizer; thickness * (hasEnhancedArmor ? 1.04 : 1) * equalizer;
if (!noInvalidate) invalidate(); if (!noInvalidate) invalidate();
@@ -145,29 +145,29 @@ export function PrimaryArmorSceneComponent({
const hasCalibratedShells = hasEquipment( const hasCalibratedShells = hasEquipment(
103, 103,
Duel.state.antagonist.tank.equipment_preset, Duel.state.antagonist.tank.equipment_preset,
equipment equipment,
); );
material.uniforms.penetration.value = material.current.uniforms.penetration.value =
penetration * penetration *
resolvePenetrationCoefficient( resolvePenetrationCoefficient(
hasCalibratedShells, hasCalibratedShells,
Duel.state.equalize, Duel.state.equalize,
shell.type, shell.type,
Duel.state.antagonist.tank.equalizer Duel.state.antagonist.tank.equalizer,
); );
if (!noInvalidate) invalidate(); if (!noInvalidate) invalidate();
} }
function handleTransitionEvent(event: QuicklimeEvent<number>) { function handleTransitionEvent(event: QuicklimeEvent<number>) {
material.uniforms.opacity.value = event.data; material.current.uniforms.opacity.value = event.data;
} }
handleShellChange(); handleShellChange();
handleGreenPenetrationChange(TankopediaPersistent.state.greenPenetration); handleGreenPenetrationChange(TankopediaPersistent.state.greenPenetration);
handleAdvancedHighlightingChange( handleAdvancedHighlightingChange(
TankopediaPersistent.state.advancedHighlighting TankopediaPersistent.state.advancedHighlighting,
); );
handleOpaqueChange(TankopediaPersistent.state.opaque); handleOpaqueChange(TankopediaPersistent.state.opaque);
handleWireframeChange(TankopediaPersistent.state.wireframe); handleWireframeChange(TankopediaPersistent.state.wireframe);
@@ -181,27 +181,27 @@ export function PrimaryArmorSceneComponent({
Tankopedia.on((state) => state.customShell, handleShellChange), Tankopedia.on((state) => state.customShell, handleShellChange),
TankopediaPersistent.on( TankopediaPersistent.on(
(state) => state.greenPenetration, (state) => state.greenPenetration,
handleGreenPenetrationChange handleGreenPenetrationChange,
), ),
TankopediaPersistent.on( TankopediaPersistent.on(
(state) => state.advancedHighlighting, (state) => state.advancedHighlighting,
handleAdvancedHighlightingChange handleAdvancedHighlightingChange,
), ),
TankopediaPersistent.on((state) => state.opaque, handleOpaqueChange), TankopediaPersistent.on((state) => state.opaque, handleOpaqueChange),
Duel.on( Duel.on(
(state) => state.protagonist.equipmentMatrix, (state) => state.protagonist.equipmentMatrix,
() => handleProtagonistEquipmentChange() () => handleProtagonistEquipmentChange(),
), ),
Duel.on( Duel.on(
(state) => state.antagonist.equipmentMatrix, (state) => state.antagonist.equipmentMatrix,
() => handleAntagonistEquipmentChange() () => handleAntagonistEquipmentChange(),
), ),
Duel.on( Duel.on(
(state) => state.equalize, (state) => state.equalize,
() => { () => {
handleProtagonistEquipmentChange(); handleProtagonistEquipmentChange();
handleAntagonistEquipmentChange(); handleAntagonistEquipmentChange();
} },
), ),
() => transitionEvent.off(handleTransitionEvent), () => transitionEvent.off(handleTransitionEvent),
]; ];
@@ -212,13 +212,14 @@ export function PrimaryArmorSceneComponent({
}, []); }, []);
useFrame(({ gl, camera }) => { useFrame(({ gl, camera }) => {
gl.getSize(material.uniforms.resolution.value).multiplyScalar( gl.getSize(material.current.uniforms.resolution.value).multiplyScalar(
gl.getPixelRatio() gl.getPixelRatio(),
); );
material.uniforms.spacedArmorBuffer.value = spacedArmorRenderTarget.texture; material.current.uniforms.spacedArmorBuffer.value =
material.uniforms.spacedArmorDepth.value = spacedArmorRenderTarget.texture;
material.current.uniforms.spacedArmorDepth.value =
spacedArmorRenderTarget.depthTexture; spacedArmorRenderTarget.depthTexture;
material.uniforms.inverseProjectionMatrix.value = material.current.uniforms.inverseProjectionMatrix.value =
camera.projectionMatrixInverse; camera.projectionMatrixInverse;
}); });
@@ -243,7 +244,7 @@ export function PrimaryArmorSceneComponent({
{...props} {...props}
key={`${key}-include`} key={`${key}-include`}
renderOrder={1} renderOrder={1}
material={material} material={material.current}
/> />
); );
}, },