← All courses

Training

Web-based 3D Programming

Web-based 3D Programming

Using CesiumJS and Unity For 3D Globe and Dynamic-Data Visualization

Duration: 5 days

This course is designed for aspiring and intermediate developers and data analysts with varying levels of web development and CesiumJS experience. It aims to provide a structured learning path from fundamental concepts to advanced applications.

Learning Outcome

By the end of this course, participants will be able to:

  1. Understand the basics of web-based 3D graphics and CesiumJS functionalities.
  2. Build and customize 3D globes for dynamic data visualization.
  3. Interact with and explore dynamic data on the globe using various techniques.
  4. Implement user interactions to create engaging visual experiences.
  5. Gain an introduction to integrating CesiumJS with Unity for enhanced visuals.
  6. Set up and navigate the CesiumJS environment to create web-based 3D visualizations.
  7. Load, process, and visualize dynamic geospatial data on a 3D globe.
  8. Implement interactive features and custom animations to enhance user engagement.
  9. Optimize performance for complex and real-time data visualizations.
  10. Understand the basics of Unity and explore the potential of integrating CesiumJS with Unity for advanced projects.

Prerequisites:

  • Good understanding of HTML, CSS, and JavaScript.
  • Familiarity with geospatial concepts and data formats (GeoJSON, KML) is beneficial.
  • Some experience with 3D graphics or web development frameworks would be helpful but not required.
  • Experience with programming using JavaScript and .NET 6 and above.

Course Outline:

  1. Introduction to Web-based 3D Visualization and CesiumJS
    1. Basics of Web-based 3D Graphics
      1. Introduction to WebGL, canvas interaction, and DOM manipulation.
    2. Introduction to CesiumJS
      1. Overview of capabilities, setting up the development environment, basic globe creation.
    3. Loading and Working with Geographic Data
      1. Understanding geospatial data formats and their integration.
    4. Basic Data Visualization on the Globe
      1. Techniques for implementing markers, labels, and simple data styling.
  2. Building Interactive Dynamic Data Visualizations
    1. Loading and Processing Dynamic Data
      1. Handling various data sources and formats for dynamic visualization.
    2. Visualizing Dynamic Data on the Globe
      1. Advanced visualization techniques including heatmaps, point clouds, and 3D models.
    3. Advanced Data Styling and Techniques
      1. Custom styles, color coding, and gradient effects based on data attributes.
    4. Time-series Data and Animation
      1. Techniques for visualizing temporal data with animations and transitions.
  3. User Interaction and Advanced Features
    1. Basic User Interactions
      1. Implementing navigation controls for an interactive experience.
    2. Filtering and Highlighting Data
      1. Interactive data filtering and highlighting based on user input.
    3. Tooltips and Information Panels
      1. Creating overlays for data exploration and storytelling.
    4. Custom Animations and Effects
      1. Enhancing visualizations with custom animations and effects.
  4. CesiumJS for Advanced Users (Hands-on Project)
    1. Advanced CesiumJS API
      1. Exploring advanced functionalities and custom solutions.
    2. Real-time Data Integration
      1. Strategies for integrating real-time data streams.
    3. Performance Optimization
      1. Techniques for improving performance and efficiency.
    4. Hands-on Project Development
      1. Applying advanced techniques in a comprehensive project.
  5. Introduction to CesiumJS with Unity (Brief Exploration)
    1. Introduction to Unity
      1. Overview of Unity's core concepts and scripting for new learners.
    2. Cesium for Unity Plugin
      1. Capabilities and applications of the Cesium for Unity plugin.
    3. Basic Integration Example
      1. A simple project integrating CesiumJS data with Unity.
    4. Future Potential and Challenges
      1. Exploring the potential and addressing challenges of integrating CesiumJS with Unity.

This course offers a blend of theoretical knowledge and practical application, ensuring participants not only understand the concepts but also apply them in real-world projects. The progression from basic to advanced topics allows learners to build a solid foundation while exploring the cutting-edge possibilities of web-based 3D visualization and dynamic data interaction.

Practical, connected learning

My wider training approach brings hands-on implementation and systems thinking together, connecting technology with real operational needs.