I have a 3d SceneView with a graphics layer and a point graphic with icon and text symbol layers. When the graphic is removed from the graphics layer, the console logs this error message:
"4.29/:132 [esri.views.3d.webgl-engine.lib.TextureRepository.RefCountedTextureImpl] Cannot dereference texture that has no references!"
The error only seems to happen when the TextSymbol3DLayer() is included in the symbol layers. If it is commented out, there is no error message.
How can I avoid or suppress this error message?
I created the html page below which replicates the error when the "add/remove" button is clicked.
https://stackblitz.com/edit/stackblitz-starters-adfukf?file=index.html
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Add Graphics to a SceneView | Sample | ArcGIS Maps SDK for JavaScript 4.29
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.29/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.29/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 80%;
width: 100%;
}
</style>
<script async defer>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/Graphic",
], (Map, SceneView, GraphicsLayer, Graphic) => {
const map = new Map({
basemap: "hybrid",
});
const view = new SceneView({
container: "viewDiv",
map: map,
camera: {
// autocasts as new Camera()
position: {
// autocasts as new Point()
x: -0.178,
y: 51.48791,
z: 1266.7049653716385,
},
},
});
/*********************
* Add graphics layer
*********************/
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
/*************************
* Add a 3D point graphic
*************************/
function addGraphic() {
// London
const point = {
type: "point", // autocasts as new Point()
x: -0.178,
y: 51.48791,
};
const markerSymbol = {
type: "point-3d",
symbolLayers: [
{
type: "icon", // autocasts as new IconSymbol3DLayer()
size: 8, // points
resource: { primitive: "circle" },
material: { color: "red" },
},
{
type: "text", // autocasts as new TextSymbol3DLayer()
text: `\n\n 100 m`,
size: 10, // points
material: { color: "red" },
halo: {
color: "white",
size: 1,
},
horizontalAlignment: "center",
verticalAlignment: "top",
},
],
};
const pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol,
});
graphicsLayer.add(pointGraphic);
}
addGraphic();
const removeButton = document.getElementById("remove-button");
removeButton.addEventListener("click", (e) => {
if (graphicsLayer.graphics.items.length) {
try{
graphicsLayer.removeAll();
} catch (err){
console.log('trying to catch the error', err)
}
} else {
addGraphic();
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<p>Open the console to see the error logged when removing a graphic with TextSymbol3DLayer</p>
<button id="remove-button">add/remove</button>
</body>
</html>
