Skip to Content
HomeViewer

Adobe Substance 3D Web Viewer

The Substance 3D Web Viewer is a Web Component-based 3D viewer that allows developers to compose scenes using web components. It is built on top of the Babylon.js viewer (v2) , inheriting its attributes, properties, and events while providing a declarative approach to scene definition.

Key Features

  • Web Component Architecture: Scenes are structured entirely using web components, ensuring modularity and encapsulation.
  • Babylon.js Compatibility: Fully supports Babylon.js viewer attributes, preserving existing configurations, behaviors, and interactions.
  • Declarative Scene Composition: Enables building 3D environments using a structured HTML-like syntax, improving maintainability and readability.
  • Event & Property Retention: Maintains Babylon.js event handling and property bindings, ensuring seamless integration with existing workflows.
  • Customizable & Extensible: Supports additional web component-based extensions to enhance functionality while leveraging Babylon.js  capabilities.

This component provides a robust foundation for integrating 3D content into modern web applications using a fully declarative approach while leveraging the power and flexibility of Babylon.js .

Quick Start

Get started with the Substance 3D Web Viewer in just a few steps:

<!-- 1. Include the viewer script --> <script type="module" src="https://cdn.substance3d.com/v2/files/public/a3d-viewer-latest.js"> </script> <!-- 2. Add a basic 3D scene --> <a3d-viewer> <a3d-model src="path/to/your/model.glb"></a3d-model> </a3d-viewer>

For more detailed setup instructions, visit the Getting Started page.

Common Use Cases

The Substance 3D Web Viewer is ideal for a variety of applications:

  • Product Visualization: Create interactive 3D product displays for e-commerce
  • Portfolio Showcases: Display 3D models and environments for creative portfolios
  • Educational Content: Build interactive 3D learning experiences
  • Architectural Visualization: Present architectural designs in an interactive format
  • Integration with Substance 3D Ecosystem: Seamlessly connect with other Adobe Substance 3D tools

Browser Compatibility

The Substance 3D Web Viewer supports all modern browsers with WebGL 2.0 capabilities:

  • Chrome (latest versions)
  • Firefox (latest versions)
  • Safari (latest versions)
  • Edge (latest versions)

Performance Considerations

For optimal performance when working with the Substance 3D Web Viewer:

  • Optimize 3D models for web delivery (reduced polygon count, efficient textures)
  • Consider using compressed texture formats (KTX2, etc.) for larger scenes
  • Implement level-of-detail (LOD) for complex scenes
  • Test performance across different devices to ensure consistent experience

Learning Resources

We’re continuously improving the Substance 3D Web Viewer based on user feedback. For assistance or to provide suggestions, please see our Give Feedback page.

Last updated on