Five WebGL Presentations That Amaze
A browser on a computer, a browser on a phone or smartwatch, or maybe even someone in a teapot? Web technologies surround us from all sides and as the iron filling develops, they become more spectacular and perfect. Just a few years ago, WebGL was talked about as a fun toy with vague prospects. But much has changed and the previously popular flash is being replaced by more advanced HTML5 / WebGL technologies.
The time has passed when WebGL demonstrations were primitive, artisanal crafts or demonstration demos from software developers. Now many well-known brands use this technology for presentations and many of them look very convincing.
Everyone has heard of the Porsche. Someone just saw, someone lovingly rubs a cloth in his garage. Well, the rest of the famous German manufacturer offers to get acquainted with the machine on its website . And not just look at the pictures, but “probe” the controls, learn about some technological highlights.
The first thing that strikes you when you start a demo is quality. The model looks like a “live" car. With small, lovingly made details, scene reflections, chrome surfaces. And, most interestingly, no brakes in the browser!
Free scrolling of the model, scaling allow you to consider literally everything and even look into the interior. The developers did their best, perfectly optimizing the scene and not at the expense of beauty.
And those who are tired of twisting the model can “twist” the steering wheel. Actually, the proposed action demonstrates the capabilities of adaptive lighting and dynamic high beams, but not only the boy wants to “steer” a magnificent car. It looks just awesome!
However, calculating Germans did not limit themselves to the appearance of the car and allowed a peek into its insides. Of course, all pictures are marked by photographic quality, whether it be a car interior, suspension technology units or a sparkling engine. Everything spins, spins and offers a ton of information. Some details are so precise that doubt creeps in, and aren't these photos “taut” on the frame of primitives?
As an apotheosis or just a desire to “squeeze” a client, at the end of the presentation a kind of designer is offered where you can choose a car modification, change wheels or color. Of course, all this is just a successful marketing move, but what a high-quality visualization here! By the way, many well-known brands (ay, AvtoVAZ!) Use a similar approach to demonstrations of new cars.
If the first presentation was made using the three.js engine, then the next program is the merit of our programmers. No, the application itself was created in the bowels of NASA, only the domestic development Blend4Web was used as the basis. So, what’s interesting here ...
In 2012, a device with the modest name Curiosity was delivered to the surface of Mars (translated from English “Curiosity”). Quietly and peacefully crawling on the surface of the planet, the rover analyzed the soil, sent numerous photographs of the Martian landscape and excited the scientific brethren with numerous discoveries. Everything would be fine, but NASA decided to popularize the operation of the unit and created a unique web application, allowing not only to admire the design features of the device, but also to look in real time on Mars with the “eyes” of Curiosity.
The main feature in this application is the real trajectories of the apparatus on the surface of Mars. Moreover, all this is accompanied by a video shot by several cameras of the rover. The trajectory runs through several key points where some actions were performed by the operators of the device. From the side it’s fun to watch how the unit waves the manipulator, adjusting to the task. At the same time, the voice-overs comment on what is happening and, at the same time, photos attached to the terrain are shown.
And for those who are tired of looking at the device, the developers have prepared a small online help on its design. Clicking on the details that attracted the mouse, you can find out a lot of interesting things. In addition, particularly corrosive users can manually twist the rover manipulators, of course, within the available.
Apocalypse driven by SkyNet is coming! And, if you want to meet future enemies - it's time to enter the network .
The specified site is nothing but an excellent temptation to watch the movie “Terminator: Genesis”. In addition to standard posters, trailers, teasers - the filmmakers came up with such a great interactive show.
The highlight of the idea is to link three-dimensional graphics to real frames from the film. A SkyNet visitor can learn interesting details about the main characters, both robots and live actors. For example, SpIder Tank. What kind of monster is it? And so, he twisted the model (by the way, qualitatively made), read the information about the key nodes, and even watched a video related to the capabilities of the monster.
Honestly, this presentation of information about the film looks innovative and very enticing. WebGL / HTML5 raise the bar to a completely different level of perception.
And this is a completely different level. If in the first three cases WebGL technology was used more for entertainment purposes, here developers offer their best practices in a learning context.
This project focuses on organizations related to the medical industry. Qualitatively executed models of various organs, accurate visualization of ongoing processes, special viewing modes - all this allows us to simplify the learning process or demonstrate the features of the course of the disease.
And here it’s not even the quality of the models, but the accuracy of the implementation. For example, when demonstrating the operation of the knee joint, you will not be able to bend it more than expected.
In addition, there is a very interesting “X-ray” mode, which is activated by a special button in the player. In this case, the model becomes translucent with the possibility of considering some internal features. Moreover, if necessary, you can highlight part of the object against the background of the “x-ray image”. So, in the screenshot below, you can clearly consider the ligament rupture.
According to the developers, a total of about 5,000 objects have been created, and several full-fledged lessons on human anatomy have been done. It seems that such an approach to training will be much more effective than with conventional paper atlases.
Webgl is perfect for creating interactive scenes, presentations, games, and most importantly, unites users of various platforms in a browser window. The creators of the famous series of the game Halo, took advantage of the unique capabilities of modern browser technologies and created a special “guest” room .
The idea is simple to disgrace, but thanks to WebGL it was possible to combine an unusual visual image (you need to look “live”, since the screenshot does not transmit the effect) with a certain message board.
In fact, the particles forming the helmet shape from the famous game are the wishes of the users. Hundreds and hundreds of messages left on the site page, gradually form an integral model. Initially, the helmet was a simple, primitive grid. You can verify this if you move the slider on the timeline at the bottom of the screen. I wonder what the helmet will look like after reaching a certain threshold. In the meantime, you can also join those who are waiting for the game and scribble a few lines on this unusual “message board”.
As you can see, all the selected presentations show the need and ease of use of WebGL technology. Closer and closer are personal computers with mobile systems. There will come a time when browser applications will become truly cross-platform.
The time has passed when WebGL demonstrations were primitive, artisanal crafts or demonstration demos from software developers. Now many well-known brands use this technology for presentations and many of them look very convincing.
Porshe 911
Everyone has heard of the Porsche. Someone just saw, someone lovingly rubs a cloth in his garage. Well, the rest of the famous German manufacturer offers to get acquainted with the machine on its website . And not just look at the pictures, but “probe” the controls, learn about some technological highlights.
The first thing that strikes you when you start a demo is quality. The model looks like a “live" car. With small, lovingly made details, scene reflections, chrome surfaces. And, most interestingly, no brakes in the browser!
Free scrolling of the model, scaling allow you to consider literally everything and even look into the interior. The developers did their best, perfectly optimizing the scene and not at the expense of beauty.
And those who are tired of twisting the model can “twist” the steering wheel. Actually, the proposed action demonstrates the capabilities of adaptive lighting and dynamic high beams, but not only the boy wants to “steer” a magnificent car. It looks just awesome!
However, calculating Germans did not limit themselves to the appearance of the car and allowed a peek into its insides. Of course, all pictures are marked by photographic quality, whether it be a car interior, suspension technology units or a sparkling engine. Everything spins, spins and offers a ton of information. Some details are so precise that doubt creeps in, and aren't these photos “taut” on the frame of primitives?
As an apotheosis or just a desire to “squeeze” a client, at the end of the presentation a kind of designer is offered where you can choose a car modification, change wheels or color. Of course, all this is just a successful marketing move, but what a high-quality visualization here! By the way, many well-known brands (ay, AvtoVAZ!) Use a similar approach to demonstrations of new cars.
Walk on mars
If the first presentation was made using the three.js engine, then the next program is the merit of our programmers. No, the application itself was created in the bowels of NASA, only the domestic development Blend4Web was used as the basis. So, what’s interesting here ...
In 2012, a device with the modest name Curiosity was delivered to the surface of Mars (translated from English “Curiosity”). Quietly and peacefully crawling on the surface of the planet, the rover analyzed the soil, sent numerous photographs of the Martian landscape and excited the scientific brethren with numerous discoveries. Everything would be fine, but NASA decided to popularize the operation of the unit and created a unique web application, allowing not only to admire the design features of the device, but also to look in real time on Mars with the “eyes” of Curiosity.
The main feature in this application is the real trajectories of the apparatus on the surface of Mars. Moreover, all this is accompanied by a video shot by several cameras of the rover. The trajectory runs through several key points where some actions were performed by the operators of the device. From the side it’s fun to watch how the unit waves the manipulator, adjusting to the task. At the same time, the voice-overs comment on what is happening and, at the same time, photos attached to the terrain are shown.
And for those who are tired of looking at the device, the developers have prepared a small online help on its design. Clicking on the details that attracted the mouse, you can find out a lot of interesting things. In addition, particularly corrosive users can manually twist the rover manipulators, of course, within the available.
Enter in SkyNet
Apocalypse driven by SkyNet is coming! And, if you want to meet future enemies - it's time to enter the network .
The specified site is nothing but an excellent temptation to watch the movie “Terminator: Genesis”. In addition to standard posters, trailers, teasers - the filmmakers came up with such a great interactive show.
The highlight of the idea is to link three-dimensional graphics to real frames from the film. A SkyNet visitor can learn interesting details about the main characters, both robots and live actors. For example, SpIder Tank. What kind of monster is it? And so, he twisted the model (by the way, qualitatively made), read the information about the key nodes, and even watched a video related to the capabilities of the monster.
Honestly, this presentation of information about the film looks innovative and very enticing. WebGL / HTML5 raise the bar to a completely different level of perception.
Biodigital human
And this is a completely different level. If in the first three cases WebGL technology was used more for entertainment purposes, here developers offer their best practices in a learning context.
This project focuses on organizations related to the medical industry. Qualitatively executed models of various organs, accurate visualization of ongoing processes, special viewing modes - all this allows us to simplify the learning process or demonstrate the features of the course of the disease.
And here it’s not even the quality of the models, but the accuracy of the implementation. For example, when demonstrating the operation of the knee joint, you will not be able to bend it more than expected.
In addition, there is a very interesting “X-ray” mode, which is activated by a special button in the player. In this case, the model becomes translucent with the possibility of considering some internal features. Moreover, if necessary, you can highlight part of the object against the background of the “x-ray image”. So, in the screenshot below, you can clearly consider the ligament rupture.
According to the developers, a total of about 5,000 objects have been created, and several full-fledged lessons on human anatomy have been done. It seems that such an approach to training will be much more effective than with conventional paper atlases.
Hi Halo!
Webgl is perfect for creating interactive scenes, presentations, games, and most importantly, unites users of various platforms in a browser window. The creators of the famous series of the game Halo, took advantage of the unique capabilities of modern browser technologies and created a special “guest” room .
The idea is simple to disgrace, but thanks to WebGL it was possible to combine an unusual visual image (you need to look “live”, since the screenshot does not transmit the effect) with a certain message board.
In fact, the particles forming the helmet shape from the famous game are the wishes of the users. Hundreds and hundreds of messages left on the site page, gradually form an integral model. Initially, the helmet was a simple, primitive grid. You can verify this if you move the slider on the timeline at the bottom of the screen. I wonder what the helmet will look like after reaching a certain threshold. In the meantime, you can also join those who are waiting for the game and scribble a few lines on this unusual “message board”.
P.S
As you can see, all the selected presentations show the need and ease of use of WebGL technology. Closer and closer are personal computers with mobile systems. There will come a time when browser applications will become truly cross-platform.