4 posts tagged with "viewer"

We're thrilled to announce the launch of the open source glTF Viewer 4.0, an update that supercharges your 3D model viewing experience with powerful features and support for the latest web technologies!

"Cyber Samurai" by KhoaMinh is licensed under CC BY 4.0.

TRY IT NOW

This new release is chock-full with enhancements aimed at providing more realistic, insightful, and versatile viewing options for your glTF files. Let's dive into the headline features of glTF Viewer 4.0.

New WebGPU Renderer​

Topping the list of today's updates is support for WebGPU! WebGPU heralds a new era in graphics and compute capabilities, offering enhanced performance and efficiency. Users can now select WebGPU as their default renderer, and don't worry if your platform doesn't support it yet - the viewer gracefully falls back to WebGL 2, and subsequently WebGL 1, depending on API availability. Note that WebGPU support is considered beta for the moment and you'll need to proactively enable it and refresh the viewer to check it out:

Also make sure you're running the viewer in a browser that supports WebGPU. At time of writing, this means Google Chrome!

Enhanced WebXR AR Mode​

Take your 3D models into the real world with our revamped WebXR Augmented Reality (AR) mode! Available currently on Android devices, this enhanced AR mode lets you view any model in your actual environment, complete with intuitive new controls that allow you to accurately position and rotate objects in the real world. Let's hope Apple decides to roll out WebXR support on iOS soon! 🙏

Frame Selected Node​

Navigating large scenes can be a pain - Viewer 4.0 addresses this by allowing you to select a node in the scene via the hierarchy panel on the left. You can then press 'F' on the keyboard to frame that node and recenter the orbit camera on that node's position.

Better Immersion with Projective Sky Dome​

"130" by mononofu is licensed under CC BY 4.0.

Experience realistic photographic skies with our new projective sky dome! While previous versions allowed for skyboxex with an infinite projection, 4.0 introduces a dome-shaped skybox projection that incorporates a flat ground plane. This warps the skybox texture to have a more believable appearance, delivering a more authentic and immersive perspective, melding your 3D models with strikingly realistic backdrops.

Debug and Inspect with Render Mode​

Ensuring that developers can seamlessly troubleshoot and inspect glTF files, the new render mode allows you to select and display individual inputs/outputs of the render pipeline, including albedo, emissive, normals, gloss, AO, and more. This new level of insight is invaluable for debugging, making it even easier to work with your glTF data.

Enhanced Realism with VSM Shadows​

The addition of Variance Shadow Mapping (VSM) casts your 3D scenes in a new light, literally! Shadows aren't merely aesthetic; they provide context and depth, especially in AR mode, assisting to ground your object naturally within its real-world environment. Explore scenes with a newfound depth and realism that draws viewers into the experience, both in standard and AR viewing modes. Find the new shadow controls in the Light Settings panel:

Join Our Open Source Community​

We're not just excited to share these innovations with you; we're eager to hear your thoughts and welcome your contributions! If there's a feature you're longing for, please don't hesitate to submit your requests.

Better yet, become an active contributor to our codebase! Our open-source community thrives on collaboration and fresh perspectives. So, dive right in, explore the code, and let's shape the future of 3D model viewing together! Your expertise and insights could help shape the next release.

GO TO GITHUB NOW

Conclusion​

With glTF Viewer 4.0, we're redefining the standards of 3D model viewing. From WebGPU-powered rendering to WebXR-powered AR, this update is designed to inspire, assist, and elevate your work with glTF data.

So stay creative, friends, and we'll see you on the forums! 👋

Today we’re excited to announce the next major release of our glTF viewer. This version makes the viewer an ideal tool for reviewing how glTF models render on mobile as well as in augmented reality!

TRY IT NOW

View Models in AR on Mobile​

Once a model has been loaded into the viewer on mobile, you’ll be given the option to drop into an augmented reality experience. The mode you get currently differs based on the operating system you’re using.

Quick Look mode on iOS (left) and WebXR mode on Android (right)

On iOS, the model will be loaded with Apple’s AR Quick Look mode (above left), while on Android the model will be placed into your environment using WebXR (above right).

Mobile-Optimized Design​

It’s now possible to verify the content and rendering of your assets no matter which device you’re working on. The viewer has been redesigned using mobile-first principles, so you can explore glTF content just as well on mobile as you can on desktop. The UI scales up or down depending on the device screen size and takes an uncluttered approach to ensure you can focus on the glTF content itself even on very small screens.

Quickly Load Models on Mobile Devices​

When loading PlayCanvas viewer v3.0 on desktop, you’ll be presented with the option to load a glTF model from a URL.

When this is used, the application will generate a QR code you can scan to share the current viewer scene between your devices or others:

New PlayCanvas Theme​

The latest release of PCUI (v2.7.0) enables the use of additional themes in applications built using it. This allowed us to apply a new color theme to the model-viewer:

The new muted gray tones of this theme should allow users to more readily focus on their model content. Over the coming months, you’ll begin to see this new theme applied to more applications in the PlayCanvas ecosystem! Be sure to pass any feedback onto us using the issue tracker of the PCUI library.

Open Source​

PlayCanvas is fully committed to an open source strategy and our glTF viewer is therefore made available to you on GitHub. It is a TypeScript application built on PlayCanvas PCUI front-end framework and, of course, the PlayCanvas Engine runtime.

These open source projects have been years in the making and would not have been possible without the amazing OSS community. So why not explore our various GitHub repositories and consider making some contributions of your own. We also appreciate feature requests and bug reports, so don’t be shy!

FORK THE VIEWER ON GITHUB

We hope you find the new and improved glTF viewer useful for your projects. Stay tuned for further updates to it in the coming months!

Today, we are excited to announce the 2.0 release of our glTF viewer.

TRY IT NOW

glTF (or Graphics Language Transmission Format) has become ubiquitous since its introduction in 2015. With support for advanced shading techniques, it is particularly important for graphics intensive applications like product configurators/visualizers.

With so many companies now relying on glTF to transmit graphics data over the web, it is critical that high quality tools are available to work with the format. This led us to develop v2.0 of our popular glTF viewer.

Let’s take a closer look at what’s new.

Improved glTF Specification Support​

The glTF format is managed by the Khronos Group and defines a base specification along with a variety of extensions. The first version of the viewer supports 100% of the base spec plus the following extensions:

• KHR_draco_mesh_compression
• KHR_lights_punctual
• KHR_materials_clearcoat
• KHR_materials_unlit
• KHR_mesh_quantization
• KHR_texture_basisu
• KHR_texture_transform

The new and improved viewer released today adds support for:

• KHR_materials_emissive_strength
• KHR_materials_ior
• KHR_materials_sheen
• KHR_materials_specular
• KHR_materials_transmission
• KHR_materials_variants
• KHR_materials_volume

These extensions provide developers with the ability to achieve exciting new graphical effects.

Let’s take a look at three of them.

Advanced Refraction​

The volume, transmission, and ior glTF extensions can simulate how light is refracted through transparent materials. This leverages PlayCanvas’ grab pass functionality to ‘grab’ and sample the back-buffer.

Realistic Rendering of Fabrics​

glTF’s sheen extension enables developers to faithfully reproduce materials with the appearance of certain fabrics. This is incredibly important for production visualization (home furnishings, apparel, vehicle interiors, and so on).

Material Variants​

Most product configurators allow the user to modify the appearance of a product. For example, a specific style of chair might be upholstered in various fabrics in various colors. Or a pair of shoes might be available in a number of different designs/patterns/colors.

The PlayCanvas viewer now detects any material variants in the loaded scene and permits their selection in the interface.

Rendering Enhancements​

The new viewer introduces a couple of interesting features if you care about rendering fidelity.

First up is a ‘High Quality Rendering’ mode (which is a toggle in the Camera control panel).

Enabling this feature activates supersampling which is a type of antialiasing that aims to eliminate jagged edges along polygons. It progressively re-renders the scene many times when the camera stops, slightly offsetting and then compositing the rendered image over previous frames.

You can see both in action below, deliberately reduced in resolution to show the effect:

Also new is sharper reflections for smooth reflective surfaces. The viewer will now use the full resolution skybox cubemap in the engine’s image-based lighting pipeline which looks crisp and far more realistic.

Interface Redesign​

Initially, all information and controls for the viewer appeared in the leftmost panel. Viewer 2.0 has been completely redesigned to more intelligently group specific areas of functionality. The leftmost panel remains but now just shows scene info and a tree view showing the loaded scene hierarchy.

Buttons to control viewer settings can now be found at the bottom of the 3D view. These buttons open options for camera, lighting, and debug rendering (plus a fullscreen toggle).

If you load a scene that contains animation, animation controls will automatically appear:

The controls allow you to scrub through an animation, select playback speed, and even choose which animation clip to play should the file contain more than one.

Lastly, there is also now a button bottom right to download a rendered PNG of the 3D view.

Open Source​

PlayCanvas is fully committed to an open-source strategy and our glTF viewer is therefore made available to you on GitHub. It is a TypeScript application built on PlayCanvas PCUI front-end framework and, of course, the PlayCanvas Engine runtime.

These open source projects have been years in the making and would not have been possible without the amazing OSS community. So why not explore our various GitHub repositories and consider making some contributions of your own. We also appreciate feature requests and bug reports, so don’t be shy!

FORK THE VIEWER ON GITHUB

We hope you find the new and improved glTF viewer useful for your projects. Stay tuned for further updates to it in the coming months!

Today, the PlayCanvas team is excited to announce the release of a brand new browser-based glTF viewer application.

Try it now: https://playcanvas.com/viewer

Or click these links to preload some classic glTF models: Boom Box, Damaged Helmet and Fox.

The viewer is open sourced under an MIT license and the code can be found on GitHub.

Fork it now: https://github.com/playcanvas/playcanvas-viewer

The viewer allows you to drag-and-drop any glTF 2.0 file and inspect it in detail. We challenge you to find one that doesn't work! The viewer has the following features:

• Visualize wireframe, skeleton, bounds and normals
• Adjust scene lighting and skybox
• Drag and drop equirectagular images (including HDR files) or six cubemap face images.
• See how a model performs on both the CPU and GPU via the viewer's real-time metrics panel
• Play animations (including skinned and morphed meshes) - unlimited morph targets are supported
• Visualize animation curves in real-time as graphs in the 3D view
• Load models via drag-and-drop or by passing a URL query parameter
• Support for Draco mesh compression

The release of the PlayCanvas Viewer coincides with the engine reaching 100% glTF 2.0 spec compliance! PlayCanvas passes every single core test in cx20's glTF Test suite. We are now turning our attention to supporting the full range of glTF 2.0 extensions. The engine already supports:

• KHR_materials_pbrSpecularGlossiness
• KHR_materials_unlit

The engine itself can parse and render glTF 2.0 files incredibly quickly. You can expect glTF parse time to be approximately one tenth of that loading the equivalent JSON model.

Give it a try today - you'll be impressed!