I’m really happy to feature a paper from Brian Coughlin: 3D for the Modern Web: Declarative 3D and glTF, go read it! Great to see how Brian used MontageJS and glTF to show how Declarative 3D and glTF are viable and compelling options for bringing 3D content more into mainstream use across the modern Web. Checkout the live demo and Congratulations Brian!
We want to make it easy for you to adopt the library and start using it productively with as little friction as possible. To that end, we are pleased to announce the launch of the new CollectionsJS website, an interactive documentation explorer for the collection library. The site’s features include:
- A tool that walks you through choosing the right collection for a job
- A search bar that will take you directly to any collection or method by name
- Interactive examples for collections and methods
- Comprehensive cross references
The site itself is on Github. It is our hope that this reference helps make Collections.js an indispensable part of your tool chain.
Apple unveiled new versions of its desktop and mobile operating systems this month at its annual Worldwide Developer Conference (WWDC). Among the technical details disclosed during the event, there were several revelations of particular significance for Web developers. Most notably, Apple announced full support for WebGL in its desktop and mobile browsers.
During a dedicated WWDC session about WebGL development, Apple engineer Dean Jackson showed two demos from Montage Studio and highlighted our MontageJS framework in a selection of open source libraries for WebGL development. We’re really proud that Apple chose to showcase our work and hold it up as an example of the kind of experiences that WebGL will enable on the Web. You can see the session yourself by watching the Creating 3D Interactive Content with WebGL video in the Safari browser on Apple’s WWDC session video page. Or click here to download a 355MB high-definition video of the session.
WebGL is gaining considerable traction, seeing widespread support from browser vendors. Google, Microsoft, Mozilla, and Opera have already delivered WebGL compatibility in their browsers. Now that Apple has joined the party, developers can build WebGL content with confidence that it can be consumed in all modern browsers.
The MontageJS 3D components
Earlier this year, we released a set of WebGL-based MontageJS components that make it easy for designers and developers to incorporate interactive 3D content into their Web applications. With MontageJS, you can use a unified component system to build rich experiences that cross the boundary between 3D content and the page DOM scene graph.
You can take a 3D scene created in conventional tools like Maya, 3D Studio Max, or Sketchup and load it into a MontageJS application. The framework lets you use CSS to modify and animate elements of the scene. Our 3D MontageJS components are available as open source on GitHub, but the easiest way to use them is in Montage Studio, our browser-based visual application authoring environment.
Some shiny real-world examples
We’ve built several applications with our 3D components to demonstrate real-world uses. Our Eco Homes demo, one of the Montage Studio applications featured by Apple during the WWDC WebGL session, shows a rich 3D rendering of the interior of a house. An option panel alongside the 3D rendering lets the user select various home customizations, including certain household appliances and different materials for a kitchen counter.
As the user selects their customizations, our data binding system ensures that the changes are reflected instantly in the 3D view. The demo uses animated camera transitions to move focus to the relevant items in the scene as the user flips through the various preference panels.
The Eco Homes app was largely built for use on touch-enabled devices. You can flick the preference panel up and down to switch between panes. If you resize your window while viewing the demo, you will notice that it takes advantage of responsive design techniques, scaling and adjusting the position of elements in order to ensure that the user gets a great experience on different form factors. We’re really excited about the potential that can be unlocked by using rich 3D graphics with the full, expressive power of the open Web.
In addition to the Eco Homes application, our Car Configurator demo was also shown during the WWDC session. The Car Configurator displays a 3D vehicle that the user can customize with a set of options displayed in a panel alongside the 3D view. The user can adjust the color the car’s body, frame, and interior. The user can click and drag the car to rotate it and can zoom in and out with the scroll wheel.
More great news for hybrid apps
Apple is clearly committed to enabling a richer Web and more powerful hybrid Web applications. At Montage Studio, we welcome the latest improvements and look forward to taking advantage of them as we continue to build great experiences with Web technology.
We’re going to demonstrate how to build applications with Montage Studio for the San Francisco HTML5 Live Code meetup group. Join us at Startup House in San Francisco on Wednesday, June 18 to participate in the event. The meetup starts at 6:30PM and the live coding demo starts at 7PM. Please visit the meetup.com page for more details.
During the hour-long live coding presentation, you will learn how to use Montage Studio to build rich, single-page applications that take advantage of the latest Web technologies. Discover how the MontageJS component system simplifies application architecture and increases composability, making it possible to assemble large applications from modular units of functionality. You will also learn how the framework’s powerful functional reactive data binding system makes it easy to manipulate and display data from remote sources.