I notice each time I toggle my models that the texture count keeps increasing. How can I keep it efficient? Should I be deleting materials each toggle? R3F project
That depends on how you load the textures - but hard to judge without seeing the related part of the code
Sorry, yeah Im just using the useTexture()
Chair_A Textures and Shader
const [wood_rough, Chair_A_AO, wood1, wood_norm, ply_diff, wood2] =
useTexture([
"/textures/dark_wood_rough_2k.jpg",
"/textures/Chair_A.jpg",
"/textures/dark_wood_diff_2k.jpg",
"/textures/dark_wood_nor_gl_2k.jpg",
"/textures/wood_diff_1.jpg",
"/textures/wood_diff_2.jpg",
]);
const woodMat1 = new THREE.MeshStandardMaterial({
map:
currBaseTexture === "/textures/dark_wood_diff_2k.jpg"
? wood1
: currBaseTexture === "/textures/wood_diff_2.jpg"
? wood2
: ply_diff,
aoMap: Chair_A_AO,
aoMapIntensity: 1,
normalMap: wood_norm,
roughnessMap: wood_rough,
roughness: 0.9,
colorWrite: true,
dithering: true,
fog: true,
normalScale: new THREE.Vector2(0.8, 0.8),
envMapIntensity: 0.2,
});
Chair_B Textures and Shader
const [
fabric_00_diff,
fabric_00_disp,
fabric_00_nor,
fabric_00_spec,
wood_00_spec,
wood_00_disp,
wood_00_diff,
wood_00_norm,
polkaDot,
red,
cyan,
] = useTexture([
"/textures/The Reader armchair_diffuse.jpg",
"/textures/The Reader armchair_height.jpg",
"/textures/The Reader armchair_normal.jpg",
"/textures/The Reader armchair_glossiness.jpg",
"/textures/The Reader armchair-b_glossiness.jpg",
"/textures/The Reader armchair-b_height.jpg",
"/textures/The Reader armchair-b_diffuse.jpg",
"/textures/The Reader armchair-b_normal.jpg",
"/textures/polka_dot.jpg",
"/textures/red.jpg",
"/textures/cyan.jpg",
]);
const woodMat = useMemo(
() =>
new THREE.MeshPhysicalMaterial({
map:
currBaseTexture === "/textures/The Reader armchair-b_diffuse.jpg"
? wood_00_diff
: currBaseTexture === "/textures/red.jpg"
? red
: currBaseTexture === "/textures/cyan.jpg"
? cyan
: wood_00_diff,
normalMap: wood_00_norm,
roughnessMap: wood_00_spec,
roughness: 0.7,
metalness: 0.2,
envMapIntensity: 0.2,
bumpMap: wood_00_disp,
})
);
const fabricMat = new THREE.MeshStandardMaterial({
map:
currCushionTexture1 === "/textures/The Reader armchair_diffuse.jpg"
? fabric_00_diff
: currCushionTexture1 === "/textures/polka_dot.jpg"
? polkaDot
: fabric_00_diff,
roughnessMap: fabric_00_spec,
displacementMap: fabric_00_disp,
displacementScale: 0,
normalMap: fabric_00_nor,
normalScale: new THREE.Vector2(1.0, 1.0),
bumpMap: fabric_00_disp,
bumpScale: 10,
envMapIntensity: 0.4,
});
You’d need to dispose the useMemo-created materials manually. Alternatively you can declare them in JSX and let R3F do it for you?
Ok I removed all the useMemo’s but I still saw the textures increasing at each toggle. So I just started to comment stuff out until the number stopped increasing at each toggle. The EffectComposer and Outline components were causing the texture count to increase for some reason. After I removed them the number stopped going up on toggles. Is this just a necessary evil of using this effect or is there a better way? Here is how I am using it in Chair_A and Chair_B…
Chair_A
<Selection>
<EffectComposer multisampling={8} autoClear={false}>
<Outline
blur
kernelSize={KernelSize.VERY_SMALL}
resolutionScale={0}
visibleEdgeColor="white"
edgeStrength={2}
width={500}
/>
<Select enabled={hovered}>
<mesh
castShadow
receiveShadow
geometry={nodes.Chair_APIV.geometry}
material={woodMat1}
position={[-1.118, 0, -1.352]}
onPointerOver={(event) => {
setHovered(true);
event.stopPropagation();
}}
onPointerOut={(event) => {
setHovered(false);
event.stopPropagation();
}}
/>
</Select>
</EffectComposer>
</Selection>
Chair_B
<EffectComposer multisampling={8} autoClear={false}>
<Outline
blur
kernelSize={KernelSize.VERY_SMALL}
resolutionScale={0}
visibleEdgeColor="white"
edgeStrength={2}
width={500}
/>
<Select enabled={cushionHovered}>
<mesh
name="Chair_B_Cushion"
castShadow
receiveShadow
geometry={nodes.Chair_B_Cushion.geometry}
material={fabricMat}
onClick={(event) => {
setobjConfig({
baseTextures: [],
cushionTextures: [
"/textures/The Reader armchair_diffuse.jpg",
"/textures/polka_dot.jpg",
],
});
event.stopPropagation();
}}
onPointerOver={(event) => {
setCushionHovered(true);
event.stopPropagation();
}}
onPointerOut={(event) => {
setCushionHovered(false);
event.stopPropagation();
}}
/>
</Select>
<Select enabled={baseHovered}>
<mesh
name="Chair_B_Wood"
castShadow
receiveShadow
geometry={nodes.Chair_B_Wood.geometry}
material={woodMat}
onClick={(event) => {
setobjConfig({
baseTextures: [
"/textures/The Reader armchair-b_diffuse.jpg",
"/textures/red.jpg",
"/textures/cyan.jpg",
],
cushionTextures: [],
});
event.stopPropagation();
}}
onPointerOver={(event) => {
setBaseHovered(true);
event.stopPropagation();
}}
onPointerOut={(event) => {
setBaseHovered(false);
event.stopPropagation();
}}
/>
</Select>
</EffectComposer>
I never did find the reason or the way to prevent the texture count from going up. However after changing to the Outlines component from Drei instead of from postprocessing, the issue no longer exists. Drei’s Outlines are much simpler than post-proscessing’s Outline component, (setup wise).