How to prevent TextureLoader from using memory of 2 textures when loading one texture

Questions
,
1

When I loads one texture by TextureLoader and logging WebGLRenderer.info,
console log shows the following result.

geometries: 1
textures: 2

Why dose the TextureLoader loads twice textures?
How could I save memory by loading just one texture?

This is my code.

import * as THREE from 'three'
import React, { Suspense } from 'react'
import { Canvas, useThree, useLoader, useFrame } from 'react-three-fiber'
import { Html } from 'drei'

export default function App() {
  function Environment() {
    const { scene, gl } = useThree()
    const texture = useLoader(THREE.TextureLoader, '/4efe1f00-fbfa-4784-8602-c400c68c1d9f.jpeg')
    texture.mapping = THREE.EquirectangularReflectionMapping
    texture.encoding = THREE.sRGBEncoding
    scene.background = texture
    console.log('gl.info1:', gl.info)
    // useFrame((state) => {
    //   console.log('gl.info:', gl.info)
    // })

    return null
  }

  // function

  return (
    <>
      <div className="r3fCanvas" id="r3fCanvas">
        <Canvas
          invalidateFrameloop
          className="canvas"
          camera={{ position: [0, 0, 0] }}
          // pixelRatio={[1, 2]}
        >
          <Suspense fallback={<Html>loading..</Html>}>
            <Environment />
          </Suspense>
        </Canvas>
      </div>
      <style jsx global>
        {`
          .componentNotZoom {
            position: relative;
            background-position: left top;
            background-repeat: no-repeat;
            background-size: auto 10%;
            height: 30%;
            width: 10%;
          }

          img {
            width: 250px;
            // visibility:hidden;
          }

          .canvas {
          }

          .r3fCanvas {
            height: 100%;
          }
        `}
      </style>
    </>
  )
}

This is the link of my code.

2

The renderer holds two textures since it internally converts the equirectangular environment map to the cube map format. Only this format is supported in the shader and hence a conversion mandatory.

Pure three.js demo demonstrating the effect: https://jsfiddle.net/3bepmkv4/

2 Likes
3

Thank you very much. Well noted.
I can understand the process of equirectangular environment map :smiley: