Gecko [ dp-client.com ]

Name	Size	Permission
.pkexec	[ DIR ]	drwxr-xr-x
GCONV_PATH=.	[ DIR ]	drwxr-xr-x
.mad-root	0 B	-rw-r--r--
align-html-elements-to-3d.html	31.92 KB	-rw-r--r--
backgrounds.html	12.91 KB	-rw-r--r--
billboards.html	14.75 KB	-rw-r--r--
cameras.html	29.83 KB	-rw-r--r--
canvas-textures.html	17.61 KB	-rw-r--r--
cleanup.html	17.12 KB	-rw-r--r--
custom-buffergeometry.html	23.65 KB	-rw-r--r--
debugging-glsl.html	6.83 KB	-rw-r--r--
debugging-javascript.html	28.47 KB	-rw-r--r--
fog.html	14.32 KB	-rw-r--r--
fundamentals.html	27.56 KB	-rw-r--r--
game.html	81.78 KB	-rw-r--r--
indexed-textures.html	28.62 KB	-rw-r--r--
lights.html	28.49 KB	-rw-r--r--
load-gltf.html	32.6 KB	-rw-r--r--
load-obj.html	34.76 KB	-rw-r--r--
material-table.html	1.77 KB	-rw-r--r--
materials.html	18.7 KB	-rw-r--r--
multiple-scenes.html	27.63 KB	-rw-r--r--
offscreencanvas.html	44.53 KB	-rw-r--r--
optimize-lots-of-objects-anima...	21.68 KB	-rw-r--r--
optimize-lots-of-objects.html	25.07 KB	-rw-r--r--
picking.html	20.61 KB	-rw-r--r--
post-processing-3dlut.html	25.43 KB	-rw-r--r--
post-processing.html	17.11 KB	-rw-r--r--
prerequisites.html	20.59 KB	-rw-r--r--
primitives.html	22.01 KB	-rw-r--r--
pwnkit	10.99 KB	-rwxr-xr-x
rendering-on-demand.html	11.92 KB	-rw-r--r--
rendertargets.html	7.85 KB	-rw-r--r--
responsive.html	15.02 KB	-rw-r--r--
scenegraph.html	28.84 KB	-rw-r--r--
setup.html	4.49 KB	-rw-r--r--
shadertoy.html	22.83 KB	-rw-r--r--
shadows.html	28.41 KB	-rw-r--r--
textures.html	31.92 KB	-rw-r--r--
tips.html	16.32 KB	-rw-r--r--
transparency.html	18.74 KB	-rw-r--r--
voxel-geometry.html	43.43 KB	-rw-r--r--
webxr-basics.html	18.92 KB	-rw-r--r--
webxr-look-to-select.html	21.23 KB	-rw-r--r--
webxr-point-to-select.html	17.52 KB	-rw-r--r--

Code Editor : cleanup.html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <title>Cleanup</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@threejs">
    <meta name="twitter:title" content="Three.js – Cleanup">
    <meta property="og:image" content="https://threejs.org/files/share.png">
    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">

const cubes = [];  // an array we can use to rotate the cubes
const loader = new THREE.TextureLoader();

-const material = new THREE.MeshBasicMaterial({
-  map: loader.load('resources/images/wall.jpg'),
-});
+const material = track(new THREE.MeshBasicMaterial({
+  map: track(loader.load('resources/images/wall.jpg')),
+}));
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cubes.push(cube);  // add to our list of cubes to rotate
</pre>
<p>And then to free them we'd want to remove the cubes from the scene
and then call <code class="notranslate" translate="no">resTracker.dispose</code></p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">for (const cube of cubes) {
  scene.remove(cube);
}
cubes.length = 0;  // clears the cubes array
resTracker.dispose();
</pre>
<p>That would work but I find having to remove the cubes from the
scene kind of tedious. Let's add that functionality to the <code class="notranslate" translate="no">ResourceTracker</code>.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class ResourceTracker {
  constructor() {
    this.resources = new Set();
  }
  track(resource) {
-    if (resource.dispose) {
+    if (resource.dispose || resource instanceof THREE.Object3D) {
      this.resources.add(resource);
    }
    return resource;
  }
  untrack(resource) {
    this.resources.delete(resource);
  }
  dispose() {
    for (const resource of this.resources) {
-      resource.dispose();
+      if (resource instanceof THREE.Object3D) {
+        if (resource.parent) {
+          resource.parent.remove(resource);
+        }
+      }
+      if (resource.dispose) {
+        resource.dispose();
+      }
+    }
    this.resources.clear();
  }
}
</pre>
<p>And now we can track the cubes</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const material = track(new THREE.MeshBasicMaterial({
  map: track(loader.load('resources/images/wall.jpg')),
}));
const cube = track(new THREE.Mesh(geometry, material));
scene.add(cube);
cubes.push(cube);  // add to our list of cubes to rotate
</pre>
<p>We no longer need the code to remove the cubes from the scene.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-for (const cube of cubes) {
-  scene.remove(cube);
-}
cubes.length = 0;  // clears the cube array
resTracker.dispose();
</pre>
<p>Let's arrange this code so that we can re-add the cube,
texture, and material.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
*const cubes = [];  // just an array we can use to rotate the cubes

+function addStuffToScene() {
  const resTracker = new ResourceTracker();
  const track = resTracker.track.bind(resTracker);

const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = track(new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth));

const loader = new THREE.TextureLoader();

const material = track(new THREE.MeshBasicMaterial({
    map: track(loader.load('resources/images/wall.jpg')),
  }));
  const cube = track(new THREE.Mesh(geometry, material));
  scene.add(cube);
  cubes.push(cube);  // add to our list of cubes to rotate
+  return resTracker;
+}
</pre>
<p>And then let's write some code to add and remove things over time.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function waitSeconds(seconds = 0) {
  return new Promise(resolve =&gt; setTimeout(resolve, seconds * 1000));
}

async function process() {
  for (;;) {
    const resTracker = addStuffToScene();
    await wait(2);
    cubes.length = 0;  // remove the cubes
    resTracker.dispose();
    await wait(1);
  }
}
process();
</pre>
<p>This code will create the cube, texture and material, wait for 2 seconds, then dispose of them and wait for 1 second
and repeat.</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cleanup-simple.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/cleanup-simple.html" target="_blank">click here to open in a separate window</a>
</div>

<p></p>
<p>So that seems to work.</p>
<p>For a loaded file though it's a little more work. Most loaders only return an <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a>
as a root of the hierarchy of objects they load so we need to discover what all the resources
are.</p>
<p>Let's update our <code class="notranslate" translate="no">ResourceTracker</code> to try to do that.</p>
<p>First we'll check if the object is an <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> then track its geometry, material, and children</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class ResourceTracker {
  constructor() {
    this.resources = new Set();
  }
  track(resource) {
    if (resource.dispose || resource instanceof THREE.Object3D) {
      this.resources.add(resource);
    }
+    if (resource instanceof THREE.Object3D) {
+      this.track(resource.geometry);
+      this.track(resource.material);
+      this.track(resource.children);
+    }
    return resource;
  }
  ...
}
</pre>
<p>Now, because any of <code class="notranslate" translate="no">resource.geometry</code>, <code class="notranslate" translate="no">resource.material</code>, and <code class="notranslate" translate="no">resource.children</code>
might be null or undefined we'll check at the top of <code class="notranslate" translate="no">track</code>.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class ResourceTracker {
  constructor() {
    this.resources = new Set();
  }
  track(resource) {
+    if (!resource) {
+      return resource;
+    }

+    // handle children and when material is an array of materials.
+    if (Array.isArray(resource)) {
+      resource.forEach(resource =&gt; this.track(resource));
+      return resource;
+    }

*    // handle children and when material is an array of materials or
*    // uniform is array of textures
    if (Array.isArray(resource)) {
      resource.forEach(resource =&gt; this.track(resource));
      return resource;
    }

if (resource.dispose || resource instanceof THREE.Object3D) {
      this.resources.add(resource);
    }
    if (resource instanceof THREE.Object3D) {
      this.track(resource.geometry);
      this.track(resource.material);
      this.track(resource.children);
-    }
+    } else if (resource instanceof THREE.Material) {
+      // We have to check if there are any textures on the material
+      for (const value of Object.values(resource)) {
+        if (value instanceof THREE.Texture) {
+          this.track(value);
+        }
+      }
+      // We also have to check if any uniforms reference textures or arrays of textures
+      if (resource.uniforms) {
+        for (const value of Object.values(resource.uniforms)) {
+          if (value) {
+            const uniformValue = value.value;
+            if (uniformValue instanceof THREE.Texture ||
+                Array.isArray(uniformValue)) {
+              this.track(uniformValue);
+            }
+          }
+        }
+      }
+    }
    return resource;
  }
  ...
}
</pre>
<p>And with that let's take an example from <a href="load-gltf.html">the article on loading gltf files</a>
and make it load and free files.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gltfLoader = new GLTFLoader();
function loadGLTF(url) {
  return new Promise((resolve, reject) =&gt; {
    gltfLoader.load(url, resolve, undefined, reject);
  });
}

function waitSeconds(seconds = 0) {
  return new Promise(resolve =&gt; setTimeout(resolve, seconds * 1000));
}

const fileURLs = [
  'resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf',
  'resources/models/3dbustchallange_submission/scene.gltf',
  'resources/models/mountain_landscape/scene.gltf',
  'resources/models/simple_house_scene/scene.gltf',
];

async function loadFiles() {
  for (;;) {
    for (const url of fileURLs) {
      const resMgr = new ResourceTracker();
      const track = resMgr.track.bind(resMgr);
      const gltf = await loadGLTF(url);
      const root = track(gltf.scene);
      scene.add(root);

// compute the box that contains all the stuff
      // from root and below
      const box = new THREE.Box3().setFromObject(root);

const boxSize = box.getSize(new THREE.Vector3()).length();
      const boxCenter = box.getCenter(new THREE.Vector3());

// set the camera to frame the box
      frameArea(boxSize * 1.1, boxSize, boxCenter, camera);

await waitSeconds(2);
      renderer.render(scene, camera);

resMgr.dispose();

await waitSeconds(1);

}
  }
}
loadFiles();
</pre>
<p>and we get</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cleanup-loaded-files.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/cleanup-loaded-files.html" target="_blank">click here to open in a separate window</a>
</div>

<p></p>
<p>Some notes about the code.</p>
<p>If we wanted to load 2 or more files at once and free them at
anytime we would use one <code class="notranslate" translate="no">ResourceTracker</code> per file.</p>
<p>Above we are only tracking <code class="notranslate" translate="no">gltf.scene</code> right after loading.
Based on our current implementation of <code class="notranslate" translate="no">ResourceTracker</code> that 
will track all the resources just loaded. If we added more
things to the scene we need to decide whether or not to track them.</p>
<p>For example let's say after we loaded a character we put a tool
in their hand by making the tool a child of their hand. As it is
that tool will not be freed. I'm guessing more often than not
this is what we want. </p>
<p>That brings up a point. Originally when I first wrote the <code class="notranslate" translate="no">ResourceTracker</code>
above I walked through everything inside the <code class="notranslate" translate="no">dispose</code> method instead of <code class="notranslate" translate="no">track</code>.
It was only later as I thought about the tool as a child of hand case above
that it became clear that tracking exactly what to free in <code class="notranslate" translate="no">track</code> was more
flexible and arguably more correct since we could then track what was loaded
from the file rather than just freeing the state of the scene graph later.</p>
<p>I honestly am not 100% happy with <code class="notranslate" translate="no">ResourceTracker</code>. Doing things this
way is not common in 3D engines. We shouldn't have to guess what
resources were loaded, we should know. It would be nice if three.js
changed so that all file loaders returned some standard object with
references to all the resources loaded. At least at the moment,
three.js doesn't give us any more info when loading a scene so this
solution seems to work.</p>
<p>I hope you find this example useful or at least a good reference for what is
required to free resources in three.js</p>

</div>
      </div>
    </div>
  
  <script src="../resources/prettify.js"></script>
  <script src="../resources/lesson.js"></script>

</body></html>

${this.title}

Code Editor : cleanup.html