ImageBitmapLoader: Safari has increased memory usage migrating from Three r165 to r166. #30416
Closed as not planned
Description
Description
When upgrading from Three r165 to r166 my GLB models consume approx 50MB more memory on Safari MacOS 15.1.1 and iOS 18.2. This seems like a large increase and I just wanted to check that this is to be expected. I have deliberately not used an environment map because I know they grew in size with release r161.
Reproduction steps
On MacOS
- Run Activity Monitor and filter for https://vykingsneakerkitnative
- Run a new Safari window and load page: https://vykingsneakerkitnative.s3.eu-central-1.amazonaws.com/SteveTest/tmp/memory-r165.html
- Run a new Safari window and load page: https://vykingsneakerkitnative.s3.eu-central-1.amazonaws.com/SteveTest/tmp/memory-r166.html
- Compare their memory usage in Activity Monitor.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three r165</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"GLTFLoader": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js"
}
}
</script>
<script type="module">
import * as THREE from 'three'
import { GLTFLoader } from 'GLTFLoader'
document.addEventListener('DOMContentLoaded', () => {
console.log(`Three version ${THREE.REVISION}`)
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 1;
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xaaaaaa);
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animation);
document.body.appendChild(renderer.domElement);
function animation(time) {
renderer.render(scene, camera);
}
const loader = new GLTFLoader();
loader.load('https://sneaker-window.vyking.io/vyking-assets/customer/vyking-io/yeezy_boost_700_carbon_blue/model_l.glb', function (gltf) {
scene.add(gltf.scene);
console.log(gltf.scene)
});
})
</script>
</head>
<body>
</body>
</html>Live example
https://vykingsneakerkitnative.s3.eu-central-1.amazonaws.com/SteveTest/tmp/memory-r165.html
https://vykingsneakerkitnative.s3.eu-central-1.amazonaws.com/SteveTest/tmp/memory-r166.html
Screenshots
Version
r165 & r166
Device
Desktop, Mobile
Browser
Safari
OS
MacOS, iOS