“Please, do not trample me on the site”
Almost two years ago, when I hadn’t taught people how to make money on startups, to make quick photo models, Google wasn’t such a garbage yet, and web crowds didn’t win 2-0 from me, I created websites. And one of the clients asked me to do something, from which everything would go nuts for his luxury furniture store. At first I had a completely ordinary design, which they didn’t accept, but here’s the second idea that took all the head off. During these two years, I saw only one site that was made using this technology, although it lies on the surface , and it was a company of the Sony level (who exactly - forgot.)
Remember, when in an article about a fast fashion model yesterday, I said that soon we will work in the volumetric world ? Think i was joking? Well, you got a traveler - come in, take off your shoes, I will tell you the story of how the Network ceased to be flat two years ago ...
I really wanted the Web to break out of flat space and how could this be done better than with a luxury furniture store? I designed its architecture (not in the IT sense, but in the sense of the building) - yes, the architect of me is not great, but not the point ... And I invited them to go inside and walk around. No plug-ins, except Flash, using the technology of many years ago.
')
Now I invite you, the traveler, to the world of fairy tales and an incredible prototype. Click the picture , and then come back, if you do not guess it yourself, - read how it is done.
Did you find a flying price tag on TV?
Could you look at the store from the second point?
Okay, so this was a prototype site. The client was very impressed, as well as everyone whom I showed it in January '07. Unfortunately, the client refused in favor of a simpler design, because this one is too difficult to update and decided to make another site later on this design. But the technology went through a perpetual light bulb and got lost in the basements. Enough time has passed and I decided to give it to the Public Domain, use it.
So, the point is that you can use panoramas to simulate 3d space and it is VERY simple, as I will show below.
At once I will make a reservation that this was the easiest way for the moment, something could change during this time and an even simpler one appeared.
1. Either the 3d model of the building where we will go (I made it in SketchUp, then threw in models of trees and furniture from Evermotion - it’s almost the furniture that they sell),
Or we can use real panoramas of a real store or shopping center. Panoramas 360x180. Autodesk [RealViz] Stitcher can recommend.
2. Player for panoramas. I considered many options, incl. and all 3d frameworks, but loading a panorama into them is not easy. Then I bought a player from FlashPanoramas.com (40 euros, our Russians do not have any relation to them, except that I bought the player). Find a simple free alternative - write in the comments. By the way, the site is in English, if anything - contact the author flashpanoramas@gmail.com, like his name is Denis Chumakov, in any case it is sent in the invoice for payment.
IMPORTANT . This part implies that you can already model and work with 3d-max level programs or you have a modeler. If not, you will have to wait for my other article where I will talk about Google Sketchup and probably the Alternativa Platform .
So, I went through SketchUp → 3DSMax + VRay → speherical panoramic .jpg, but there are many options.
1. We render either through the standard Max's render of panoramas, Google suggests that it is Utilities panel> Utilities rollout> More button> Utilities dialog> Panorama Exporter , or, if in VRay , we set Sperical for a physical camera.
The output file should be ratio = 0.5, I did 3000 x 1500 and then the pixels are visible well. Although, if I were not lazy and played with Vray a little longer (well, I’m not a modeler, and not a designer, I’m a programmer), it would have turned out better. But we are discussing the idea here - I hope sincerely that you will do better.
What is important - make the ceiling and the floor MONOTONE ! Look at the first point and the second in the site. The difference between JPG 500kb, you know why? In the one on the floor "type-carpet", in the other it is monotonous. Remember that the output will be a giant file at least 3000 in width, which will have to be downloaded via the Web. I understand that to you, comrades designers, the quality picture is more important, but think of users not in Moscow, who have your megovaya .JPG loaded for a minute. They will not see all this beauty.
So, at the exit we have a 3000 by 1500 file (or proportional) panoramic view — it should look like the picture at the beginning of this section — straight lines should become arcs — a spherical projection.
UPDATE Forgot, for semi-newbies: in order to shove so many trees - you need to use VRay Proxy, if you suddenly did not know. Just make sure that the materials did not disappear, if you just make proxies from a group of objects, the materials disappear, so trees and concrete TVs :) to avoid this - you need to do something cleverly about a proxy - maybe a pro in the comments will tell - I will add.
As I said, I used Flash Panorama Player. Others can also be used, but Flash will have to be programmed here, while here is one view (the point where the user can get up - next I will call her POV = point-of-view) = ninety lines of XML, without Flash programming in general, and modeling the sphere and turning out its normals.
I urge you to support the author who wrote such a wonderful plugin [no relation to him] - 40 euros - not so much, especially if you take $ 50K from a client for such a website :)
I use the license. So I tell for this player.
1. Create an .html file for each POV.
Take a sample at seelf.com/b/index.html.txt - there you only need to change test.swf in two places - what is the required .swf in the manual in the distribution you buy.
2. For each filename .swf we create the exact same filename .xml - there all the magic happens.
Samples taken at seelf.com/b/test.xml.txt , seelf.com/b/test2.xml.txt . I will analyze the first file - there is more interesting.
So first, plug-in modules:
Further in the hotspots section, we define the global section - these are all sorts of events (onStart) and functions (onOver, loadPreview, goUp, pt, etc.) - there is a very simple language, you will understand everything yourself.
Since it is possible to impose even .swf words, there was an idea to even make an order basket — just to transfer a purchase to it — I didn’t think about it in detail, but it’s certainly possible.
The player itself can still embed YouTube videos, audio, for example, into a panorama, you can also upload them without reloading the page and many more goodies. Everything in the manual is.
Then we upload it all to the site, show it to the stranded client and finish it with an account.
By the way, there was another idea to add moving people (or rather, standing in place, projected gifs with micromovements - this is possible), but I’ll introduce you to break your head like.
Good luck, traveler :)
Yoi Haji
view from Habra
Remember, when in an article about a fast fashion model yesterday, I said that soon we will work in the volumetric world ? Think i was joking? Well, you got a traveler - come in, take off your shoes, I will tell you the story of how the Network ceased to be flat two years ago ...
I really wanted the Web to break out of flat space and how could this be done better than with a luxury furniture store? I designed its architecture (not in the IT sense, but in the sense of the building) - yes, the architect of me is not great, but not the point ... And I invited them to go inside and walk around. No plug-ins, except Flash, using the technology of many years ago.
')
Now I invite you, the traveler, to the world of fairy tales and an incredible prototype. Click the picture , and then come back, if you do not guess it yourself, - read how it is done.
Did you find a flying price tag on TV?
Could you look at the store from the second point?
Okay, so this was a prototype site. The client was very impressed, as well as everyone whom I showed it in January '07. Unfortunately, the client refused in favor of a simpler design, because this one is too difficult to update and decided to make another site later on this design. But the technology went through a perpetual light bulb and got lost in the basements. Enough time has passed and I decided to give it to the Public Domain, use it.
So, the point is that you can use panoramas to simulate 3d space and it is VERY simple, as I will show below.
At once I will make a reservation that this was the easiest way for the moment, something could change during this time and an even simpler one appeared.
What we need
1. Either the 3d model of the building where we will go (I made it in SketchUp, then threw in models of trees and furniture from Evermotion - it’s almost the furniture that they sell),
Or we can use real panoramas of a real store or shopping center. Panoramas 360x180. Autodesk [RealViz] Stitcher can recommend.
2. Player for panoramas. I considered many options, incl. and all 3d frameworks, but loading a panorama into them is not easy. Then I bought a player from FlashPanoramas.com (40 euros, our Russians do not have any relation to them, except that I bought the player). Find a simple free alternative - write in the comments. By the way, the site is in English, if anything - contact the author flashpanoramas@gmail.com, like his name is Denis Chumakov, in any case it is sent in the invoice for payment.
Part 1. Render and pitfalls.
IMPORTANT . This part implies that you can already model and work with 3d-max level programs or you have a modeler. If not, you will have to wait for my other article where I will talk about Google Sketchup and probably the Alternativa Platform .
So, I went through SketchUp → 3DSMax + VRay → speherical panoramic .jpg, but there are many options.
1. We render either through the standard Max's render of panoramas, Google suggests that it is Utilities panel> Utilities rollout> More button> Utilities dialog> Panorama Exporter , or, if in VRay , we set Sperical for a physical camera.
The output file should be ratio = 0.5, I did 3000 x 1500 and then the pixels are visible well. Although, if I were not lazy and played with Vray a little longer (well, I’m not a modeler, and not a designer, I’m a programmer), it would have turned out better. But we are discussing the idea here - I hope sincerely that you will do better.
What is important - make the ceiling and the floor MONOTONE ! Look at the first point and the second in the site. The difference between JPG 500kb, you know why? In the one on the floor "type-carpet", in the other it is monotonous. Remember that the output will be a giant file at least 3000 in width, which will have to be downloaded via the Web. I understand that to you, comrades designers, the quality picture is more important, but think of users not in Moscow, who have your megovaya .JPG loaded for a minute. They will not see all this beauty.
So, at the exit we have a 3000 by 1500 file (or proportional) panoramic view — it should look like the picture at the beginning of this section — straight lines should become arcs — a spherical projection.
UPDATE Forgot, for semi-newbies: in order to shove so many trees - you need to use VRay Proxy, if you suddenly did not know. Just make sure that the materials did not disappear, if you just make proxies from a group of objects, the materials disappear, so trees and concrete TVs :) to avoid this - you need to do something cleverly about a proxy - maybe a pro in the comments will tell - I will add.
Part 2. Panoramic player and examples for copy-paste.
As I said, I used Flash Panorama Player. Others can also be used, but Flash will have to be programmed here, while here is one view (the point where the user can get up - next I will call her POV = point-of-view) = ninety lines of XML, without Flash programming in general, and modeling the sphere and turning out its normals.
I urge you to support the author who wrote such a wonderful plugin [no relation to him] - 40 euros - not so much, especially if you take $ 50K from a client for such a website :)
I use the license. So I tell for this player.
1. Create an .html file for each POV.
Take a sample at seelf.com/b/index.html.txt - there you only need to change test.swf in two places - what is the required .swf in the manual in the distribution you buy.
2. For each filename .swf we create the exact same filename .xml - there all the magic happens.
Samples taken at seelf.com/b/test.xml.txt , seelf.com/b/test2.xml.txt . I will analyze the first file - there is more interesting.
So first, plug-in modules:
layer_2 = hotspots.swf- all that is pressed
layer_3 = limits.swf- restrictions on movement, if the panorama is less than 360x180 (I forgot why I connected it)
layer_5 = cylConverter.swf- for spherical or cylindrical panoramas (the box is also able, but the plugin is no longer needed)
editor.swf- a plugin for visual editing of panoramas, so as not to guess where to put a hotspot (this is hard to figure out), is in the purchased distribution. From the site, of course, deleted.
panoType = cylinder- spherical (or cylindrical panorama)
panoName = <b> test </ b>- what is the name of .jpg = test .jpg → seelf.com/b/test.jpg
Further in the hotspots section, we define the global section - these are all sorts of events (onStart) and functions (onOver, loadPreview, goUp, pt, etc.) - there is a very simple language, you will understand everything yourself.
<box id = "logo" url = "logo.png" al ....- the sample of the applied layer is my cap, telephones, all sorts.
<box id = "up" url = "black_u.png" ...- pattern of transition to a new point.
<box id = "up1" url = "radking.png" ...- a sample of how the price tag jumps on the TV behind you on the first POV.
Since it is possible to impose even .swf words, there was an idea to even make an order basket — just to transfer a purchase to it — I didn’t think about it in detail, but it’s certainly possible.
<cylconverter> </ cylconverter>- Activation of the plugin for the spherical panorama.
The player itself can still embed YouTube videos, audio, for example, into a panorama, you can also upload them without reloading the page and many more goodies. Everything in the manual is.
Then we upload it all to the site, show it to the stranded client and finish it with an account.
By the way, there was another idea to add moving people (or rather, standing in place, projected gifs with micromovements - this is possible), but I’ll introduce you to break your head like.
Good luck, traveler :)
Yoi Haji
view from Habra
Source: https://habr.com/ru/post/40103/
All Articles