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
- API Documentation: Comprehensive API reference
- Examples: Practical code examples for common scenarios
- GitHub Repository : Access the source code (Adobe internal link)
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.