WebGL taxis! Auto industry in 3D
Funny 3D thing, you want it turned so, but you want it that way. A definite plus compared with photos and videos. And if we add to this interactivity, then the benefits are even greater. The only question is, do business representatives think the same?
This time the conversation will be about 3D configurators. And the most conservative and massive part of the industry - the automotive industry.
“WebGL is so apparently driving!” Is a series of articles that tell about interesting, relevant, and curious web resources that are somehow related to the technology of the same name. With the first material you can find here .
')
There are a lot of car brands. A lot ... The product is not essential, and obviously purchased for a long period of use. It would seem that automotive sites should be not just interesting, but at the peak of the opportunities offered by the modern Internet. Entertainment is everything. No text, tables, images can compete with the “live” picture. The buyer always wants to “play” with a future purchase: assess the color, choose the style of the cabin, change the package bundle. And only then, a potential client can come to the car dealership and choose a car.
In practice, it turned out that many automotive resources are lagging behind time. Sometimes there were sites that required to install Flash Player to view the presentation, which is not relevant today. It is curious that in the list of such resources, there were sites of some famous brands. Pseudo-3D technologies are also very often used, where visitors are offered to get bored for a long time while very massive panoramic photos are being downloaded. Of course, there is no question of any entertainment, and even more interactivity.
Nevertheless, I managed to find some interesting web resources offering visually high-quality presentations or functional configurators made using modern WebGL technology. It is clear that such resources compare favorably with their moss counterparts ...
This is not the site of a particular manufacturer and there is no connection with the automotive industry. This is one of the earliest WebGL applications, offering simple configuration functions. Here you can change the color of the car or wheels, view the car from all sides, while listening to music. And that's all ...
The application created on Three.js back in 2012, however, attracts attention. First of all, the visual side. Juicy materials, a reflection of the surrounding world on the surface of the car, high-quality models. Of course, there is no question of any photorealism. Just a good job for those times. However, already in this scene there are the beginnings of interactivity, which looks much more profitable against the background of the usual 2D.
This is already a practical example, when a business uses 3D capabilities for visual demonstration of a “product by face” to a buyer. This is a web resource of a French company that sells various pickups.
The site owners approached the solution of the problem very responsibly and creatively. Almost all presented machines have their own configurators. And the maximum use is made of the WebGL application connection with the rest of the site. For example, if you install protection for the engine in the configurator, the photo of the part, the cost of the upgrade and the description are displayed next to it. Thus, the buyer can fully assemble a pickup for his needs in a web application, evaluate the appearance of the car and calculate the purchase price.
The 3D configurator does not look like an alien object in this online store, but organically fits into the ecosystem. Although there are some flaws in the visual range. There is no pompous photorealism here, and the navigation in the app has let us down. But again, I repeat, the configurator perfectly copes with its main task - to enable the client to visually assemble the car of the desired modification and estimate the costs.
The application itself was made using Blend4Web , which is very well sharpened specifically for various 3D configurators. Knowing this framework, I can assume that the visual logic editor was used to create the software part, which greatly simplifies the development process.
The original promotional presentation of the car Nissan, published on the official website of the manufacturer. This is not a configurator in the literal sense of the word, although an interactive application. The developer tried to achieve the "wow" effect, and not to provide the ability to change something. In addition to the high-quality model, there is also a creative component.
It all starts with an unusual boot, when the machine is literally like a puzzle. Then the phantasmagoria with flowers is suggested, the meaning of which is that the coloring of the car is changed by the movement of the mouse. Very fast, very bright. You can also open the door and look at the salon. But this, as a side option. The presentation looks like a toy: funny and bright. No wonder its motto is the slogan "Play it your way".
Unfortunately, I was not able to determine which engine or framework was used to create the program.
Constellium is a global manufacturer of aluminum semi-finished products headquartered in the Netherlands. So, at least, says the Wikipedia site. There is a great presentation on his official web site.
It is no secret that a large amount of aluminum is used in the car. And not only in the radiator, as it may seem unknowing. Manufacturers from Constellium decided to visually demonstrate the presence of aluminum in the car, by parsing it.
Yes Yes. The presentation allows you to disassemble the car on the screws, show all the aluminum parts and read the context help on them. In principle, this is all that the program is capable of. But it looks visually, instructive and informative.
Unfortunately, the application is not without problems. Strangely configured camera rotation. For example, I accidentally managed to turn the car upside down, although it stands on the surface. But the funny thing is, if you call the browser console (F12 key). In this case, the model will flatten out.
Technically, the presentation was created using Unity .
Arab Emirates, the hot sun and rich, very rich sheikhs. So give luxurious, expensive cars and top of the range. Actually, the next presentation is exactly what this is intended for. Car dealer General Motors in the UAE loves its rich customers and periodically indulges them with interesting 3D presentations.
This presentation is actually a classic 3D configurator with the ability to select the color of the car, change the wheel rims, study the interior of the cabin and others. However, here the developers of the application focused precisely on the visual component.
Everything in the model of the car is adjusted to the smallest detail. Very high quality materials allow you to convey the subtleties of polishing cars. For example, “mosaic black” literally shimmers in the light. I wonder how this effect was achieved by the developers?
The movements of the cameras worked out for one hundred percent. Smooth animation, blank angles - all this emphasizes the car from the best sides. By the way, this is the only presentation found where post-effects are used. So for cameras, at certain moments DOF ​​(depth of field) is activated.
This 3D configurator was made using Blend4Web.
WebGL allows you to create truly interesting, colorful and realistic presentations. The shown five works, of course, are not the only representatives of the glorious tribe of 3D configurators. Unfortunately, they are few, despite the prospects that open with their use. But I believe that everything is still ahead ...
PS The titles of subtitles are clickable and lead to pages with applications.
This time the conversation will be about 3D configurators. And the most conservative and massive part of the industry - the automotive industry.
Foreword
“WebGL is so apparently driving!” Is a series of articles that tell about interesting, relevant, and curious web resources that are somehow related to the technology of the same name. With the first material you can find here .
')
There are a lot of car brands. A lot ... The product is not essential, and obviously purchased for a long period of use. It would seem that automotive sites should be not just interesting, but at the peak of the opportunities offered by the modern Internet. Entertainment is everything. No text, tables, images can compete with the “live” picture. The buyer always wants to “play” with a future purchase: assess the color, choose the style of the cabin, change the package bundle. And only then, a potential client can come to the car dealership and choose a car.
In practice, it turned out that many automotive resources are lagging behind time. Sometimes there were sites that required to install Flash Player to view the presentation, which is not relevant today. It is curious that in the list of such resources, there were sites of some famous brands. Pseudo-3D technologies are also very often used, where visitors are offered to get bored for a long time while very massive panoramic photos are being downloaded. Of course, there is no question of any entertainment, and even more interactivity.
Nevertheless, I managed to find some interesting web resources offering visually high-quality presentations or functional configurators made using modern WebGL technology. It is clear that such resources compare favorably with their moss counterparts ...
Carvisualizer.plus360degrees
This is not the site of a particular manufacturer and there is no connection with the automotive industry. This is one of the earliest WebGL applications, offering simple configuration functions. Here you can change the color of the car or wheels, view the car from all sides, while listening to music. And that's all ...
The application created on Three.js back in 2012, however, attracts attention. First of all, the visual side. Juicy materials, a reflection of the surrounding world on the surface of the car, high-quality models. Of course, there is no question of any photorealism. Just a good job for those times. However, already in this scene there are the beginnings of interactivity, which looks much more profitable against the background of the usual 2D.
pickup-center.fr
This is already a practical example, when a business uses 3D capabilities for visual demonstration of a “product by face” to a buyer. This is a web resource of a French company that sells various pickups.
The site owners approached the solution of the problem very responsibly and creatively. Almost all presented machines have their own configurators. And the maximum use is made of the WebGL application connection with the rest of the site. For example, if you install protection for the engine in the configurator, the photo of the part, the cost of the upgrade and the description are displayed next to it. Thus, the buyer can fully assemble a pickup for his needs in a web application, evaluate the appearance of the car and calculate the purchase price.
The 3D configurator does not look like an alien object in this online store, but organically fits into the ecosystem. Although there are some flaws in the visual range. There is no pompous photorealism here, and the navigation in the app has let us down. But again, I repeat, the configurator perfectly copes with its main task - to enable the client to visually assemble the car of the desired modification and estimate the costs.
The application itself was made using Blend4Web , which is very well sharpened specifically for various 3D configurators. Knowing this framework, I can assume that the visual logic editor was used to create the software part, which greatly simplifies the development process.
Nissan.co.uk
The original promotional presentation of the car Nissan, published on the official website of the manufacturer. This is not a configurator in the literal sense of the word, although an interactive application. The developer tried to achieve the "wow" effect, and not to provide the ability to change something. In addition to the high-quality model, there is also a creative component.
It all starts with an unusual boot, when the machine is literally like a puzzle. Then the phantasmagoria with flowers is suggested, the meaning of which is that the coloring of the car is changed by the movement of the mouse. Very fast, very bright. You can also open the door and look at the salon. But this, as a side option. The presentation looks like a toy: funny and bright. No wonder its motto is the slogan "Play it your way".
Unfortunately, I was not able to determine which engine or framework was used to create the program.
Automotive.products.constellium.com
Constellium is a global manufacturer of aluminum semi-finished products headquartered in the Netherlands. So, at least, says the Wikipedia site. There is a great presentation on his official web site.
It is no secret that a large amount of aluminum is used in the car. And not only in the radiator, as it may seem unknowing. Manufacturers from Constellium decided to visually demonstrate the presence of aluminum in the car, by parsing it.
Yes Yes. The presentation allows you to disassemble the car on the screws, show all the aluminum parts and read the context help on them. In principle, this is all that the program is capable of. But it looks visually, instructive and informative.
Unfortunately, the application is not without problems. Strangely configured camera rotation. For example, I accidentally managed to turn the car upside down, although it stands on the surface. But the funny thing is, if you call the browser console (F12 key). In this case, the model will flatten out.
Technically, the presentation was created using Unity .
Chevrolet.alghandi.com
Arab Emirates, the hot sun and rich, very rich sheikhs. So give luxurious, expensive cars and top of the range. Actually, the next presentation is exactly what this is intended for. Car dealer General Motors in the UAE loves its rich customers and periodically indulges them with interesting 3D presentations.
This presentation is actually a classic 3D configurator with the ability to select the color of the car, change the wheel rims, study the interior of the cabin and others. However, here the developers of the application focused precisely on the visual component.
Everything in the model of the car is adjusted to the smallest detail. Very high quality materials allow you to convey the subtleties of polishing cars. For example, “mosaic black” literally shimmers in the light. I wonder how this effect was achieved by the developers?
The movements of the cameras worked out for one hundred percent. Smooth animation, blank angles - all this emphasizes the car from the best sides. By the way, this is the only presentation found where post-effects are used. So for cameras, at certain moments DOF ​​(depth of field) is activated.
This 3D configurator was made using Blend4Web.
Afterword
WebGL allows you to create truly interesting, colorful and realistic presentations. The shown five works, of course, are not the only representatives of the glorious tribe of 3D configurators. Unfortunately, they are few, despite the prospects that open with their use. But I believe that everything is still ahead ...
PS The titles of subtitles are clickable and lead to pages with applications.
Source: https://habr.com/ru/post/355154/
All Articles