Maximum texture size error

CesiumJS
1

Hey there!

I’m trying the following basic cesium with angular code to use in an Offline environment, and I’ve got some errors.

Here is my code:

import { Directive, ElementRef } from '@angular/core';
import { ImageryLayer, TileMapServiceImageryProvider, Viewer, buildModuleUrl } from 'cesium';
@Directive({ selector: '[appCesium]' })
export class CesiumDirective {
  constructor(private el: ElementRef) { }
  ngOnInit() {
    const viewer = new Viewer(this.el.nativeElement, {
      baseLayer: ImageryLayer.fromProviderAsync(TileMapServiceImageryProvider.fromUrl(buildModuleUrl("Assets/Textures/NaturalEarthII")), {}),
      baseLayerPicker: false,
      geocoder: false,
    });
  }
}

package.json:

{
  "name": "ang13",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 3000",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.3.0",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "bootstrap": "^5.3.2",
    "cesium": "1.113.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.11",
    "@angular/cli": "~13.3.11",
    "@angular/compiler-cli": "~13.3.0",
    "@types/jasmine": "~3.10.0",
    "@types/leaflet": "^1.9.8",
    "@types/node": "^12.11.1",
    "@types/react": "18.2.12",
    "@types/react-dom": "18.2.5",
    "assert": "^2.1.0",
    "browserify-zlib": "^0.2.0",
    "https-browserify": "^1.0.0",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "nosleep.js": "^0.12.0",
    "stream": "^0.0.2",
    "stream-http": "^3.2.0",
    "typescript": "~4.6.2",
    "url": "^0.11.3",
    "util": "^0.12.5"
  }
}

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Ion } from 'cesium';
const Cesium = (window as any)['Cesium'];
var poll = setInterval(() => {
  if (Cesium) {
    clearInterval(poll);
    (window as any)['CESIUM_BASE_URL'] = '/assets/cesium/';
    Ion.defaultAccessToken = AccessToken
    const { AppModule } = require('./app/app.module');
    platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {}).catch(err => console.error(err));
  }
}, 1000)

Here is the errors:

cesium-angular-error
cesium-angular-error1541×555 70.1 KB

I would appreciate any idea to solve this problem.

P. S. For some reason, I prefer to not to use the Angular-Cesium NPM

1 Like
2

Hey @naftali123 :wave:

I cannot understand if the error is Cesium or Angular based but the use of setInterval inside the main.ts file seems suspicious :thinking: Why do you need that?

3

Hey @Aristeidis_Bampakos ,

Thank you for your responding.

The setInterval just ensures the rising of the Cesium object, before making any changes. it is not really necessary… (I’ve actually copied this piece of code from some code example :roll_eyes:).

anyway, it seems that those errors are not connected to this setInterval, the errors float even without these lines.

4

Thanks for the clarification :pray: The rest of the code looks good. Have you tried your example in an online environment? I think that Cesium cannot fully load when not online.

5

The code works well in an online environment.

The thing is that I’ve used Cesium (with pure js and with React also) in an offline environment, and it’s worked well.

Therefore I expected that it would work (offline) also with angular.

6

I’ve tried to run

with this code example, and it works well.

Maybe the errors are connected to some configuration or the selected angular version?

7

Can you please try to apply these changes in your codebase? The changes are part of a commit that we did in the Angular-Cesium example for upgrading the sample to Angular 13. It may help you.

8

Thank you so much for your help!

I’ve just upgraded to cesium 1.114.0 and the errors are gone.

By the way, I think the topic title “Cesium + Angular in an offline environment” that I’ve given, doesn’t fit the real problem, because the actual error was:

An error occurred while rendering.  Rendering has stopped.
DeveloperError: Width must be less than or equal to the maximum texture size (0).  Check maximumTextureSize.
Error
    at new DeveloperError (http://localhost/vendor.js:493116:11)
    at new Texture (http://localhost/vendor.js:591549:11)
    at ImageryLayer._createTextureWebGL (http://localhost/vendor.js:656640:10)
    at ImageryLayer._createTexture (http://localhost/vendor.js:656688:24)
    at Imagery.processStateMachine (http://localhost/vendor.js:655585:23)
    at TileImagery.processStateMachine (http://localhost/vendor.js:742737:18)
    at GlobeSurfaceTile.processImagery (http://localhost/vendor.js:283269:45)
    at GlobeSurfaceTile.processStateMachine (http://localhost/vendor.js:283206:44)
    at GlobeSurfaceTileProvider.loadTile (http://localhost/vendor.js:284357:64)
    at processSinglePriorityLoadQueue (http://localhost/vendor.js:367967:18)

Therefore, it seems a more fitted title would be “Maximum texture size error”.

2 Likes