# How to Initialize CesiumJS Viewer with Specific Options in God's Eye View

> Initialize CesiumJS Viewer with specific options in God's Eye View. Disable UI, customize credits, enable MSAA, preserve buffers, and cap FPS for optimal performance.

- Repository: [Bilawal Sidhu/gods-eye-view](https://github.com/bilawalsidhu/gods-eye-view)
- Tags: how-to-guide
- Published: 2026-08-29

---

**To initialize a CesiumJS viewer with specific options in God's Eye View, instantiate `new Cesium.Viewer()` with UI widgets disabled, a custom credit container, MSAA anti-aliasing, and WebGL buffer preservation, then cap the frame rate at 60 FPS.**

God's Eye View configures the CesiumJS viewer in [`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js) to deliver a clean, map-focused experience by stripping unnecessary UI chrome while enabling high-quality rendering and screenshot capabilities. This initialization approach prioritizes performance and legal compliance through precise viewer options and custom DOM elements. The following breakdown explains how to replicate this setup in your own CesiumJS projects.

## Core Initialization Configuration

The viewer instantiation occurs in [`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js) beginning at line 92, where the constructor receives a comprehensive options object designed to minimize visual clutter and optimize rendering.

### Disabling Default UI Widgets

God's Eye View explicitly disables Cesium's default interface elements by setting the following properties to `false`:

- `timeline` – Removes the playback timeline scrubber
- `animation` – Hides the animation controls and clock
- `baseLayerPicker` – Disables the imagery layer selector
- `geocoder` – Removes the location search input
- `homeButton` – Hides the default "home" navigation button
- `sceneModePicker` – Removes the 2D/3D/Columbus view switcher
- `navigationHelpButton` – Disables the control instructions overlay
- `fullscreenButton` – Hides the fullscreen toggle
- `vrButton` – Removes VR mode activation
- `selectionIndicator` – Disables the entity selection cursor
- `infoBox` – Hides the default entity information panel
- `baseLayer` – Prevents loading the default Cesium imagery layer

This configuration eliminates GPU overhead from unnecessary UI rendering while creating a minimalist interface suitable for integrated map applications.

### Rendering and Attribution Settings

Beyond UI customization, the initialization includes critical technical parameters:

**Anti-Aliasing Configuration:** The `msaaSamples: 4` option enables 4× multisample anti-aliasing, producing smoother geometry edges without significant performance degradation on modern hardware.

**WebGL Buffer Preservation:** The `contextOptions.webgl.preserveDrawingBuffer: true` setting maintains canvas contents between frames, enabling screenshot functionality and video recording capabilities that would otherwise fail due to browser security policies.

**Custom Attribution Container:** The `creditContainer` property accepts a dynamically created DOM element (`#cesium-credits`) appended to the document body. This satisfies legal requirements for displaying Google Maps and Cesium attributions while allowing custom styling control.

```javascript
const viewer = new Cesium.Viewer('cesiumContainer', {
  timeline: false,
  animation: false,
  baseLayerPicker: false,
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  fullscreenButton: false,
  vrButton: false,
  selectionIndicator: false,
  infoBox: false,
  baseLayer: false,
  creditContainer: (() => {
    const el = document.createElement('div');
    el.id = 'cesium-credits';
    document.body.appendChild(el);
    return el;
  })(),
  msaaSamples: 4,
  contextOptions: {
    webgl: {
      preserveDrawingBuffer: true,
    },
  },
});

```

## Post-Initialization Scene Optimization

Immediately following the constructor call, God's Eye View applies additional runtime configuration to refine the rendering pipeline.

### Frame Rate Limiting

The code sets `viewer.targetFrameRate = 60` to cap the render loop at 60 frames per second, preventing excessive GPU utilization on high-refresh-rate displays and reducing power consumption on mobile devices.

### Globe and Atmosphere Configuration

Since the application utilizes Google Photorealistic 3D Tiles, the default Cesium globe is disabled via `viewer.scene.globe.show = false`. This prevents z-fighting and rendering conflicts between the ellipsoid geometry and the photorealistic tileset. The sky atmosphere parameters are also adjusted in [`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js) to create a softer, more integrated visual aesthetic.

## Complete Implementation Example

The following snippet demonstrates the full initialization pattern used in God's Eye View, including the Google Photorealistic 3D Tileset integration:

```javascript
import * as Cesium from 'cesium';

// Initialize with custom options
const viewer = new Cesium.Viewer('cesiumContainer', {
  timeline: false,
  animation: false,
  baseLayerPicker: false,
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  fullscreenButton: false,
  vrButton: false,
  selectionIndicator: false,
  infoBox: false,
  baseLayer: false,
  creditContainer: document.getElementById('cesium-credits') || (() => {
    const div = document.createElement('div');
    div.id = 'cesium-credits';
    document.body.appendChild(div);
    return div;
  })(),
  msaaSamples: 4,
  contextOptions: {
    webgl: { preserveDrawingBuffer: true },
  },
});

viewer.targetFrameRate = 60;

// Configure for Google Photorealistic 3D Tiles
Cesium.GoogleMaps.defaultApiKey = 'YOUR_GOOGLE_API_KEY';

(async () => {
  try {
    const tileset = await Cesium.createGooglePhotorealistic3DTileset({
      onlyUsingWithGoogleGeocoder: true,
    });
    viewer.scene.primitives.add(tileset);
    viewer.scene.globe.show = false; // Hide default globe
  } catch (e) {
    console.warn('Google tiles unavailable, falling back to Cesium globe', e);
    viewer.scene.globe.show = true;
  }
})();

```

## Summary

- **Location:** The CesiumJS viewer initialization resides in [`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js) at line 92 in the God's Eye View repository.
- **UI Suppression:** Twelve default widgets are disabled via boolean flags to create a clean interface and reduce GPU load.
- **Legal Compliance:** A custom `creditContainer` DOM element ensures proper attribution display for Google Maps and Cesium data.
- **Visual Quality:** `msaaSamples: 4` provides hardware anti-aliasing, while `preserveDrawingBuffer` enables screenshot functionality.
- **Performance:** Setting `targetFrameRate` to 60 FPS prevents unnecessary GPU utilization on high-refresh displays.

## Frequently Asked Questions

### Why does God's Eye View disable the default Cesium globe?

The default Cesium globe is hidden using `viewer.scene.globe.show = false` because the application loads Google Photorealistic 3D Tiles, which provide their own global terrain and imagery. Rendering both simultaneously would cause visual artifacts and redundant geometry processing.

### What is the purpose of the preserveDrawingBuffer WebGL option?

The `preserveDrawingBuffer: true` setting in `contextOptions.webgl` maintains the canvas framebuffer between animation frames, which is required for screenshot capture and video recording functionality. Without this flag, browser security policies clear the buffer before capture methods can access the pixel data.

### How does God's Eye View handle attribution requirements?

The initialization creates a custom DOM element with ID `cesium-credits` and passes it to the `creditContainer` option. This satisfies legal requirements for displaying Cesium and Google Maps attributions while allowing the application to control the styling and positioning of the credit overlay through [`style.css`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/style.css).

### Where can I find the viewer configuration in the source code?

The primary viewer configuration is located in [`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js) starting at line 92, with additional scene customization occurring in the subsequent lines. A minimal standalone example is also available in [`tools/cesium-render.html`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/tools/cesium-render.html) for headless rendering scenarios.