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

takerfume · 2021-05-29T15:06:18Z

takerfume
May 29, 2021

When I loads one texture by TextureLoader using useLoader of r3f 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>
    </>
  )
}

https://codesandbox.io/s/r3f-and-use-gesture-forked-r3wpv?file=/src/App.js

Answered by drcmda

May 29, 2021

i wouldnt bother, this is something internal in three, textures that are created for nothing as a default - something like that. useLoader(Textureloader is nothing more than new TextureLoader().load(url, data => ... useLoader by design doesn't load twice, whereas plain three would. useLoader is cached. so no matter where in the component tree, if you request the same texture again, it will fetch from cache directly without loading/parsing it.

View full answer

drcmda · 2021-05-29T20:33:54Z

drcmda
May 29, 2021
Maintainer

i wouldnt bother, this is something internal in three, textures that are created for nothing as a default - something like that. useLoader(Textureloader is nothing more than new TextureLoader().load(url, data => ... useLoader by design doesn't load twice, whereas plain three would. useLoader is cached. so no matter where in the component tree, if you request the same texture again, it will fetch from cache directly without loading/parsing it.

1 reply

takerfume Jun 3, 2021
Author

Thank you very much.

When I asked in threejs forum, it turned out that render creates cubmap format from equirectangular mapping internally.
I can understand the reason of 2 textures being loaded.

https://discourse.threejs.org/t/how-to-prevent-textureloader-from-using-memory-of-2-textures-when-loading-one-texture/26753

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

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

Uh oh!

takerfume May 29, 2021

Replies: 1 comment · 1 reply

Uh oh!

Uh oh!

drcmda May 29, 2021 Maintainer

Uh oh!

Uh oh!

takerfume Jun 3, 2021 Author

takerfume
May 29, 2021

Replies: 1 comment 1 reply

drcmda
May 29, 2021
Maintainer

takerfume Jun 3, 2021
Author