Using TransformEditor issues

CesiumJS
1

Hi!!

I have been using Cesium.js 1.96 with Cesium Ion sdk which has no problem at all.
recently I changed to 1.115 and the Cesium Ion Sdk either.

Now I’m trying to solve the issue with the ‘TransformEditor’ which cause a problem throwing the messages below.

An error occurred while rendering. Rendering has stopped.
RuntimeError: Vertex texture fetch support is required to render primitives with per-instance attributes. The maximum number of vertex texture image units must be greater than zero.
Error
** at new RuntimeError (http://localhost:8000/mf-dep____vendor.ffd7225e.js:901250:11)**
** at push…/…/node_modules/@cesiumgs/engine/Source/Scene/Primitive.js.Primitive.update (http://localhost:8000/mf-dep____vendor.ffd7225e.js:1036259:13)**
** at push…/…/node_modules/@cesiumgs/ion-sdk-widgets/Source/TransformEditor/AxisLinePrimitive.js.AxisLinePrimitive.update (http://localhost:8000/mf-dep____vendor.ffd7225e.js:1078848:19)**
** at Ya.update (http://localhost:8000/Cesium.js:11116:106410)**
** at qZe (http://localhost:8000/Cesium.js:16619:31544)**
** at oS (http://localhost:8000/Cesium.js:16619:28295)**
** at Li.updateAndExecuteCommands (http://localhost:8000/Cesium.js:16619:25559)**
** at URt (http://localhost:8000/Cesium.js:16619:38937)**
** at gV (http://localhost:8000/Cesium.js:16619:39135)**
** at Li.render (http://localhost:8000/Cesium.js:16619:40163)**
** at SV.render (http://localhost:8000/Cesium.js:16920:1631)**
** at n (http://localhost:8000/Cesium.js:16918:10683)**

the component (TransformEditor) was totally OK with Cesium1.96

I have searched all over the internet and communities but you guys never answered to the question on the message.

When I looked at very closely the message and I dug into the TransformEditor code. Specifically, the file ‘AxisLinePrimitives.js’ and I found that the function ‘AxisLinePrimitive.prototype.update’ uses primitive.update fucntions directly which the document said ‘do not call it directly’.

I’m so confused and desperate.
Using the Cesium Ion Sdk is kind of benefit, right? but now I don’t know what to do.

2

Hi :wave:,

I am very sorry to hear you are frustrated. Let’s try to get to the bottom of the issue.

I just tried to reproduce the error but was unable to.

If you could provide us some sandcastle code that reproduces the issue you are having, that would help us assist you further.

3

Thank you for reviewing my post.
I’m still don’t know what to do with this!!!

I think I need to break down my process to explain and to let you be able to issue the same
problem.

  1. We downloaded the ‘cesium-ion-sdk version.1.115’ along with the cesium pipe line
    and published it as ‘@cesiumgs/cesium-analytics’ module.
  2. We also published ‘@cesiumgs/engine’, ‘@cesiumgs/widgets’, ‘@cesiumgs/ion-sdk-widgets’,
    so that we could import ‘TransformEditor’ from ‘@cesiumgs/ion-sdk-widgets’.
  3. Then we wrote down the code to use the ‘TransformEditor’ like below.
    when we call ‘startTransformEditor’ it spit out the error message box saying 'Vertex texture fetch… "

image
image1915×578 76.8 KB

here is the code snippet.

import * as Cesium from ‘@cesiumgs/cesium-analytics’
import {TransformEditor} from ‘@cesiumgs/ion-sdk-widgets’
import { Button, Divider, Input } from ‘antd’
import { useSelector, useDispatch } from ‘react-redux’

const TrFormEditor = (props:any) => {

const cesiumview = window.cviewer;
const { user, onCloseMicroApp} = props;

useEffect(() => {
return() => {
onCloseMicroApp();
}
}, )

const onClickTre = () => {
startTransformEditor(cesiumview);
}

const startTransformEditor = async(viewer:Cesium.Viewer) => {

Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhZDk3MTBhZS0wMWEwLTQyNjQtOWU2NS0zYjQ4ODM2NzBjYTQiLCJpZCI6NzIzNjUsImlhdCI6MTcyNzY5Mzg0Nn0.OtW-C05cndywvHXc7Yfe1kygSZhX5dW0o5fxob-4cyk";

const assetId = 2417271;

const scene = viewer.scene;
let transformEditor;
let initialPosition;
let initialHeadingPitchRoll;
let initialScale;
let tileset;

try {      
  tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2417271);
  viewer.scene.primitives.add(tileset);

  const rootTransform = tileset.root.transform;
  const modelMatrix = tileset.modelMatrix;

  // Transfer root transform to the model matrix
  Cesium.Matrix4.clone(rootTransform, modelMatrix);
  Cesium.Matrix4.clone(Cesium.Matrix4.IDENTITY, rootTransform);

  viewer.zoomTo(tileset);

  transformEditor = new TransformEditor({
    container: viewer.container,
    scene: scene,
    transform: tileset.modelMatrix,
    boundingSphere: tileset.boundingSphere,
    pixelSize: 100,
    maximumSizeInMeters: Infinity,
  });

  transformEditor.viewModel.activate();

  initialPosition = Cesium.Cartesian3.clone(
    transformEditor.viewModel.position
  );
  initialHeadingPitchRoll = Cesium.HeadingPitchRoll.clone(
    transformEditor.viewModel.headingPitchRoll
  );
  initialScale = Cesium.Cartesian3.clone(
    transformEditor.viewModel.scale
  );
} catch (error) {
  console.log(`Error loading tileset: ${error}`);
}

}

return (


{‘3D Transform Tester’}

<div style={{ marginTop: 25 }}>
<Button onClick={onClickTre} type=‘primary’ style={{ width: ‘50%’ }}>
{‘3D Transform Editor - exe.’}



)
}

export default TrFormEditor;

4

It sounds like there are some version discrepancies here which are causing some problems. Are you able to share your package.json?

It is probably beneficial to streamline your cesium and cesium-analytics dependencies.

5

Thank you for your reply!!

Actually, I had tried several projects to check out the version issues but I still don’t have any clue to deal with. If you want to look into the package.json I would upload some of them.

I upladed just two of my tries. If you want to see more and feel curious about anything then just let me know.

And there is one thing that I’m curious about.
When I referred the cesium docs. I was not supposed to call Primitive.update in my code but as you see in the error message, it seemed like the Primitve.update was called in the AxisLinePrimitive.js. And I looked into the AxisLinePrimitive.js. It did call the primitive.update.
Whenever I tried the TransformEditor, I encountered the same error message saying Primitive.update and AxisLinePrimitive.js.

Thanks again!!
packagejsons.zip (2.6 KB)

6

Hi @norom4 ,
Thanks for sharing your package.json and apologies for the slight delay following up.

The way you are intermingling Cesium related imports seems problematic and likely to be causing the issues you are seeing.

The simplest option may be to upgrade versions (but let us know if that is problematic for you and we can still help). Version 1.117 introduced changes to the way Cesium-Analytics (aka Cesium ion SDK) is distributed.

If you look in CHANGES.md in the Cesium-Analytics zip distribution under 1.117 you will see a description of the reorganization (key point: Previously the project was a fork of CesiumJS and used as a "drop in" replacement for the whole library. Following 1.117 it is designed to be installed *alongside* CesiumJS.) as well as updated instructions for how to install Cesium-Analytics and CesiumJS using ESM. There are also additional docs in /packages/ion-sdk-measurements under the esm-modules heading.

I think moving to 1.117 or later and following the updated instructions would be the best path, but again let us know if there are complicating factors to upgrading and we will try to help you find another solution.

Thanks,
Luke